MediaPipe 顔検出の入門サンプル
============================

1. ZIPを展開する
   すべてのファイルを同じフォルダーに置いてください。

   index.html  : 画面
   app.js      : 画像読み込み・AI初期化・顔検出・枠の描画
   person.jpg  : AI作成の人物画像
   cat.jpg     : 運営者の愛猫の写真
   README.txt  : この手順書

2. Node.jsを確認する
   ターミナルを開き、次のコマンドを実行してください。

   node --version

   バージョン番号が表示されれば準備できています。
   コマンドが見つからない場合は、https://nodejs.org/ からNode.jsを
   インストールした後、ターミナルを開き直してください。

3. 展開したフォルダーでHTTPサーバーを起動する
   Windowsでは、エクスプローラーで展開したフォルダーを開き、
   アドレスバーに powershell と入力してEnterを押すと、
   そのフォルダーを作業場所にしたターミナルが開きます。

   npx.cmd --yes http-server . -p 8080

   初回はhttp-serverをダウンロードします。ターミナルは開いたままにします。
   8080番ポートが使われている場合は、-p 8081 に変更してください。

4. ブラウザで開く
   http://localhost:8080/ を開きます。
   ポートを8081に変更した場合は http://localhost:8081/ です。

   index.htmlをダブルクリックしたfile://形式では動作しません。
   必ずHTTPサーバー経由で開いてください。

5. サンプルを動かす
   人物画像を選び、「AIを読み込んで顔検出」を押します。
   初回はSDK・WASM・モデルをインターネットから読み込みます。
   緑の枠、顔の検出数、推論時間、JSONを確認してください。
   次に「愛猫の写真」を選び、「選んだ画像で顔検出」を押します。
   FaceDetectorは人の顔が対象です。猫の検出は保証されません。
   自分のJPEG・PNG・WebP画像（20 MB以下）でも試せます。
   選んだ画像の推論はブラウザ内で実行されます。

6. 終了する
   サーバーを起動したターミナルで Ctrl + C を押してください。

うまく動かない場合
------------------
・白い画面や画像読み込み失敗：ZIP内のファイルがすべて同じフォルダーにあるか確認。
・AI読み込み失敗：インターネット接続を確認し、顔検出ボタンをもう一度押す。
・CDNやGoogle Storageが制限されたネットワーク：SDK・WASM・モデルを取得できません。
・顔が0個：推論失敗とは限りません。顔の大きさ、向きなどを変えて試してください。
・詳細はブラウザの開発者ツールのConsoleで確認できます。
・サーバーはlocalhost:8080でパソコン自身から開く手順です。
  スマホでの確認は記事のサイト上のデモを使用してください。

使用ファイル・出典
------------------
人物：nekonote-toolsプロジェクト
      public/images/tool-examples/ai-face-mosaic/before.jpg のコピー。
      人物はすべてAI作成。
猫  ：nekonote-toolsプロジェクト
      public/images/hero-cats.jpg のコピー。運営者の愛猫。

SDK   ：@mediapipe/tasks-vision 0.10.34（jsDelivr経由）
モデル：BlazeFace full-range float16、モデルバージョン1（Google Storage経由）
        静止画モード、検出スコアの下限0.5、長辺最大960 px。
        GPUで初期化し、失敗した場合はCPUで再試行。

記事：https://nekonote-tools.com/notes/mediapipe-introduction/
公式：https://ai.google.dev/edge/mediapipe/solutions/vision/face_detector/web_js