Google AI Edge Portal 隆重推出：大規模基準測試 Edge AI。申請在非公開預先發布版期間要求存取權。

網頁專用的互動式圖片區隔指南

MediaPipe Interactive Image Segmenter 工作會取得圖片中的位置，估算該位置的物件邊界，並以圖片資料的形式傳回物件的區隔結果。這些操作說明會介紹如何為 Node 和網頁應用程式使用互動式圖片區隔工具。如要進一步瞭解這項工作的能力、模型和設定選項，請參閱「總覽」。

程式碼範例

互動式圖片分割器範例程式碼提供這項工作的完整 JavaScript 實作方式，供您參考。這段程式碼可協助您測試這項工作，並開始建構自己的互動式影像分割應用程式。您只需使用網路瀏覽器，即可查看、執行及編輯互動式影像分割器範例。

設定

本節說明設定開發環境和程式碼專案的主要步驟，以便使用互動式圖片分割器。如要瞭解如何設定開發環境以使用 MediaPipe 工作，包括平台版本需求，請參閱網頁設定指南。

JavaScript 套件

您可以透過 MediaPipe @mediapipe/tasks-vision NPM 套件取得互動式圖像分割器程式碼。您可以透過平台設定指南提供的連結，尋找及下載這些程式庫。

您可以使用下列指令，為本機暫存環境安裝必要套件：

npm install --save @mediapipe/tasks-vision

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe Interactive Image Segmenter 工作需要與這項工作相容的訓練模型。如要進一步瞭解 Interactive Image Segmenter 適用的預先訓練模型，請參閱工作總覽的「模型」一節。

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

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

建立工作

使用其中一個 Interactive Image Segmenter createFrom...() 函式，準備執行推論作業。使用 createFromModelPath() 函式，搭配訓練好的模型檔案的相對或絕對路徑。如果模型已載入記憶體，可以使用 createFromModelBuffer() 方法。

下方程式碼範例說明如何使用 createFromOptions() 函式設定工作。createFromOptions 函式可讓您使用設定選項，自訂 Interactive Image Segmenter。如要進一步瞭解設定選項，請參閱「設定選項」。

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

設定選項

這項工作提供下列 Web 應用程式設定選項：

選項名稱	說明	值範圍	預設值
`outputCategoryMask`	如果設為 `True`，輸出內容會包含區隔遮罩 (uint8 圖片)，其中每個像素值都會指出像素是否屬於感興趣區域的物件。	{`True, False`}	`False`
`outputConfidenceMasks`	如果設為 `True`，輸出內容會包含區隔遮罩，以浮點值圖片的形式呈現，其中每個浮點值代表像素屬於感興趣區域中物件的信賴度。	{`True, False`}	`True`
`displayNamesLocale`	如果工作模型的中繼資料提供顯示名稱，則設定要使用的標籤語言。英文的預設值為 `en`。您可以使用 TensorFlow Lite Metadata Writer API，為自訂模型的中繼資料新增本地化標籤。	地區代碼	en

準備資料

互動式圖片分割器可分割圖片中的物件，圖片格式不限，只要主機瀏覽器支援即可。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉和值正規化。

對 Interactive Image Segmenter segment() 和 segmentForVideo() 方法的呼叫會同步執行，並封鎖使用者介面執行緒。如果從裝置的攝影機分割視訊影格中的物件，每個分割工作都會封鎖主要執行緒。如要避免這種情況，請實作網頁工作人員，在另一個執行緒上執行 segment() 和 segmentForVideo()。

執行工作

互動式圖片分割器會使用 segment() 方法觸發推論。當您為工作執行推論時，互動式圖片區隔器會將偵測到的區隔做為圖片資料，傳回至您設定的回呼函式。

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

如要瞭解如何更完整地實作執行互動式圖像分割器工作，請參閱範例。

處理及顯示結果

執行推論後，互動式圖片區隔器工作會將區隔圖片資料傳回回呼函式。輸出內容為圖片資料，可能包含類別遮罩、信賴度遮罩或兩者，視您設定工作時的選擇而定。

以下各節將進一步說明這項工作的輸出資料：

類別遮罩

下圖顯示類別值遮罩的任務輸出內容，並標示出感興趣的點區域。每個像素都是 uint8 值，表示像素是否屬於感興趣區域的物件。第二張圖片上的黑白圓圈表示所選感興趣的區域。

站在一堆樹葉中的狗前一張圖片中狗的輪廓

原始圖片和類別遮罩輸出內容。來源圖片來自 Pascal VOC 2012 資料集。

信賴度遮罩

信心遮罩的輸出內容包含每個圖片輸入通道的 [0, 1] 之間的浮點值。值越高表示圖片像素屬於感興趣區域中物件的可信度越高。

互動式圖片區隔器範例程式碼會示範如何顯示工作傳回的分類結果，詳情請參閱範例。