Create script.js

script.js

@@ -0,0 +1,156 @@
+// const URL = "https://teachablemachine.withgoogle.com/models/uYk-wIQy6/";
+const URL = "https://teachablemachine.withgoogle.com/models/DTgj24KYa/";
+
+let model, webcam, ctx, labelContainer, maxPredictions;
+let isInitialized = false;
+
+// Wait for libraries to load
+function waitForLibraries() {
+    return new Promise((resolve) => {
+        const checkLibraries = () => {
+            if (typeof tmPose !== 'undefined' && typeof tf !== 'undefined') {
+                resolve();
+            } else {
+                setTimeout(checkLibraries, 100);
+            }
+        };
+        checkLibraries();
+    });
+}
+
+async function init() {
+    if (isInitialized) return;
+
+    // First, wait for libraries to load
+    await waitForLibraries();
+
+    const startBtn = document.getElementById('startBtn');
+    const statusIndicator = document.getElementById('statusIndicator');
+    const loadingSpinner = document.getElementById('loadingSpinner');
+
+    // Display loading status
+    startBtn.innerHTML = '🔄 Loading...';
+    startBtn.disabled = true;
+    loadingSpinner.style.display = 'block';
+
+    try {
+        const modelURL = URL + "model.json";
+        const metadataURL = URL + "metadata.json";
+
+        model = await tmPose.load(modelURL, metadataURL);
+        maxPredictions = model.getTotalClasses();
+
+        const size = 300;
+        const flip = true;
+        webcam = new tmPose.Webcam(size, size, flip);
+        await webcam.setup();
+        await webcam.play();
+
+        window.requestAnimationFrame(loop);
+
+        const canvas = document.getElementById("canvas");
+        canvas.width = size;
+        canvas.height = size;
+        ctx = canvas.getContext("2d");
+        labelContainer = document.getElementById("label-container");
+        labelContainer.innerHTML = '';
+
+        for (let i = 0; i < maxPredictions; i++) {
+            const div = document.createElement("div");
+            div.className = "prediction-item";
+            div.innerHTML = '<div class="prediction-text">Loading...</div>';
+            labelContainer.appendChild(div);
+        }
+
+        // Update UI status
+        startBtn.innerHTML = '✅ Detecting...';
+        statusIndicator.classList.add('active');
+        loadingSpinner.style.display = 'none';
+        isInitialized = true;
+
+    } catch (error) {
+        console.error('Initialization failed:', error);
+        startBtn.innerHTML = '❌ Load Failed, Retry';
+        startBtn.disabled = false;
+        loadingSpinner.style.display = 'none';
+    }
+}
+
+async function loop(timestamp) {
+    if (webcam) {
+        webcam.update();
+        await predict();
+        window.requestAnimationFrame(loop);
+    }
+}
+
+async function predict() {
+    try {
+        const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
+        const prediction = await model.predict(posenetOutput);
+
+        for (let i = 0; i < maxPredictions; i++) {
+            const probability = (prediction[i].probability * 100).toFixed(1);
+            const className = prediction[i].className;
+
+            // Add emojis and better formatting
+            let emoji = '🏀';
+            if (probability > 80) emoji = '🔥';
+            else if (probability > 60) emoji = '⭐';
+            else if (probability > 40) emoji = '👍';
+
+            const predictionText = `${emoji} ${className}: ${probability}%`;
+
+            const predictionElement = labelContainer.childNodes[i];
+            if (predictionElement) {
+                predictionElement.querySelector('.prediction-text').innerHTML = predictionText;
+
+                // Add dynamic styling
+                const confidence = parseFloat(probability);
+                if (confidence > 50) {
+                    predictionElement.style.borderLeftColor = '#44ff44';
+                    predictionElement.style.background = 'rgba(68, 255, 68, 0.1)';
+                } else if (confidence > 30) {
+                    predictionElement.style.borderLeftColor = '#ffd700';
+                    predictionElement.style.background = 'rgba(255, 215, 0, 0.1)';
+                } else {
+                    predictionElement.style.borderLeftColor = '#ff6b35';
+                    predictionElement.style.background = 'rgba(255, 107, 53, 0.1)';
+                }
+            }
+        }
+
+        drawPose(pose);
+    } catch (error) {
+        console.error('Prediction error:', error);
+    }
+}
+
+function drawPose(pose) {
+    if (webcam && webcam.canvas && ctx) {
+        ctx.drawImage(webcam.canvas, 0, 0);
+        if (pose) {
+            const minPartConfidence = 0.5;
+            tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
+            tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
+        }
+    }
+}
+
+// Check if libraries are loaded after page load
+window.addEventListener('load', async function() {
+    try {
+        await waitForLibraries();
+        console.log('🏀 NBA Pose Detector Ready!');
+
+        // Display ready status
+        const startBtn = document.getElementById('startBtn');
+        startBtn.innerHTML = '🚀 Start Detection';
+        startBtn.style.opacity = '1';
+    } catch (error) {
+        console.error('Library load failed:', error);
+        const startBtn = document.getElementById('startBtn');
+        startBtn.innerHTML = '❌ Load Failed';
+        startBtn.disabled = true;
+    }
+});