網頁圖片嵌入指南

MediaPipe Image Embedder 工作可讓您將圖片資料轉換成數字表示法，完成與機器學習相關的圖片處理工作，例如比較兩張圖片的相似度。下列指示說明如何使用圖片嵌入器 節點和網頁應用程式

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

程式碼範例

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

設定

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

JavaScript 套件

可透過 MediaPipe @mediapipe/tasks-vision 取得圖片嵌入程式程式碼 NPM 套件。你可以 透過平台提供的連結找到並下載這些程式庫 設定指南。

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

npm install @mediapipe/tasks-vision

如果想要透過內容傳遞網路 (CDN) 匯入工作程式碼 請在 HTML 檔案的 標記中加入下列程式碼：

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe Image Embedder 工作需要與這項指令相容的已訓練模型 工作。如要進一步瞭解圖片嵌入器可用的已訓練模型，請參閱： 工作總覽的「模型」一節。

選取並下載模型，然後將模型儲存在專案目錄中：

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

建立工作

指定模型路徑

您可以使用 createFromModelPath() 建立採用預設選項的工作 方法：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

指定模型緩衝區

如果模型已載入記憶體，您可以使用 createFromModelBuffer() 方法：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

指定自訂選項

MediaPipe Image Embedder 工作會使用 createFromOptions 函式進行設定 執行工作createFromOptions 函式可接受 設定選項如要進一步瞭解 設定選項，請參閱設定選項。

以下程式碼示範如何使用自訂選項建構及設定工作 選項：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

設定選項

這項工作具有下列網頁應用程式設定選項：

選項名稱 說明 值範圍 預設值
running_mode 設定任務的執行模式。這裡共有兩個 模式：

圖片：單一圖片輸入模式。

VIDEO：此模式適用於 影片或即時串流等輸入資料 (例如攝影機) 時		 {IMAGE, VIDEO} IMAGE
l2Normalize 是否使用 L2 正規化將傳回的特徵向量正規化。 只有在模型未包含原生參數的情況下，才能使用這個選項 L2_NORMALIZATION TFLite 運算。在大多數情況下，這是預設情況 因此 L2 正規化會透過 TFLite 推論完成，完全不需 這個選項。 Boolean False
quantize 是否應透過以下方式，將傳回的嵌入量化為位元組： 純量量化內嵌以隱含形式被假設為單位非 因此，所有維度一定會有 [-1.0, 1.0] 的值。使用 如果情況並非如此，則使用 l2Normalize 選項。 Boolean False

準備資料

Image Embedder 主機瀏覽器。這項工作也會處理資料輸入預先處理作業，包括 調整大小、旋轉以及值正規化

對 Image Embedder embed() 和 embedForVideo() 方法的呼叫會執行 以及封鎖使用者介面執行緒如要擷取 每個嵌入項目都會封鎖主執行緒。 如要避免這種情況發生，您可以實作網路工作站來執行 embed() 和 embedForVideo() 方法。

執行工作

Image Embedder 使用 embed() (搭配執行模式 image) 和 要觸發的 embedForVideo() (執行模式 video) 方法 推論出Image Embedder API 會傳回 輸入圖片

下列程式碼示範如何使用工作模型執行處理程序：

圖片

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

影片

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

處理及顯示結果

執行推論時，Image Embedder 工作會傳回 ImageEmbedderResult 物件，包含輸入的嵌入向量 圖片或外框

以下範例顯示這項工作的輸出資料範例：

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

此結果是嵌入下列圖片而得：

您可以使用 ImageEmbedder.cosineSimilarity 函式。請參閱下列程式碼，瞭解 範例。

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

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