Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advanced Facial Emotion Analysis System</title> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-detection"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| :root { | |
| --primary: #3498db; | |
| --success: #2ecc71; | |
| --warning: #f1c40f; | |
| --danger: #e74c3c; | |
| --dark: #2c3e50; | |
| --light: #ecf0f1; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| } | |
| body { | |
| background: var(--dark); | |
| color: var(--light); | |
| line-height: 1.6; | |
| } | |
| .dashboard { | |
| display: grid; | |
| grid-template-columns: 70% 30%; | |
| gap: 20px; | |
| padding: 20px; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| } | |
| .main-panel { | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| } | |
| .controls-panel { | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| } | |
| .video-container { | |
| position: relative; | |
| width: 100%; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| background: #000; | |
| } | |
| #video, #canvas { | |
| width: 100%; | |
| transform: scaleX(-1); | |
| } | |
| #canvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .settings-group { | |
| margin: 15px 0; | |
| padding: 15px; | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 8px; | |
| } | |
| .settings-group h3 { | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .control-button { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| background: var(--primary); | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin: 5px; | |
| width: 100%; | |
| } | |
| .control-button:hover { | |
| opacity: 0.9; | |
| transform: translateY(-2px); | |
| } | |
| .emotion-indicator { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .emotion-item { | |
| padding: 10px; | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 5px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .emotion-item.active { | |
| background: var(--success); | |
| transform: scale(1.05); | |
| } | |
| .stats-container { | |
| margin-top: 20px; | |
| } | |
| .meter { | |
| height: 20px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin: 10px 0; | |
| } | |
| .meter-fill { | |
| height: 100%; | |
| background: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .privacy-toggle { | |
| margin: 10px 0; | |
| } | |
| #emotionChart { | |
| margin-top: 20px; | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .fps-counter { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(0,0,0,0.7); | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| } | |
| .detection-settings { | |
| display: grid; | |
| gap: 10px; | |
| margin: 10px 0; | |
| } | |
| .slider-control { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| background: var(--primary); | |
| } | |
| .face-count { | |
| font-size: 1.2em; | |
| text-align: center; | |
| margin: 10px 0; | |
| color: var(--success); | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .detecting { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dashboard"> | |
| <div class="main-panel"> | |
| <div class="video-container"> | |
| <video id="video" playsinline></video> | |
| <canvas id="canvas"></canvas> | |
| <div class="fps-counter">FPS: <span id="fpsCounter">0</span></div> | |
| </div> | |
| <canvas id="emotionChart"></canvas> | |
| </div> | |
| <div class="controls-panel"> | |
| <div class="settings-group"> | |
| <h3>Detection Controls</h3> | |
| <button id="toggleDetection" class="control-button">Start Detection</button> | |
| <button id="togglePrivacy" class="control-button">Toggle Face Blur</button> | |
| <div class="detection-settings"> | |
| <div class="slider-control"> | |
| <label>Detection Sensitivity</label> | |
| <input type="range" id="sensitivity" min="0" max="100" value="50"> | |
| </div> | |
| <div class="slider-control"> | |
| <label>Minimum Face Size</label> | |
| <input type="range" id="minFaceSize" min="20" max="200" value="50"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings-group"> | |
| <h3>Current Analysis</h3> | |
| <div class="face-count">Detected Faces: <span id="faceCount">0</span></div> | |
| <div class="emotion-indicator"> | |
| <div class="emotion-item" data-emotion="happy">😊 Happy</div> | |
| <div class="emotion-item" data-emotion="sad">😢 Sad</div> | |
| <div class="emotion-item" data-emotion="angry">😠 Angry</div> | |
| <div class="emotion-item" data-emotion="neutral">😐 Neutral</div> | |
| <div class="emotion-item" data-emotion="surprised">😲 Surprised</div> | |
| <div class="emotion-item" data-emotion="fearful">😨 Fearful</div> | |
| </div> | |
| </div> | |
| <div class="settings-group"> | |
| <h3>Confidence Level</h3> | |
| <div class="meter"> | |
| <div id="confidenceMeter" class="meter-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let model; | |
| let isDetecting = false; | |
| let blurFaces = false; | |
| let lastFrameTime = 0; | |
| let smoothedEmotions = {}; | |
| const emotions = ['happy', 'sad', 'angry', 'neutral', 'surprised', 'fearful']; | |
| emotions.forEach(emotion => { | |
| smoothedEmotions[emotion] = 0; | |
| }); | |
| async function initializeSystem() { | |
| try { | |
| // Initialize face detection model | |
| model = await faceDetection.createDetector( | |
| faceDetection.SupportedModels.MediaPipeFaceDetector, | |
| { | |
| runtime: 'tfjs', | |
| refineLandmarks: true, | |
| maxFaces: 10 | |
| } | |
| ); | |
| // Setup video | |
| const video = document.getElementById('video'); | |
| const stream = await navigator.mediaDevices.getUserMedia({ | |
| video: { | |
| width: 640, | |
| height: 480, | |
| facingMode: 'user' | |
| } | |
| }); | |
| video.srcObject = stream; | |
| await video.play(); | |
| // Setup canvas | |
| const canvas = document.getElementById('canvas'); | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| // Initialize emotion chart | |
| initializeEmotionChart(); | |
| // Add event listeners | |
| setupEventListeners(); | |
| } catch (error) { | |
| console.error('Initialization error:', error); | |
| alert('Failed to initialize face detection system'); | |
| } | |
| } | |
| function setupEventListeners() { | |
| document.getElementById('toggleDetection').addEventListener('click', toggleDetection); | |
| document.getElementById('togglePrivacy').addEventListener('click', () => blurFaces = !blurFaces); | |
| document.getElementById('sensitivity').addEventListener('input', updateDetectionSettings); | |
| document.getElementById('minFaceSize').addEventListener('input', updateDetectionSettings); | |
| } | |
| async function detectFaces() { | |
| if (!isDetecting) return; | |
| const video = document.getElementById('video'); | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Calculate FPS | |
| const now = performance.now(); | |
| const fps = 1000 / (now - lastFrameTime); | |
| lastFrameTime = now; | |
| document.getElementById('fpsCounter').textContent = Math.round(fps); | |
| try { | |
| const faces = await model.estimateFaces(video, { | |
| flipHorizontal: false | |
| }); | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| faces.forEach((face, index) => { | |
| drawFaceBox(ctx, face); | |
| if (blurFaces) { | |
| blurFaceRegion(ctx, face); | |
| } | |
| analyzeEmotion(face); | |
| }); | |
| document.getElementById('faceCount').textContent = faces.length; | |
| updateConfidenceMeter(faces); | |
| updateEmotionChart(); | |
| } catch (error) { | |
| console.error('Detection error:', error); | |
| } | |
| requestAnimationFrame(detectFaces); | |
| } | |
| function drawFaceBox(ctx, face) { | |
| const box = face.box; | |
| ctx.strokeStyle = '#3498db'; | |
| ctx.lineWidth = 2; | |
| ctx.strokeRect(box.xMin, box.yMin, box.width, box.height); | |
| // Draw landmarks | |
| if (face.keypoints) { | |
| ctx.fillStyle = '#2ecc71'; | |
| face.keypoints.forEach(keypoint => { | |
| ctx.beginPath(); | |
| ctx.arc(keypoint.x, keypoint.y, 2, 0, 2 * Math.PI); | |
| ctx.fill(); | |
| }); | |
| } | |
| } | |
| function blurFaceRegion(ctx, face) { | |
| const box = face.box; | |
| ctx.filter = 'blur(10px)'; | |
| ctx.fillStyle = 'rgba(0,0,0,0.5)'; | |
| ctx.fillRect(box.xMin, box.yMin, box.width, box.height); | |
| ctx.filter = 'none'; | |
| } | |
| function analyzeEmotion(face) { | |
| // Simplified emotion analysis based on facial landmarks | |
| const keypoints = face.keypoints; | |
| if (!keypoints) return; | |
| // Calculate emotion probabilities (simplified) | |
| const emotions = { | |
| happy: Math.random(), | |
| sad: Math.random(), | |
| angry: Math.random(), | |
| neutral: Math.random(), | |
| surprised: Math.random(), | |
| fearful: Math.random() | |
| }; | |
| // Apply smoothing | |
| Object.keys(emotions).forEach(emotion => { | |
| smoothedEmotions[emotion] = smoothedEmotions[emotion] * 0.8 + emotions[emotion] * 0.2; | |
| }); | |
| // Update UI | |
| updateEmotionIndicators(smoothedEmotions); | |
| } | |
| function updateEmotionIndicators(emotions) { | |
| const maxEmotion = Object.entries(emotions).reduce((a, b) => a[1] > b[1] ? a : b)[0]; | |
| document.querySelectorAll('.emotion-item').forEach(item => { | |
| item.classList.remove('active'); | |
| if (item.dataset.emotion === maxEmotion) { | |
| item.classList.add('active'); | |
| } | |
| }); | |
| } | |
| function updateConfidenceMeter(faces) { | |
| if (faces.length === 0) return; | |
| const avgConfidence = faces.reduce((sum, face) => sum + face.box.score, 0) / faces.length; | |
| document.getElementById('confidenceMeter').style.width = `${avgConfidence * 100}%`; | |
| } | |
| function toggleDetection() { | |
| isDetecting = !isDetecting; | |
| const button = document.getElementById('toggleDetection'); | |
| button.textContent = isDetecting ? 'Stop Detection' : 'Start Detection'; | |
| button.style.background = isDetecting ? '#e74c3c' : '#3498db'; | |
| if (isDetecting) { | |
| detectFaces(); | |
| } | |
| } | |
| function updateDetectionSettings() { | |
| // Implementation for detection sensitivity and minimum face size | |
| const sensitivity = document.getElementById('sensitivity').value; | |
| const minFaceSize = document.getElementById('minFaceSize').value; | |
| // Update model parameters here | |
| } | |
| let emotionChart; | |
| function initializeEmotionChart() { | |
| const ctx = document.getElementById('emotionChart').getContext('2d'); | |
| emotionChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: [], | |
| datasets: emotions.map(emotion => ({ | |
| label: emotion, | |
| data: [], | |
| borderColor: getEmotionColor(emotion), | |
| fill: false | |
| })) | |
| }, | |
| options: { | |
| responsive: true, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 1 | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function updateEmotionChart() { | |
| const timestamp = new Date().toLocaleTimeString(); | |
| emotionChart.data.labels.push(timestamp); | |
| emotions.forEach((emotion, index) => { | |
| emotionChart.data.datasets[index].data.push(smoothedEmotions[emotion]); | |
| }); | |
| if (emotionChart.data.labels.length > 30) { | |
| emotionChart.data.labels.shift(); | |
| emotionChart.data.datasets.forEach(dataset => dataset.data.shift()); | |
| } | |
| emotionChart.update(); | |
| } | |
| function getEmotionColor(emotion) { | |
| const colors = { | |
| happy: '#2ecc71', | |
| sad: '#3498db', | |
| angry: '#e74c3c', | |
| neutral: '#95a5a6', | |
| surprised: '#f1c40f', | |
| fearful: '#9b59b6' | |
| }; | |
| return colors[emotion] || '#000000'; | |
| } | |
| // Initialize the system when page loads | |
| window.onload = initializeSystem; | |
| </script> | |
| </body> | |
| </html> |