ウェブ向けオブジェクト検出ガイド

MediaPipe Object Detector タスクを使用すると、複数のオブジェクトの存在と場所を検出できます。オブジェクトのクラスです。このタスクでは、画像データを受け取り、それぞれが画像内で識別されたオブジェクトを表します。コードサンプルここで説明する手順は、 CodePen。

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

サンプルコード

オブジェクト検出機能のサンプルコードは、このオブジェクト検出機能を完全に実装しています。タスクを示しています。このコードは、このタスクのテストと独自のテキスト分類アプリの構築を始めましょう。特定のリソースを表示、実行、オブジェクト検出のサンプルコードを編集します。できます。

セットアップ

このセクションでは、開発環境を設定するための主な手順について説明します。オブジェクト検出ツールの使用を検討してください。一般的な情報については、セットアップして、以下を含むウェブと JavaScript の開発環境をセットアップできます。プラットフォームバージョンの要件については、ウェブ用の設定ガイド

JavaScript パッケージ

オブジェクト検出コードは MediaPipe @mediapipe/tasks-vision から利用できます。 NPM パッケージ。Google Chat ではプラットフォームの手順に沿って、ライブラリを検索してダウンロードしてください。設定ガイド

必要なパッケージは NPM からインストールできます。次のコマンドを使用します。

npm install @mediapipe/tasks-vision

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

<!-- 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 Object Detector タスクには、これと互換性のあるトレーニング済みモデルが必要です。タスクを実行します。オブジェクト検出機能で利用可能なトレーニング済みモデルの詳細については、以下をご覧ください。モデルセクションのタスクの概要をご覧ください。

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

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

タスクを作成する

オブジェクト検出 ObjectDetector.createFrom...() 関数のいずれかを使用して、次のことを行います。タスクを準備します。createFromModelPath() を使用するトレーニング済みモデルファイルの相対パスまたは絶対パスで関数を呼び出します。モデルがすでにメモリに読み込まれている場合は、 createFromModelBuffer() メソッドを使用します。次のコード例は、 createFromOptions() 関数を使用すると、より詳細な構成を設定できます。。使用可能な構成オプションの詳細については、このモジュールの構成オプションセクション。

次のコードは、このタスクをビルドして構成する方法を示しています。

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

オブジェクト検出タスクの作成の詳細な実装については、コードサンプルをご覧ください。

構成オプション

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

オプション名	説明	値の範囲	デフォルト値
`runningMode`	タスクの実行モードを設定します。2 つのモデルモード: IMAGE: 単一画像入力のモード。 VIDEO: 音声データのデコードされたフレームのモード入力データのライブストリームで実行できます。	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	指定された表示名に使うラベルの言語を設定します。タスクのモデルのメタデータ（利用可能な場合）。デフォルトは `en` です。英語。カスタムモデルのメタデータにローカライズされたラベルを追加できます。 TensorFlow Lite Metadata Writer API を使用	言語 / 地域コード	en
`maxResults`	オプションの高スコアの検出結果の最大数を設定します。戻ります。	正の数	-1（すべての結果が返されます）
`scoreThreshold`	予測スコアのしきい値を設定します。このしきい値は、モデルメタデータ（存在する場合）この値を下回る結果は拒否されます。	任意の浮動小数点数	未設定
`categoryAllowlist`	許可するカテゴリ名のオプションリストを設定します。空でない場合、カテゴリ名がこのセットに含まれていない検出結果は、フィルタで除外されます重複または不明なカテゴリ名は無視されます。このオプションは `categoryDenylist` とは相互に排他的であり、どちらの結果もエラーになります	任意の文字列	未設定
`categoryDenylist`	許可されていないカテゴリ名のオプションリストを設定します。条件空ではない場合、このセット内にカテゴリ名が含まれる検出結果がフィルタされます。できます。重複または不明なカテゴリ名は無視されます。このオプションは `categoryAllowlist` と排他的であり、両方を使用するとエラーになります。	任意の文字列	未設定

データの準備

オブジェクト検出機能は、ホストブラウザ。このタスクでは、次を含むデータ入力の前処理も処理されます。サイズ変更、回転、値の正規化です。動画内のオブジェクトを検出するには、のタイムスタンプを使用して、API を使用して一度にフレームを動画内でジェスチャーが発生するタイミングを判定します。

タスクを実行する

オブジェクト検出では、detect() を使用して単一の画像を処理し、 detectForVideo() による動画フレーム内のオブジェクトの検出。タスクは、オブジェクトを認識し、その結果を報告します。

detect() メソッドと detectForVideo() メソッドの呼び出しが実行されると、ユーザーインターフェーススレッドをブロックします。中の物体に気づいたら、動画フレームを分類すると、その分類のそれぞれが、使用します。これを防ぐには、ウェブワーカーを実装して、別のスレッドに移動できます

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

画像

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

動画

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

オブジェクト検出タスクの実行のより詳細な実装については、コードサンプルをご覧ください。

結果の処理と表示

オブジェクト検出機能は、検出の実行ごとに検出結果オブジェクトを生成します。 Results オブジェクトには、検出項目のリストが含まれます。各検出項目には、検出されたオブジェクトの境界ボックスとカテゴリ情報オブジェクトの名前と信頼スコアが含まれます。

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

次の図は、タスク出力を可視化したものです。

オブジェクト検出サンプルコードは、検出機能を表示する方法を示しています。結果については、コードサンプルをご覧ください。