LiteRT のご紹介: Google のオンデバイス AI 用の高性能ランタイム（旧称 TensorFlow Lite）です。

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

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

MediaPipe Pose Landmarker タスクでは、画像内の人体のランドマークを検出したり、動画をご覧ください。このタスクを使用して、主な身体の位置の特定、姿勢の分析、動きを分類できますこのタスクでは、次の条件を満たす機械学習（ML）モデルを使用します。単一の画像または動画を使用できますこのタスクは、身体ポーズのランドマークを画像に出力します。 3 次元の世界座標で表します。

ここでは、ウェブと JavaScript でポーズのマーカーを使用する方法について説明します。このモジュールで取り上げる機能、モデル、構成のオプションについては、概要をご覧ください。

サンプルコード

「Pose Landmarker」のサンプルコードでは、このコードを完全に実装できます。タスクを示しています。このコードは、このタスクをテストして、が、独自のポーズランドマークアプリの作成を始めました。特定のリソースを表示、実行、ポーズマーカーのサンプルコードを編集するできます。

セットアップ

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

JavaScript パッケージ

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

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

npm install @mediapipe/tasks-vision

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

<!-- You can replace JSDeliver with another CDN if you prefer -->
<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() 関数を使用すると、設定オプションを使用して LandMarker のポーズを行います。リソースの構成について構成オプションをご覧ください。

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

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`	地面マーカーのポーズ。	`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）説明します。このタスクでは、データを処理し、ポーズのランドマークを設定して、結果を報告します

ポーズのランドマークの 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();
  });
}

姿勢マーカータスクの実行のより詳細な実装については、コードサンプルをご覧ください。

結果の処理と表示

ポーズのランドマーカーは、検出ごとに 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: 0.0 ～ 1.0 の範囲で正規化されたランドマーク座標画像の幅（x）と高さ（y）を指定します。
z: ランドマークの深さ。腰の中間点の深さが含まれます。値が小さいほど、ランドマークがカメラに近づきます。「 z の大きさは x とほぼ同じスケールを使用します。
visibility: 画像内にランドマークが見える可能性。

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

x、y、z: 実世界の 3 次元座標（メートル単位）。中間点を起点とします。
visibility: 画像内にランドマークが見える可能性。

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

セグメンテーションマスク（省略可）は、各ピクセルが帰属する可能性を表します。通知します。次の画像は、画像のセグメンテーションマスクです。タスクの出力:

「Pose Landmarker」サンプルコードは、結果については、コードサンプル