document.write ( `

<h1> Media Pipe model </h1>
<h2> hi hi test</h2>
` );

// Load MediaPipe Hands library
const handsScript = document.createElement('script');
handsScript.src = 'https://cdn.jsdelivr.net/npm/@mediapipe/hands';
handsScript.onload = () => {
    console.log('MediaPipe Hands library loaded successfully!');
    
    initializeHands(); // Initialize hands after library is loaded
};
document.head.appendChild(handsScript);

// Load MediaPipe Camera library
const cameraScript = document.createElement('script');
cameraScript.src = 'https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils';
cameraScript.onload = () => {
    console.log('MediaPipe Camera Utils library loaded successfully!');
};
document.head.appendChild(cameraScript);

let hands;

// Function to initialize MediaPipe Hands
function initializeHands() {
    hands = new Hands({
        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
    });

    hands.setOptions({
        maxNumHands: 1, // Detect one hand
        modelComplexity: 1, // High-quality model
        minDetectionConfidence: 0.5,
        minTrackingConfidence: 0.5,
    });

    hands.onResults(onResults);
    console.log('MediaPipe Hands initialized!');
}

// Start the webcam and process frames
const videoElement = document.createElement('video');
videoElement.autoplay = true;
document.body.appendChild(videoElement);

async function startCamera() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoElement.srcObject = stream;

    const camera = new Camera(videoElement, {
        onFrame: async () => {
            if (hands) await hands.send({ image: videoElement });
        },
        width: 640,
        height: 480,
    });
    camera.start();
}

let lastGesture = ""; // Track the last detected gesture
let cooldown = false; // Cooldown flag to prevent rapid detections


// Declare variables only if they are not already declared
if (typeof sentence === "undefined") {
    var sentence = ""; // Variable to construct the sentence dynamically
}
if (typeof stableGesture === "undefined") {
    var stableGesture = ""; // Stores the currently stable gesture
}
if (typeof stabilityCounter === "undefined") {
    var stabilityCounter = 0; // Counter for stabilizing gestures
}

function onResults(results) {
    let detectedGesture = "";

    // Detect single hand gestures
    if (results.multiHandLandmarks.length === 1) {
        const landmarks = results.multiHandLandmarks[0];

        const thumbTip = landmarks[4];
        const thumbBase = landmarks[2];
        const indexTip = landmarks[8];
        const middleTip = landmarks[12];
        const ringTip = landmarks[16];
        const pinkyTip = landmarks[20];

        const indexBase = landmarks[6];
        const middleBase = landmarks[10];
        const ringBase = landmarks[14];
        const pinkyBase = landmarks[18];

        // Thumbs Up
        const isThumbUp =
            thumbTip.y < indexTip.y &&
            thumbTip.y < middleTip.y &&
            thumbTip.y < ringTip.y &&
            thumbTip.y < pinkyTip.y &&
            Math.abs(thumbTip.x - landmarks[6].x) > 0.05;
        if (isThumbUp) {
            detectedGesture = "Thumbs Up";
        }

        // Fist
        const isFist =
            !detectedGesture &&
            thumbTip.y > indexBase.y &&
            indexTip.y > indexBase.y &&
            middleTip.y > middleBase.y &&
            ringTip.y > ringBase.y &&
            pinkyTip.y > pinkyBase.y;
        if (isFist) {
            detectedGesture = "Fist";
        }

        // V Gesture (Peace)
        const isVGesture =
            !detectedGesture &&
            indexTip.y < indexBase.y &&
            middleTip.y < middleBase.y &&
            ringTip.y > ringBase.y &&
            pinkyTip.y > pinkyBase.y;
        if (isVGesture) {
            detectedGesture = "V Gesture (Peace)";
        }

        // Hello (Open palm raised)
        const isHello =
            !detectedGesture &&
            thumbTip.y < thumbBase.y &&
            indexTip.y < indexBase.y &&
            middleTip.y < middleBase.y &&
            ringTip.y < ringBase.y &&
            pinkyTip.y < pinkyBase.y &&
            Math.abs(indexTip.x - middleTip.x) > 0.05 &&
            Math.abs(middleTip.x - ringTip.x) > 0.05;
        if (isHello) {
            detectedGesture = "Hello";
        }

        // I Love You (Thumb, index, and pinky raised)
        const isILoveYou =
            !detectedGesture &&
            thumbTip.y < indexBase.y &&
            indexTip.y < middleBase.y &&
            middleTip.y > ringBase.y &&
            ringTip.y > ringBase.y &&
            pinkyTip.y < ringBase.y;
        if (isILoveYou) {
            detectedGesture = "I Love You";
        }
    }

    // Stabilize the gesture to avoid noise
    if (detectedGesture === stableGesture) {
        stabilityCounter++;
    } else {
        stabilityCounter = 0;
        stableGesture = detectedGesture;
    }

    // If the gesture is stable for 3 consecutive frames, add it to the sentence
    if (stabilityCounter >= 3 && stableGesture && !sentence.includes(stableGesture)) {
        sentence = `${stableGesture}! `;
        console.log(`Sentence: ${sentence}`);
        speak(`You said: ${sentence}`);
        stableGesture = ""; // Reset stable gesture after adding it
        stabilityCounter = 0; // Reset stability counter
    }
}




// Cooldown function to enforce delay
function activateCooldown() {
    cooldown = true; // Set cooldown flag
    setTimeout(() => {
        cooldown = false; // Reset cooldown after 500ms
    }, 500); // Adjust this value for desired delay
}


// Text-to-Speech function
function speak(text) {
    const synth = window.speechSynthesis; // Use the browser's built-in SpeechSynthesis API
    const utterance = new SpeechSynthesisUtterance(text); // Create a speech object
    synth.speak(utterance); // Speak the text
}

// Start everything after scripts load
startCamera();