Spaces:

manmohanai
/

faceimotion

Running

App Files Files Community

manmohanai commited on Jul 24, 2025

Commit

25653a8

verified ·

1 Parent(s): 3b9c83f

I am not seing my video - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +164 -87

index.html CHANGED Viewed

@@ -11,22 +11,12 @@
             position: relative;
             width: 100%;
             max-width: 640px;
             margin: 0 auto;
             border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-        }
-        .emotion-badge {
-            position: absolute;
-            padding: 4px 8px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: bold;
-            color: white;
-            background-color: rgba(0, 0, 0, 0.7);
-            transform: translate(-50%, -50%);
-            white-space: nowrap;
         }
         .loading-spinner {
@@ -54,6 +44,8 @@
 </head>
 <body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
         <div class="text-center mb-8">
             <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Emotion Detection Camera</h1>
             <p class="text-gray-600 max-w-lg mx-auto">Take a photo and our AI will detect your facial expressions and emotions in real-time.</p>
@@ -66,7 +58,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"></video>
                 <canvas id="canvas" class="absolute top-0 left-0 w-full h-full hidden"></canvas>
             </div>
@@ -113,9 +105,34 @@
             </div>
         </div>
-        <div class="mt-8 text-center text-gray-500 text-sm">
-            <p>This app uses face-api.js for emotion detection. All processing happens in your browser.</p>
         </div>
     </div>
     <script>
@@ -140,6 +157,10 @@
             statusElement.classList.remove('hidden');
             try {
                 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'),
@@ -178,9 +199,6 @@
                 video.srcObject = stream;
                 video.onloadedmetadata = () => {
                     video.play();
-                    if (!isCaptured) {
-                        detectEmotions();
-                    }
                 };
             } catch (error) {
                 console.error("Camera error:", error);
@@ -188,73 +206,6 @@
             }
         }
-        // Detect emotions in real-time
-        async function detectEmotions() {
-            if (isCaptured) return;
-            const detection = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
-                .withFaceLandmarks()
-                .withFaceExpressions();
-            // 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);
-                // Display emotion badges
-                Object.entries(expressions).forEach(([emotion, value]) => {
-                    if (value > 0.1) { // Only show emotions with > 10% confidence
-                        const landmarkPoint = resizedDetections.landmarks.getNose()[3];
-                        const position = {
-                            x: landmarkPoint.x + (Math.random() * 40 - 20),
-                            y: landmarkPoint.y - 50 - (Math.random() * 30)
-                        };
-                        const badge = document.createElement('div');
-                        badge.className = 'emotion-badge';
-                        badge.style.left = `${position.x}px`;
-                        badge.style.top = `${position.y}px`;
-                        badge.textContent = `${emotion}: ${Math.round(value * 100)}%`;
-                        document.getElementById('cameraView').appendChild(badge);
-                        // Remove badge after animation
-                        setTimeout(() => {
-                            badge.remove();
-                        }, 1000);
-                    }
-                });
-            }
-            // Schedule next detection
-            setTimeout(() => detectEmotions(), 300);
-        }
         // Capture photo and analyze emotions
         captureBtn.addEventListener('click', async () => {
@@ -308,6 +259,14 @@
                 resultsElement.classList.remove('hidden');
                 resetBtn.classList.remove('hidden');
             } else {
                 alert("No face detected in the captured image. Please try again.");
                 resetApp();
@@ -336,10 +295,18 @@
             const context = canvas.getContext('2d');
             context.clearRect(0, 0, canvas.width, canvas.height);
-            // Restart emotion detection
-            detectEmotions();
         }
         // Helper functions
         function capitalizeFirstLetter(string) {
             return string.charAt(0).toUpperCase() + string.slice(1);
@@ -353,6 +320,116 @@
             return "Very Low";
         }
         // Initialize the app
         document.addEventListener('DOMContentLoaded', init);
     </script>

             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 {
 </head>
 <body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <div class="lg:w-2/3">
         <div class="text-center mb-8">
             <h1 class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2">Emotion Detection Camera</h1>
             <p class="text-gray-600 max-w-lg mx-auto">Take a photo and our AI will detect your facial expressions and emotions in real-time.</p>
             </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>
                 <canvas id="canvas" class="absolute top-0 left-0 w-full h-full hidden"></canvas>
             </div>
             </div>
         </div>
+            </div> <!-- End of video content -->
+            <!-- Emotion Suggestions Sidebar -->
+            <div class="lg:w-1/3 bg-white rounded-xl shadow-lg p-6 sticky top-8">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-semibold text-indigo-700">Emotion Tips</h3>
+                <button id="muteBtn" class="text-gray-500 hover:text-indigo-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                    </svg>
+                </button>
+            </div>
+            <div id="emotionSuggestions" class="space-y-4">
+                <div class="text-center py-8 text-gray-400">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <p>Face the camera to get personalized suggestions!</p>
+                </div>
+            </div>
         </div>
+    </div> <!-- End of container -->
+        </div> <!-- End of flex container -->
+    </div> <!-- End of main container -->
+    <div class="mt-8 text-center text-gray-500 text-sm">
+        <p>This app uses face-api.js for emotion detection. All processing happens in your browser.</p>
     </div>
     <script>
             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'),
                 video.srcObject = stream;
                 video.onloadedmetadata = () => {
                     video.play();
                 };
             } catch (error) {
                 console.error("Camera error:", error);
             }
         }
         // Capture photo and analyze emotions
         captureBtn.addEventListener('click', async () => {
                 resultsElement.classList.remove('hidden');
                 resetBtn.classList.remove('hidden');
+                // 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.`);
             } else {
                 alert("No face detected in the captured image. Please try again.");
                 resetApp();
             const context = canvas.getContext('2d');
             context.clearRect(0, 0, canvas.width, canvas.height);
         }
+        // Speech synthesis
+        function speak(text) {
+            if ('speechSynthesis' in window && !isMuted) {
+                speechSynthesis.cancel(); // Cancel any previous speech
+                const utterance = new SpeechSynthesisUtterance(text);
+                utterance.rate = 0.9;
+                speechSynthesis.speak(utterance);
+            }
+        }
         // Helper functions
         function capitalizeFirstLetter(string) {
             return string.charAt(0).toUpperCase() + string.slice(1);
             return "Very Low";
         }
+        // Emotion-based suggestions
+        const emotionTips = {
+            happy: [
+                "Your smile is contagious! Keep spreading joy!",
+                "Try doing something creative today - paint, write, or dance!",
+                "Share your happiness with someone who needs it today."
+            ],
+            sad: [
+                "Why did the sad computer apply for a job? It had too many bytes of emotional baggage!",
+                "Remember: This too shall pass. You've got this!",
+                "Try listening to uplifting music or calling a friend."
+            ],
+            angry: [
+                "Take 5 deep breaths - in through the nose, out through the mouth.",
+                "Try squeezing a stress ball or going for a quick walk.",
+                "Write down what's bothering you, then tear it up!"
+            ],
+            surprised: [
+                "Did you know? The average person is surprised 3 times a day!",
+                "Embrace the unexpected - it keeps life interesting!",
+                "Try something new today to keep that surprised look going!"
+            ],
+            fearful: [
+                "Face your fears one small step at a time - you're stronger than you think!",
+                "Try the 5-4-3-2-1 grounding technique: Name 5 things you can see, 4 you can touch, etc.",
+                "Remember: Courage isn't the absence of fear, but acting despite it."
+            ],
+            disgusted: [
+                "Eww, what's that face for? Try thinking of your favorite food instead!",
+                "When life gives you lemons... make sure they're not rotten first!",
+                "Change your environment - go somewhere pleasant to reset your mood."
+            ],
+            neutral: [
+                "Feeling balanced? Perfect time for mindfulness meditation!",
+                "Try a new facial expression - how about a smile?",
+                "Your calm demeanor is your superpower today."
+            ]
+        };
+        function updateEmotionSuggestions(expressions) {
+            const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b)[0];
+            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)];
+            suggestionsContainer.innerHTML = `
+                <div class="bg-indigo-50 rounded-lg p-4">
+                    <div class="flex items-center gap-3 mb-3">
+                        <div class="bg-indigo-100 p-2 rounded-full">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+                        <h4 class="font-medium text-indigo-700">${capitalizeFirstLetter(primaryEmotion)} Detected</h4>
+                    </div>
+                    <p class="text-gray-700">${randomTip}</p>
+                </div>
+                <div class="bg-gray-50 rounded-lg p-4">
+                    <h4 class="font-medium text-gray-700 mb-2">Quick Mood Boosters</h4>
+                    <ul class="space-y-2 text-sm text-gray-600">
+                        <li class="flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            Take 3 deep breaths
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            Drink some water
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            Stretch your body
+                        </li>
+                    </ul>
+                </div>
+            `;
+        }
+        // Mute button functionality
+        const muteBtn = document.getElementById('muteBtn');
+        let isMuted = false;
+        muteBtn.addEventListener('click', () => {
+            isMuted = !isMuted;
+            if (isMuted) {
+                muteBtn.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
+                    </svg>
+                `;
+                speechSynthesis.cancel();
+            } else {
+                muteBtn.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                    </svg>
+                `;
+            }
+        });
         // Initialize the app
         document.addEventListener('DOMContentLoaded', init);
     </script>