GestureRecognizerで手の形とジェスチャーを調べる

1. ZIPを展開し、index.html/app.js/person.jpg/cat.jpgが見えるフォルダーを開きます。
2. エクスプローラーのアドレス欄で powershell と入力し、Enter。
3. node --version と npm.cmd --version を実行。見つからない場合はNode.js LTSをインストールして端末を開き直します。
4. npx.cmd --yes http-server . -p 8080 を実行。
5. http://localhost:8080 をブラウザで開き、実行ボタンを押します。
6. 終了は端末で Ctrl+C。8080が使用中なら8081などに変更します。

Mac/Linuxは npm --version、npx --yes http-server . -p 8080。
file://でHTMLを直接開くとモジュールの読込が制限されるので、必ずHTTPサーバーを使います。
SDK/モデルは初回実行時に外部から読み込むためインターネット接続が必要です。
SDK：@mediapipe/tasks-vision 0.10.34。モデル：Gesture Recognizer float16。
モデルURL：https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task
画像出典：person.jpgは本プロジェクトpublic/samples/mediapipe-face-detection/person.jpg（AI生成人物）。cat.jpgはpublic/images/hero-cats.jpg（運営者の愛猫）。同梱画像は本教材の実行用です。
hand.jpgはプロジェクト内artifacts/note-catalog-drafts/reusable/ai-hand-pose-sketch/before.jpgからコピーしたAI生成の架空の手です。metadata.jsonに2026-10-08生成の記録があります。
画像の推論はブラウザ内で行い、入力画像を推論用サーバーへ送信する処理はありません。SDK・WASM・モデルの取得は外部CDNとGoogleの公開ストレージへの通信を行います。