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

MediaPipe 互動式圖片分割器工作會取用圖片中的某個位置，估算該位置物件的邊界，並以圖片資料的形式傳回物件的分割結果。本操作說明將說明如何針對 Node 和網頁應用程式使用互動式圖片區塊分割器。如要進一步瞭解這項工作的功能、模型和設定選項，請參閱總覽。

程式碼範例

互動式圖片區塊判斷器的範例程式碼可提供 JavaScript 中此工作的完整實作內容，供您參考。這個程式碼可協助您測試這項工作，並開始建構自己的互動式圖片分割應用程式。您只需使用網路瀏覽器，即可查看、執行及編輯互動式圖片分割器的範例程式碼。您也可以在 GitHub 上查看這個範例的程式碼。

設定

本節將說明設定開發環境和程式碼專案的關鍵步驟，以便使用互動式圖片分割器。如要進一步瞭解如何設定開發環境以使用 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.js"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe 互動式圖片區隔器工作需要訓練的模型與此工作相容。如要進一步瞭解互動式圖片區隔器可用的訓練模型，請參閱工作總覽的「模型」一節。

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

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

建立工作

請使用其中一個互動式圖片分割器 createFrom...() 函式，準備執行推論的工作。使用 createFromModelPath() 函式搭配訓練模型檔案的相對或絕對路徑。如果模型已載入至記憶體，您可以使用 createFromModelBuffer() 方法。

以下程式碼範例示範如何使用 createFromOptions() 函式設定工作。createFromOptions 函式可讓您使用設定選項自訂互動式圖片分割器。如要進一步瞭解設定選項，請參閱「設定選項」。

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

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();

設定選項

此工作包含下列網頁應用程式設定選項：

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

準備資料

互動式圖片區隔器可使用主機瀏覽器支援的任何格式，區隔圖片中的物件。此工作也會處理資料輸入預先處理作業，包括調整大小、旋轉和值正規化。

對互動圖片區塊處理器 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);

如要進一步瞭解如何執行互動式圖片區隔器工作，請參閱程式碼範例。

處理及顯示結果

在執行推論時，Interactive Image Segmenter 工作會將區隔圖片資料傳回至回呼函式。輸出內容是圖片資料，可能包含類別遮罩、信心遮罩或兩者皆有，這取決於您在設定工作時設定的內容。

以下各節將進一步說明此工作產生的輸出資料：

類別遮罩

下圖顯示分類值遮罩任務輸出的視覺化效果，其中標示出感興趣的點區域。每個像素都是 uint8 值，用於指出該像素是否位於感興趣區域的物件。第二張圖片中的黑白圓圈，代表所選取的興趣所在區域。

一隻狗站在一堆落葉中上一個圖片中狗的輪廓形狀

原始圖片和類別遮罩輸出結果。Pascal VOC 2012 資料集的原始圖片。

可信度遮罩

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

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