웹용 텍스트 삽입 가이드

MediaPipe 텍스트 임베딩 태스크를 사용하면 텍스트 데이터의 숫자 표현을 만들어 시맨틱 의미를 캡처할 수 있습니다. 이 안내에서는 웹 및 JavaScript 앱에 텍스트 삽입을 사용하는 방법을 보여줍니다.

이 태스크의 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예시

텍스트 임베딩의 예시 코드는 참조용으로 자바스크립트로 이 작업을 완전히 구현합니다. 이 코드를 사용하면 이 작업을 테스트하고 자체 텍스트 삽입 앱을 빌드할 수 있습니다. 웹브라우저만 사용하여 텍스트 삽입 예제 코드를 보고 실행하고 수정할 수 있습니다.

설정

이 섹션에서는 특히 Text Embedder를 사용하도록 개발 환경과 코드 프로젝트를 설정하는 주요 단계를 설명합니다. 플랫폼 버전 요구사항을 포함하여 MediaPipe 작업을 사용하기 위한 개발 환경 설정에 관한 일반적인 정보는 웹 설정 가이드를 참고하세요.

JavaScript 패키지

텍스트 삽입 코드는 @mediapipe/tasks-text 패키지를 통해 제공됩니다. 플랫폼 설정 가이드에 제공된 링크에서 이러한 라이브러리를 찾아 다운로드할 수 있습니다.

다음 명령어를 사용하여 로컬 스테이징을 위해 다음 코드로 필수 패키지를 설치할 수 있습니다.

npm install @mediapipe/tasks-text

서버에 배포하려면 다음과 같이 jsDelivr과 같은 콘텐츠 전송 네트워크 (CDN) 서비스를 사용하여 HTML 페이지에 코드를 직접 추가하면 됩니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/index.js"
    crossorigin="anonymous"></script>
</head>

모델

MediaPipe 텍스트 임베딩 작업에는 이 작업과 호환되는 학습된 모델이 필요합니다. 텍스트 임베딩에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 작업 개요 모델 섹션을 참조하세요.

모델을 선택 및 다운로드한 후 프로젝트 디렉터리에 저장합니다.

<dev-project-root>/app/shared/models

할 일 만들기

Text Embedder createFrom...() 함수 중 하나를 사용하여 추론을 실행할 수 있는 작업을 준비합니다. 학습된 모델 파일의 상대 또는 절대 경로와 함께 createFromModelPath() 함수를 사용할 수 있습니다. 아래 코드 예에서는 createFromOptions() 함수를 사용하는 방법을 보여줍니다. 사용 가능한 구성 옵션에 대한 자세한 내용은 구성 옵션을 참고하세요.

다음 코드는 이 작업을 빌드하고 구성하는 방법을 보여줍니다.

async function createEmbedder() {
  const textFiles = await FilesetResolver.forTextTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  textEmbedder = await TextEmbedder.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/text_embedder/universal_sentence_encoder.tflite`
      },
      quantize: true
    }
  );
}
createEmbedder();

구성 옵션

이 태스크에는 웹 및 자바스크립트 애플리케이션을 위한 다음과 같은 구성 옵션이 있습니다.

옵션 이름	설명	값 범위	기본값
`l2Normalize`	반환된 특성 벡터를 L2 norm으로 정규화할지 여부입니다. 모델에 아직 네이티브 L2_NORMALIZATION TFLite 오퍼레이션이 포함되지 않은 경우에만 이 옵션을 사용하세요. 대부분의 경우 이미 이러한 경우가 많으며 L2 정규화는 이 옵션 없이도 TFLite 추론을 통해 달성됩니다.	`Boolean`	`False`
`quantize`	반환된 임베딩을 스칼라 양자화를 통해 바이트로 양자화해야 하는지 여부입니다. 임베딩은 암시적으로 단위 표준으로 간주되므로 모든 차원은 [-1.0, 1.0]의 값을 가집니다. 그렇지 않으면 l2Normalize 옵션을 사용하세요.	`Boolean`	`False`

데이터 준비

텍스트 삽입기는 텍스트 (string) 데이터와 함께 작동합니다. 이 작업은 토큰화와 텐서 전처리를 포함한 데이터 입력 전처리를 처리합니다. 모든 사전 처리는 embed 함수 내에서 처리됩니다. 사전에 입력 텍스트를 추가로 사전 처리할 필요는 없습니다.

const inputText = "The input text to be embedded.";

작업 실행

텍스트 임베딩은 embed 함수를 사용하여 추론을 트리거합니다. 텍스트 임베딩의 경우, 이는 입력 텍스트의 임베딩 벡터가 반환되는 것을 의미합니다.

다음 코드는 작업 모델을 사용하여 처리를 실행하는 방법을 보여줍니다.

// Wait to run the function until inner text is set
const embeddingResult = textEmbedder.embed(
  inputText
);

결과 처리 및 표시

텍스트 임베딩은 입력 텍스트의 임베딩 목록 (부동 소수점 또는 스칼라 양자화)이 포함된 TextEmbedderResult를 출력합니다.

다음은 이 작업의 출력 데이터 예를 보여줍니다.

TextEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.2345f, 0.1234f, ..., 0.6789f}
    head_index: 0

TextEmbedder.cosineSimilarity 함수를 사용하여 두 임베딩의 시맨틱 유사성을 비교할 수 있습니다. 다음 코드의 예를 참고하세요.

// Compute cosine similarity.
const similarity = TextEmbedder.cosineSimilarity(
  embeddingResult.embeddings[0],
  otherEmbeddingResult.embeddings[0]);

텍스트 삽입기 예시 코드는 작업에서 반환된 임베더 결과를 표시하는 방법을 보여줍니다. 자세한 내용은 코드 예를 참고하세요.