MediaPipe 圖片嵌入工具工作可將圖片資料轉換為數字表示法，進而完成與機器學習相關的圖片處理工作，例如比較兩張圖片的相似度。以下操作說明將說明如何使用節點和網頁應用程式適用的圖片嵌入工具。
如要進一步瞭解這項工作的功能、模型和設定選項，請參閱總覽。
程式碼範例
圖片嵌入工具的範例程式碼提供此工作在 JavaScript 中的完整實作，供您參考。這段程式碼可協助您測試這項工作，並開始建構自己的圖片嵌入應用程式。您只能透過網路瀏覽器查看、執行及編輯 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 圖片嵌入程式工作需要與這項工作相容的已訓練模型。如要進一步瞭解圖片嵌入工具的可用已訓練模型，請參閱工作總覽「模型」一節。
選取並下載模型，然後將其儲存在專案目錄中：
<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 圖片嵌入程式工作會使用 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 |
設定工作的執行模式。系統提供兩種模式： IMAGE：單一圖片輸入的模式。 影片：這種模式為影片中解碼的影格或即時輸入資料 (例如攝影機) 的直播。 |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
是否使用 L2 正規化傳回的特徵向量。只有在模型不含原生 L2_NORMALIZATION TFLite Op 的情況下，才能使用這個選項。在大多數情況下，已經是此情況，L2 正規化是透過 TFLite 推論達成，不需要使用這個選項。 | Boolean |
False |
quantize |
是否應透過純量量化，將傳回的嵌入量化為位元組。以隱含方式假設嵌入為單位標準，因此任何維度保證在 [-1.0, 1.0] 中都有一個值。如果並非如此，請使用 l2 正規化選項。 | Boolean |
False |
準備資料
圖片嵌入程式可以嵌入主機瀏覽器所支援的任何格式的圖片。這項工作也會處理資料輸入預先處理，包括調整大小、旋轉和值正規化。
對 Image Embedder 的 embed() 和 embedForVideo() 方法發出的呼叫會同步執行，並封鎖使用者介面執行緒。如要從影片影格擷取特徵向量，每個嵌入都會封鎖主執行緒。如要防止這種情況發生，您可以實作網路 worker，在其他執行緒上執行 embed() 和 embedForVideo() 方法。
執行工作
圖片嵌入工具會使用 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 程式碼範例示範如何顯示工作傳回的嵌入程式結果，詳情請參閱程式碼範例。