このページは Cloud Translation API によって翻訳されました。

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

MediaPipe Image Segmenter タスクでは、事前定義されたリソースに基づいて画像をリージョンに分割背景のぼかしなどの視覚効果を適用するカテゴリです。これらのでは、Node.js アプリとウェブアプリでイメージセグメンタを使用する方法を解説します。対象 Google Cloud インフラストラクチャの機能、モデル、構成オプションについてこのタスクについては、概要をご覧ください。

サンプルコード

画像セグメンタのコード例は、このコードの完全な実装を示しています。タスクを示しています。このコードは、このタスクのテストと独自の画像セグメンテーションアプリの構築を始めましょう。BigQuery では編集してサンプルコードできます。この例のコードは、 GitHub。

セットアップ

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

JavaScript パッケージ

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

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

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

画像セグメンテーションタスクの作成の詳細な実装については、コードサンプルをご覧ください。

構成オプション

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

オプション名	説明	値の範囲	デフォルト値
`outputCategoryMask`	`True` に設定すると、出力にはセグメンテーションマスクが含まれます。 uint8 イメージとして。各ピクセル値は落札カテゴリを示します。あります。	{`True, False`}	`False`
`outputConfidenceMasks`	`True` に設定すると、出力にはセグメンテーションマスクが含まれます。浮動小数点値の画像として格納され、各浮動小数点値は信頼度をカテゴリのスコアマップ。	{`True, False`}	`True`
`displayNamesLocale`	指定された表示名に使うラベルの言語を設定します。タスクのモデルのメタデータ（利用可能な場合）。デフォルトは `en` です。英語。カスタムモデルのメタデータにローカライズされたラベルを追加できます。 TensorFlow Lite Metadata Writer API を使用	言語 / 地域コード	en
`resultListener`	セグメンテーション結果を受け取るように結果リスナーを設定します。 `LIVE_STREAM` モードの場合、非同期で実行できます。実行モードが `LIVE_STREAM` に設定されている場合にのみ使用できます	なし	なし

データの準備

画像セグメンテーションでは、ホストブラウザ。このタスクでは、次を含むデータ入力の前処理も処理されます。サイズ変更、回転、値の正規化です。

イメージセグメンタの segment() メソッドと segmentForVideo() メソッドの呼び出しが実行されると、ユーザーインターフェーススレッドをブロックします。異なるリージョン間でオブジェクトを各セグメンテーションタスクがメインフレームを使用します。これを防ぐには、ウェブワーカーを実装して別のスレッドの segment() と segmentForVideo()。

タスクを実行する

画像セグメンタは、画像モードで segment() メソッドを使用し、 video モードの segmentForVideo() メソッドで推論をトリガーする。「画像セグメンタは、検出されたセグメントを画像データとしてコールバックに返します。タスクの推論の実行時に設定した関数です。

次のコードは、タスクモデルを使用して処理を実行する方法を示しています。

画像

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

Image Segmenter タスクの実行の詳しい実装については、コードサンプルをご覧ください。

結果の処理と表示

推論を実行すると、画像セグメンタタスクはセグメント画像データを使用します。出力の内容は、設定した outputType によって異なります。タスクを構成したとき。

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

カテゴリの信頼度

次の画像は、特定のカテゴリのタスク出力を可視化したものです。マスクされます。信頼マスクの出力には、次の範囲の浮動小数点値が含まれます。 [0, 1]。

元の画像とカテゴリの信頼度マスクの出力。からのソース画像 Pascal VOC（2012 年）見てみましょう。

カテゴリの値

次の画像は、特定のカテゴリのタスク出力を可視化したものです。あります。カテゴリマスクの範囲は [0, 255] で、各ピクセル値モデル出力の成功カテゴリインデックスを表します。受賞部門モデルが認識できるカテゴリの中で、最も高いスコアになります。

元の画像とカテゴリマスクの出力。からのソース画像 Pascal VOC（2012 年）見てみましょう。

画像セグメンテーションのサンプルコードは、セグメンテーションの表示方法を示しています結果については、コードサンプルをご覧ください。