LiteRT のご紹介: Google のオンデバイス AI 用の高性能ランタイム（旧称 TensorFlow Lite）です。

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

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

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

サンプルコード

画像セグメンタのコード例は、このコードの完全な実装を示しています。タスクを示しています。このコードは、このタスクをテストし、独自の画像分割アプリの作成を開始するのに役立ちます。ウェブブラウザのみを使用して、画像分割ツールのサンプルコードを表示、実行、編集できます。この例のコードは、 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 タスクには、このタスクに対応したトレーニング済みモデルが必要です。Image Segmenter で使用可能なトレーニング済みモデルの詳細については、タスクの概要のモデルのセクションをご覧ください。

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

<dev-project-root>/app/shared/models/

タスクを作成する

画像セグメント化ツールの 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` に設定すると、出力には浮動小数点値画像としてセグメンテーションマスクが含まれます。各浮動小数点値は、カテゴリの信頼スコアマップを表します。	{`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);

動画

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 データセットのソース画像。

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