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

index.html

@@ -29,6 +29,21 @@
             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); }
@@ -186,6 +201,9 @@
                 stream.getTracks().forEach(track => track.stop());
             }
             
+            const cameraStatus = document.getElementById('cameraStatus');
+            cameraStatus.classList.remove('hidden');
+            
             try {
                 stream = await navigator.mediaDevices.getUserMedia({
                     video: {
@@ -195,6 +213,7 @@
                     },
                     audio: false
                 });
+                cameraStatus.classList.add('hidden');
                 
                 video.srcObject = stream;
                 video.onloadedmetadata = () => {
@@ -209,39 +228,39 @@
                 
             } 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 access denied. Please allow camera permissions and refresh the page.</p>
+                        <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>
                 `;
             }
         }
         
         
-        // Capture photo and analyze emotions
-        captureBtn.addEventListener('click', async () => {
-            if (isCaptured) return;
-            
-            isCaptured = true;
-            captureBtn.disabled = true;
+        // Continuous face detection
+        async function detectFaces() {
+            if (video.paused || video.ended) return;
             
-            // 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())
+            const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
                 .withFaceLandmarks()
                 .withFaceExpressions();
             
-            if (detection) {
-                const expressions = detection.expressions;
+            // Clear previous face boxes
+            document.querySelectorAll('.face-box').forEach(el => el.remove());
+            
+            if (detections.length > 0) {
+                // Update results with first face detected
+                const expressions = detections[0].expressions;
                 const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b);
                 
                 // Display results
@@ -269,22 +288,30 @@
                     });
                 
                 resultsElement.classList.remove('hidden');
-                resetBtn.classList.remove('hidden');
+                updateEmotionSuggestions(expressions);
                 
-                // Voice out the emotion tips
-                const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b)[0];
-                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}. Here are some quick mood boosters: Take 3 deep breaths, drink some water, and stretch your body.`);
+                // 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);
+                });
             } else {
-                alert("No face detected in the captured image. Please try again.");
-                resetApp();
+                resultsElement.classList.add('hidden');
             }
             
-            captureBtn.disabled = false;
-        });
+            requestAnimationFrame(detectFaces);
+        }
         
         // Switch between front and back camera
         switchCameraBtn.addEventListener('click', () => {
@@ -292,22 +319,6 @@
             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);
-            
-        }
-        
         // Speech synthesis
         function speak(text) {
             if ('speechSynthesis' in window && !isMuted) {
@@ -442,7 +453,16 @@
         });
 
         // Initialize the app
-        document.addEventListener('DOMContentLoaded', init);
+        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();
+            });
+        });
     </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>