Spaces:

manmohanai
/

faceimotion

Running

App Files Files Community

manmohanai commited on Jul 24, 2025

Commit

f4d08d3

verified ·

1 Parent(s): 6c6f592

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +360 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Faceimotion
-emoji: 🌍
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: faceimotion
+emoji: 🐳
+colorFrom: gray
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,360 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emotion Detection Camera</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
+    <style>
+        .camera-container {
+            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 {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid #4f46e5;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .face-box {
+            position: absolute;
+            border: 2px solid #4f46e5;
+            border-radius: 4px;
+            background-color: rgba(79, 70, 229, 0.1);
+        }
+    </style>
+</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>
+        </div>
+        <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
+            <div id="status" class="text-center py-4 hidden">
+                <div class="loading-spinner"></div>
+                <p class="mt-2 text-gray-600">Loading models...</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"></video>
+                <canvas id="canvas" class="absolute top-0 left-0 w-full h-full hidden"></canvas>
+            </div>
+            <div class="flex flex-wrap justify-center gap-4 mt-6">
+                <button id="captureBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-all">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
+                    </svg>
+                    Capture Photo
+                </button>
+                <button id="switchCameraBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-all">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v8a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z" />
+                    </svg>
+                    Switch Camera
+                </button>
+                <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-all hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
+                    </svg>
+                    Reset
+                </button>
+            </div>
+            <div id="results" class="mt-8 hidden">
+                <h3 class="text-xl font-semibold text-gray-800 mb-4">Emotion Analysis</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h4 class="font-medium text-gray-700 mb-2">Primary Emotion</h4>
+                        <div id="primaryEmotion" class="bg-indigo-50 text-indigo-800 px-4 py-3 rounded-lg font-medium"></div>
+                    </div>
+                    <div>
+                        <h4 class="font-medium text-gray-700 mb-2">Confidence Level</h4>
+                        <div id="confidenceLevel" class="bg-indigo-50 text-indigo-800 px-4 py-3 rounded-lg font-medium"></div>
+                    </div>
+                </div>
+                <div class="mt-6">
+                    <h4 class="font-medium text-gray-700 mb-2">Detailed Breakdown</h4>
+                    <div id="emotionDetails" class="space-y-2"></div>
+                </div>
+            </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>
+        // DOM Elements
+        const video = document.getElementById('video');
+        const canvas = document.getElementById('canvas');
+        const captureBtn = document.getElementById('captureBtn');
+        const switchCameraBtn = document.getElementById('switchCameraBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const statusElement = document.getElementById('status');
+        const resultsElement = document.getElementById('results');
+        const primaryEmotionElement = document.getElementById('primaryEmotion');
+        const confidenceLevelElement = document.getElementById('confidenceLevel');
+        const emotionDetailsElement = document.getElementById('emotionDetails');
+        let stream = null;
+        let currentFacingMode = 'user'; // 'user' for front camera, 'environment' for back
+        let isCaptured = false;
+        // Load models and start camera
+        async function init() {
+            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'),
+                    faceapi.nets.faceRecognitionNet.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models'),
+                    faceapi.nets.faceExpressionNet.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models')
+                ]);
+                statusElement.classList.add('hidden');
+                startCamera();
+            } catch (error) {
+                statusElement.innerHTML = `
+                    <div class="bg-red-50 text-red-600 p-4 rounded-lg">
+                        <p>Failed to load models. Please refresh the page or check your internet connection.</p>
+                    </div>
+                `;
+                console.error(error);
+            }
+        }
+        // Start camera with selected facing mode
+        async function startCamera() {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+            }
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({
+                    video: {
+                        facingMode: currentFacingMode,
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 }
+                    },
+                    audio: false
+                });
+                video.srcObject = stream;
+                video.onloadedmetadata = () => {
+                    video.play();
+                    if (!isCaptured) {
+                        detectEmotions();
+                    }
+                };
+            } catch (error) {
+                console.error("Camera error:", error);
+                alert("Could not access the camera. Please make sure you've granted camera permissions.");
+            }
+        }
+        // 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 () => {
+            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 (detection) {
+                const expressions = detection.expressions;
+                const primaryEmotion = Object.entries(expressions).reduce((a, b) => a[1] > b[1] ? a : b);
+                // Display results
+                primaryEmotionElement.textContent = `${capitalizeFirstLetter(primaryEmotion[0])} (${Math.round(primaryEmotion[1] * 100)}%)`;
+                confidenceLevelElement.textContent = getConfidenceLevel(primaryEmotion[1]);
+                // Create detailed breakdown
+                emotionDetailsElement.innerHTML = '';
+                Object.entries(expressions)
+                    .sort((a, b) => b[1] - a[1])
+                    .forEach(([emotion, value]) => {
+                        const percentage = Math.round(value * 100);
+                        const emotionItem = document.createElement('div');
+                        emotionItem.className = 'bg-gray-50 p-3 rounded-lg';
+                        emotionItem.innerHTML = `
+                            <div class="flex justify-between items-center">
+                                <span class="font-medium">${capitalizeFirstLetter(emotion)}</span>
+                                <span class="text-gray-600">${percentage}%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
+                                <div class="bg-indigo-500 h-2 rounded-full" style="width: ${percentage}%"></div>
+                            </div>
+                        `;
+                        emotionDetailsElement.appendChild(emotionItem);
+                    });
+                resultsElement.classList.remove('hidden');
+                resetBtn.classList.remove('hidden');
+            } else {
+                alert("No face detected in the captured image. Please try again.");
+                resetApp();
+            }
+            captureBtn.disabled = false;
+        });
+        // Switch between front and back camera
+        switchCameraBtn.addEventListener('click', () => {
+            currentFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
+            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();
+        }
+        // Helper functions
+        function capitalizeFirstLetter(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+        function getConfidenceLevel(confidence) {
+            if (confidence > 0.8) return "Very High";
+            if (confidence > 0.6) return "High";
+            if (confidence > 0.4) return "Moderate";
+            if (confidence > 0.2) return "Low";
+            return "Very Low";
+        }
+        // Initialize the app
+        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>