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

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

MediaPipe 画像分類タスクを使用すると、画像の分類を実行できます。このタスクを使用して、トレーニング時に定義された一連のカテゴリの中から画像が何を表しているかを特定できます。以下では、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.js"
    crossorigin="anonymous"></script>
</head>

モデル

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

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

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

タスクを作成する

画像分類器の 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 Metadata Writer 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 を実行することで取得されました。

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