웹용 텍스트 삽입 가이드

MediaPipe 텍스트 임베딩 작업을 사용하면 텍스트 데이터의 숫자 표현을 만들어 의미론적 의미를 포착합니다 이 도움말에서는 웹 및 JavaScript 앱용 텍스트 삽입

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

코드 예

텍스트 삽입의 예제 코드는 이 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 텍스트 임베딩 앱을 빌드해 보겠습니다. 데이터를 보고, 실행하고, 로 이동하여 텍스트 삽입 예시 코드 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명하고 Text Embedder를 사용하도록 빌드되었습니다. 일반적인 정보 다음과 같은 MediaPipe 작업을 사용하기 위한 개발 환경 설정 자세한 내용은 웹 설정 가이드

JavaScript 패키지

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

<ph type="x-smartling-placeholder">

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

npm install @mediapipe/tasks-text

서버에 배포하려면 콘텐츠 전송을 사용하면 됩니다. 네트워크(CDN) 서비스(예: jsDelivr)를 코드를 직접 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();

구성 옵션

이 작업에는 웹 및 JavaScript에 대한 다음과 같은 구성 옵션이 있습니다. 애플리케이션:

옵션 이름 설명 값 범위 기본값
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
);

결과 처리 및 표시

Text Embedder는 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]);

텍스트 임베딩 예제 코드에서는 임베딩을 표시하는 방법을 보여줍니다. 자세히 알아보려면 코드 예시 참조하세요.