Restaurar implementación completa de detección facial en tiempo real con WebRTC

streamlit_app.py

@@ -74,7 +74,7 @@ def main():
     # Navigation menu
     app_mode = st.sidebar.selectbox(
         "Choose the app mode",
-        ["About", "Face Detection", "Feature Detection", "Comparison Mode", "Face Recognition"]
+        ["About", "Face Detection", "Feature Detection", "Comparison Mode", "Face Recognition", "Diagnóstico"]
     )
 
     # Function to load DNN models with caching and auto-download
@@ -989,12 +989,12 @@ def main():
                             if detect_eyes: # type: ignore
                                 summary_col2.metric("Avg. Eyes per Frame", detection_stats["eyes"])
                             else:
-                                summary_col2.metric("Eyes Detected", "N/A")
+                                summary_col2.metric("Avg. Eyes Detected", "N/A")
                             
                             if detect_smile: # type: ignore
                                 summary_col3.metric("Avg. Smiles per Frame", detection_stats["smiles"])
                             else:
-                                summary_col3.metric("Smiles Detected", "N/A")
+                                summary_col3.metric("Avg. Smiles Detected", "N/A")
                             
                             # Provide download link
                             with open(output_path, 'rb') as f:
@@ -1019,49 +1019,54 @@ def main():
                 st.subheader("Real-time face detection")
                 st.write("Click 'Start Camera' to begin real-time face detection.")
                 
-                # Placeholder for webcam video
-                camera_placeholder = st.empty()
-                
-                # Buttons to control the camera
-                col1, col2 = st.columns(2)
-                start_button = col1.button("Start Camera", on_click=start_camera)
-                stop_button = col2.button("Stop Camera", on_click=stop_camera)
-                
-                # Show message when camera is stopped
-                if 'camera_stopped' in st.session_state and st.session_state.camera_stopped:
-                    st.info("Camera stopped. Click 'Start Camera' to activate it again.")
-                    st.session_state.camera_stopped = False
-                
-                if st.session_state.camera_running:
-                    st.info("Camera activated. Processing real-time video...")
-                    # Initialize webcam
-                    cap = cv2.VideoCapture(0)  # 0 is typically the main webcam
+                # Verificar si WebRTC está disponible
+                if not WEBRTC_AVAILABLE:
+                    st.error("WebRTC components are not available. Real-time camera features are disabled.")
+                    st.warning("⚠️ Note: If you're using this app on Hugging Face Spaces without WebRTC support, try using the image upload or video upload features instead.")
+                else:
+                    # Placeholder for webcam video
+                    camera_placeholder = st.empty()
                     
-                    if not cap.isOpened():
-                        st.error("Could not access webcam. Make sure it's connected and not being used by another application.")
-                        st.warning("⚠️ Note: If you're using this app on Hugging Face Spaces, webcam access is not supported. Try running this app locally for webcam features.")
-                        st.session_state.camera_running = False
-                    else:
-                        # Display real-time video with face detection
-                        try:
-                            while st.session_state.camera_running:
-                                ret, frame = cap.read()
-                                if not ret:
-                                    st.error("Error reading frame from camera.")
-                                    break
-                                
-                                # Detect faces
-                                detections = detect_face_dnn(face_net, frame, conf_threshold)
-                                processed_frame, bboxes = process_face_detections(frame, detections, conf_threshold, bbox_color_bgr)
-                                
-                                # Display the processed frame
-                                camera_placeholder.image(processed_frame, channels="BGR", use_container_width=True)
-                                
-                                # Small pause to avoid overloading the CPU
-                                time.sleep(0.01)
-                        finally:
-                            # Release the camera when stopped
-                            cap.release()
+                    # Buttons to control the camera
+                    col1, col2 = st.columns(2)
+                    start_button = col1.button("Start Camera", on_click=start_camera)
+                    stop_button = col2.button("Stop Camera", on_click=stop_camera)
+                    
+                    # Show message when camera is stopped
+                    if 'camera_stopped' in st.session_state and st.session_state.camera_stopped:
+                        st.info("Camera stopped. Click 'Start Camera' to activate it again.")
+                        st.session_state.camera_stopped = False
+                    
+                    if st.session_state.camera_running:
+                        st.info("Camera activated. Processing real-time video...")
+                        # Initialize webcam
+                        cap = cv2.VideoCapture(0)  # 0 is typically the main webcam
+                        
+                        if not cap.isOpened():
+                            st.error("Could not access webcam. Make sure it's connected and not being used by another application.")
+                            st.warning("⚠️ Note: If you're using this app on Hugging Face Spaces, webcam access is not supported. Try running this app locally for webcam features.")
+                            st.session_state.camera_running = False
+                        else:
+                            # Display real-time video with face detection
+                            try:
+                                while st.session_state.camera_running:
+                                    ret, frame = cap.read()
+                                    if not ret:
+                                        st.error("Error reading frame from camera.")
+                                        break
+                                    
+                                    # Detect faces
+                                    detections = detect_face_dnn(face_net, frame, conf_threshold)
+                                    processed_frame, bboxes = process_face_detections(frame, detections, conf_threshold, bbox_color_bgr)
+                                    
+                                    # Display the processed frame
+                                    camera_placeholder.image(processed_frame, channels="BGR", use_container_width=True)
+                                    
+                                    # Small pause to avoid overloading the CPU
+                                    time.sleep(0.01)
+                            finally:
+                                # Release the camera when stopped
+                                cap.release()
 
     elif app_mode == "Feature Detection":
         # Load all required models
@@ -2358,996 +2363,271 @@ def main():
             if not st.session_state.face_database:
                 st.warning("No faces registered. Please register at least one face first.")
             else:
-                # Configuración avanzada
-                with st.expander("Advanced Configuration", expanded=False):
-                    # Configuración de umbral de similitud
-                    similarity_threshold = st.slider(
-                        "Similarity threshold (%)", 
-                        min_value=35.0, 
-                        max_value=95.0, 
-                        value=45.0, 
-                        step=5.0,
-                        key="realtime_threshold",
-                        help="Minimum similarity percentage to consider a match"
-                    )
-                    
-                    confidence_threshold = st.slider(
-                        "Detection Confidence", 
-                        min_value=0.3, 
-                        max_value=0.9, 
-                        value=0.5, 
-                        step=0.05,
-                        key="realtime_confidence",
-                        help="Higher value is more restrictive but more accurate"
-                    )
-                    
-                    model_choice = st.selectbox(
-                        "Embedding model", 
-                        ["VGG-Face", "Facenet", "OpenFace", "ArcFace"],
-                        key="realtime_model",
-                        help="Different models can give different results depending on facial features"
-                    )
-                    
-                    voting_method = st.radio(
-                        "Voting method for multiple embeddings",
-                        ["Average", "Best match", "Weighted voting"],
-                        key="realtime_voting",
-                        help="How to combine results when there are multiple images of a person"
-                    )
-                    
-                    show_confidence = st.checkbox(
-                        "Show confidence percentage", 
-                        value=True,
-                        help="Show similarity percentage next to the name"
-                    )
-                    
-                    stabilize_results = st.checkbox(
-                        "Stabilize results", 
-                        value=True,
-                        help="Reduce identification fluctuations using temporal averaging"
-                    )
-                
-                # Placeholder para métricas
+                # Preparar layout para métricas
+                st.markdown("### Recognition Metrics")
                 metrics_cols = st.columns(3)
-                with metrics_cols[0]:
-                    faces_metric = st.empty()
-                with metrics_cols[1]:
-                    fps_metric = st.empty()
-                with metrics_cols[2]:
-                    time_metric = st.empty()
+                faces_metric = metrics_cols[0]
+                fps_metric = metrics_cols[1]
+                time_metric = metrics_cols[2]
                 
-                # WebRTC configuration
-                rtc_configuration = RTCConfiguration(
-                    {"iceServers": [
-                        {"urls": ["stun:stun.l.google.com:19302"]},
-                        {"urls": ["stun:stun1.l.google.com:19302"]},
-                        {"urls": ["stun:stun2.l.google.com:19302"]}
-                    ]}
-                )
-                
-                # Initialize session state variables if they don't exist
+                # Inicializar métricas
                 if 'faces_detected' not in st.session_state:
                     st.session_state.faces_detected = 0
                 if 'fps' not in st.session_state:
                     st.session_state.fps = 0
                 
-                # Define callback to update session state with frames processed
-                class VideoProcessor(VideoProcessorBase):
-                    def __init__(self):
-                        self.frame_count = 0
-                        self.face_count = 0
-                        self.start_time = time.time()
-                        self.processing = True
-                        self.frame_skip = 2  # Process every other frame to reduce load
-                        self.frames_processed = 0
-                        self.last_log_time = time.time()
-                        
-                    def recv(self, frame):
-                        try:
-                            img = frame.to_ndarray(format="bgr24")
-                            self.frame_count += 1
-                            
-                            # Solo procesar algunos frames para reducir carga
-                            if self.frame_count % self.frame_skip != 0:
-                                return av.VideoFrame.from_ndarray(img, format="bgr24")
-                            
-                            self.frames_processed += 1
-                            now = time.time()
-                            
-                            # Registro de diagnóstico cada 5 segundos
-                            if now - self.last_log_time > 5:
-                                print(f"Frames procesados: {self.frames_processed}, " +
-                                      f"Tiempo transcurrido: {now - self.start_time:.1f}s, " +
-                                      f"FPS: {self.frames_processed/(now - self.start_time):.1f}")
-                                self.last_log_time = now
-                            
-                            # Verificar que la imagen no sea nula
-                            if img is None or img.size == 0 or img.shape[0] == 0 or img.shape[1] == 0:
-                                # Si la imagen es inválida, devolver un frame en blanco
-                                blank_frame = np.ones((480, 640, 3), dtype=np.uint8) * 255
-                                cv2.putText(blank_frame, "Error: Invalid frame", (50, 240), 
-                                           cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
-                                return av.VideoFrame.from_ndarray(blank_frame, format="bgr24")
-                            
-                            # Reducir tamaño del frame para procesamiento más rápido
-                            scale_factor = 0.5
-                            h, w = img.shape[:2]
-                            
-                            small_img = safe_resize(img, (int(w * scale_factor), int(h * scale_factor)))
-                            if small_img is None:
-                                # Si no se puede redimensionar, usar el frame original (solo para diagnóstico)
-                                print("No se pudo redimensionar la imagen para procesamiento")
-                                return av.VideoFrame.from_ndarray(img, format="bgr24")
-                            
-                            # Detect faces - la función ahora devuelve directamente los bboxes
-                            try:
-                                bboxes = detect_face_dnn(face_net, small_img, confidence_threshold)
-                            except Exception as e:
-                                print(f"Error al detectar rostros: {e}")
-                                bboxes = []
-                            
-                            # Ajustar bounding boxes al tamaño original
-                            original_bboxes = []
-                            for x1, y1, x2, y2, conf in bboxes:
-                                original_bboxes.append((
-                                    int(x1 / scale_factor), 
-                                    int(y1 / scale_factor), 
-                                    int(x2 / scale_factor), 
-                                    int(y2 / scale_factor),
-                                    conf
-                                ))
-                            
-                            # Actualizar contadores
-                            self.face_count = len(original_bboxes)
-                            current_time = time.time()
-                            elapsed_time = current_time - self.start_time
-                            fps = self.frames_processed / elapsed_time if elapsed_time > 0 else 0
-                            
-                            # Actualizar métricas en session_state para que sean accesibles fuera
-                            st.session_state.faces_detected = self.face_count
-                            st.session_state.fps = fps
-                            
-                            # Dibujar cajas de los rostros
-                            result_img = img.copy()
-                            for i, (x1, y1, x2, y2, conf) in enumerate(original_bboxes):
-                                cv2.rectangle(result_img, (x1, y1), (x2, y2), (0, 255, 0), 2)
-                                cv2.putText(result_img, f"Face {i+1}: {conf:.2f}", (x1, y1-10), 
-                                           cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)
-                            
-                            # Añadir información FPS y rostros
-                            cv2.putText(result_img, f"FPS: {fps:.1f}", (10, 30), 
-                                       cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
-                            cv2.putText(result_img, f"Faces: {self.face_count}", (10, 60), 
-                                       cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
-                            
-                            return av.VideoFrame.from_ndarray(result_img, format="bgr24")
-                        except Exception as e:
-                            print(f"Error general en procesamiento de video: {str(e)}")
-                            try:
-                                # Intentar devolver el frame original
-                                return av.VideoFrame.from_ndarray(img, format="bgr24")
-                            except:
-                                # Si eso falla, devolver un frame en blanco como último recurso
-                                blank = np.ones((480, 640, 3), dtype=np.uint8) * 255
-                                return av.VideoFrame.from_ndarray(blank, format="bgr24")
-                
-                # Display WebRTC streamer con opciones simplificadas para mejorar compatibilidad
-                st.info("⚠️ If the video doesn't load: Try using Chrome, reload the page, or use the alternative options below.")
-                webrtc_ctx = webrtc_streamer(
-                    key="face-recognition",
-                    mode=WebRtcMode.SENDRECV,
-                    rtc_configuration=rtc_configuration,
-                    media_stream_constraints={"video": {"width": 640, "height": 480}, "audio": False},
-                    video_processor_factory=VideoProcessor,
-                    async_processing=True,
+                # Configuración para WebRTC
+                rtc_configuration = RTCConfiguration(
+                    {"iceServers": [{"urls": ["stun:stun.l.google.com:19302"]}]}
                 )
                 
-                # Establecer y actualizar métricas
-                if webrtc_ctx.state.playing:
-                    faces_metric.metric("Faces detected", st.session_state.get('faces_detected', 0))
-                    fps_metric.metric("FPS", f"{st.session_state.get('fps', 0):.1f}")
-                    time_metric.metric("Status", "Running")
-                    
-                    # Mostrar instrucciones de uso
-                    st.success("Webcam activated. Detected faces will be identified in real-time.")
-                else:
-                    faces_metric.metric("Faces detected", 0)
-                    fps_metric.metric("FPS", "0")
-                    time_metric.metric("Status", "Stopped")
-                    
-                    # Mostrar instrucciones de activación
-                    st.warning("Click START to activate the webcam. This feature may not be available in environments like Hugging Face Spaces due to security restrictions.")
-                
-                # WebRTC troubleshooting
-                with st.expander("Help: WebRTC Issues"):
-                    st.markdown("""
-                    ### WebRTC Troubleshooting
-                    
-                    If real-time recognition is not working, it may be due to the following reasons:
-                    
-                    1. **Security restrictions in Hugging Face Spaces**: Some browsers restrict camera access in environments like this.
-                    2. **Connection problems**: WebRTC requires establishing a connection that may be blocked by firewalls or proxies.
-                    3. **Camera permissions**: You may need to grant explicit permissions to the browser to access your camera.
-                    
-                    ### What to do:
-                    
-                    1. Try using another browser (Chrome usually works better)
-                    2. Make sure you have granted camera permissions when the browser requests them
-                    3. If it still doesn't work, use the alternative options shown below
-                    """)
-
-                # Añadir modo de captura continua (funciona mejor en Hugging Face)
-                st.markdown("---")
-                st.markdown("### Continuous Capture Mode")
-                st.info("⚠️ Recommended mode for Hugging Face: Captures frames continuously with reliable camera access.")
-                
-                # Configuración del modo de captura continua
-                with st.expander("Configuration", expanded=False):
-                    continuous_model_choice = st.selectbox(
-                        "Embedding model for recognition", 
-                        ["VGG-Face", "Facenet", "OpenFace", "ArcFace"],
-                        key="continuous_model_choice",
-                        index=0 if "continuous_model_choice" not in st.session_state else ["VGG-Face", "Facenet", "OpenFace", "ArcFace"].index(st.session_state.continuous_model_choice)
-                    )
-                    
-                    continuous_similarity_threshold = st.slider(
-                        "Similarity threshold (%)", 
-                        min_value=35.0, 
-                        max_value=95.0, 
-                        value=45.0, 
-                        step=5.0,
-                        key="continuous_similarity_threshold"
-                    )
-                    
-                    continuous_confidence_threshold = st.slider(
-                        "Detection confidence", 
-                        min_value=0.1, 
-                        max_value=0.9, 
-                        value=0.3, 
-                        step=0.05,
-                        key="continuous_confidence_threshold"
-                    )
-                    
-                    capture_fps = st.slider(
-                        "Capture frames per second", 
-                        min_value=0.5, 
-                        max_value=5.0, 
-                        value=1.0, 
-                        step=0.5,
-                        key="capture_fps",
-                        help="Higher values capture more frames but may overload the system"
-                    )
-                
-                col1, col2 = st.columns(2)
-                start_continuous = col1.button("Start Continuous Capture", key="start_continuous_button", use_container_width=True)
-                stop_continuous = col2.button("Stop Continuous Capture", key="stop_continuous_button", use_container_width=True)
-                
-                if start_continuous:
+                # Verificar disponibilidad de WebRTC
+                if not WEBRTC_AVAILABLE:
+                    st.error("WebRTC components are not available. Real-time camera features will be limited.")
+                    st.info("This may be due to running in Hugging Face Spaces environment or missing dependencies.")
+                    # Saltar directo al modo alternativo de captura
                     st.session_state.continuous_capture = True
-                    st.session_state.frame_count = 0
-                    st.session_state.frames_processed = 0
-                    st.session_state.start_time = time.time()
-                    st.session_state.last_fps_update = time.time()
-                    # Desactivar otros modos
-                    st.session_state.demo_running = False
-                    st.session_state.upload_mode = False
-                    st.session_state.simple_camera = False
-                    
-                if stop_continuous:
-                    st.session_state.continuous_capture = False
-                
-                if st.session_state.get('continuous_capture', False):
-                    # Área para mostrar resultados
-                    result_container = st.container()
-                    camera_container = st.container()
-                    
-                    # Configurar métricas
-                    faces_metric.metric("Faces detected", 0)
-                    fps_metric.metric("FPS", "Processing...")
-                    time_metric.metric("Status", "Running")
-                    
-                    # Usar un componente personalizado con JavaScript para captura automática
-                    with camera_container:
-                        st.info("Auto-capture enabled. Camera should start automatically.")
-                        
-                        # Construir el componente de cámara con JavaScript sin formateo complejo
-                        fps_value = str(st.session_state.get('capture_fps', 1.0))
-                        
-                        # Primera parte del HTML (antes del valor de FPS)
-                        camera_html_part1 = """
-                        <div style="margin-bottom: 20px;">
-                            <video id="webcam" autoplay playsinline width="640" height="480" style="border-radius: 5px; display: none;"></video>
-                            <canvas id="canvas" width="640" height="480" style="display: none;"></canvas>
-                            <canvas id="display" width="640" height="480" style="border-radius: 5px; display: block; margin: 0 auto; border: 4px solid #ff5500; box-shadow: 0 0 15px rgba(255, 85, 0, 0.5);"></canvas>
-                        </div>
-                        <script>
-                            const video = document.getElementById('webcam');
-                            const canvas = document.getElementById('canvas');
-                            const display = document.getElementById('display');
-                            const ctx = canvas.getContext('2d');
-                            const displayCtx = display.getContext('2d');
-                            let captureInterval;
-                            
-                            // Para depuración
-                            console.log('Componente de cámara inicializado');
-                            
-                            // Dibujar un rectángulo de prueba inmediatamente
-                            displayCtx.fillStyle = 'rgba(255, 255, 255, 0.5)';
-                            displayCtx.fillRect(0, 0, display.width, display.height);
-                            displayCtx.strokeStyle = '#FF0000';
-                            displayCtx.lineWidth = 8;
-                            displayCtx.strokeRect(200, 100, 240, 280);
-                            displayCtx.fillStyle = '#FF0000';
-                            displayCtx.font = '28px Arial';
-                            displayCtx.fillText('Rectángulo de Prueba', 210, 90);
-                            console.log('Rectángulo inicial de prueba dibujado');
-                            
-                            // Arreglo para almacenar las últimas cajas recibidas
-                            let lastBoxes = [];
-                            
-                            // Configuración dinámica del FPS (desde Streamlit)
-                            const captureDelay = 1000 / """
-                        
-                        # Valor de FPS (como string)
-                        camera_html_part2 = fps_value
-                        
-                        # Resto del HTML (después del valor de FPS)
-                        camera_html_part3 = """;
-                            
-                            // Iniciar la cámara
-                            async function setupCamera() {
-                                try {
-                                    console.log('Intentando acceder a la cámara...');
-                                    const stream = await navigator.mediaDevices.getUserMedia({
-                                        'video': { width: 640, height: 480 },
-                                        'audio': false
-                                    });
-                                    video.srcObject = stream;
-                                    console.log('Cámara iniciada correctamente');
-                                    
-                                    // Esperar a que la cámara esté lista
-                                    return new Promise((resolve) => {
-                                        video.onloadedmetadata = () => {
-                                            video.play();
-                                            console.log('Video iniciado');
-                                            resolve(video);
-                                        };
-                                    });
-                                } catch (error) {
-                                    console.error('Error accessing camera:', error);
-                                    window.parent.postMessage({
-                                        type: 'streamlit:setComponentValue',
-                                        value: { error: 'Camera access denied or not available' }
-                                    }, '*');
-                                }
-                            }
-                            
-                            // Capturar frame y enviar a Streamlit
-                            function captureFrame() {
-                                if (video.readyState === video.HAVE_ENOUGH_DATA) {
-                                    // Dibujar el video en ambos canvas
-                                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                                    displayCtx.drawImage(video, 0, 0, display.width, display.height);
-                                    
-                                    // Dibujar cajas almacenadas (para mantener las cajas entre frames)
-                                    drawStoredBoxes();
-                                    
-                                    // Convertir a base64
-                                    const imageData = canvas.toDataURL('image/jpeg', 0.8);
-                                    
-                                    // Enviar los datos a Streamlit
-                                    window.parent.postMessage({
-                                        type: 'streamlit:setComponentValue',
-                                        value: { image: imageData, timestamp: Date.now() }
-                                    }, '*');
-                                }
-                            }
-                            
-                            // Función para dibujar las cajas almacenadas
-                            function drawStoredBoxes() {
-                                if (lastBoxes && lastBoxes.length > 0) {
-                                    console.log(`Redibujando ${lastBoxes.length} cajas almacenadas`);
-                                    lastBoxes.forEach(box => {
-                                        if (box && box.length >= 5) {
-                                            const [x1, y1, x2, y2, confidence] = box;
-                                            
-                                            // Dibujar rectángulo
-                                            displayCtx.strokeStyle = '#00FF00'; // Verde brillante
-                                            displayCtx.lineWidth = 6; // Línea más gruesa
-                                            displayCtx.strokeRect(x1, y1, x2-x1, y2-y1);
-                                            
-                                            // Añadir un relleno semitransparente para mayor visibilidad
-                                            displayCtx.fillStyle = 'rgba(0, 255, 0, 0.2)';
-                                            displayCtx.fillRect(x1, y1, x2-x1, y2-y1);
-                                            
-                                            // Añadir un fondo para el texto
-                                            displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                            displayCtx.fillRect(x1, y1-25, 140, 25);
-                                            
-                                            // Dibujar etiqueta con fuente más grande
-                                            displayCtx.fillStyle = '#FFFF00'; // Amarillo brillante
-                                            displayCtx.font = 'bold 18px Arial';
-                                            displayCtx.fillText(`Rostro: ${confidence.toFixed(2)}`, x1+5, y1-5);
-                                        }
-                                    });
-                                    
-                                    // Añadir contador de rostros
-                                    displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                    displayCtx.fillRect(10, 10, 200, 30);
-                                    displayCtx.fillStyle = '#FFFFFF';
-                                    displayCtx.font = 'bold 18px Arial';
-                                    displayCtx.fillText(`Rostros: ${lastBoxes.length}`, 20, 30);
-                                } else if (video.readyState === video.HAVE_ENOUGH_DATA) {
-                                    // Si no hay cajas almacenadas pero el video está activo,
-                                    // simplemente mostrar el mensaje "No se detectan rostros"
-                                    
-                                    // Mensaje de estado
-                                    displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                    displayCtx.fillRect(10, 10, 250, 30);
-                                    displayCtx.fillStyle = '#FF9900';
-                                    displayCtx.font = 'bold 18px Arial';
-                                    displayCtx.fillText('No se detectan rostros', 20, 30);
-                                }
-                            }
+                    st.session_state.webrtc_available = False
+                else:
+                    st.session_state.webrtc_available = True
+                    
+                    # Solo mostrar WebRTC si está disponible
+                    class VideoProcessor(VideoProcessorBase):
+                        def __init__(self):
+                            self.frame_count = 0
+                            self.face_count = 0
+                            self.start_time = time.time()
+                            self.processing = True
+                            self.frame_skip = 2  # Process every other frame to reduce load
+                            self.frames_processed = 0
+                            self.last_log_time = time.time()
                             
-                            // Debug para todos los mensajes recibidos
-                            window.addEventListener('message', function(event) {
-                                console.log('>>> Mensaje recibido:', event.data);
+                        def recv(self, frame):
+                            try:
+                                img = frame.to_ndarray(format="bgr24")
+                                self.frame_count += 1
                                 
-                                // Verificar si es un mensaje con cajas de rostros
-                                if (event.data && event.data.type === 'faceBoxes') {
-                                    const message = event.data;
-                                    console.log('🔴 Recibido mensaje de cajas faciales:', message);
-                                    
-                                    const boxes = message.boxes;
-                                    if (boxes && Array.isArray(boxes)) {
-                                        // Guardar cajas para redibujar en cada frame
-                                        lastBoxes = boxes;
-                                        
-                                        // Limpiar el canvas y dibujar el frame actual
-                                        displayCtx.drawImage(video, 0, 0, display.width, display.height);
-                                        
-                                        // Dibujar cada caja
-                                        if (boxes.length > 0) {
-                                            console.log(`Dibujando ${boxes.length} cajas de rostros`);
-                                            
-                                            // Añadir texto grande para diagnóstico
-                                            displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                            displayCtx.fillRect(10, 50, 300, 40);
-                                            displayCtx.fillStyle = '#00FF00';
-                                            displayCtx.font = 'bold 20px Arial';
-                                            displayCtx.fillText(`DETECTADAS: ${boxes.length} CAJAS`, 20, 80);
-                                            
-                                            boxes.forEach(box => {
-                                                if (box && box.length >= 5) {
-                                                    const [x1, y1, x2, y2, confidence] = box;
-                                                    console.log(`Dibujando caja: (${x1}, ${y1}, ${x2}, ${y2}, ${confidence})`);
-                                                    
-                                                    // Dibujar rectángulo con colores más brillantes y líneas más gruesas
-                                                    displayCtx.strokeStyle = '#00FF00'; // Verde brillante
-                                                    displayCtx.lineWidth = 6; // Línea más gruesa
-                                                    displayCtx.strokeRect(x1, y1, x2-x1, y2-y1);
-                                                    
-                                                    // Añadir un relleno semitransparente para mayor visibilidad
-                                                    displayCtx.fillStyle = 'rgba(0, 255, 0, 0.2)';
-                                                    displayCtx.fillRect(x1, y1, x2-x1, y2-y1);
-                                                    
-                                                    // Añadir un fondo para el texto
-                                                    displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                                    displayCtx.fillRect(x1, y1-25, 160, 25);
-                                                    
-                                                    // Dibujar etiqueta con fuente más grande
-                                                    displayCtx.fillStyle = '#FFFF00'; // Amarillo brillante
-                                                    displayCtx.font = 'bold 18px Arial';
-                                                    displayCtx.fillText(`ROSTRO: ${confidence.toFixed(2)}`, x1+5, y1-5);
-                                                } else {
-                                                    console.warn('Formato de caja inválido:', box);
-                                                }
-                                            });
-                                        } else {
-                                            // Mensaje cuando no se detectan rostros
-                                            displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                            displayCtx.fillRect(10, 10, 350, 30);
-                                            displayCtx.fillStyle = '#FF9900';
-                                            displayCtx.font = 'bold 18px Arial';
-                                            displayCtx.fillText('No se detectan rostros (Usa conf. < 0.2)', 20, 30);
-                                            
-                                            // Añadir texto de diagnóstico adicional
-                                            displayCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-                                            displayCtx.fillRect(10, 50, 400, 90);
-                                            displayCtx.fillStyle = '#FF9900';
-                                            displayCtx.font = 'bold 16px Arial';
-                                            displayCtx.fillText('DIAGNÓSTICO:', 20, 70);
-                                            displayCtx.fillStyle = '#FFFFFF';
-                                            displayCtx.font = '14px Arial';
-                                            displayCtx.fillText('1. Reduce el umbral de confianza a 0.1-0.2', 20, 90);
-                                            displayCtx.fillText('2. Mejora la iluminación (luz frontal)', 20, 110);
-                                            displayCtx.fillText('3. Mira directo a la cámara', 20, 130);
-                                            
-                                            console.log('No hay cajas para dibujar o formato inválido');
-                                            
-                                            // Limpiar cajas almacenadas si se recibe explícitamente un array vacío
-                                            if (!message.forceDisplay) {
-                                                lastBoxes = [];
-                                            }
-                                        }
-                                    }
-                                }
-                            });
-                            
-                            // Arrancar todo
-                            async function initCapture() {
-                                await setupCamera();
-                                // Empezar a capturar frames periódicamente
-                                captureInterval = setInterval(captureFrame, captureDelay);
-                                console.log(`Captura iniciada con intervalo de ${captureDelay}ms`);
-                            }
-                            
-                            // Limpiar al salir
-                            function stopCapture() {
-                                clearInterval(captureInterval);
-                                if (video.srcObject) {
-                                    video.srcObject.getTracks().forEach(track => track.stop());
-                                }
-                                console.log('Captura detenida');
-                            }
-                            
-                            // Iniciar captura automáticamente
-                            initCapture();
-                            
-                            // Limpiar cuando se desmonte el componente
-                            window.addEventListener('beforeunload', stopCapture);
-                        </script>
-                        """
-                        
-                        # Unir todas las partes para formar el HTML completo
-                        camera_component_html = camera_html_part1 + camera_html_part2 + camera_html_part3
-                        
-                        # Renderizar el componente
-                        camera_component = st.components.v1.html(camera_component_html, height=520)
-                        
-                        # Procesar la imagen si está disponible (desde JavaScript)
-                        if camera_component is not None and isinstance(camera_component, dict):
-                            if 'error' in camera_component:
-                                st.error(f"Camera error: {camera_component['error']}")
-                            elif 'image' in camera_component:
+                                # Solo procesar algunos frames para reducir carga
+                                if self.frame_count % self.frame_skip != 0:
+                                    return av.VideoFrame.from_ndarray(img, format="bgr24")
+                                
+                                self.frames_processed += 1
+                                now = time.time()
+                                
+                                # Registro de diagnóstico cada 5 segundos
+                                if now - self.last_log_time > 5:
+                                    print(f"Frames procesados: {self.frames_processed}, " +
+                                          f"Tiempo transcurrido: {now - self.start_time:.1f}s, " +
+                                          f"FPS: {self.frames_processed/(now - self.start_time):.1f}")
+                                    self.last_log_time = now
+                                
+                                # Verificar que la imagen no sea nula
+                                if img is None or img.size == 0 or img.shape[0] == 0 or img.shape[1] == 0:
+                                    # Si la imagen es inválida, devolver un frame en blanco
+                                    blank_frame = np.ones((480, 640, 3), dtype=np.uint8) * 255
+                                    cv2.putText(blank_frame, "Error: Invalid frame", (50, 240), 
+                                               cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
+                                    return av.VideoFrame.from_ndarray(blank_frame, format="bgr24")
+                                
+                                # Reducir tamaño del frame para procesamiento más rápido
+                                scale_factor = 0.5
+                                h, w = img.shape[:2]
+                                
+                                small_img = safe_resize(img, (int(w * scale_factor), int(h * scale_factor)))
+                                if small_img is None:
+                                    # Si no se puede redimensionar, usar el frame original (solo para diagnóstico)
+                                    print("No se pudo redimensionar la imagen para procesamiento")
+                                    return av.VideoFrame.from_ndarray(img, format="bgr24")
+                                
+                                # Detect faces - la función ahora devuelve directamente los bboxes
                                 try:
-                                    # Convertir image base64 a imagen OpenCV
-                                    encoded_data = camera_component['image'].split(',')[1]
-                                    nparr = np.frombuffer(base64.b64decode(encoded_data), np.uint8)
-                                    image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
-                                    
-                                    if image is not None and image.size > 0:
-                                        # Usar la configuración local
-                                        local_confidence = st.session_state.get('continuous_confidence_threshold', 0.5)
-                                        
-                                        # Detectar rostros
-                                        bboxes = detect_face_dnn(face_net, image, local_confidence)
-                                        
-                                        # Actualizar métricas
-                                        faces_metric.metric("Faces detected", len(bboxes))
-                                        
-                                        # Incrementar contador de frames procesados
-                                        st.session_state.frames_processed += 1
-                                        
-                                        # Calcular FPS real (actualizar cada segundo)
-                                        current_time = time.time()
-                                        elapsed = current_time - st.session_state.start_time
-                                        if current_time - st.session_state.last_fps_update >= 1.0:
-                                            fps = st.session_state.frames_processed / elapsed
-                                            fps_metric.metric("FPS", f"{fps:.1f}")
-                                            st.session_state.last_fps_update = current_time
-                                        
-                                        # Enviar las cajas detectadas al componente JavaScript para dibujarlas en tiempo real
-                                        if bboxes is not None and len(bboxes) > 0:
-                                            # Convertir a lista si es un array numpy
-                                            bbox_list = bboxes.tolist() if isinstance(bboxes, np.ndarray) else bboxes
-                                            
-                                            # Imprimir en el servidor para depuración
-                                            print(f"Cajas de rostros detectadas: {bbox_list}")
-                                            
-                                            # Crear script para enviar datos al componente JavaScript - Versión mejorada con múltiples métodos
-                                            face_boxes_js = f"""
-                                                <script>
-                                                    // Versión mejorada para envío garantizado de detecciones faciales
-                                                    (function() {{
-                                                        console.log("DETECCIÓN FACIAL: Enviando datos de {len(bbox_list)} rostros");
-                                                        
-                                                        const message = {{
-                                                            type: 'faceBoxes',
-                                                            boxes: {json.dumps(bbox_list)},
-                                                            timestamp: Date.now()
-                                                        }};
-                                                        
-                                                        // Función para enviar mensaje a todos los destinos posibles
-                                                        function broadcastMessage() {{
-                                                            console.log("Intentando enviar mensaje a todos los destinos posibles");
-                                                            
-                                                            // 1. Enviar directo al window
-                                                            try {{ 
-                                                                window.postMessage(message, '*'); 
-                                                                console.log("Mensaje enviado a window");
-                                                            }} catch(e) {{
-                                                                console.error("Error enviando a window:", e);
-                                                            }}
-                                                            
-                                                            // 2. Enviar al parent (desde iframe)
-                                                            try {{ 
-                                                                window.parent.postMessage(message, '*'); 
-                                                                console.log("Mensaje enviado a parent");
-                                                            }} catch(e) {{
-                                                                console.error("Error enviando a parent:", e);
-                                                            }}
-                                                            
-                                                            // 3. Enviar a todos los iframes en la página
-                                                            try {{
-                                                                const frames = document.getElementsByTagName('iframe');
-                                                                console.log(`Encontrados ${{frames.length}} iframes`);
-                                                                for(let i = 0; i < frames.length; i++) {{
-                                                                    try {{
-                                                                        frames[i].contentWindow.postMessage(message, '*');
-                                                                        console.log(`Mensaje enviado a iframe[${{i}}]`);
-                                                                    }} catch(e) {{
-                                                                        console.error(`Error enviando a iframe[${{i}}]:`, e);
-                                                                    }}
-                                                                }}
-                                                            }} catch(e) {{
-                                                                console.error("Error accediendo a iframes:", e);
-                                                            }}
-                                                            
-                                                            // 4. Enviar a todos los iframes en el parent
-                                                            try {{
-                                                                const parentFrames = window.parent.document.getElementsByTagName('iframe');
-                                                                console.log(`Encontrados ${{parentFrames.length}} iframes en parent`);
-                                                                for(let i = 0; i < parentFrames.length; i++) {{
-                                                                    try {{
-                                                                        parentFrames[i].contentWindow.postMessage(message, '*');
-                                                                        console.log(`Mensaje enviado a parent.iframe[${{i}}]`);
-                                                                    }} catch(e) {{
-                                                                        console.error(`Error enviando a parent.iframe[${{i}}]:`, e);
-                                                                    }}
-                                                                }}
-                                                            }} catch(e) {{
-                                                                console.error("Error accediendo a iframes de parent:", e);
-                                                            }}
-                                                        }}
-                                                        
-                                                        // Llamar inmediatamente
-                                                        broadcastMessage();
-                                                        
-                                                        // Reintentar varias veces para asegurar la entrega
-                                                        setTimeout(broadcastMessage, 100);
-                                                        setTimeout(broadcastMessage, 500);
-                                                        setTimeout(broadcastMessage, 1000);
-                                                    }})();
-                                                </script>
-                                            """
-                                            
-                                            # Inyectar el script en la página
-                                            components.html(face_boxes_js, height=0, width=0)
-                                        
-                                        # Agregar un script para forzar la visualización de los rectángulos
-                                        # y actualizar el estado del canvas incluso si no hay detecciones
-                                        force_display_js = """
-                                            <script>
-                                                (function() {
-                                                    console.log("Forzando actualización del display");
-                                                    
-                                                    const noDetectionMessage = {
-                                                        type: 'faceBoxes',
-                                                        boxes: [],
-                                                        timestamp: Date.now(),
-                                                        forceDisplay: false
-                                                    };
-                                                    
-                                                    // Enviar a todos los destinos posibles
-                                                    try { window.parent.postMessage(noDetectionMessage, '*'); } catch(e) {}
-                                                    try { window.postMessage(noDetectionMessage, '*'); } catch(e) {}
-                                                    
-                                                    try {
-                                                        const frames = document.getElementsByTagName('iframe');
-                                                        for(let i = 0; i < frames.length; i++) {
-                                                            try { frames[i].contentWindow.postMessage(noDetectionMessage, '*'); } catch(e) {}
-                                                        }
-                                                    } catch(e) {}
-                                                })();
-                                            </script>
-                                        """
-                                        components.html(force_display_js, height=0, width=0)
+                                    bboxes = detect_face_dnn(face_net, small_img, confidence_threshold)
                                 except Exception as e:
-                                    st.error(f"Error processing camera frame: {str(e)}")
-                                    st.info("Camera continues to run. Processing will be attempted on next frame.")
-                
-                # Añadir opción de cámara alternativa para entornos donde WebRTC no funciona bien
-                st.markdown("---")
-                st.markdown("### Alternative Camera Mode")
-
-                col1, col2 = st.columns(2)
-                simple_camera = col1.button("Use Simple Camera", key="simple_camera_button1", use_container_width=True)
-                stop_simple_camera = col2.button("Stop Camera", key="stop_camera_button1", use_container_width=True)
-
-                if simple_camera:
-                    st.session_state.simple_camera = True
-                    st.session_state.demo_running = False
-                    st.session_state.upload_mode = False
-                    
-                if stop_simple_camera:
-                    st.session_state.simple_camera = False
-
-                if st.session_state.get('simple_camera', False):
-                    # Contenedor para la cámara
-                    camera_container = st.container()
-                    
-                    # Configurar métricas
-                    faces_metric.metric("Faces detected", 0)
-                    fps_metric.metric("FPS", "N/A")
-                    time_metric.metric("Status", "Running")
-                    
-                    # Cámara simple que toma una imagen a la vez
-                    with camera_container:
-                        st.info("Simple camera activated. Each image is processed individually. Take a photo with your camera to detect faces.")
-                        
-                        # Usar imagen de la cámara
-                        captured_image = st.camera_input("Take photo for recognition", key="camera_simple_input")
-                        
-                        # Procesar la imagen si está disponible
-                        if captured_image is not None:
-                            try:
-                                # Leer imagen
-                                image_bytes = captured_image.getvalue()
-                                image = cv2.imdecode(np.frombuffer(image_bytes, np.uint8), cv2.IMREAD_COLOR)
+                                    print(f"Error al detectar rostros: {e}")
+                                    bboxes = []
                                 
-                                if image is not None and image.size > 0:
-                                    # Detectar rostros
-                                    bboxes = detect_face_dnn(face_net, image, confidence_threshold)
-                                    
-                                    # Actualizar métricas
-                                    faces_metric.metric("Faces detected", len(bboxes))
-                                    
-                                    # Dibujar resultados
-                                    result_img = image.copy()
-                                    for i, bbox in enumerate(bboxes):
-                                        x1, y1, x2, y2, conf = bbox
-                                        cv2.rectangle(result_img, (x1, y1), (x2, y2), (0, 255, 0), 2)
-                                        cv2.putText(result_img, f"Face {i+1}: {conf:.2f}", (x1, y1-10), 
-                                                  cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 0), 2)
-                                    
-                                    # Mostrar resultado
-                                    st.image(result_img, channels="BGR", caption="Detected faces", use_container_width=True)
-                                    
-                                    if len(bboxes) > 0:
-                                        # Si hay rostros registrados, intentar reconocerlos
-                                        if st.session_state.face_database and len(st.session_state.face_database) > 0:
-                                            st.subheader("Face Recognition:")
-                                            
-                                            recognition_results = []
-                                            for i, bbox in enumerate(bboxes):
-                                                x1, y1, x2, y2, _ = bbox
-                                                face_img = image[y1:y2, x1:x2]
-                                                
-                                                # Extraer el embedding del rostro
-                                                if model_choice == "VGG-Face":
-                                                    embedding = vggface_model(face_img)
-                                                elif model_choice == "Facenet":
-                                                    embedding = facenet_model(face_img)
-                                                elif model_choice == "OpenFace":
-                                                    embedding = openface_model(face_img)
-                                                elif model_choice == "ArcFace":
-                                                    embedding = arcface_model(face_img)
-                                                else:  # Default to VGG-Face
-                                                    embedding = vggface_model(face_img)
-                                                
-                                                # Comparar con rostros registrados
-                                                best_match = None
-                                                best_similarity = -1
-                                                
-                                                for name, info in st.session_state.face_database.items():
-                                                    if 'embeddings' in info and info['embeddings']:
-                                                        for emb_info in info['embeddings']:
-                                                            if emb_info['model'] == model_choice:
-                                                                stored_emb = emb_info['embedding']
-                                                                similarity = cosine_similarity(embedding, stored_emb)
-                                                                
-                                                                if similarity > similarity_threshold and similarity > best_similarity:
-                                                                    best_similarity = similarity
-                                                                    best_match = name
-                                                
-                                                if best_match is not None:
-                                                    recognition_results.append({
-                                                        'bbox': bbox,
-                                                        'name': best_match,
-                                                        'similarity': best_similarity
-                                                    })
-                                            
-                                            # Mostrar resultados de reconocimiento
-                                            if recognition_results:
-                                                result_with_names = result_img.copy()
-                                                for result in recognition_results:
-                                                    x1, y1, x2, y2, _ = result['bbox']
-                                                    name = result['name']
-                                                    similarity = result['similarity']
-                                                    
-                                                    # Dibujar nombre y similitud
-                                                    cv2.rectangle(result_with_names, (x1, y1), (x2, y2), (0, 255, 0), 2)
-                                                    label = f"{name}: {similarity:.2f}"
-                                                    cv2.putText(result_with_names, label, (x1, y1-10), 
-                                                              cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 0), 2)
-                                                
-                                                with result_container:
-                                                    st.image(result_with_names, channels="BGR", caption="Real-time capture", use_container_width=True)
-                                                
-                                                # Mostrar tabla de resultados
-                                                results_df = pd.DataFrame([
-                                                    {"Name": r['name'], "Confidence": f"{r['similarity']:.2f}"} 
-                                                    for r in recognition_results
-                                                ])
-                                                st.table(results_df)
-                                            else:
-                                                st.warning("Could not recognize any of the detected faces.")
-                                        else:
-                                            st.info("No registered faces to compare. Please register faces in the 'Face Registration' section.")
-                                        
-                                        st.success(f"{len(bboxes)} faces detected")
-                                    else:
-                                        st.warning("No faces detected. Try with better lighting or a different position.")
-                                else:
-                                    st.error("Could not process the image. Try taking another photo.")
+                                # Ajustar bounding boxes al tamaño original
+                                original_bboxes = []
+                                for x1, y1, x2, y2, conf in bboxes:
+                                    original_bboxes.append((
+                                        int(x1 / scale_factor), 
+                                        int(y1 / scale_factor), 
+                                        int(x2 / scale_factor), 
+                                        int(y2 / scale_factor),
+                                        conf
+                                    ))
+                                
+                                # Actualizar contadores
+                                self.face_count = len(original_bboxes)
+                                current_time = time.time()
+                                elapsed_time = current_time - self.start_time
+                                fps = self.frames_processed / elapsed_time if elapsed_time > 0 else 0
+                                
+                                # Actualizar métricas en session_state para que sean accesibles fuera
+                                st.session_state.faces_detected = self.face_count
+                                st.session_state.fps = fps
+                                
+                                # Dibujar cajas de los rostros
+                                result_img = img.copy()
+                                for i, (x1, y1, x2, y2, conf) in enumerate(original_bboxes):
+                                    cv2.rectangle(result_img, (x1, y1), (x2, y2), (0, 255, 0), 2)
+                                    cv2.putText(result_img, f"Face {i+1}: {conf:.2f}", (x1, y1-10), 
+                                               cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)
+                                
+                                # Añadir información FPS y rostros
+                                cv2.putText(result_img, f"FPS: {fps:.1f}", (10, 30), 
+                                           cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                                cv2.putText(result_img, f"Faces: {self.face_count}", (10, 60), 
+                                           cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                                
+                                return av.VideoFrame.from_ndarray(result_img, format="bgr24")
                             except Exception as e:
-                                st.error(f"Error processing image: {str(e)}")
-                                st.info("Try taking another photo or use another option.")
-
-                # Opción alternativa en caso de problemas con WebRTC (mantenemos esta opción también)
-                st.markdown("---")
-                st.markdown("### Other Options")
-                col1, col2 = st.columns(2)
-                demo_mode = col1.button("Use Demo Mode", key="demo_button1")
-                upload_mode = col2.button("Upload Image for Recognition", key="upload_button1")
-
-                if demo_mode:
-                    st.session_state.demo_running = True
-                    st.session_state.upload_mode = False
-                    st.session_state.simple_camera = False
-                elif upload_mode:
-                    st.session_state.upload_mode = True
-                    st.session_state.demo_running = False
-                    st.session_state.simple_camera = False
-
-                # Modo de demostración con imágenes simuladas
-                if st.session_state.get('demo_running', False):
-                    # Cargar algunas imágenes de ejemplo (usar tus propias imágenes si es posible)
-                    demo_img = None
-                    
-                    # Intentar usar una imagen de la base de datos
-                    if st.session_state.face_database:
-                        for name, info in st.session_state.face_database.items():
-                            if 'image' in info:
+                                print(f"Error general en procesamiento de video: {str(e)}")
                                 try:
-                                    demo_img = info['image']
-                                    break
+                                    # Intentar devolver el frame original
+                                    return av.VideoFrame.from_ndarray(img, format="bgr24")
                                 except:
-                                    pass
-                    
-                    # Si no hay imagen disponible, crear una imagen en blanco
-                    if demo_img is None:
-                        demo_img = np.ones((480, 640, 3), dtype=np.uint8) * 255
-                        # Dibujar un círculo como "cara" simulada
-                        cv2.circle(demo_img, (320, 240), 100, (0, 0, 255), -1)
-                        cv2.circle(demo_img, (280, 200), 15, (255, 255, 255), -1)
-                        cv2.circle(demo_img, (360, 200), 15, (255, 255, 255), -1)
-                        cv2.ellipse(demo_img, (320, 260), (50, 30), 0, 0, 180, (255, 255, 255), -1)
-                    
-                    # Mostrar la imagen
-                    st.image(demo_img, channels="BGR", caption="Demo Mode", use_container_width=True)
-                    
-                    # Simular métricas
-                    faces_metric.metric("Faces detected", 1)
-                    fps_metric.metric("FPS", "15.5")
-                    time_metric.metric("Status", "Demo")
-                    
-                    st.success("Demo mode activated. In a local environment, real-time facial recognition would work correctly.")
+                                    # Si eso falla, devolver un frame en blanco como último recurso
+                                    blank = np.ones((480, 640, 3), dtype=np.uint8) * 255
+                                    return av.VideoFrame.from_ndarray(blank, format="bgr24")
 
-                # Modo de carga de imagen
-                if st.session_state.get('upload_mode', False):
-                    uploaded_file = st.file_uploader("Upload an image with faces", type=["jpg", "jpeg", "png"], key="upload_image_input")
-                    
-                    if uploaded_file is not None:
-                        # Leer imagen
-                        image_bytes = uploaded_file.read()
-                        image = cv2.imdecode(np.frombuffer(image_bytes, np.uint8), cv2.IMREAD_COLOR)
+                # Display WebRTC streamer con opciones simplificadas para mejorar compatibilidad
+                # Solo mostrar si WebRTC está disponible
+                if st.session_state.webrtc_available:
+                    st.info("⚠️ If the video doesn't load: Try using Chrome, reload the page, or use the alternative options below.")
+                    try:
+                        webrtc_ctx = webrtc_streamer(
+                            key="face-recognition",
+                            mode=WebRtcMode.SENDRECV,
+                            rtc_configuration=rtc_configuration,
+                            media_stream_constraints={"video": {"width": 640, "height": 480}, "audio": False},
+                            video_processor_factory=VideoProcessor,
+                            async_processing=True,
+                        )
                         
-                        # Detectar rostros
-                        bboxes = detect_face_dnn(face_net, image, confidence_threshold)
+                        # Establecer y actualizar métricas
+                        if webrtc_ctx.state.playing:
+                            faces_metric.metric("Faces detected", st.session_state.get('faces_detected', 0))
+                            fps_metric.metric("FPS", f"{st.session_state.get('fps', 0):.1f}")
+                            time_metric.metric("Status", "Running")
+                            
+                            # Mostrar instrucciones de uso
+                            st.success("Webcam activated. Detected faces will be identified in real-time.")
+                        else:
+                            faces_metric.metric("Faces detected", 0)
+                            fps_metric.metric("FPS", "0")
+                            time_metric.metric("Status", "Stopped")
+                            
+                            # Mostrar instrucciones de activación
+                            st.warning("Click START to activate the webcam. This feature may not be available in environments like Hugging Face Spaces due to security restrictions.")
+                    except Exception as e:
+                        st.error(f"Error initializing WebRTC: {str(e)}")
+                        st.info("Switching to alternative camera mode...")
+                        st.session_state.continuous_capture = True
+                        st.session_state.webrtc_available = False
+
+    elif app_mode == "Diagnóstico":
+        st.title("Diagnóstico de Detección Facial")
+        st.markdown("""
+        Esta herramienta ayuda a identificar problemas con la detección de rostros.
+        """)
+        
+        # Verificación de archivos de modelo
+        st.header("1. Verificación de archivos de modelo")
+        
+        # Verificar archivos de modelo
+        model_file = "res10_300x300_ssd_iter_140000.caffemodel"
+        config_file = "deploy.prototxt.txt"
+        
+        model_exists = os.path.exists(model_file)
+        config_exists = os.path.exists(config_file)
+        
+        if model_exists:
+            st.success(f"✅ Modelo encontrado: {model_file}")
+        else:
+            st.error(f"❌ Modelo no encontrado: {model_file}")
+        
+        if config_exists:
+            st.success(f"✅ Modelo encontrado: {config_file}")
+        else:
+            st.error(f"❌ Archivo de configuración no encontrado: {config_file}")
+        
+        # Prueba de carga del modelo
+        st.header("2. Prueba de carga del modelo")
+        
+        try:
+            if model_exists and config_exists:
+                net = cv2.dnn.readNetFromCaffe(config_file, model_file)
+                st.success(f"✅ Modelo cargado correctamente: <class '{type(net).__name__}'>")
+            else:
+                st.warning("⚠️ No se puede cargar el modelo porque faltan archivos")
+        except Exception as e:
+            st.error(f"❌ Error al cargar el modelo: {str(e)}")
+        
+        # Sección para probar detección
+        st.header("3. Probar detección")
+        
+        # Agregar una imagen de prueba
+        test_image = st.file_uploader("Sube una imagen de prueba", type=['jpg', 'jpeg', 'png'])
+        
+        if test_image is not None:
+            # Leer y mostrar la imagen
+            raw_bytes = np.asarray(bytearray(test_image.read()), dtype=np.uint8)
+            image = cv2.imdecode(raw_bytes, cv2.IMREAD_COLOR)
+            
+            st.image(image, channels='BGR', caption="Imagen de prueba", use_container_width=True)
+            
+            # Umbral de confianza ajustable
+            conf_threshold = st.slider(
+                "Umbral de confianza",
+                min_value=0.05,
+                max_value=0.95,
+                value=0.3,
+                step=0.05
+            )
+            
+            # Intentar detectar rostros
+            if st.button("Probar detección"):
+                st.write("Resultado con umbral", conf_threshold)
+                
+                try:
+                    if model_exists and config_exists:
+                        # Intentar cargar el modelo nuevamente para asegurarse
+                        net = cv2.dnn.readNetFromCaffe(config_file, model_file)
                         
-                        # Dibujar rostros detectados
-                        result_img = image.copy()
-                        for i, bbox in enumerate(bboxes):
-                            x1, y1, x2, y2, _ = bbox
-                            cv2.rectangle(result_img, (x1, y1), (x2, y2), (0, 255, 0), 2)
-                            cv2.putText(result_img, f"Face {i+1}", (x1, y1-10), 
-                                       cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 0), 2)
+                        # Detectar rostros
+                        detections = detect_face_dnn(net, image, conf_threshold)
+                        processed_image, bboxes = process_face_detections(image, detections, conf_threshold)
                         
-                        # Mostrar resultado
-                        st.image(result_img, channels="BGR", caption="Detected faces", use_container_width=True)
+                        # Mostrar estadísticas
+                        st.write(f"Detecciones encontradas: {len(bboxes)}")
                         
-                        # Actualizar métricas
-                        faces_metric.metric("Faces detected", len(bboxes))
-                        time_metric.metric("Status", "Processed")
-
-                # Add a note about privacy
-                st.markdown("---")
-                st.markdown("**Privacy Note**: Video is processed in your browser and on the server. No video data is stored permanently.")
-
-                # Agregar opción para cargar imagen desde URL
-                use_url = st.checkbox("Load image from URL")
-                
-                # Diagnóstico para verificar modelos
-                with st.expander("🔍 Diagnóstico de detección", expanded=False):
-                    st.warning("Si los rectángulos no aparecen, usa esta herramienta para verificar que los modelos de detección están funcionando correctamente.")
-                    col1, col2 = st.columns(2)
-                    
-                    if col1.button("Ver diagnóstico de detección"):
-                        try:
-                            with open("diagnostico_deteccion.txt", "r") as f:
-                                diagnostico = f.read()
-                            st.code(diagnostico, language="text")
-                        except FileNotFoundError:
-                            st.info("Aún no hay información de diagnóstico disponible. Procesa una imagen primero.")
-                    
-                    if col2.button("Verificar modelo"):
-                        st.info("Verificando modelo de detección facial...")
+                        # Mostrar imagen procesada
+                        st.image(processed_image, channels='BGR', caption="Resultado con detecciones", use_container_width=True)
                         
-                        # Verificar si el modelo está cargado correctamente
-                        try:
-                            if 'face_net' in locals():
-                                st.success(f"Modelo cargado: {type(face_net)}")
-                                st.json({"Modelo": str(type(face_net)),
-                                        "Estado": "Cargado correctamente",
-                                        "Archivo del modelo": "res10_300x300_ssd_iter_140000.caffemodel",
-                                        "Archivo de configuración": "deploy.prototxt.txt"})
-                            else:
-                                face_net = load_face_model()
-                                st.success(f"Modelo cargado durante verificación: {type(face_net)}")
-                        except Exception as e:
-                            st.error(f"Error al verificar modelo: {str(e)}")
-                
-                if use_url:
-                    # Agregar campo de URL
-                    url = st.text_input("Enter image URL")
-                    
-                    if st.button("Load Image from URL"):
-                        try:
-                            # Cargar imagen desde URL
-                            response = urllib.request.urlopen(url)
-                            image_data = response.read()
-                            image = cv2.imdecode(np.frombuffer(image_data, np.uint8), cv2.IMREAD_COLOR)
-                            
-                            if image is not None and image.size > 0:
-                                # Detectar rostros
-                                bboxes = detect_face_dnn(face_net, image, conf_threshold)
-                                
-                                if bboxes:
-                                    # Mostrar imagen con rostros detectados
-                                    st.image(image, channels='BGR', caption="Detected faces")
-                                    
-                                    # Mostrar estadísticas
-                                    st.subheader("Detection Summary")
-                                    summary_col1, summary_col2, summary_col3 = st.columns(3)
-                                    summary_col1.metric("Faces Detected", len(bboxes))
-                                    summary_col2.metric("Eyes Detected", 0)
-                                    summary_col3.metric("Smiles Detected", 0)
-                                    
-                                    # Mostrar cajas detectadas
-                                    st.subheader("Detected Faces")
-                                    for i, bbox in enumerate(bboxes):
-                                        x1, y1, x2, y2, _ = bbox
-                                        cv2.rectangle(image, (x1, y1), (x2, y2), (0, 255, 0), 2)
-                                        cv2.putText(image, f"Face {i+1}", (x1, y1-10), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 0), 2)
-                                else:
-                                    st.warning("No faces detected. Please try a different URL.")
-                            else:
-                                st.warning("Failed to load image. Please check the URL.")
-                        except Exception as e:
-                            st.error(f"Error loading image from URL: {str(e)}")
+                        if len(bboxes) == 0:
+                            st.error("No se detectaron rostros en la imagen de prueba.")
+                            st.warning("Posibles problemas:")
+                            st.markdown("""
+                            1. El modelo no se está cargando correctamente.
+                            2. El procesamiento de la imagen es incorrecto.
+                            3. El umbral de confianza es demasiado alto.
+                            4. Hay un problema con la visualización de los resultados.
+                            """)
+                    else:
+                        st.error("No se puede probar la detección porque faltan archivos del modelo")
+                except Exception as e:
+                    st.error(f"Error durante la detección: {str(e)}")
+        
+        # Información del sistema
+        st.header("Estadísticas de detección")
+        if os.path.exists("diagnostico_deteccion.txt"):
+            with open("diagnostico_deteccion.txt", "r") as f:
+                log_content = f.read()
+                with st.expander("Ver registro de diagnóstico"):
+                    st.code(log_content, language="text")
+        else:
+            st.info("No hay archivo de diagnóstico disponible.")
 
 # Si se ejecuta este archivo directamente, llamar a la función main
 if __name__ == "__main__":