網頁的圖片區隔指南

MediaPipe 圖像分割器工作可根據預先定義的類別將圖像劃分成多個區域，以便套用背景模糊等視覺效果。這些操作說明會介紹如何將 Image Segmenter 用於 Node 和網頁應用程式。如要進一步瞭解這項工作的能力、模型和設定選項，請參閱「總覽」。

程式碼範例

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

設定

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

JavaScript 套件

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

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

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 圖像分割器工作需要與這項工作相容的訓練模型。如要進一步瞭解 Image Segmenter 適用的預先訓練模型，請參閱工作總覽的「模型」一節。

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

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

建立工作

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

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

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

如要瞭解如何完整實作建立 Image Segmenter 工作，請參閱程式碼範例。

設定選項

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

選項名稱 說明 值範圍 預設值
outputCategoryMask 如果設為 True，輸出內容會包含區隔遮罩 (uint8 圖片)，其中每個像素值都代表勝出的類別值。 {True, False} False
outputConfidenceMasks 如果設為 True，輸出內容會包含區隔遮罩，以浮點值圖片的形式呈現，其中每個浮點值代表類別的信賴分數對應。 {True, False} True
displayNamesLocale 如果工作模型的中繼資料提供顯示名稱，則設定要使用的標籤語言。英文的預設值為 en。您可以使用 TensorFlow Lite Metadata Writer API，為自訂模型的中繼資料新增本地化標籤 地區代碼 en
resultListener 設定結果事件監聽器，在圖片區隔器處於 LIVE_STREAM 模式時，以非同步方式接收區隔結果。只有在執行模式設為 LIVE_STREAM 時才能使用 不適用 不適用

準備資料

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

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

執行工作

Image Segmenter 會使用圖片模式的 segment() 方法，以及 video 模式的 segmentForVideo() 方法，觸發推論。Image Segmenter 會將偵測到的區隔做為圖片資料，傳回至您在執行工作推論時設定的回呼函式。

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

圖片

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

影片

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

如要完整瞭解如何執行圖像分割器工作，請參閱範例。

處理及顯示結果

執行推論時，Image Segmenter 工作會將區隔圖片資料傳回回呼函式。輸出內容取決於您在設定工作時設定的 outputType。

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

類別可信度

下圖顯示類別信賴度遮罩的任務輸出內容。可信度遮罩輸出內容包含介於 [0, 1] 之間的浮點值。

兩名女孩騎馬，一名女孩在馬旁行走 圖片遮罩，可描繪出先前相片中女孩和馬匹的形狀。系統會擷取圖片輪廓的左半部，但不會擷取右半部

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

類別值

下圖顯示類別值遮罩的工作輸出內容。類別遮罩範圍為 [0, 255]，每個像素值代表模型輸出內容的獲勝類別索引。模型可辨識的類別中，得分最高的類別即為勝出類別。

兩名女孩騎馬，一名女孩在馬旁行走 圖片遮罩，可描繪出前一張圖片中女孩和馬匹的形狀。三位女孩和馬匹的形狀都已準確遮蓋

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

圖像分割器範例程式碼會示範如何顯示工作傳回的分割結果，詳情請參閱範例。