// 不依赖 UI，只需摄像头画面 + 控制逻辑

import { createApp, ref, onMounted } from "vue";
import { Detector } from "@/hand_landmark/detector"; 
import { GestureHandler } from "@/hand_landmark/gesture_handler"; // 手势处理模块

const App = {
  setup() {
    const videoRef = ref<HTMLVideoElement | null>(null);
    const detector = new Detector();
    const handler = new GestureHandler();

    onMounted(async () => {
      await detector.initialize();

      const video = videoRef.value;
      if (!video) return;

      // 获取摄像头
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      video.srcObject = stream;
      await video.play();

      // 循环识别
      const loop = async () => {
        const result = await detector.detect(video);
        const hand = result.rightHand ?? result.leftHand;
        if (hand) {
          const gesture = Detector.getSingleHandGesture(hand);
          handler.handleGesture(gesture, hand);
        }
        requestAnimationFrame(loop);
      };
      loop();
    });

    return () => <video ref={videoRef} width="640" height="480" autoplay />;
  },
};

createApp(App).mount("#app");
