"""
Heart Finder - YOLOv8 ローカル学習 & TensorFlow.jsエクスポート
=============================================================
使い方:
  1. dataset/images/train/ に学習用画像を配置
  2. dataset/labels/train/ に対応するYOLOラベル(.txt)を配置
  3. dataset/images/val/ に検証用画像を配置（全体の10-20%）
  4. dataset/labels/val/ に対応するYOLOラベル(.txt)を配置
  5. python train.py を実行
"""

from ultralytics import YOLO
import shutil
from pathlib import Path


def main():
    # === 設定 ===
    MODEL_SIZE = "yolov8n.pt"  # nano: 軽量・高速（Webブラウザ向き）
    EPOCHS = 150               # 学習回数（画像が少なければ150-200に上げてもOK）
    IMG_SIZE = 640             # 入力画像サイズ
    BATCH_SIZE = 8             # メモリが足りなければ4に下げる

    # === データ拡張（augmentation）設定 ===
    # あらゆる角度のハートに対応するための回転・反転設定
    augment_params = dict(
        degrees=180.0,   # ±180度ランダム回転（全方向対応）
        flipud=0.5,      # 50%の確率で上下反転
        fliplr=0.5,      # 50%の確率で左右反転
        scale=0.5,       # 50%の範囲でランダムスケール
        translate=0.1,   # 10%の範囲でランダム平行移動
        mosaic=1.0,      # モザイク拡張（4枚を合成）
        hsv_h=0.015,     # 色相を微調整
        hsv_s=0.5,       # 彩度を変化
        hsv_v=0.4,       # 明度を変化
    )

    print("=" * 50)
    print("  Heart Finder - YOLOv8 学習開始")
    print("=" * 50)
    print(f"  モデル: {MODEL_SIZE}")
    print(f"  エポック数: {EPOCHS}")
    print(f"  画像サイズ: {IMG_SIZE}px")
    print(f"  回転角度: ±{augment_params['degrees']}°")
    print("=" * 50)

    # === 学習実行 ===
    model = YOLO(MODEL_SIZE)

    results = model.train(
        data="data.yaml",
        epochs=EPOCHS,
        imgsz=IMG_SIZE,
        batch=BATCH_SIZE,
        name="heart_finder",
        patience=20,         # 20エポック改善なしで早期終了
        device="mps",        # Apple Silicon GPU使用（CPUなら "cpu"）
        workers=4,
        **augment_params,
    )

    print("\n✅ 学習完了！")

    # === best.ptのパスを取得 ===
    import glob
    # ultralyticsはプロジェクトルートにrunsを作ることがあるため広く検索
    search_patterns = [
        "runs/detect/heart_finder*/weights/best.pt",
        "../runs/detect/heart_finder*/weights/best.pt",
        str(Path.home() / "Documents/astrowave/runs/detect/heart_finder*/weights/best.pt"),
    ]
    best_pt = None
    for pattern in search_patterns:
        candidates = sorted(glob.glob(pattern))
        if candidates:
            best_pt = Path(candidates[-1])
            break

    if best_pt is None or not best_pt.exists():
        print("❌ best.pt が見つかりません。以下で手動検索してください:")
        print("   find ~ -name 'best.pt' -path '*heart_finder*'")
        return

    print(f"\n📦 ベストモデル: {best_pt}")

    # === TensorFlow.js形式にエクスポート ===
    print("\n🔄 TensorFlow.js形式にエクスポート中...")
    best_model = YOLO(str(best_pt))
    export_path = best_model.export(format="tfjs")

    print(f"\n✅ エクスポート完了: {export_path}")

    # === yolo_model/ にコピー ===
    output_dir = Path("../yolo_model")
    output_dir.mkdir(exist_ok=True)

    # エクスポートされたファイルをコピー
    export_dir = Path(export_path)
    if export_dir.is_dir():
        for f in export_dir.iterdir():
            dest = output_dir / f.name
            shutil.copy2(f, dest)
            print(f"  → {dest}")

    print("\n" + "=" * 50)
    print("  🎉 すべて完了！")
    print(f"  モデルファイル: heart_finder/yolo_model/")
    print("  → model.json と group1-shard*.bin が生成されました")
    print("=" * 50)


if __name__ == "__main__":
    main()

"""
画像データを train / val に自動で分割するヘルパースクリプト
===========================================================
使い方:
  1. dataset/images/all/ フォルダに全画像を入れる
  2. dataset/labels/all/ フォルダに全ラベル(.txt)を入れる
  3. python split_data.py を実行
  4. 自動で train(80%) / val(20%) に分割されます
"""

import shutil
import random
from pathlib import Path


def main():
    # 元データのパス
    img_all = Path("dataset/images/all")
    lbl_all = Path("dataset/labels/all")

    # 出力先
    img_train = Path("dataset/images/train")
    img_val = Path("dataset/images/val")
    lbl_train = Path("dataset/labels/train")
    lbl_val = Path("dataset/labels/val")

    # 出力フォルダ作成
    for d in [img_train, img_val, lbl_train, lbl_val]:
        d.mkdir(parents=True, exist_ok=True)

    # 画像ファイル一覧を取得
    images = sorted([f for f in img_all.iterdir()
                     if f.suffix.lower() in ('.jpg', '.jpeg', '.png', '.webp', '.bmp')])

    if not images:
        print("❌ dataset/images/all/ に画像が見つかりません。")
        print("   まず画像ファイルを配置してください。")
        return

    # ランダムシャッフル
    random.seed(42)
    random.shuffle(images)

    # 80% : 20% に分割
    split_idx = int(len(images) * 0.8)
    train_imgs = images[:split_idx]
    val_imgs = images[split_idx:]

    print(f"📊 データ分割: 全{len(images)}枚 → train: {len(train_imgs)}枚 / val: {len(val_imgs)}枚")

    # コピー実行
    for img in train_imgs:
        shutil.copy2(img, img_train / img.name)
        lbl = lbl_all / (img.stem + ".txt")
        if lbl.exists():
            shutil.copy2(lbl, lbl_train / lbl.name)

    for img in val_imgs:
        shutil.copy2(img, img_val / img.name)
        lbl = lbl_all / (img.stem + ".txt")
        if lbl.exists():
            shutil.copy2(lbl, lbl_val / lbl.name)

    print("✅ 分割完了！")
    print(f"   train: {img_train}")
    print(f"   val:   {img_val}")


if __name__ == "__main__":
    main()

# YOLOv8 Heart Finder - Dataset Configuration
# MakeSense.aiからエクスポートしたYOLO形式のデータ用

path: ./dataset
train: images/train
val: images/val

nc: 1
names: ['heart']

cd /Users/saigamo/Documents/astrowave/heart_finder/training
python3 -m venv venv
source venv/bin/activate
pip install --upgrade pip
pip install ultralytics tensorflowjs tensorflow-macos
python split_data.py
python train.py

cd /Users/saigamo/Documents/astrowave/heart_finder/training
rm -rf venv

brew install python@3.11

/opt/homebrew/opt/python@3.11/bin/python3.11 -m venv venv
source venv/bin/activate

pip install --upgrade pip
pip install ultralytics

python train.py

cd /Users/saigamo/Documents/astrowave/heart_finder/training
source venv/bin/activate
python split_data.py
python train.py

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#ff6b81">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="ハートみっけ">
<link rel="manifest" href="./manifest.json">
<link rel="apple-touch-icon" href="./icons/icon-192.png">
<title>お散歩ハートみっけレーダー</title>
<script src="./tf.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a0a0e; }

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

#ui {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}

button {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  background: rgba(255, 107, 129, 0.25);
  color: #fff;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 107, 129, 0.4);
  transition: background 0.2s;
}

button:active { background: rgba(255, 71, 87, 0.5); }

#status {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 10;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  background: rgba(255, 107, 129, 0.2);
  padding: 8px 14px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 107, 129, 0.3);
}
</style>
</head>
<body>

<div id="container">
  <video id="video" autoplay playsinline muted></video>
  <canvas id="canvas"></canvas>
  <div id="status">カメラ起動中...</div>
  <div id="ui">
    <button id="toggleBtn">検出 ON</button>
    <button id="captureBtn">📷 保存</button>
    <button id="soundBtn">🔊 ON</button>
  </div>
</div>

<script>
(function() {
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const status = document.getElementById('status');
  const toggleBtn = document.getElementById('toggleBtn');

  let detecting = true;
  let animId = null;
  let yoloModel = null;

  const MODEL_PATH = './yolo_model/model.json';
  const MODEL_INPUT_SIZE = 640;
  const CONFIDENCE_THRESHOLD = 0.65;
  const IOU_THRESHOLD = 0.45;
  const CLASS_NAMES = ['heart'];

  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

  // SAHI設定（スマホ: 2×2=4タイル / PC: 3×3=9タイル）
  const SAHI_COLS = isMobile ? 2 : 3;
  const SAHI_ROWS = isMobile ? 2 : 3;
  const SAHI_OVERLAP = 0.2;

  let lastResults = [];
  let inferring = false;

  // 分散タイルスキャン: 1フレームにつき1タイルだけ処理
  let currentTileIndex = 0;
  const TOTAL_TILES = SAHI_COLS * SAHI_ROWS;
  let tileResults = [];

  // 時間的安定化
  let trackedBoxes = [];
  const HIT_TO_SHOW = 1;
  const MISS_TO_HIDE = 5;
  const IOU_MATCH = 0.3;

  // SAHI用オフスクリーンキャンバス
  const sliceCanvas = document.createElement('canvas');
  const sliceCtx = sliceCanvas.getContext('2d');
  sliceCanvas.width = MODEL_INPUT_SIZE;
  sliceCanvas.height = MODEL_INPUT_SIZE;

  // --- 検出音（かわいい和音: ピロリ〜ン♪） ---
  let soundEnabled = true;
  let lastSoundTime = 0;
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

  function playBeep() {
    const now = Date.now();
    if (now - lastSoundTime < 3000) return;
    lastSoundTime = now;

    const t = audioCtx.currentTime;

    // 音1: キュイン（周波数上昇）
    const osc1 = audioCtx.createOscillator();
    const gain1 = audioCtx.createGain();
    osc1.connect(gain1);
    gain1.connect(audioCtx.destination);
    osc1.type = 'sine';
    osc1.frequency.setValueAtTime(600, t);
    osc1.frequency.exponentialRampToValueAtTime(1200, t + 0.12);
    gain1.gain.setValueAtTime(0.25, t);
    gain1.gain.exponentialRampToValueAtTime(0.01, t + 0.2);
    osc1.start(t);
    osc1.stop(t + 0.2);

    // 音2: ピロリン（高音の和音）
    const osc2 = audioCtx.createOscillator();
    const gain2 = audioCtx.createGain();
    osc2.connect(gain2);
    gain2.connect(audioCtx.destination);
    osc2.type = 'triangle';
    osc2.frequency.setValueAtTime(1047, t + 0.1);
    osc2.frequency.setValueAtTime(1319, t + 0.2);
    osc2.frequency.setValueAtTime(1568, t + 0.3);
    gain2.gain.setValueAtTime(0, t);
    gain2.gain.linearRampToValueAtTime(0.2, t + 0.1);
    gain2.gain.exponentialRampToValueAtTime(0.01, t + 0.5);
    osc2.start(t + 0.1);
    osc2.stop(t + 0.5);

    // 音3: キラキラ感（高い倍音）
    const osc3 = audioCtx.createOscillator();
    const gain3 = audioCtx.createGain();
    osc3.connect(gain3);
    gain3.connect(audioCtx.destination);
    osc3.type = 'sine';
    osc3.frequency.setValueAtTime(2093, t + 0.15);
    gain3.gain.setValueAtTime(0.1, t + 0.15);
    gain3.gain.exponentialRampToValueAtTime(0.01, t + 0.4);
    osc3.start(t + 0.15);
    osc3.stop(t + 0.4);
  }

  // --- モデル読み込み ---
  async function loadModel() {
    status.textContent = 'モデル読み込み中...';
    try {
      yoloModel = await tf.loadGraphModel(MODEL_PATH);
      const dummy = tf.zeros([1, MODEL_INPUT_SIZE, MODEL_INPUT_SIZE, 3]);
      await yoloModel.executeAsync(dummy);
      dummy.dispose();
      status.textContent = 'ハートを探しています...';
    } catch (e) {
      console.error('YOLO読込失敗:', e);
      status.textContent = 'モデル読み込み失敗: ' + e.message;
    }
  }

  // --- カメラ起動（Quest3対応フォールバック付き） ---
  async function startCamera() {
    // 1st attempt: 標準の背面カメラ
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          facingMode: { ideal: 'environment' },
          width: { ideal: 1280 },
          height: { ideal: 720 }
        }
      });
      video.srcObject = stream;
      await video.play();
      status.textContent = 'カメラ起動完了・モデル読込中...';
      resizeCanvas();
      await loadModel();
      detect();
      return;
    } catch (e) {
      console.warn('標準カメラ起動失敗、フォールバック試行:', e.message);
    }

    // 2nd attempt: デバイスリストから背面カメラを探す
    try {
      const devices = await navigator.mediaDevices.enumerateDevices();
      const videoDevices = devices.filter(d => d.kind === 'videoinput');
      let targetId = null;

      for (const dev of videoDevices) {
        const label = (dev.label || '').toLowerCase();
        if (label.includes('back') || label.includes('外側') || label.includes('rear') || label.includes('environment')) {
          targetId = dev.deviceId;
          break;
        }
      }

      if (!targetId && videoDevices.length > 0) {
        targetId = videoDevices[0].deviceId;
      }

      if (targetId) {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { deviceId: { exact: targetId }, width: { ideal: 1280 }, height: { ideal: 720 } }
        });
        video.srcObject = stream;
        await video.play();
        status.textContent = 'カメラ起動完了・モデル読込中...';
        resizeCanvas();
        await loadModel();
        detect();
        return;
      }
    } catch (e2) {
      console.error('フォールバックカメラ起動失敗:', e2);
    }

    status.textContent = 'カメラにアクセスできません';
  }

  function resizeCanvas() {
    canvas.width = video.videoWidth || 640;
    canvas.height = video.videoHeight || 480;
  }

  // --- 前処理 ---
  function preprocess(source) {
    return tf.tidy(() => {
      const img = tf.browser.fromPixels(source);
      const resized = tf.image.resizeBilinear(img, [MODEL_INPUT_SIZE, MODEL_INPUT_SIZE]);
      const normalized = resized.div(255.0);
      return normalized.expandDims(0);
    });
  }

  // --- 後処理 ---
  function postprocess(output, imgWidth, imgHeight) {
    const results = [];
    const data = output.dataSync();
    const numClasses = CLASS_NAMES.length;
    const numDetections = 8400;

    const boxes = [];
    const scores = [];
    const classIds = [];

    for (let i = 0; i < numDetections; i++) {
      const cx = data[0 * numDetections + i];
      const cy = data[1 * numDetections + i];
      const w = data[2 * numDetections + i];
      const h = data[3 * numDetections + i];

      let maxScore = 0;
      let maxClassId = 0;
      for (let c = 0; c < numClasses; c++) {
        const score = data[(4 + c) * numDetections + i];
        if (score > maxScore) {
          maxScore = score;
          maxClassId = c;
        }
      }

      if (maxScore > CONFIDENCE_THRESHOLD) {
        const x1 = (cx - w / 2) / MODEL_INPUT_SIZE * imgWidth;
        const y1 = (cy - h / 2) / MODEL_INPUT_SIZE * imgHeight;
        const x2 = (cx + w / 2) / MODEL_INPUT_SIZE * imgWidth;
        const y2 = (cy + h / 2) / MODEL_INPUT_SIZE * imgHeight;
        boxes.push([x1, y1, x2, y2]);
        scores.push(maxScore);
        classIds.push(maxClassId);
      }
    }

    const nmsIndices = nms(boxes, scores, IOU_THRESHOLD);
    for (const idx of nmsIndices) {
      results.push({
        box: boxes[idx],
        score: scores[idx],
        classId: classIds[idx],
        className: CLASS_NAMES[classIds[idx]]
      });
    }
    return results;
  }

  // --- NMS ---
  function nms(boxes, scores, iouThreshold) {
    const indices = scores
      .map((s, i) => ({ score: s, index: i }))
      .sort((a, b) => b.score - a.score)
      .map(item => item.index);

    const selected = [];
    const active = new Array(indices.length).fill(true);

    for (let i = 0; i < indices.length; i++) {
      if (!active[i]) continue;
      selected.push(indices[i]);
      for (let j = i + 1; j < indices.length; j++) {
        if (!active[j]) continue;
        if (computeIoU(boxes[indices[i]], boxes[indices[j]]) > iouThreshold) {
          active[j] = false;
        }
      }
    }
    return selected;
  }

  function computeIoU(boxA, boxB) {
    const x1 = Math.max(boxA[0], boxB[0]);
    const y1 = Math.max(boxA[1], boxB[1]);
    const x2 = Math.min(boxA[2], boxB[2]);
    const y2 = Math.min(boxA[3], boxB[3]);
    const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
    const areaA = (boxA[2] - boxA[0]) * (boxA[3] - boxA[1]);
    const areaB = (boxB[2] - boxB[0]) * (boxB[3] - boxB[1]);
    return intersection / (areaA + areaB - intersection);
  }

  // --- 分散タイルスキャン推論（1フレーム1タイル） ---
  async function runInference() {
    if (!yoloModel || inferring) return;
    inferring = true;

    try {
      const imgW = canvas.width;
      const imgH = canvas.height;
      const tileW = imgW / SAHI_COLS;
      const tileH = imgH / SAHI_ROWS;
      const overlapX = tileW * SAHI_OVERLAP;
      const overlapY = tileH * SAHI_OVERLAP;

      const row = Math.floor(currentTileIndex / SAHI_COLS);
      const col = currentTileIndex % SAHI_COLS;

      const sx = Math.max(0, col * tileW - overlapX);
      const sy = Math.max(0, row * tileH - overlapY);
      const sw = Math.min(tileW + overlapX * 2, imgW - sx);
      const sh = Math.min(tileH + overlapY * 2, imgH - sy);

      sliceCtx.drawImage(video, sx, sy, sw, sh, 0, 0, MODEL_INPUT_SIZE, MODEL_INPUT_SIZE);

      const inputTensor = preprocess(sliceCanvas);
      const rawOutput = await yoloModel.executeAsync(inputTensor);
      const outputTensor = Array.isArray(rawOutput) ? rawOutput[0] : rawOutput;
      const detections = postprocess(outputTensor, sw, sh);

      tileResults[currentTileIndex] = detections.map(det => ({
        box: [det.box[0] + sx, det.box[1] + sy, det.box[2] + sx, det.box[3] + sy],
        score: det.score,
        classId: det.classId,
        className: det.className
      }));

      inputTensor.dispose();
      if (Array.isArray(rawOutput)) {
        rawOutput.forEach(t => t.dispose());
      } else {
        rawOutput.dispose();
      }

      currentTileIndex = (currentTileIndex + 1) % TOTAL_TILES;

      if (currentTileIndex === 0) {
        const allBoxes = [];
        const allScores = [];
        const allClassIds = [];

        for (let i = 0; i < TOTAL_TILES; i++) {
          if (!tileResults[i]) continue;
          for (const det of tileResults[i]) {
            allBoxes.push(det.box);
            allScores.push(det.score);
            allClassIds.push(det.classId);
          }
        }

        const finalIndices = nms(allBoxes, allScores, IOU_THRESHOLD);
        const results = finalIndices
          .map(idx => ({
            box: allBoxes[idx],
            score: allScores[idx],
            classId: allClassIds[idx],
            className: CLASS_NAMES[allClassIds[idx]]
          }))
          .filter(det => {
            const bw = det.box[2] - det.box[0];
            const bh = det.box[3] - det.box[1];
            const boxArea = bw * bh;
            const screenArea = imgW * imgH;
            if (boxArea > screenArea * 0.15) return false;
            const aspect = Math.max(bw, bh) / (Math.min(bw, bh) || 1);
            if (aspect > 2.0) return false;
            return true;
          });

        lastResults = results;
        updateTracking(results);

        const stableResults = trackedBoxes.filter(t => t.hitCount >= HIT_TO_SHOW);
        if (soundEnabled && stableResults.length > 0) {
          playBeep();
        }
      }
    } catch (e) {
      console.error('推論エラー:', e);
    }

    inferring = false;
  }

  // --- 時間的安定化 ---
  function updateTracking(newDetections) {
    const matched = new Set();

    for (const det of newDetections) {
      let bestIdx = -1;
      let bestIou = IOU_MATCH;

      for (let i = 0; i < trackedBoxes.length; i++) {
        const iou = calcIoU(det.box, trackedBoxes[i].box);
        if (iou > bestIou) {
          bestIou = iou;
          bestIdx = i;
        }
      }

      if (bestIdx >= 0) {
        trackedBoxes[bestIdx].box = det.box;
        trackedBoxes[bestIdx].score = det.score;
        trackedBoxes[bestIdx].hitCount = Math.min(trackedBoxes[bestIdx].hitCount + 1, HIT_TO_SHOW + 2);
        trackedBoxes[bestIdx].missCount = 0;
        matched.add(bestIdx);
      } else {
        trackedBoxes.push({
          box: det.box,
          score: det.score,
          classId: det.classId,
          className: det.className,
          hitCount: 1,
          missCount: 0
        });
      }
    }

    for (let i = trackedBoxes.length - 1; i >= 0; i--) {
      if (!matched.has(i)) {
        trackedBoxes[i].missCount++;
        if (trackedBoxes[i].missCount >= MISS_TO_HIDE) {
          trackedBoxes.splice(i, 1);
        }
      }
    }
  }

  function calcIoU(boxA, boxB) {
    const x1 = Math.max(boxA[0], boxB[0]);
    const y1 = Math.max(boxA[1], boxB[1]);
    const x2 = Math.min(boxA[2], boxB[2]);
    const y2 = Math.min(boxA[3], boxB[3]);
    const inter = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
    const areaA = (boxA[2] - boxA[0]) * (boxA[3] - boxA[1]);
    const areaB = (boxB[2] - boxB[0]) * (boxB[3] - boxB[1]);
    return inter / (areaA + areaB - inter);
  }

  // --- ハート描画ヘルパー ---
  function drawHeart(cx, cy, size) {
    ctx.beginPath();
    const topY = cy - size * 0.35;
    ctx.moveTo(cx, cy + size * 0.6);
    ctx.bezierCurveTo(cx - size, cy - size * 0.1, cx - size * 0.6, topY - size * 0.4, cx, topY + size * 0.1);
    ctx.bezierCurveTo(cx + size * 0.6, topY - size * 0.4, cx + size, cy - size * 0.1, cx, cy + size * 0.6);
    ctx.closePath();
  }

  // --- 描画ループ ---
  function detect() {
    if (!video.videoWidth) {
      animId = requestAnimationFrame(detect);
      return;
    }

    const w = canvas.width;
    const h = canvas.height;
    ctx.drawImage(video, 0, 0, w, h);

    if (detecting) {
      const stableResults = trackedBoxes.filter(t => t.hitCount >= HIT_TO_SHOW);
      for (const det of stableResults) {
        const [x1, y1, x2, y2] = det.box;
        const bw = x2 - x1;
        const bh = y2 - y1;

        // バウンディングボックス（ピンク系、角丸風に2重線）
        ctx.strokeStyle = 'rgba(255, 107, 129, 0.85)';
        ctx.lineWidth = 3;
        ctx.strokeRect(x1, y1, bw, bh);
        ctx.strokeStyle = 'rgba(255, 71, 87, 0.4)';
        ctx.lineWidth = 1;
        ctx.strokeRect(x1 - 2, y1 - 2, bw + 4, bh + 4);

        // ラベル
        const label = '♥ ' + Math.round(det.score * 100) + '%';
        ctx.font = 'bold 14px system-ui, sans-serif';
        const tw = ctx.measureText(label).width;
        ctx.fillStyle = 'rgba(255, 71, 87, 0.8)';
        ctx.fillRect(x1, y1 - 24, tw + 12, 24);
        ctx.fillStyle = '#fff';
        ctx.fillText(label, x1 + 6, y1 - 7);
      }

      const heartCount = stableResults.length;
      status.textContent = heartCount > 0
        ? 'ハート: ' + heartCount + '箇所発見！'
        : 'ハートを探しています...';

      runInference();
    }

    animId = requestAnimationFrame(detect);
  }

  // --- UIイベント ---
  toggleBtn.addEventListener('click', function() {
    detecting = !detecting;
    toggleBtn.textContent = detecting ? '検出 ON' : '検出 OFF';
    if (!detecting) {
      lastResults = [];
      trackedBoxes = [];
      status.textContent = '検出停止中';
    }
  });

  const captureBtn = document.getElementById('captureBtn');
  captureBtn.addEventListener('click', function() {
    const link = document.createElement('a');
    link.download = 'heart_' + new Date().toISOString().slice(0,19).replace(/:/g,'-') + '.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  });

  const soundBtn = document.getElementById('soundBtn');
  soundBtn.addEventListener('click', function() {
    soundEnabled = !soundEnabled;
    soundBtn.textContent = soundEnabled ? '🔊 ON' : '🔇 OFF';
  });

  window.addEventListener('resize', resizeCanvas);

  startCamera();

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js');
  }
})();
</script>

</body>
</html>