📚 Documentation: Hand Gesture Navigation

const loadRecognizer = async () => {
  const vision = await (
    await import("@mediapipe/tasks-vision")
  ).FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm"
  );

  const recognizer = await (
    await import("@mediapipe/tasks-vision")
  ).GestureRecognizer.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: "https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
      delegate: "GPU",
    },
    runningMode: "VIDEO",
  });
  setGestureRecognizer(recognizer);
};

const enableCam = async () => {
  const mediaStream = await navigator.mediaDevices.getUserMedia({
    video: true,
  });
  setStream(mediaStream);
  if (videoRef.current) {
    videoRef.current.srcObject = mediaStream;
    videoRef.current.play();
    videoRef.current.addEventListener("loadeddata", predictWebcam);
  }
};

// Cleanup function
return () => {
  if (stream) {
    stream.getTracks().forEach((track) => track.stop());
    setStream(null);
  }
};

const predictWebcam = async () => {
  if (!gestureRecognizer || !videoRef.current || !canvasRef.current) return;

  const nowInMs = Date.now();
  if (videoRef.current.currentTime !== lastVideoTime) {
    lastVideoTime = videoRef.current.currentTime;
    const results = await gestureRecognizer.recognizeForVideo(
      videoRef.current,
      nowInMs
    );

    // Throttle gesture updates to 1 second
    if (nowInMs - lastGestureUpdate >= 1000) {
      const detected = results.gestures.length > 0;
      const newOutput = detected
        ? `Gesture: ${results.gestures[0][0].categoryName}`
        : "No gesture detected.";
      setGestureOutput(newOutput);
      lastGestureUpdate = nowInMs;
    }
  }
  animationFrameId.current = window.requestAnimationFrame(predictWebcam);
};

useEffect(() => {
  if (!gestureOutput) return;
  switch (gestureOutput) {
    case "Gesture: Victory":
      router.push("/");
      break;
    case "Gesture: Open_Palm":
      router.push("/documentation");
      break;
    case "Gesture: Pointing_Up":
      router.push("/demo");
      break;
    case "Gesture: Thumb_Down":
      router.push("/contact");
      break;
  }
}, [gestureOutput, router]);

// Visualisasi hasil gesture recognition
const canvasCtx = canvasRef.current.getContext("2d");
canvasCtx?.save();
canvasCtx?.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);

const DrawingUtils = (await import("@mediapipe/tasks-vision")).DrawingUtils;
const drawingUtils = new DrawingUtils(canvasCtx!);

// Menggambar landmark tangan jika terdeteksi
if (results.landmarks) {
  for (const landmarks of results.landmarks) {
    drawingUtils.drawConnectors(
      landmarks,
      GestureRecognizer.HAND_CONNECTIONS,
      { color: "#ecc25e", lineWidth: 2 }
    );
    drawingUtils.drawLandmarks(landmarks, {
      color: "#0e1df5",
      lineWidth: 0.1,
    });
  }
}
canvasCtx?.restore();