MediaPipeとTensorFlow.jsによるブラウザでの顔と手の追跡
以下の記事を参考に書いてます。
・Face and hand tracking in the browser with MediaPipe and TensorFlow.js
1. ブラウザでライブデモを試してください
「facemesh」は、画像内の顔の境界とランドマークを検出、「handpose」は手を検出するパッケージです。これらのパッケージは小さく、高速で、ブラウザ内で実行されるため、データがユーザーのデバイスを離れることはなく、ユーザーのプライバシーが保護されます。
以下のリンクから、今すぐ試すことができます。
これらパッケージは、マルチモーダル知覚パイプラインを構築するためのライブラリ「MediaPipe」の一部としても利用できます。
・MediaPipe face tracking
・MediaPipe hand pose tracking
リアルタイムな顔と手の追跡により、新しいインタラクティブ体験が可能になることを願っています。たとえば、顔のジオメトリ位置は表情を分類するための基礎であり、ハンドトラッキングはジェスチャ認識の最初のステップになります。このような機能を備えたアプリケーションが、Web上の対話性とアクセシビリティの限界をどのように押し進めるかを楽しみにしています。
2. Deep dive: Facemesh
「facemesh」は、画像またはビデオストリームから3D顔面ジオメトリを推測し、深度センサーを必要とせずに、1つのカメラ入力のみを必要とします。このジオメトリは、唇の輪郭や顔のシルエットなどの詳細を含む、顔、目、鼻、唇などの特徴を特定します。この情報は、式の分類などのダウンストリームタスクに使用できます（ただし、識別は使用できません）。モデルがさまざまなデータセットでどのように機能するかについての詳細は、モデルカードを参照してください。このパッケージは、「MediaPipe」からも入手できます。
3. パフォーマンス
「facemesh」は、重量がわずか3MBの軽量パッケージで、さまざまなモバイルデバイスでのリアルタイムな推論に最適です。テストするとき、「TensorFlow.js」は、ローエンドGPUを備えたデバイス用のXNNPACKを使用した「WebGL」および「WebAssembly」（WASM）など、いくつかの異なるバックエンドを選択できます。
以下の表は、いくつかの異なるデバイスと「TensorFlow.js」でパッケージがどのように機能するかを示しています。
4. インストール
「facemesh」をインストールする方法は2つあります。
◎ NPM
import * as facemesh from '@tensorflow-models/facemesh;◎ スクリプトタグ
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>5. 使用方法
パッケージをインストールしたら、モデルの重みを読み込んで画像を渡すだけで、顔のランドマークの検出を開始できます。
// MediaPipe facemeshモデルアセットのロード
const model = await facemesh.load();
// ビデオストリームをモデルに渡し、
// MediaPipeグラフから検出された顔の配列を取得。
const video = document.querySelector("video");
const faces = await model.estimateFaces(video);
// 各faceオブジェクトにはscaledMeshプロパティが含まれる。
// これは468個のランドマークの配列。
faces.forEach(face => console.log(face.scaledMesh));guessFacesへの入力は、ビデオ、静的画像、またはnode.jsパイプラインで使用するためのImageDataインターフェイスである場合があります。「facemesh」は、入力内の顔の予測オブジェクトの配列を返します。これには、各顔に関する情報（たとえば、信頼スコア、顔内の468ランドマークの位置）が含まれます。
予測オブジェクトのサンプルは次のとおりです。
{
faceInViewConfidence: 1,
boundingBox: {
topLeft: [232.28, 145.26], // [x, y]
bottomRight: [449.75, 308.36],
},
mesh: [
[92.07, 119.49, -17.54], // [x, y, z]
[91.97, 102.52, -30.54],
...
],
scaledMesh: [
[322.32, 297.58, -17.54],
[322.18, 263.95, -30.54]
],
annotations: {
silhouette: [
[326.19, 124.72, -3.82],
[351.06, 126.30, -3.00],
...
],
...
}
}APIの詳細については、READMEを参照してください。
6. Deep dive: Handpose
「handpose」は、入力画像またはビデオストリームで手を検出し、各手の中の特徴を特定する21個の3次元ランドマークを返します。このようなランドマークには、各指の関節と手のひらの位置が含まれます。2019年8月に、MediaPipeを介してモデルをリリースしました。リリース時のブログ投稿でモデルアーキテクチャの詳細を確認できます。「handpose」がさまざまなデータセットでどのように機能するかについての詳細は、モデルカードを参照してください。このパッケージは、MediaPipeからも入手できます。
7. パフォーマンス
「handpose」は、約12MBの重量で構成される比較的軽量のパッケージであり、リアルタイムの推論に適しています。
以下の表は、さまざまなデバイス間でパッケージがどのように実行されるかを示しています。
8. インストール
「handpose」をインストールする方法は2つあります。
◎ NPM
import * as handtrack from '@tensorflow-models/handpose;◎ スクリプトタグ
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose"></script>9. 使用方法
パッケージをインストールしたら、モデルの重みを読み込んで画像を渡すだけで、手のランドマークの追跡を開始できます。
// MediaPipe handposeモデルアセットのロード
const model = await handpose.load();
// ビデオストリームをモデルに渡して、MediaPipeグラフから予測を取得
const video = document.querySelector("video");
const hands = await model.estimateHands(video);
// 各handのオブジェクトには、21個の3Dランドマークの配列である
// ランドマークプロパティが含まれている
hands.forEach(hand => console.log(hand.landmarks));「facemesh」と同様に、timateHandsへの入力は、ビデオ、静止画像、またはImageDataインターフェイスにすることができます。 パッケージは、入力で手を記述するオブジェクトの配列を返します。
予測オブジェクトのサンプルは次のとおりです。
{
handInViewConfidence: 1,
boundingBox: {
topLeft: [162.91, -17.42], // [x, y]
bottomRight: [548.56, 368.23],
},
landmarks: [
[472.52, 298.59, 0.00], // [x, y, z]
[412.80, 315.64, -6.18],
...
],
annotations: {
indexFinger: [
[412.80, 315.64, -6.18],
[350.02, 298.38, -7.14],
...
],
...
}
}APIの詳細については、READMEを参照してください。
10. 今後の展望
「facemesh」と「handpose」の改善を継続する予定です。 近い将来、マルチハンドトラッキングのサポートを追加する予定です。 また、特にモバイルデバイスでは、常にモデルの高速化に取り組んでいます。 過去数か月の開発の間に、「facemesh」と「handpose」のパフォーマンスが大幅に向上し、この傾向が続くと考えています。 「MediaPipe」チームはより合理化されたモデルアーキテクチャを開発しており、「TensorFlow.js」チームは常に、オペレーターフュージョンなどの推論を高速化する方法を調査しています。 より高速な推論は、リアルタイムパイプラインで使用するためのより大きく、より正確なモデルのロックを解除します。
この記事が気に入ったらサポートをしてみませんか？