// Cloned by Vanisri on 29 Nov 2024 from World "TensorFlow Hand Gesture Detection" by chandralekha 
// Please leave this clone trail here.
 
//Coded by Vanisri Kirubakaran

const tensorflowScript = document.createElement('script');
tensorflowScript.src = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs';
tensorflowScript.onload = () => {
    console.log('Tensor Flow library loaded successfully!');
};
document.head.appendChild(tensorflowScript);

const tensorflowScript2 = document.createElement('script');
tensorflowScript2.src = 'https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose';
tensorflowScript2.onload = () => {
    console.log('Tensor Flow library2 loaded successfully!');
};
document.head.appendChild(tensorflowScript2);



document.write(`<h1>Hand Gesture Detection (TensorFlow)</h1>
<p>
                This world uses tensorflow to detect the following hand gestures:</p>
               <p> 1. Thumbs Up <img border=1 src="/uploads/starter/lamborghini.1963.jpg"></p>
                <p>2. V(Peace)</p>
                <p>3. I Love You</p>
                <p>4. No</p>
                5. Thumbs Down.</p>
                <p>[Refresh The Page Incase You Don't See Two Canvas and Wait Few Seconds]</p>
            </p>
    <video id="webcam" autoplay muted playsinline style="width: 640px; height: 480px;"></video>
    <canvas id="tensorflowCanvas" style="position: absolute; top: 500px; left: 10px; width: 640px; height: 480px;"></canvas>
    
    <img border=1 src="/uploads/starter/lamborghini.1963.jpg">
    
    `);





let handposeModel; // TensorFlow model
const tensorflowCanvas = document.getElementById('tensorflowCanvas');
const tensorflowCtx = tensorflowCanvas.getContext('2d');

// Initialize TensorFlow Handpose
async function initializeTensorFlow() {
    handposeModel = await handpose.load();
    console.log('TensorFlow Handpose model loaded.');
}

// Process frame using TensorFlow
async function processTensorFlow(videoElement) {
    if (handposeModel) {
        const predictions = await handposeModel.estimateHands(videoElement);
        tensorflowCtx.clearRect(0, 0, tensorflowCanvas.width, tensorflowCanvas.height);
        tensorflowCtx.drawImage(videoElement, 0, 0, tensorflowCanvas.width, tensorflowCanvas.height);
        let gesture = "No Gesture";
        if (predictions.length > 0) {
            predictions.forEach((prediction) => {
                drawHand(prediction.landmarks, tensorflowCtx, "blue");
                gesture = detectGestureFromTensorFlow(prediction.landmarks);
            });
        }
        displayText(tensorflowCtx, gesture, 10, 40, "blue");
    }
    requestAnimationFrame(() => processTensorFlow(videoElement));
}

// Utility function to draw hand landmarks
function drawHand(landmarks, ctx, color) {
    ctx.fillStyle = color;
    landmarks.forEach(([x, y]) => {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
    });
}

// Utility function to display text
function displayText(ctx, text, x, y, color) {
    ctx.font = "20px Arial";
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
}

// Detect gestures for TensorFlow landmarks
function detectGestureFromTensorFlow(landmarks) {
    const thumbTip = landmarks[4];
    const indexTip = landmarks[8];
    const middleTip = landmarks[12];
    const ringTip = landmarks[16];
    const pinkyTip = landmarks[20];

    const thumbBase = landmarks[2];
    const indexBase = landmarks[5];
    const middleBase = landmarks[9];
    const ringBase = landmarks[13];
    const pinkyBase = landmarks[17];

    // Thumbs Up
    if (thumbTip[1] < indexTip[1] && thumbTip[1] < middleTip[1]) {
        return "Thumbs Up";
    }

    // Peace Gesture
    if (
        indexTip[1] < ringTip[1] && indexTip[1] < pinkyTip[1] &&
        middleTip[1] < ringTip[1] && middleTip[1] < pinkyTip[1] &&
        ringTip[1] > indexTip[1] && pinkyTip[1] > indexTip[1]
    ) {
        return "Peace";
    }

    // I Love You Gesture
    if (
        thumbTip[1] < middleBase[1] &&
        indexTip[1] < middleBase[1] &&
        middleTip[1] > middleBase[1] &&
        ringTip[1] > ringBase[1] &&
        pinkyTip[1] < ringBase[1]
    ) {
        return "I Love You";
    }

    // No Gesture (Flat Hand)
    if (
        thumbTip[1] < thumbBase[1] &&
        indexTip[1] < indexBase[1] &&
        middleTip[1] < middleBase[1] &&
        ringTip[1] < ringBase[1] &&
        pinkyTip[1] < pinkyBase[1]
    ) {
        return "NO";
    }

    // Thumbs Down
    if (thumbTip[1] > indexTip[1] && thumbTip[1] > middleTip[1]) {
        return "Thumbs Down";
    }
    return "No Gesture";
}

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

// Start camera and TensorFlow processing
async function startCamera() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoElement.srcObject = stream;

    initializeTensorFlow();

    // Start TensorFlow processing
    processTensorFlow(videoElement);
}

// Start the system
startCamera();