ウェブ向けインタラクティブな画像セグメンテーション ガイド

MediaPipe のインタラクティブ画像セグメンテーション タスクは、画像内の位置を取得し、その位置にあるオブジェクトの境界を推定して、オブジェクトのセグメンテーションを画像データとして返します。以下では、ノードとウェブアプリ用のインタラクティブ イメージ セグメンタの使用方法について説明します。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。

サンプルコード

インタラクティブ画像セグメンテーションのサンプルコードは、参考用にこのタスクの完全な実装を 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);

インタラクティブ画像セグメンテーション タスクの実行の完全な実装については、コードサンプルをご覧ください。

結果を処理して表示する

推論を実行すると、インタラクティブ画像セグメンテーション タスクはセグメント画像データをコールバック関数に返します。出力の内容は画像データです。タスクの構成時に設定した内容に応じて、カテゴリマスク、信頼マスク、またはその両方が含まれる場合があります。

以降のセクションでは、このタスクからの出力データについて詳しく説明します。

カテゴリマスク

次の画像は、スポット領域が示されたカテゴリ値のマスクのタスク出力を可視化したものです。各ピクセルは、そのピクセルが関心のある領域にあるオブジェクトの一部かどうかを示す uint8 値です。2 番目の画像にある黒と白の円は、選択した対象領域を示しています。

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

信頼マスク

信頼度マスクの出力には、各画像入力チャネルの [0, 1] 間の浮動小数点値が含まれます。値が大きいほど、画像のピクセルが対象領域にあるオブジェクトの一部であるという信頼度が高くなります。

インタラクティブ画像セグメンテーションのサンプルコードは、タスクから返された分類結果を表示する方法を示しています。詳しくは、コードサンプルをご覧ください。