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

MediaPipe Interactive Image Segmenter タスクは、画像内の位置を取得し、境界線を推定そのオブジェクトのセグメンテーションを画像として返します。分析できます以下では、Node.js とウェブ向けのインタラクティブ画像セグメンタの使用方法について説明します。。このモジュールで取り上げる機能、モデル、構成のオプションについては、概要をご覧ください。

サンプルコード

インタラクティブ画像セグメンタのコード例は、この実装の完全な実装を示しています。タスクを示しています。このコードは、このタスクのテストと独自のインタラクティブな画像セグメンテーションアプリの作成を開始します。Google Chat ではインタラクティブ画像セグメンタを表示、実行、編集するサンプルコードできます。この例のコードは、 GitHub。

セットアップ

このセクションでは、開発環境をセットアップする主な手順とインタラクティブ画像セグメンタを使用するためのコードプロジェクトです。一般的な情報については、 MediaPipe タスクを使用するための開発環境の設定プラットフォームバージョンの要件については、ウェブ用の設定ガイド

JavaScript パッケージ

インタラクティブ画像セグメンタのコードは MediaPipe @mediapipe/tasks-vision から利用できます。 NPM パッケージ。Google Chat ではプラットフォームに用意されているリンクから、これらのライブラリを検索してダウンロードします。設定ガイド

ローカルステージング用に次のコードを使用して、必要なパッケージをインストールできます。次のコマンドを使用します。

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 Interactive Image Segmenter タスクには、この変換と互換性のあるトレーニング済みモデルが必要です。タスクを実行します。インタラクティブ画像セグメンテーションで使用可能なトレーニング済みモデルについて詳しくは、以下をご覧ください。タスクの概要のモデルセクションをご覧ください。

モデルを選択してダウンロードし、プロジェクトディレクトリに保存します。

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