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

MediaPipe 互動式圖像分割工具工作接收圖片中的位置，然後估算然後將該物件的區隔以圖片形式傳回資料。下列指示說明如何使用「節點」和「網頁」適用的互動式圖片區隔工具應用程式。進一步瞭解功能、模型和設定請參閱總覽。

程式碼範例

「互動式圖像區隔」的範例程式碼提供了您方便您參考。這個程式碼可協助您測試這項工作現在就開始打造自己的互動式圖片分割應用程式你可以查看、執行及編輯互動式圖片區隔工具程式碼範例只要使用網路瀏覽器即可。您也可以前往 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() 方法觸發推論。互動式 Image Segmenter 會以圖片資料的形式，將偵測到的片段傳回回呼您為工作執行推論時所設定的函式。

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

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

敬上