本頁面由 Cloud Translation API 翻譯而成。

網頁的圖片區隔指南

MediaPipe 圖片區隔工作可讓您根據預先定義的類別，將圖片分為不同的區域，以便套用背景模糊效果等視覺效果。以下操作說明將示範如何使用節點和網頁應用程式適用的圖片區隔工具。如要進一步瞭解這項工作的功能、模型和設定選項，請參閱總覽。

程式碼範例

圖片區隔的範例程式碼提供此工作在 JavaScript 中的完整實作方式，供您參考。這段程式碼可協助您測試這項工作，並開始建構自己的圖片區隔應用程式。您可以使用網路瀏覽器查看、執行及編輯 Image Segmenter 範例程式碼。您也可以前往 GitHub 查看本範例的程式碼。

設定

本節說明設定開發環境及專門為使用 Image Segmenter 的程式碼專案的重要步驟。如需瞭解如何設定開發環境以使用 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 函式可讓您使用設定選項來自訂圖片區隔。如要進一步瞭解工作設定，請參閱「設定選項」。

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

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

如需更完整的實作方式，瞭解如何建立圖片區隔工作，請參閱程式碼範例。

設定選項

這項工作的網頁應用程式設定選項如下：

選項名稱	說明	值範圍	預設值
`runningMode`	設定工作的執行模式。系統提供兩種模式： IMAGE：單一圖片輸入的模式。影片：這種模式為影片中解碼的影格或即時輸入資料 (例如攝影機) 的直播。	{`IMAGE, VIDEO`}	`IMAGE`
`outputCategoryMask`	如果設為 `True`，輸出結果會包含 uint8 圖片的區隔遮罩，其中每個像素值都代表勝出類別值。	{`True, False`}	`False`
`outputConfidenceMasks`	如果設為 `True`，輸出結果會包含以浮點值圖片形式的區隔遮罩，其中每個浮點值都代表該類別的可信度分數對應關係。	{`True, False`}	`True`
`displayNamesLocale`	設定標籤語言，用於工作模型中繼資料內的顯示名稱 (如有)。英文的預設值是 `en`。您可以使用 TensorFlow Lite Metadata Writer API，在自訂模型的中繼資料中加入本地化標籤。	語言代碼	en

準備資料

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

對圖片區隔器 segment() 和 segmentForVideo() 方法發出的呼叫會同步執行，並封鎖使用者介面執行緒。如果在裝置相機的影片影格中區隔物件，每個區隔工作都會封鎖主執行緒。如要防止這種情況發生，您可以實作網路工作站，使其在其他執行緒上執行 segment() 和 segmentForVideo()。

執行工作

圖片區隔工具使用 segment() 方法搭配圖片模式，並使用 segmentForVideo() 方法搭配 video 模式觸發推論。圖片區隔工具會將偵測到的片段視為圖片資料，傳回到執行工作推論時設定的回呼函式。

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

圖片

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

Video

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

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

如需更完整的實作圖片區隔工作實作方式，請參閱程式碼範例。

處理並顯示結果

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

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

類別可信度

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

原始圖片和類別可信度遮罩輸出內容。Pascal VOC 2012 資料集的來源映像檔。

類別值

下圖以視覺化方式呈現類別值遮罩的工作輸出內容。類別遮罩範圍為 [0, 255]，每個像素值代表模型輸出的勝出類別索引。勝出類別索引是模型可識別類別中的最高分數。

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

Image Segmenter 範例程式碼示範如何顯示工作傳回的區隔結果，詳情請參閱程式碼範例。