app.js

// Access the video and canvas elements
const video = document.getElementById('video');
const canvas = document.getElementById('outputCanvas');
const ctx = canvas.getContext('2d');
const status = document.getElementById('status');

// Initialize the hand pose detection model
async function setupHandPoseDetection() {
  try {
    // Load the hand pose detection model
    const model = handPoseDetection.SupportedModels.MediaPipeHands;
    const detectorConfig = {
      runtime: 'tfjs', // Use TensorFlow.js runtime
      modelType: 'full' // Choose between 'lite' or 'full'
    };
    const detector = await handPoseDetection.createDetector(model, detectorConfig);

    status.textContent = 'Model loaded!';

    // Start video stream
    await setupCamera();

    // Detect hands in real-time
    detectHands(detector);
  } catch (error) {
    console.error('Error loading the model:', error);
    status.textContent = 'Failed to load model.';
  }
}

// Set up the camera feed
async function setupCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  video.srcObject = stream;
  return new Promise((resolve) => {
    video.onloadedmetadata = () => {
      resolve(video);
    };
  });
}

// Detect hands and draw keypoints
async function detectHands(detector) {
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Detect hands in the video frame
    const hands = await detector.estimateHands(video);

    // Draw keypoints on the canvas
    if (hands.length > 0) {
      hands.forEach((hand) => {
        const keypoints = hand.keypoints;
        keypoints.forEach((keypoint) => {
          const { x, y } = keypoint;
          ctx.beginPath();
          ctx.arc(x, y, 5, 0, 2 * Math.PI); // Draw a circle at each keypoint
          ctx.fillStyle = 'red';
          ctx.fill();
        });
      });
    }
  }

  // Repeat detection
  requestAnimationFrame(() => detectHands(detector));
}

// Initialize the application
setupHandPoseDetection();