Google AI Edge Portal のご紹介: エッジ AI を大規模にベンチマークします。限定公開プレビュー中にアクセスをリクエストするには、登録してください。

ウェブ向け画像分類ガイド

MediaPipe Image Classifier タスクを使用すると、画像に対して分類を実行できます。このタスクを使用すると、トレーニング時に定義されたカテゴリのセットの中から、画像が表すものを特定できます。ここでは、Node アプリとウェブアプリで画像分類器を使用する方法について説明します。

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

サンプルコード

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

セットアップ

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

JavaScript パッケージ

画像分類ツールのコードは、MediaPipe @mediapipe/tasks-vision NPM パッケージで入手できます。これらのライブラリは、プラットフォームのセットアップガイドに記載されているリンクからダウンロードできます。

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

npm install @mediapipe/tasks-vision

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

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

モデル

MediaPipe 画像分類ツールタスクには、このタスクと互換性のあるトレーニング済みモデルが必要です。画像分類子で使用可能なトレーニング済みモデルの詳細については、タスクの概要のモデルのセクションをご覧ください。

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

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

タスクを作成する

Image Classifier の createFrom...() 関数のいずれかを使用して、推論を実行するタスクを準備します。トレーニング済みモデルファイルの相対パスまたは絶対パスを使用して、createFromModelPath() 関数を使用します。モデルがすでにメモリに読み込まれている場合は、createFromModelBuffer() メソッドを使用できます。

次のコード例は、createFromOptions() 関数を使用してタスクを設定する方法を示しています。createFromOptions 関数を使用すると、構成オプションを使用して画像分類器をカスタマイズできます。構成オプションの詳細については、構成オプションをご覧ください。

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

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

構成オプション

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

オプション名	説明	値の範囲	デフォルト値
`runningMode`	タスクの実行モードを設定します。モードは 2 つあります。 IMAGE: 単一の画像入力のモード。 VIDEO: 動画のデコードされたフレーム、またはカメラなどの入力データのライブストリームのモード。	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	タスクのモデルのメタデータで指定された表示名に使用するラベルの言語を設定します（利用可能な場合）。デフォルトは英語の場合は `en` です。TensorFlow Lite メタデータライター API を使用して、カスタムモデルのメタデータにローカライズされたラベルを追加できます。	言語 / 地域コード	en
`maxResults`	返される上位スコアの分類結果の最大数（省略可）を設定します。0 未満の場合、利用可能なすべての結果が返されます。	任意の正の数	`-1`
`scoreThreshold`	モデルメタデータで指定された予測スコアのしきい値（存在する場合）をオーバーライドするしきい値を設定します。この値より小さい結果は拒否されます。	任意の浮動小数点数	未設定
`categoryAllowlist`	許可されるカテゴリ名のオプションのリストを設定します。空でない場合、カテゴリ名がこのセットに含まれていない分類結果はフィルタリングされます。重複するカテゴリ名または不明なカテゴリ名は無視されます。このオプションは `categoryDenylist` と相互に排他的です。両方を使用するとエラーが発生します。	任意の文字列	未設定
`categoryDenylist`	許可されないカテゴリ名のオプションリストを設定します。空でない場合、カテゴリ名がこのセットに含まれる分類結果は除外されます。重複するカテゴリ名や不明なカテゴリ名は無視されます。このオプションは `categoryAllowlist` と相互排他的です。両方を使用するとエラーが発生します。	任意の文字列	未設定
`resultListener`	画像分類ツールがライブストリームモードの場合に、分類結果を非同期で受け取るように結果リスナーを設定します。実行モードが `LIVE_STREAM` に設定されている場合にのみ使用できます	なし	未設定

データの準備

画像分類ツールは、ホストブラウザでサポートされている任意の形式の画像内のオブジェクトを分類できます。このタスクは、サイズ変更、回転、値の正規化など、データ入力の前処理も処理します。

画像分類子の classify() メソッドと classifyForVideo() メソッドの呼び出しは同期的に実行され、ユーザーインターフェーススレッドをブロックします。デバイスのカメラから動画フレーム内のオブジェクトを分類する場合、各分類でメインスレッドがブロックされます。これを防ぐには、ウェブワーカーを実装して、別のスレッドで classify() と classifyForVideo() を実行します。

タスクを実行する

画像分類器は、画像モードの classify() メソッドと video モードの classifyForVideo() メソッドを使用して、推論をトリガーします。Image Classifier API は、入力画像内のオブジェクトのカテゴリの候補を返します。

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

画像

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

動画

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

画像分類タスクの実行の完全な実装については、例をご覧ください。

結果を処理して表示する

推論を実行すると、画像分類タスクは ImageClassifierResult オブジェクトを返します。このオブジェクトには、入力画像またはフレーム内のオブジェクトのカテゴリのリストが含まれます。

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

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

この結果は、次のデータに対して Bird Classifier を実行して得られたものです。

スズメのクローズアップ写真

画像分類子のサンプルコードは、タスクから返された分類結果を表示する方法を示しています。詳しくは、サンプルをご覧ください。