InteractiveSegmenterで指定した猫の領域を選ぶ 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 1.1.0。モデル:MagicTouch v2 int8。 モデルURL:https://storage.googleapis.com/mediapipe-models/interactive_segmenter_v2/magic_touch/int8/1/interactive_segmentation.task 画像出典:person.jpgは本プロジェクトpublic/samples/mediapipe-face-detection/person.jpg(AI生成人物)。cat.jpgはpublic/images/hero-cats.jpg(運営者の愛猫)。同梱画像は本教材の実行用です。 新しいAPI:setImageで画像特徴を準備し、segment(Stroke[])でマスクを返します。古いコードのsegment(image, ROI)とは互換性がありません。 操作補足:クリック・タップまたはスライダーは、対象に含めたい短い横線の中心を指定します。線は正規化座標の13点、画像幅の12%です。ボタンを押すと実行します。JSONのpointConfidenceと色付けした領域も確認してください。1点だけを禁止するAPI仕様ではありません。 画像の推論はブラウザ内で行い、入力画像を推論用サーバーへ送信する処理はありません。SDK・WASM・モデルの取得は外部CDNとGoogleの公開ストレージへの通信を行います。