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

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

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

サンプルコード

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

セットアップ

このセクションでは、Image Classifier を使用するように開発環境とコードプロジェクトを設定する主な手順について説明します。プラットフォームのバージョン要件など、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.js"
    crossorigin="anonymous"></script>
</head>

モデル

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

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

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

タスクを作成する

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

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

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

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

データの準備

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

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

タスクを実行する

Image Classifier は、画像モードで 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
  );

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

結果を処理して表示する

推論を実行すると、画像分類タスクは、入力画像またはフレーム内のオブジェクトに適用可能なカテゴリのリストを含む 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 を実行して得られました。

ドバトのクローズアップ写真

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