Mejorar la comunicación entre backend y frontend para la detección facial

streamlit_app.py

@@ -131,66 +131,132 @@ def main():
         print(f"Detecting faces with confidence threshold: {conf_threshold}")
         
         # Obtener dimensiones de la imagen
+        if frame is None or frame.size == 0:
+            print("Error: Empty frame received in detect_face_dnn")
+            return None
+            
         h, w = frame.shape[:2]
         
-        # Crear un blob de la imagen (redimensionada a 300x300 y normalizada)
-        # IMPORTANTE: Los valores de media (104.0, 177.0, 123.0) son específicos 
-        # para el modelo res10_300x300_ssd_iter_140000.caffemodel entrenado en Caffe
-        blob = cv2.dnn.blobFromImage(cv2.resize(frame, (300, 300)), 1.0,
-                                    (300, 300), (104.0, 177.0, 123.0))
-        
-        # Pasar el blob a través de la red
-        net.setInput(blob)
+        # Verificar que el modelo esté cargado correctamente
+        if net is None:
+            print("Error: Face detection model not loaded")
+            return None
         
-        # Realizar la detección (forward pass)
         try:
-            detections = net.forward()
-            print(f"Shape of detection output: {detections.shape}")
+            # Intentamos con el DNN
+            # Crear un blob de la imagen (redimensionada a 300x300 y normalizada)
+            # IMPORTANTE: Los valores de media (104.0, 177.0, 123.0) son específicos 
+            # para el modelo res10_300x300_ssd_iter_140000.caffemodel entrenado en Caffe
+            blob = cv2.dnn.blobFromImage(cv2.resize(frame, (300, 300)), 1.0,
+                                        (300, 300), (104.0, 177.0, 123.0))
+            
+            # Pasar el blob a través de la red
+            net.setInput(blob)
+            
+            # Realizar la detección (forward pass)
+            try:
+                detections = net.forward()
+                print(f"Shape of detection output: {detections.shape}")
+            except Exception as e:
+                print(f"Error al procesar la imagen con el modelo DNN: {str(e)}")
+                # Intentar con Haar Cascades como alternativa
+                return detect_face_haar(frame, conf_threshold)
+                
+            # Variable para almacenar las cajas delimitadoras
+            bboxes = []
+            
+            # Procesar cada detección
+            detection_count = 0
+            for i in range(detections.shape[2]):
+                # Extraer la confianza (probabilidad) de la detección
+                confidence = detections[0, 0, i, 2]
+                
+                # Filtrar detecciones débiles por confianza
+                if confidence > conf_threshold:
+                    detection_count += 1
+                    # La red da las coordenadas de la caja normalizadas entre 0 y 1
+                    # Multiplicamos por ancho y alto para obtener coordenadas en píxeles
+                    box = detections[0, 0, i, 3:7] * np.array([w, h, w, h])
+                    
+                    # Convertir a enteros
+                    x1, y1, x2, y2 = box.astype("int")
+                    
+                    # Garantizar que las coordenadas estén dentro de los límites de la imagen
+                    x1, y1 = max(0, x1), max(0, y1)
+                    x2, y2 = min(w, x2), min(h, y2)
+                    
+                    # Imprimir información de depuración
+                    print(f"Detección #{detection_count}: confianza={confidence:.3f}, bbox=[{x1},{y1},{x2},{y2}]")
+                    
+                    # Saltar cajas inválidas (por ejemplo, con ancho o alto negativo)
+                    width, height = x2 - x1, y2 - y1
+                    if width <= 0 or height <= 0:
+                        print(f"Saltando caja inválida con dimensiones: {width}x{height}")
+                        continue
+                    
+                    # Añadir la caja y la confianza a la lista de resultados
+                    bboxes.append([x1, y1, x2, y2, confidence])
+            
+            # Dar feedback sobre el número de detecciones
+            print(f"Total de detecciones con confianza > {conf_threshold}: {detection_count}")
+            print(f"Total de cajas válidas: {len(bboxes)}")
+            
+            # Si no se encontraron rostros con DNN, intentar con Haar cascades como fallback
+            if not bboxes:
+                print("No se encontraron rostros con DNN, intentando con Haar cascades...")
+                return detect_face_haar(frame, conf_threshold)
+                
+            # Devolver None si no hay detecciones, o la lista de bboxes en caso contrario
+            return bboxes if bboxes else None
+            
         except Exception as e:
-            print(f"Error al procesar la imagen con el modelo DNN: {str(e)}")
-            return None
+            print(f"Error general en detect_face_dnn: {str(e)}")
+            # En caso de error, usar Haar cascades como fallback
+            return detect_face_haar(frame, conf_threshold)
+    
+    # Función alternativa para detectar rostros usando Haar Cascades
+    def detect_face_haar(frame, conf_threshold=0.3):
+        """Detecta rostros usando Haar Cascades como método de respaldo"""
+        try:
+            # Carga el clasificador Haar Cascade para rostros (debería estar cargado globalmente,
+            # pero lo hacemos aquí para asegurar que esté disponible)
+            if 'haar_face_cascade' not in st.session_state:
+                cascade_path = cv2.data.haarcascades + 'haarcascade_frontalface_default.xml'
+                st.session_state.haar_face_cascade = cv2.CascadeClassifier(cascade_path)
+                print(f"Haar cascade loaded from {cascade_path}")
+            
+            # Convertir a escala de grises
+            gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+            
+            # Ecualizar el histograma para mejorar contraste
+            gray = cv2.equalizeHist(gray)
+            
+            # Detectar rostros - la confianza se controla con minNeighbors
+            # Usamos el umbral de confianza como guía para minNeighbors
+            min_neighbors = max(3, int(conf_threshold * 10))
+            faces = st.session_state.haar_face_cascade.detectMultiScale(
+                gray,
+                scaleFactor=1.1,
+                minNeighbors=min_neighbors,
+                minSize=(30, 30),
+                flags=cv2.CASCADE_SCALE_IMAGE
+            )
             
-        # Variable para almacenar las cajas delimitadoras
-        bboxes = []
-        
-        # Procesar cada detección
-        detection_count = 0
-        for i in range(detections.shape[2]):
-            # Extraer la confianza (probabilidad) de la detección
-            confidence = detections[0, 0, i, 2]
+            print(f"Haar cascade found {len(faces)} faces")
             
-            # Filtrar detecciones débiles por confianza
-            if confidence > conf_threshold:
-                detection_count += 1
-                # La red da las coordenadas de la caja normalizadas entre 0 y 1
-                # Multiplicamos por ancho y alto para obtener coordenadas en píxeles
-                box = detections[0, 0, i, 3:7] * np.array([w, h, w, h])
-                
-                # Convertir a enteros
-                x1, y1, x2, y2 = box.astype("int")
-                
-                # Garantizar que las coordenadas estén dentro de los límites de la imagen
-                x1, y1 = max(0, x1), max(0, y1)
-                x2, y2 = min(w, x2), min(h, y2)
-                
-                # Imprimir información de depuración
-                print(f"Detección #{detection_count}: confianza={confidence:.3f}, bbox=[{x1},{y1},{x2},{y2}]")
-                
-                # Saltar cajas inválidas (por ejemplo, con ancho o alto negativo)
-                width, height = x2 - x1, y2 - y1
-                if width <= 0 or height <= 0:
-                    print(f"Saltando caja inválida con dimensiones: {width}x{height}")
-                    continue
-                
-                # Añadir la caja y la confianza a la lista de resultados
-                bboxes.append([x1, y1, x2, y2, confidence])
-        
-        # Dar feedback sobre el número de detecciones
-        print(f"Total de detecciones con confianza > {conf_threshold}: {detection_count}")
-        print(f"Total de cajas válidas: {len(bboxes)}")
-        
-        # Devolver None si no hay detecciones, o la lista de bboxes en caso contrario
-        return bboxes if bboxes else None
+            # Convertir al formato [x1, y1, x2, y2, confidence]
+            # Note que Haar Cascades no proporciona un valor de confianza real
+            bboxes = []
+            for (x, y, w, h) in faces:
+                # Usamos un valor fijo de confianza de 0.8 para Haar detections
+                # Esto es arbitrario pero útil para el procesamiento posterior
+                bboxes.append([x, y, x+w, y+h, 0.8])
+                
+            return bboxes if bboxes else None
+            
+        except Exception as e:
+            print(f"Error en detect_face_haar: {str(e)}")
+            return None
 
     # Function for processing face detections
     def process_face_detections(frame, detections, conf_threshold=0.5, bbox_color=(0, 255, 0)):
@@ -2490,6 +2556,9 @@ def main():
                             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 / %s;
                             
@@ -2528,6 +2597,9 @@ def main():
                                     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();
+                                    
                                     // Dibujar un rectángulo de prueba en cada captura
                                     drawTestRect();
                                     
@@ -2542,26 +2614,62 @@ def main():
                                 }
                             }
                             
-                            // Debug para todos los mensajes recibidos
-                            window.addEventListener('message', function(event) {
-                                console.log('Mensaje recibido:', event.data);
-                            });
+                            // 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);
+                                }
+                            }
                             
-                            // Recibir datos de detección de rostros y dibujarlos
+                            // Debug para todos los mensajes recibidos
                             window.addEventListener('message', function(event) {
-                                try {
+                                console.log('>>> Mensaje recibido:', event.data);
+                                
+                                // 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);
                                     
-                                    // Verificar si es un mensaje con cajas de rostros
-                                    if (message && message.type === 'faceBoxes') {
-                                        console.log('Recibido datos de cajas:', message.boxes);
-                                        const boxes = message.boxes;
+                                    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 && boxes.length > 0) {
+                                        if (boxes.length > 0) {
                                             console.log(`Dibujando ${boxes.length} cajas de rostros`);
                                             boxes.forEach(box => {
                                                 if (box && box.length >= 5) {
@@ -2604,13 +2712,20 @@ def main():
                                             displayCtx.font = 'bold 18px Arial';
                                             displayCtx.fillText('No se detectan rostros', 20, 30);
                                             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 = [];
+                                            }
                                         }
                                         
                                         // Dibuja un rectángulo de prueba siempre, para verificar que el canvas funciona
                                         drawTestRect();
                                     }
-                                } catch (error) {
-                                    console.error('Error al procesar mensaje:', error);
+                                } else if (event.data && event.data.type === 'testRect') {
+                                    // Si solo recibimos una señal de prueba, dibujar el rectángulo
+                                    console.log('Recibido señal para dibujar rectángulo de prueba');
+                                    drawTestRect();
                                 }
                             });
                             
@@ -2697,60 +2812,130 @@ def main():
                                             # Imprimir en el servidor para depuración
                                             print(f"Cajas de rostros detectadas: {bbox_list}")
                                             
-                                            # Crear script para enviar datos al componente JavaScript
+                                            # Crear script para enviar datos al componente JavaScript - Versión mejorada con múltiples métodos
                                             face_boxes_js = f"""
                                                 <script>
-                                                    console.log("Enviando cajas de rostros al componente: {bbox_list}");
-                                                    
-                                                    // Usar setTimeout para asegurarse de que el componente está inicializado
-                                                    setTimeout(function() {{
-                                                        window.parent.postMessage(
-                                                            {{
-                                                                type: 'faceBoxes',
-                                                                boxes: {json.dumps(bbox_list)}
-                                                            }},
-                                                            '*'
-                                                        );
+                                                    // 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()
+                                                        }};
                                                         
-                                                        // También enviar un evento directo al iframe si existe
-                                                        try {{
-                                                            const frames = window.parent.document.getElementsByTagName('iframe');
-                                                            for(let i = 0; i < frames.length; i++) {{
-                                                                frames[i].contentWindow.postMessage(
-                                                                    {{
-                                                                        type: 'faceBoxes',
-                                                                        boxes: {json.dumps(bbox_list)}
-                                                                    }},
-                                                                    '*'
-                                                                );
+                                                        // 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);
                                                             }}
-                                                            console.log("Mensaje enviado a todos los iframes");
-                                                        }} catch(e) {{
-                                                            console.error("Error enviando mensaje directo a iframes:", e);
                                                         }}
-                                                    }}, 200);
+                                                        
+                                                        // 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
-                                            st.components.v1.html(face_boxes_js, height=0, width=0)
+                                            components.html(face_boxes_js, height=0, width=0)
                                         
-                                        # Agregar un script para dibujar un rectángulo de prueba, 
-                                        # independientemente de si hay detecciones o no
-                                        test_rect_js = """
+                                        # 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>
-                                                console.log("Enviando señal de rectángulo de prueba");
-                                                setTimeout(function() {
-                                                    window.parent.postMessage(
-                                                        {
-                                                            type: 'testRect'
-                                                        },
-                                                        '*'
-                                                    );
-                                                }, 100);
+                                                (function() {
+                                                    console.log("Forzando actualización del rectángulo de prueba");
+                                                    
+                                                    const noDetectionMessage = {
+                                                        type: 'faceBoxes',
+                                                        boxes: [],
+                                                        timestamp: Date.now(),
+                                                        forceDisplay: true
+                                                    };
+                                                    
+                                                    // 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) {}
+                                                    
+                                                    // Enviar señal de prueba para verificar comunicación
+                                                    const testMessage = {
+                                                        type: 'testRect',
+                                                        timestamp: Date.now()
+                                                    };
+                                                    
+                                                    try { window.parent.postMessage(testMessage, '*'); } catch(e) {}
+                                                    try { window.postMessage(testMessage, '*'); } catch(e) {}
+                                                    
+                                                    try {
+                                                        const frames = document.getElementsByTagName('iframe');
+                                                        for(let i = 0; i < frames.length; i++) {
+                                                            try { frames[i].contentWindow.postMessage(testMessage, '*'); } catch(e) {}
+                                                        }
+                                                    } catch(e) {}
+                                                })();
                                             </script>
                                         """
-                                        st.components.v1.html(test_rect_js, height=0, width=0)
+                                        components.html(force_display_js, height=0, width=0)
                                 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.")