Spaces:

Denisijcu
/

facial_analyzer

Runtime error

App Files Files Community

Denisijcu commited on Aug 16, 2025

Commit

ff46e56

verified ·

1 Parent(s): 1e79c63

update index

Browse files

Files changed (1) hide show

index.html +610 -0

index.html ADDED Viewed

	@@ -0,0 +1,610 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analizador Facial de Videos de YouTube</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            padding: 40px;
+            max-width: 800px;
+            width: 100%;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        .header h1 {
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 2.5em;
+        }
+        .header p {
+            color: #666;
+            font-size: 1.1em;
+        }
+        .form-group {
+            margin-bottom: 30px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 10px;
+            color: #333;
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            font-size: 1em;
+            transition: border-color 0.3s ease;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 10px;
+            font-size: 1.1em;
+            cursor: pointer;
+            width: 100%;
+            transition: transform 0.3s ease;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+        }
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            margin: 30px 0;
+        }
+        .loading .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .alert {
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 10px;
+            display: none;
+        }
+        .alert.error {
+            background-color: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        .alert.success {
+            background-color: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        .results {
+            display: none;
+            margin-top: 30px;
+        }
+        .results h2 {
+            color: #333;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .metric-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        .metric-card {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 15px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+        }
+        .metric-card h3 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.2em;
+        }
+        .metric-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        .metric-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+        }
+        .metric-label {
+            color: #666;
+            font-weight: 500;
+        }
+        .metric-value {
+            color: #333;
+            font-weight: bold;
+        }
+        .video-info {
+            background: #e3f2fd;
+            padding: 20px;
+            border-radius: 15px;
+            margin-bottom: 20px;
+        }
+        .video-info h3 {
+            color: #1976d2;
+            margin-bottom: 10px;
+        }
+        .video-title {
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 5px;
+        }
+        .video-player {
+            display: none;
+            margin: 30px 0;
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+        }
+        .video-player h3 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.2em;
+            text-align: center;
+        }
+        .video-player iframe {
+            width: 100%;
+            height: 360px;
+            border-radius: 10px;
+        }
+        @media (max-width: 600px) {
+            .container {
+                padding: 20px;
+            }
+            .header h1 {
+                font-size: 2em;
+            }
+            .metric-grid {
+                grid-template-columns: 1fr;
+            }
+            .video-player iframe {
+                height: 200px;
+            }
+        }
+    </style>
+    <!-- Añadimos Chart.js desde un CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎥 Analizador Facial</h1>
+            <p>Analiza videos de YouTube para obtener métricas de comportamiento facial</p>
+        </div>
+        <form id="analyzeForm">
+            <div class="form-group">
+                <label for="youtube_url">URL del Video de YouTube:</label>
+                <input
+                    type="url"
+                    id="youtube_url"
+                    name="youtube_url"
+                    placeholder="https://www.youtube.com/watch?v=..."
+                    required
+                >
+            </div>
+            <button type="submit" class="btn" id="analyzeBtn">
+                Analizar Video
+            </button>
+            <button type="button" class="btn" id="testBtn" style="margin-top: 10px; background: #28a745;">
+                🔧 Probar Conexión
+            </button>
+        </form>
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>Analizando video... Esto puede tomar varios minutos.</p>
+        </div>
+        <div class="alert" id="alert"></div>
+        <!-- Reproductor de video -->
+        <div class="video-player" id="videoPlayer">
+            <h3>Video Analizado</h3>
+            <iframe id="youtubeIframe" src="" frameborder="0" allowfullscreen></iframe>
+        </div>
+        <!-- Resultados del análisis -->
+        <div class="results" id="results">
+            <h2>📊 Resultados del Análisis</h2>
+            <div class="video-info" id="videoInfo">
+                <h3>Información del Video</h3>
+                <div class="video-title" id="videoTitle"></div>
+                <div id="videoDetails"></div>
+            </div>
+            <div class="metric-grid">
+                <div class="metric-card">
+                    <h3>😊 Análisis de Sonrisas</h3>
+                    <div id="smileMetrics"></div>
+                </div>
+                <div class="metric-card">
+                    <h3>👁️ Análisis de Parpadeos</h3>
+                    <div id="blinkMetrics"></div>
+                </div>
+                <div class="metric-card">
+                    <h3>🎯 Movimiento de Cabeza</h3>
+                    <div id="headMetrics"></div>
+                </div>
+                <!-- Nueva tarjeta para emociones negativas -->
+                <div class="metric-card">
+                    <h3>😡 Emociones Negativas</h3>
+                    <div id="negativeMetrics"></div>
+                </div>
+                <!-- Tarjeta para el gráfico -->
+                <div class="metric-card">
+                    <h3>📈 Resumen de Métricas</h3>
+                    <canvas id="analysisChart"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Botón de prueba de conexión
+        document.getElementById('testBtn').addEventListener('click', async function() {
+            const testBtn = this;
+            const originalText = testBtn.textContent;
+            testBtn.disabled = true;
+            testBtn.textContent = 'Probando...';
+            try {
+                const response = await fetch('/test', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: new URLSearchParams({
+                        'test': 'connection'
+                    })
+                });
+                const data = await response.json();
+                if (data.status === 'success') {
+                    showAlert('✅ Conexión exitosa - El servidor está funcionando', 'success');
+                } else {
+                    showAlert('❌ Error en la respuesta del servidor', 'error');
+                }
+            } catch (error) {
+                showAlert('❌ Error de conexión: ' + error.message, 'error');
+            } finally {
+                testBtn.disabled = false;
+                testBtn.textContent = originalText;
+            }
+        });
+        document.getElementById('analyzeForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const youtubeUrl = document.getElementById('youtube_url').value.trim();
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            const loading = document.getElementById('loading');
+            const alert = document.getElementById('alert');
+            const results = document.getElementById('results');
+            const videoPlayer = document.getElementById('videoPlayer');
+            const youtubeIframe = document.getElementById('youtubeIframe');
+            // Validación básica
+            if (!youtubeUrl) {
+                showAlert('Por favor ingresa una URL válida', 'error');
+                return;
+            }
+            // Reset UI
+            alert.style.display = 'none';
+            results.style.display = 'none';
+            videoPlayer.style.display = 'none';
+            loading.style.display = 'block';
+            analyzeBtn.disabled = true;
+            analyzeBtn.textContent = 'Analizando...';
+            try {
+                console.log('Enviando URL:', youtubeUrl);
+                const response = await fetch('/analyze', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: new URLSearchParams({
+                        'youtube_url': youtubeUrl
+                    })
+                });
+                console.log('Response status:', response.status);
+                console.log('Response headers:', [...response.headers.entries()]);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                console.log('Response data:', data);
+                loading.style.display = 'none';
+                if (data.status === 'success') {
+                    // Mostrar reproductor de video
+                    const videoId = youtubeUrl.match(/[?&]v=([^&]+)/)?.[1] || youtubeUrl.match(/youtu\.be\/([^&?]+)/)?.[1];
+                    console.log('Video ID extraído:', videoId);
+                    if (videoId) {
+                        youtubeIframe.src = `https://www.youtube.com/embed/${videoId}?rel=0`; // ?rel=0 evita videos relacionados
+                        youtubeIframe.src += ''; // Fuerza recarga
+                        videoPlayer.style.display = 'block';
+                    } else {
+                        console.warn('No se pudo extraer el ID del video');
+                    }
+                    // Mostrar resultados
+                    displayResults(data.data);
+                    showAlert('¡Análisis completado exitosamente!', 'success');
+                } else {
+                    showAlert(data.message || 'Error en el análisis', 'error');
+                }
+            } catch (error) {
+                console.error('Error completo:', error);
+                loading.style.display = 'none';
+                showAlert('Error de conexión: ' + error.message, 'error');
+            } finally {
+                analyzeBtn.disabled = false;
+                analyzeBtn.textContent = 'Analizar Video';
+            }
+        });
+        function showAlert(message, type) {
+            const alert = document.getElementById('alert');
+            alert.textContent = message;
+            alert.className = `alert ${type}`;
+            alert.style.display = 'block';
+        }
+        function displayResults(data) {
+            const results = document.getElementById('results');
+            // Video info
+            if (data.video_title) {
+                document.getElementById('videoTitle').textContent = data.video_title;
+            }
+            if (data.video_info) {
+                const videoDetails = document.getElementById('videoDetails');
+                videoDetails.innerHTML = `
+                    <div class="metric-item">
+                        <span class="metric-label">Duración:</span>
+                        <span class="metric-value">${data.video_info.duracion_total.toFixed(2)}s</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">FPS:</span>
+                        <span class="metric-value">${data.video_info.fps.toFixed(1)}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Detección facial:</span>
+                        <span class="metric-value">${data.video_info.tasa_deteccion_facial.toFixed(2)}%</span>
+                    </div>
+                `;
+            }
+            // Smile metrics
+            if (data.sonrisas) {
+                const smileMetrics = document.getElementById('smileMetrics');
+                smileMetrics.innerHTML = `
+                    <div class="metric-item">
+                        <span class="metric-label">Total sonrisas:</span>
+                        <span class="metric-value">${data.sonrisas.total_sonrisas}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Duración promedio:</span>
+                        <span class="metric-value">${data.sonrisas.duracion_promedio_sonrisas.toFixed(2)}s</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">% tiempo sonriendo:</span>
+                        <span class="metric-value">${data.sonrisas.porcentaje_tiempo_sonriendo.toFixed(2)}%</span>
+                    </div>
+                `;
+            }
+            // Blink metrics
+            if (data.parpadeos) {
+                const blinkMetrics = document.getElementById('blinkMetrics');
+                blinkMetrics.innerHTML = `
+                    <div class="metric-item">
+                        <span class="metric-label">Total parpadeos:</span>
+                        <span class="metric-value">${data.parpadeos.total_parpadeos}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Tasa por minuto:</span>
+                        <span class="metric-value">${data.parpadeos.tasa_parpadeo_por_minuto.toFixed(2)}</span>
+                    </div>
+                `;
+            }
+            // Head movement metrics
+            if (data.movimiento_cabeza) {
+                const headMetrics = document.getElementById('headMetrics');
+                headMetrics.innerHTML = `
+                    <div class="metric-item">
+                        <span class="metric-label">Estabilidad vertical:</span>
+                        <span class="metric-value">${data.movimiento_cabeza.estabilidad_vertical.toFixed(4)}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Estabilidad horizontal:</span>
+                        <span class="metric-value">${data.movimiento_cabeza.estabilidad_horizontal.toFixed(4)}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Movimiento total:</span>
+                        <span class="metric-value">${data.movimiento_cabeza.movimiento_total.toFixed(4)}</span>
+                    </div>
+                `;
+            }
+            // Negative emotions metrics
+            if (data.emociones_negativas) {
+                const negativeMetrics = document.getElementById('negativeMetrics');
+                negativeMetrics.innerHTML = `
+                    <div class="metric-item">
+                        <span class="metric-label">Total enojado:</span>
+                        <span class="metric-value">${data.emociones_negativas.total_enojado || 0}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Duración promedio enojado:</span>
+                        <span class="metric-value">${(data.emociones_negativas.duracion_promedio_enojado || 0).toFixed(2)}s</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">% tiempo enojado:</span>
+                        <span class="metric-value">${(data.emociones_negativas.porcentaje_tiempo_enojado || 0).toFixed(2)}%</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Total gruñón:</span>
+                        <span class="metric-value">${data.emociones_negativas.total_grunon || 0}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Duración promedio gruñón:</span>
+                        <span class="metric-value">${(data.emociones_negativas.duracion_promedio_grunon || 0).toFixed(2)}s</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">% tiempo gruñón:</span>
+                        <span class="metric-value">${(data.emociones_negativas.porcentaje_tiempo_grunon || 0).toFixed(2)}%</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Total furioso:</span>
+                        <span class="metric-value">${data.emociones_negativas.total_furioso || 0}</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Duración promedio furioso:</span>
+                        <span class="metric-value">${(data.emociones_negativas.duracion_promedio_furioso || 0).toFixed(2)}s</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">% tiempo furioso:</span>
+                        <span class="metric-value">${(data.emociones_negativas.porcentaje_tiempo_furioso || 0).toFixed(2)}%</span>
+                    </div>
+                `;
+            }
+            // Crear gráfico
+            const ctx = document.getElementById('analysisChart').getContext('2d');
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['Sonrisas', 'Parpadeos', 'Enojado', 'Gruñón', 'Furioso'],
+                    datasets: [{
+                        label: 'Métricas de Comportamiento',
+                        data: [
+                            data.sonrisas?.total_sonrisas || 0,
+                            data.parpadeos?.total_parpadeos || 0,
+                            data.emociones_negativas?.total_enojado || 0,
+                            data.emociones_negativas?.total_grunon || 0,
+                            data.emociones_negativas?.total_furioso || 0
+                        ],
+                        backgroundColor: ['#667eea', '#28a745', '#ff6384', '#ffcd56', '#ff4500'],
+                        borderColor: ['#5a67d8', '#219653', '#e31a4c', '#e6b800', '#cc3700'],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: { beginAtZero: true }
+                    },
+                    plugins: {
+                        legend: { display: false },
+                        title: { display: true, text: 'Resumen de Análisis' }
+                    }
+                }
+            });
+            results.style.display = 'block';
+        }
+    </script>
+</body>
+</html>