網頁版文字嵌入指南

MediaPipe 文字嵌入工作可讓您建立文字資料的數值表示法，擷取語意含義這些指示說明如何使用適用於網頁和 JavaScript 應用程式的文字嵌入程式。

進一步瞭解功能、模型和設定選項請參閱總覽。

程式碼範例

Text Embedder 的範例程式碼提供完整的實作方便您參考。這個程式碼可協助您測試這項工作即可開始建構自己的文字嵌入應用程式您可以查看、執行然後編輯文字嵌入程式程式碼範例只要使用網路瀏覽器即可。

設定

本節說明設定開發環境的重要步驟，以及專門使用 Text Embedder 的程式碼專案。如需設定開發環境以使用 MediaPipe 工作，包括：平台版本需求，請參閱網頁版設定指南。

JavaScript 套件

您可以透過 @mediapipe/tasks-text敬上套件。你可以透過平台設定指南。

您可以使用下列程式碼安裝必要套件進行本機測試使用以下指令：

npm install @mediapipe/tasks-text

如要部署至伺服器，可以使用內容傳遞工具 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

建立工作

使用其中一個文字嵌入器 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 正規化將傳回的特徵向量正規化。只有在模型未包含原生參數的情況下，才能使用這個選項 L2_NORMALIZATION TFLite 運算。在大多數情況下，這是預設情況因此 L2 正規化會透過 TFLite 推論完成，完全不需這個選項。	`Boolean`	`False`
`quantize`	是否應透過以下方式，將傳回的嵌入量化為位元組：純量量化內嵌以隱含形式被假設為單位非因此，所有維度一定會有 [-1.0, 1.0] 的值。使用如果情況並非如此，則使用 l2Normalize 選項。	`Boolean`	`False`

準備資料

文字嵌入程式處理文字 (string) 資料。該工作會處理資料輸入預先處理，包括代碼化和 Tensor 預先處理所有語言預先處理會在 embed 函式中處理。不需要以便事先對輸入文字進行額外預先處理

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

執行工作

Text Embedder 會使用 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]);

文字嵌入程式範例程式碼示範如何顯示嵌入器查看工作傳回的結果程式碼範例。