試験的な実験。AIを活用した手の動き検出システム。深度情報をAIで別っこに推論しています。手の特徴点は、XYZ情報あるのですが、それとは別に深度推論しています。最新の物体検出技術により、手の特徴点を正確に捉え、深度情報のAI推論処理を施して、ランドマークの空間位置を把握。リアルタイムで手の動きを追跡し、映像に重ねて表示することで、直感的な操作感を実現しています。

ページ概要

このページでは、TensorFlow.js と MediaPipe Hands、そして ONNX Runtime WebGPU を組み合わせ、リアルタイムの手指ランドマーク検出と深度推定を同時に実行するデモを提供します。AI による手のスケルトン描画と深度ヒートマップを重ね合わせ、インタラクティブな可視化を体験できます。

主な機能

複数カメラデバイスの検出とライブ切り替え
MediaPipe によるリアルタイムな手のランドマーク推定とスムージング処理
ONNX Runtime (WebGPU) を使った MiDaS モデルによる深度推論
推定深度をヒートマップとパーセンテージでオーバーレイ表示
Google 翻訳ウィジェットによる多言語対応

技術スタック

TensorFlow.js（WebGL バックエンド）
MediaPipe Hands／Drawing Utils
ONNX Runtime Web + WebGPU
JavaScript (ES Modules) とカスタム UI コンポーネント

カメラ選択パネルから任意のデバイスに切り替えられるほか、トップバーのメニューから関連ページの閲覧や解説の表示が可能です。深度計算が WebGPU に依存するため、対応ブラウザでの動作を推奨します。