still not working. lets start capturing expression on live video as we were doing before. - Follow Up Deployment

index.html

@@ -11,12 +11,10 @@
             position: relative;
             width: 100%;
             max-width: 640px;
-            height: 480px;
             margin: 0 auto;
             border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-            background-color: #000;
         }
         
         .loading-spinner {
@@ -29,21 +27,6 @@
             margin: 0 auto;
         }
         
-        #cameraStatus {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 10;
-            color: white;
-        }
-        
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -73,7 +56,7 @@
             </div>
             
             <div class="camera-container bg-gray-200 aspect-video relative" id="cameraView">
-                <video id="video" autoplay muted playsinline class="w-full h-full object-cover transform scaleX(-1)"></video>
+                <video id="video" autoplay muted playsinline class="w-full h-full object-cover"></video>
                 <canvas id="canvas" class="absolute top-0 left-0 w-full h-full hidden"></canvas>
             </div>
             
@@ -166,16 +149,14 @@
         let stream = null;
         let currentFacingMode = 'user'; // 'user' for front camera, 'environment' for back
         let isCaptured = false;
+        let isCooldown = false;
+        let cooldownEndTime = 0;
         
         // Load models and start camera
         async function init() {
             statusElement.classList.remove('hidden');
             
             try {
-                // Check camera permissions first
-                if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-                    throw new Error('Camera access not supported or blocked by browser');
-                }
                 await Promise.all([
                     faceapi.nets.tinyFaceDetector.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models'),
                     faceapi.nets.faceLandmark68Net.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models'),
@@ -201,66 +182,120 @@
                 stream.getTracks().forEach(track => track.stop());
             }
             
-            const cameraStatus = document.getElementById('cameraStatus');
-            cameraStatus.classList.remove('hidden');
-            
             try {
                 stream = await navigator.mediaDevices.getUserMedia({
                     video: {
                         facingMode: currentFacingMode,
-                        width: { ideal: 640 },
-                        height: { ideal: 480 }
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 }
                     },
                     audio: false
                 });
-                cameraStatus.classList.add('hidden');
                 
                 video.srcObject = stream;
                 video.onloadedmetadata = () => {
                     video.play();
+                    if (!isCaptured) {
+                        detectEmotions();
+                    }
                 };
-                
-                // Add error listener for the video element
-                video.onerror = () => {
-                    console.error("Video playback error");
-                    alert("Error starting video stream. Please refresh the page.");
-                };
-                
             } catch (error) {
                 console.error("Camera error:", error);
-                cameraStatus.classList.add('hidden');
-                statusElement.innerHTML = `
-                    <div class="bg-red-50 text-red-600 p-4 rounded-lg">
-                        <p>Camera error: ${error.message}</p>
-                        <p class="mt-2">Please check:</p>
-                        <ul class="list-disc pl-5 mt-1 space-y-1">
-                            <li>Camera permissions are allowed</li>
-                            <li>No other app is using the camera</li>
-                            <li>Your device has a working camera</li>
-                        </ul>
-                        <button onclick="window.location.reload()" class="mt-3 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm">
-                            Try Again
-                        </button>
-                    </div>
-                `;
+                alert("Could not access the camera. Please make sure you've granted camera permissions.");
             }
         }
         
-        
-        // Continuous face detection
-        async function detectFaces() {
-            if (video.paused || video.ended) return;
+        // Detect emotions in real-time
+        async function detectEmotions() {
+            if (isCaptured || isCooldown) {
+                // Show remaining cooldown time if active
+                if (isCooldown) {
+                    const remaining = Math.ceil((cooldownEndTime - Date.now()) / 1000);
+                    if (remaining > 0) {
+                        console.log(`Cooldown: ${remaining}s remaining`);
+                    }
+                }
+                return;
+            }
             
-            const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
+            const detection = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
                 .withFaceLandmarks()
                 .withFaceExpressions();
             
-            // Clear previous face boxes
-            document.querySelectorAll('.face-box').forEach(el => el.remove());
+            // Clear previous drawings
+            const canvas = faceapi.createCanvasFromMedia(video);
+            const context = canvas.getContext('2d');
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Resize canvas to match video dimensions
+            faceapi.matchDimensions(canvas, {
+                width: video.clientWidth,
+                height: video.clientHeight
+            });
+            
+            if (detection) {
+                // Draw face detection box
+                const resizedDetections = faceapi.resizeResults(detection, {
+                    width: video.clientWidth,
+                    height: video.clientHeight
+                });
+                
+                // Draw face box
+                const box = resizedDetections.detection.box;
+                const drawBox = new faceapi.draw.DrawBox(box, {
+                    label: `Confidence: ${Math.round(detection.detection.score * 100)}%`
+                });
+                drawBox.draw(canvas);
+                
+                // Draw face landmarks
+                faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
+                
+                // Get dominant emotion
+                const expressions = detection.expressions;
+                const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b);
+                
+            }
+            
+            // Update emotion suggestions
+            if (detection) {
+                updateEmotionSuggestions(detection.expressions);
+                // Start cooldown period
+                isCooldown = true;
+                cooldownEndTime = Date.now() + 10000; // 10 seconds from now
+                setTimeout(() => {
+                    isCooldown = false;
+                    detectEmotions();
+                }, 10000);
+            } else {
+                // Schedule next detection normally if no face detected
+                setTimeout(() => detectEmotions(), 300);
+            }
+        }
+        
+        // Capture photo and analyze emotions
+        captureBtn.addEventListener('click', async () => {
+            if (isCaptured) return;
+            
+            isCaptured = true;
+            captureBtn.disabled = true;
+            
+            // Create canvas from video
+            canvas.width = video.clientWidth;
+            canvas.height = video.clientHeight;
+            const context = canvas.getContext('2d');
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            
+            // Hide video and show canvas
+            video.classList.add('hidden');
+            canvas.classList.remove('hidden');
+            
+            // Analyze the captured image
+            const detection = await faceapi.detectSingleFace(canvas, new faceapi.TinyFaceDetectorOptions())
+                .withFaceLandmarks()
+                .withFaceExpressions();
             
-            if (detections.length > 0) {
-                // Update results with first face detected
-                const expressions = detections[0].expressions;
+            if (detection) {
+                const expressions = detection.expressions;
                 const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b);
                 
                 // Display results
@@ -288,30 +323,14 @@
                     });
                 
                 resultsElement.classList.remove('hidden');
-                updateEmotionSuggestions(expressions);
-                
-                // Draw face boxes on video
-                const displaySize = { width: video.width, height: video.height };
-                const resizedDetections = faceapi.resizeResults(detections, displaySize);
-                
-                resizedDetections.forEach(detection => {
-                    const box = detection.detection.box;
-                    const faceBox = document.createElement('div');
-                    faceBox.className = 'face-box';
-                    Object.assign(faceBox.style, {
-                        width: `${box.width}px`,
-                        height: `${box.height}px`,
-                        left: `${box.x}px`,
-                        top: `${box.y}px`
-                    });
-                    video.parentNode.appendChild(faceBox);
-                });
+                resetBtn.classList.remove('hidden');
             } else {
-                resultsElement.classList.add('hidden');
+                alert("No face detected in the captured image. Please try again.");
+                resetApp();
             }
             
-            requestAnimationFrame(detectFaces);
-        }
+            captureBtn.disabled = false;
+        });
         
         // Switch between front and back camera
         switchCameraBtn.addEventListener('click', () => {
@@ -319,6 +338,24 @@
             startCamera();
         });
         
+        // Reset the app to initial state
+        resetBtn.addEventListener('click', resetApp);
+        
+        function resetApp() {
+            isCaptured = false;
+            video.classList.remove('hidden');
+            canvas.classList.add('hidden');
+            resultsElement.classList.add('hidden');
+            resetBtn.classList.add('hidden');
+            
+            // Clear canvas
+            const context = canvas.getContext('2d');
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Restart emotion detection
+            detectEmotions();
+        }
+        
         // Speech synthesis
         function speak(text) {
             if ('speechSynthesis' in window && !isMuted) {
@@ -342,6 +379,10 @@
             return "Very Low";
         }
         
+        // Track last emotion and values
+        let lastEmotion = null;
+        let lastEmotionValues = {};
+        const EMOTION_CHANGE_THRESHOLD = 0.2; // Minimum change to consider significant
         
         // Emotion-based suggestions
         const emotionTips = {
@@ -384,12 +425,35 @@
 
         function updateEmotionSuggestions(expressions) {
             const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b)[0];
+            
+            // Check if emotion values have changed significantly
+            let hasSignificantChange = false;
+            if (lastEmotionValues) {
+                for (const [emotion, value] of Object.entries(expressions)) {
+                    if (Math.abs(value - (lastEmotionValues[emotion] || 0)) > EMOTION_CHANGE_THRESHOLD) {
+                        hasSignificantChange = true;
+                        break;
+                    }
+                }
+            } else {
+                hasSignificantChange = true; // First detection
+            }
+            
+            // Only update if emotion changed significantly
+            if (!hasSignificantChange && primaryEmotion === lastEmotion) {
+                return;
+            }
+            
+            lastEmotion = primaryEmotion;
+            lastEmotionValues = {...expressions};
+            
             const suggestionsContainer = document.getElementById('emotionSuggestions');
             const tips = emotionTips[primaryEmotion] || [
                 "Your emotions are valid. Take a moment to acknowledge how you feel."
             ];
             
             const randomTip = tips[Math.floor(Math.random() * tips.length)];
+            speak(`You seem ${primaryEmotion}. ${randomTip}`);
             
             suggestionsContainer.innerHTML = `
                 <div class="bg-indigo-50 rounded-lg p-4">
@@ -453,16 +517,7 @@
         });
 
         // Initialize the app
-        document.addEventListener('DOMContentLoaded', async () => {
-            await init();
-            // Start face detection loop once video is playing
-            video.addEventListener('play', () => {
-                // Set video dimensions for face detection
-                video.width = video.videoWidth;
-                video.height = video.videoHeight;
-                detectFaces();
-            });
-        });
+        document.addEventListener('DOMContentLoaded', init);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=manmohanai/faceimotion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>