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

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

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

サンプルコード

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

セットアップ

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

JavaScript パッケージ

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

<ph type="x-smartling-placeholder">

必要なパッケージは 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

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

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