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

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

ウェブ向け画像埋め込みガイド

MediaPipe Image Embedder タスクを使用すると、画像データを数値表現に変換して、2 つの画像の類似性の比較など、ML 関連の画像処理タスクを実行できます。ここでは、Node アプリとウェブアプリで Image Embedder を使用する方法について説明します。

このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。

サンプルコード

画像埋め込みツールのサンプルコードには、このタスクの JavaScript での完全な実装が記載されています。このコードは、このタスクをテストし、独自の画像埋め込みアプリの作成を開始するのに役立ちます。ウェブブラウザのみを使用して、画像埋め込みツールのサンプルコードを表示、実行、編集できます。

セットアップ

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

JavaScript パッケージ

画像埋め込みコードは、MediaPipe @mediapipe/tasks-vision NPM パッケージから入手できます。これらのライブラリは、プラットフォームの設定ガイドに記載されているリンクから検索してダウンロードできます。

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

npm install @mediapipe/tasks-vision

コンテンツ配信ネットワーク（CDN）サービス経由でタスクコードをインポートする場合は、HTML ファイルのタグに次のコードを追加します。

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

モデル

MediaPipe Image Embedder タスクには、このタスクに対応したトレーニング済みモデルが必要です。Image Embedder で使用可能なトレーニング済みモデルの詳細については、タスクの概要のモデルのセクションをご覧ください。

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

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

タスクを作成する

モデルパスを指定する

デフォルトのオプションを使用してタスクを作成するには、createFromModelPath() メソッドを使用します。

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

モデルバッファを指定する

モデルがすでにメモリに読み込まれている場合は、createFromModelBuffer() メソッドを使用できます。

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

カスタムオプションを指定する

MediaPipe Image Embedder タスクは、createFromOptions 関数を使用してタスクを設定します。createFromOptions 関数は、構成オプションの値を受け入れます。構成オプションの詳細については、構成オプションをご覧ください。

次のコードは、カスタムオプションを使用してタスクをビルドして構成する方法を示しています。

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

設定オプション

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

オプション名	説明	値の範囲	デフォルト値
`running_mode`	タスクの実行モードを設定します。モードは 2 つあります。 IMAGE: 単一画像入力のモード。動画: 動画のフレームまたはカメラなどの入力データのライブ配信のデコードモード。	{`IMAGE, VIDEO`}	`IMAGE`
`l2Normalize`	返された特徴ベクトルを L2 ノルムで正規化するかどうか。このオプションは、モデルにネイティブの L2_NORMALIZATION TFLite オペレーションがまだ含まれていない場合にのみ使用します。ほとんどの場合、すでにこの状態であるため、TFLite 推論によって L2 正規化が実現され、このオプションは必要ありません。	`Boolean`	`False`
`quantize`	返されたエンベディングをスカラー量子化でバイトに量子化するかどうか。エンベディングは暗黙的に単位正規化されていると見なされるため、すべてのディメンションの値は [-1.0、1.0] の範囲内にあることが保証されます。そうでない場合は、l2Normalize オプションを使用します。	`Boolean`	`False`

データの準備

Image Embedder は、ホストブラウザでサポートされている任意の形式で画像を埋め込むことができます。このタスクは、サイズ変更、回転、値の正規化などのデータ入力前処理も処理します。

Image Embedder の embed() メソッドと embedForVideo() メソッドの呼び出しは同期的に実行され、ユーザーインターフェーススレッドをブロックします。動画フレームから特徴ベクトルを抽出する場合、各エンベディングはメインスレッドをブロックします。これを回避するには、ウェブワーカーを実装して、embed() メソッドと embedForVideo() メソッドを別のスレッドで実行します。

タスクを実行する

Image Embedder は、embed()（実行モード image）メソッドと embedForVideo()（実行モード video）メソッドを使用して推論をトリガーします。Image Embedder API は、入力画像のエンベディングベクトルを返します。

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

画像

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

動画

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

結果を処理して表示する

推論を実行すると、Image Embedder タスクは、入力画像またはフレームのエンベディングベクトルを含む ImageEmbedderResult オブジェクトを返します。

このタスクの出力データの例を次に示します。

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

この結果は、次の画像をエンベディングすることで得られました。

エキゾチックな猫のミディアムショット

2 つのエンベディングのセマンティックな類似性を比較するには、ImageEmbedder.cosineSimilarity 関数を使用します。例については、次のコードをご覧ください。

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

Image Embedder のサンプルコードは、タスクから返されたエンベディング結果を表示する方法を示しています。詳細については、コードサンプルをご覧ください。