Google AI Edge Portal のご紹介: エッジ AI を大規模にベンチマークします。限定公開プレビュー中にアクセスをリクエストするには、登録してください。

姿勢ランドマーク検出ガイド（ウェブ向け）

MediaPipe Pose Landmarker タスクを使用すると、画像や動画内の人体のランドマークを検出できます。このタスクを使用して、体の主要な位置を特定し、姿勢を分析して、動きを分類できます。このタスクでは、単一の画像または動画を処理する ML モデルを使用します。このタスクは、画像座標と 3 次元のワールド座標で身体のポーズのランドマークを出力します。

この手順では、ウェブアプリと JavaScript アプリで Pose Landmarker を使用する方法について説明します。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。

サンプルコード

Pose Landmarker のサンプルコードには、このタスクの完全な JavaScript 実装が記載されています。このコードは、このタスクをテストし、独自のポーズランドマーカーアプリの構築を開始するのに役立ちます。ウェブブラウザのみを使用して、ポーズランドマーカーのサンプルを表示、実行、編集できます。

セットアップ

このセクションでは、Pose Landmarker を使用するために開発環境を設定する主な手順について説明します。プラットフォームのバージョン要件など、ウェブと JavaScript の開発環境の設定に関する一般的な情報については、ウェブのセットアップガイドをご覧ください。

JavaScript パッケージ

Pose Landmarker のコードは、MediaPipe の @mediapipe/tasks-vision NPM パッケージで入手できます。これらのライブラリは、プラットフォームのセットアップガイドの手順に沿って検索してダウンロードできます。

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

npm install @mediapipe/tasks-vision

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

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

モデル

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

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

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

タスクを作成する

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

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

構成オプション

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

オプション名	説明	値の範囲	デフォルト値
`runningMode`	タスクの実行モードを設定します。モードは 2 つあります。 IMAGE: 単一の画像入力のモード。 VIDEO: 動画のデコードされたフレーム、またはカメラなどの入力データのライブストリームのモード。	{`IMAGE, VIDEO`}	`IMAGE`
`numPoses`	Pose Landmarker で検出できるポーズの最大数。	`Integer > 0`	`1`
`minPoseDetectionConfidence`	ポーズ検出が成功とみなされるための最小信頼スコア。	`Float [0.0,1.0]`	`0.5`
`minPosePresenceConfidence`	ポーズランドマーク検出におけるポーズ存在スコアの最小信頼度スコア。	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	ポーズトラッキングが成功とみなされるための最小信頼スコア。	`Float [0.0,1.0]`	`0.5`
`outputSegmentationMasks`	ポーズランドマーカーが検出されたポーズのセグメンテーションマスクを出力するかどうか。	`Boolean`	`False`

データの準備

Pose Landmarker は、ホストブラウザでサポートされている任意の形式の画像でポーズを検出できます。このタスクは、サイズ変更、回転、値の正規化など、データ入力の前処理も処理します。動画内のポーズをランドマークするには、API を使用してフレームを 1 つずつすばやく処理し、フレームのタイムスタンプを使用して動画内のポーズが発生するタイミングを特定します。

タスクを実行する

ポーズランドマーカーは、detect()（実行モード IMAGE）メソッドと detectForVideo()（実行モード VIDEO）メソッドを使用して推論をトリガーします。タスクはデータを処理し、ポーズのランドマークを試みて、結果をレポートします。

Pose Landmarker の detect() メソッドと detectForVideo() メソッドの呼び出しは同期的に実行され、ユーザーの介在スレッドをブロックします。デバイスのカメラからの動画フレームでポーズを検出する場合、検出ごとにメインスレッドがブロックされます。これを防ぐには、ウェブワーカーを実装して、別のスレッドで detect() メソッドと detectForVideo() メソッドを実行します。

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

画像

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

動画

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

Pose Landmarker タスクの実行に関するより完全な実装については、サンプルをご覧ください。

結果を処理して表示する

ポーズランドマーカーは、検出実行ごとに poseLandmarkerResult オブジェクトを返します。結果オブジェクトには、各ポーズランドマークの座標が含まれます。

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

出力には、各ランドマークの正規化された座標（Landmarks）とワールド座標（WorldLandmarks）の両方が含まれます。

出力には、次の正規化された座標（Landmarks）が含まれます。

x と y: 画像の幅（x）と高さ（y）で 0.0 ～ 1.0 の範囲に正規化されたランドマークの座標。
z: ランドマークの奥行き。股関節の中間点の奥行きを原点とします。値が小さいほど、ランドマークがカメラに近いことを示します。z の大きさは、x とほぼ同じスケールを使用します。
visibility: 画像内でランドマークが認識される可能性。

出力には次のワールド座標（WorldLandmarks）が含まれます。

x、y、z: 実際の 3 次元座標（メートル単位）。腰の中間点を原点とします。
visibility: 画像内でランドマークが認識される可能性。

次の画像は、タスク出力の可視化を示しています。

瞑想のポーズをとっている女性。手足と胴体の位置を示すワイヤーフレームでポーズが強調されている

省略可能なセグメンテーションマスクは、検出された人物に各ピクセルが属する可能性を表します。次の画像は、タスク出力のセグメンテーションマスクです。

女性の形をアウトラインで示す前の画像のセグメンテーションマスク

Pose Landmarker のサンプルコードは、タスクから返された結果を表示する方法を示しています。サンプルをご覧ください。