見出し画像

MediaPipe Handpose

以下の記事を参考に書いてます。

MediaPipe Handpose

1. はじめに

MediaPipe Handpose は、手のひら検出器 と指スケルトン追跡モデル の2つのモデルで構成される軽量モデルです。 検出された手ごとに21個のキーポイントの3次元座標を予測します。 詳細については、Google AI Blogの記事を参照してください。

入力が与えられると、モデルは手が含まれているかどうか予測し、手のBoundingBoxと、21個のキーポイントを検出し、各指の関節と手のひらの位置を示します。モデルの特性については、モデルカードを参照してください。

モデルを使用してライブビデオストリームで手のランドマークを検出するデモを参照してください。また、MediaPipe の一部としても利用できます。

【注意】このモデルは、最大1つの手しか検出できません。マルチハンド検出は将来のリリースで提供される予定です。

2. パフォーマンス

MediaPipe Handposeは〜12MBの重みで構成され、さまざまな端末(2018 MacBook Proでは40 FPS、iPhone11では35 FPS、Pixel3では6 FPS)でのリアルタイム推論に最適です。

3. インストール

◎ yarn

$ yarn add @tensorflow-models/handpose

◎ npm

$ npm install @tensorflow-models/handpose

このパッケージは、依存関係として @tensorflow/tfjs-core および @tensorflow/tfjs-converter が指定されています。

4. 使用方法

◎ npm

const handpose = require('@tensorflow-models/handpose');

◎ CDN

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose"></script>

◎ コード例

async function main() {
  // handposeモデルの読み込み
  const model = await handpose.load();

  // ビデオストリーム (または画像、キャンバス、3Dテンソル)を渡し、検出結果を取得
  const predictions = await model.estimateHands(document.querySelector("video"));
  if (predictions.length > 0) {
    /*
    predictionsは、検出された各手を示すオブジェクトの配列 :
    [
      {
        handInViewConfidence: 1, // 手が存在する確率
        boundingBox: { // 手を囲むバウンディングボックス
          topLeft: [162.91, -17.42],
          bottomRight: [548.56, 368.23],
        },
        landmarks: [ // 手のランドマークの3次元座標
          [472.52, 298.59, 0.00],
          [412.80, 315.64, -6.18],
          ...
        ],
        annotations: { // セマンティックグループ
          thumb: [
            [412.80, 315.64, -6.18]
            [350.02, 298.38, -7.14],
            ...
          ],
          ...
        }
      }
    ]
    */

    for (let i = 0; i < predictions.length; i++) {
      const keypoints = predictions[i].landmarks;
 
      // 手のキーポイントのログ出力
      for (let i = 0; i < keypoints.length; i++) {
        const [x, y, z] = keypoints[i];
        console.log(`Keypoint ${i}: [${x}, ${y}, ${z}]`);
      }
    }
  }
}
main();

5. handpose.load() のパラメータ

・maxContinuousChecks : 何フレーム毎にBoundingBoxを検出するか (デフォルト:5)
・detectionConfidence : 予測破棄のしきい値 (デフォルト:0.8)
・iouThreshold : BoundingBoxの重なり具合のしきい値 (デフォルト:0.3)
・scoreThreshold : BoundingBoxのスコアに基づいた削除のしきい値 (デフォルト:0.75)

6. handpose.estimateHands() のパラメータ

・input : 分類する画像 (テンソル、DOM要素、ビデオ、キャンバス)
・flipHorizontal : キーポイントを水平反転するか(デフォルト:false)


この記事が気に入ったらサポートをしてみませんか?