Google AI Edge Portal のご紹介: エッジ AI を大規模にベンチマークします。限定公開プレビュー中にアクセスをリクエストするには、登録してください。

ウェブ向け画像セグメンテーションガイド

MediaPipe Image Segmenter タスクを使用すると、画像を事前定義されたカテゴリに基づいて領域に分割し、背景のぼかしなどの視覚効果を適用できます。この手順では、Node アプリとウェブアプリで Image Segmenter を使用する方法について説明します。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。

サンプルコード

Image Segmenter のサンプルコードは、このタスクの完全な実装を JavaScript で提供しています。このコードは、このタスクをテストし、独自の画像セグメンテーションアプリの構築を開始するのに役立ちます。ウェブブラウザだけで Image Segmenter サンプルを表示、実行、編集できます。

設定

このセクションでは、Image Segmenter を使用するために開発環境とコードプロジェクトを設定する主な手順について説明します。プラットフォームバージョンの要件など、MediaPipe タスクを使用するための開発環境の設定に関する一般的な情報については、ウェブの設定ガイドをご覧ください。

JavaScript パッケージ

Image Segmenter コードは、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 Image Segmenter タスクには、このタスクと互換性のあるトレーニング済みモデルが必要です。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 タスクの作成の実装の詳細については、コード例をご覧ください。

構成オプション

このタスクには、ウェブアプリケーション用の次の構成オプションがあります。

オプション名	説明	値の範囲	デフォルト値
`outputCategoryMask`	`True` に設定すると、出力には uint8 画像としてセグメンテーションマスクが含まれます。各ピクセル値は、最も可能性の高いカテゴリの値を示します。	{`True, False`}	`False`
`outputConfidenceMasks`	`True` に設定すると、出力には float 値の画像としてセグメンテーションマスクが含まれます。各 float 値は、カテゴリの信頼度スコアマップを表します。	{`True, False`}	`True`
`displayNamesLocale`	タスクのモデルのメタデータで提供される表示名に使用するラベルの言語を設定します（使用可能な場合）。デフォルトは`en`英語のです。TensorFlow Lite Metadata Writer API を使用して、カスタムモデルのメタデータにローカライズされたラベルを追加できます。	ロケールコード	en
`resultListener`	Image Segmenter が `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 タスクの実行の実装の詳細については、例をご覧ください。

結果の処理と表示

推論を実行すると、Image Segmenter タスクはセグメント画像データをコールバック関数に返します。出力の内容は、タスクの構成時に設定した outputType によって異なります。

以降のセクションでは、このタスクからの出力データの例を示します。

カテゴリの信頼度

次の画像は、カテゴリの信頼度マスクのタスク出力の可視化を示しています。信頼度マスクの出力には、[0, 1] の範囲の float 値が含まれます。

馬に乗る 2 人の女の子と、馬の横を歩く 1 人の女の子前の写真の少女と馬の形をアウトラインで示すイメージマスク。画像の左半分のアウトラインはキャプチャされるが、右半分はキャプチャされない

元の画像とカテゴリの信頼度マスクの出力。Pascal VOC 2012 データセットのソース画像。 Pascal VOC 2012 データセットのソース画像。

カテゴリ値

次の画像は、カテゴリ値マスクのタスク出力のビジュアリゼーションを示しています。カテゴリマスクの範囲は [0, 255] で、各ピクセル値はモデル出力の最も可能性の高いカテゴリインデックスを表します。最も可能性の高いカテゴリインデックスは、モデルが認識できるカテゴリの中で最も高いスコアを持ちます。

馬に乗る 2 人の女の子と、馬の横を歩く 1 人の女の子前の画像の女の子と馬の形をアウトラインで示すイメージマスク。3 人の女の子と馬の形が正確にマスクされている

元の画像とカテゴリマスクの出力。Pascal VOC 2012 データセットのソース画像。 Pascal VOC 2012 データセットのソース画像。

Image Segmenter のサンプルコードは、タスクから返されたセグメンテーションの結果を表示する方法を示しています。詳細については、例をご覧ください。