TensorFlow.js × YOLO11n の高性能顔認識フロー

prediction-component.js を中心に構築したパイプライン（videoStream → 推論 → 類似度評価 → IndexedDB 保存）を ステップごとにハイライトします。ボタン操作で処理の進行がわかるようにしました。

Step 01
ストリームの確立

webcam-component から videoStream を受け取り、loadeddata で幅と高さを確定。

Step 02
モデル読み込み

tf.loadGraphModel で /ai_models/yolo11n_web_model をロードし、READY バッジを表示。

Step 03
推論と描画

nonMaxSuppressionAsync → displayDetections で角丸グロー付きのバウンディングボックスを描画。

Step 04
類似度と保存

IoU + 色ヒストグラム + 面積の複合スコアが 0.75 未満なら IndexedDB に保存。

Step 01: videoStream を prediction-component に渡すと、loadeddata で自動的に startButton が活性化されます。