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

MediaPipe 画像分類タスクを使用すると、画像の分類を実行できます。次を使用: このタスクでは、定義された一連のカテゴリの中から画像が何を表しているかを識別します。決定できますここでは、画像分類器を使用する方法について説明します。パフォーマンスもモニタリングできます

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

サンプルコード

画像分類器のサンプルコードは、画像分類器の完全な実装を提供します。タスクを示しています。このコードは、このタスクのテストと独自の画像分類アプリの構築を始めましょう。特定のリソースを表示、実行、編集画像分類器のコード例できます。

セットアップ

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

JavaScript パッケージ

画像分類器のコードは MediaPipe @mediapipe/tasks-vision から利用できます。 NPM パッケージ。Google Chat ではプラットフォームに用意されているリンクから、これらのライブラリを検索してダウンロードします。設定ガイド

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

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() メソッドの呼び出しが実行されるユーザーインターフェーススレッドをブロックします。オブジェクトを 2 つのカテゴリに動画フレームを生成すると、分類のたびにメイン使用します。これを防ぐには、ウェブワーカーを実装して別のスレッドの 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 を実行して取得されました。日付:

画像分類器のサンプルコードは、画像分類機能を表示する方法を示しています。結果については、コードサンプルをご覧ください。