Mejorar visibilidad de la detección facial con rectángulos más visibles y colores destacados

streamlit_app.py

@@ -114,50 +114,83 @@ def main():
         return eye_cascade, smile_cascade
 
     # Function for detecting faces in an image
-    def detect_face_dnn(net, frame, conf_threshold=0.5):
+    def detect_face_dnn(net, frame, conf_threshold=0.3):
         """
-        Detecta rostros usando el modelo DNN y devuelve las detecciones.
+        Detecta rostros en una imagen utilizando un modelo DNN pre-entrenado.
+        
+        Args:
+            net: Modelo DNN cargado
+            frame: Imagen en formato BGR
+            conf_threshold: Umbral de confianza para la detección (0.0-1.0)
+            
+        Returns:
+            Lista de bounding boxes con formato [x1, y1, x2, y2, confidence]
+            o None si no se detectan rostros
         """
+        # Añadir impresión de depuración para el umbral usado
+        print(f"Detecting faces with confidence threshold: {conf_threshold}")
+        
+        # Obtener dimensiones de la imagen
+        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)
+        
+        # Realizar la detección (forward pass)
         try:
-            # Verificar que el frame sea válido
-            if frame is None or frame.size == 0 or frame.shape[0] == 0 or frame.shape[1] == 0:
-                return []
-                
-            # Crear blob a partir del frame (redimensionar a 300x300, escalar, etc.)
-            blob = cv2.dnn.blobFromImage(frame, 1.0, (300, 300), [104, 117, 123], False, False)
-            
-            # Establecer la entrada para la red neuronal
-            net.setInput(blob)
-            
-            # Realizar la detección
             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)}")
+            return None
             
-            # Procesar las detecciones para devolver una lista de bounding boxes
-            bboxes = []
-            frame_h = frame.shape[0]
-            frame_w = frame.shape[1]
+        # 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]
             
-            for i in range(detections.shape[2]):
-                confidence = detections[0, 0, i, 2]
-                if confidence > conf_threshold:
-                    x1 = int(detections[0, 0, i, 3] * frame_w)
-                    y1 = int(detections[0, 0, i, 4] * frame_h)
-                    x2 = int(detections[0, 0, i, 5] * frame_w)
-                    y2 = int(detections[0, 0, i, 6] * frame_h)
-                    
-                    # Asegurarse de que las coordenadas estén dentro de los límites
-                    x1 = max(0, min(x1, frame_w - 1))
-                    y1 = max(0, min(y1, frame_h - 1))
-                    x2 = max(0, min(x2, frame_w - 1))
-                    y2 = max(0, min(y2, frame_h - 1))
-                    
-                    # Añadir el bounding box y la confianza
-                    bboxes.append([x1, y1, x2, y2, confidence])
-            
-            return bboxes
-        except Exception as e:
-            st.error(f"Error en la detección de rostros: {e}")
-            return []
+            # 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
 
     # Function for processing face detections
     def process_face_detections(frame, detections, conf_threshold=0.5, bbox_color=(0, 255, 0)):
@@ -2433,7 +2466,7 @@ def main():
                         <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;"></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');
@@ -2446,6 +2479,17 @@ def main():
                             // 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');
+                            
                             // Configuración dinámica del FPS (desde Streamlit)
                             const captureDelay = 1000 / %s;
                             
@@ -2484,6 +2528,9 @@ def main():
                                     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                                     displayCtx.drawImage(video, 0, 0, display.width, display.height);
                                     
+                                    // Dibujar un rectángulo de prueba en cada captura
+                                    drawTestRect();
+                                    
                                     // Convertir a base64
                                     const imageData = canvas.toDataURL('image/jpeg', 0.8);
                                     
@@ -2521,22 +2568,46 @@ def main():
                                                     const [x1, y1, x2, y2, confidence] = box;
                                                     console.log(`Dibujando caja: (${x1}, ${y1}, ${x2}, ${y2}, ${confidence})`);
                                                     
-                                                    // Dibujar rectángulo
-                                                    displayCtx.strokeStyle = '#00FF00';
-                                                    displayCtx.lineWidth = 3;
+                                                    // 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);
                                                     
-                                                    // Dibujar etiqueta
-                                                    displayCtx.fillStyle = '#00FF00';
-                                                    displayCtx.font = '16px Arial';
-                                                    displayCtx.fillText(`Rostro: ${confidence.toFixed(2)}`, x1, y1-5);
+                                                    // 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);
                                                 } else {
                                                     console.warn('Formato de caja inválido:', box);
                                                 }
                                             });
+                                            
+                                            // Añadir indicador de cantidad de rostros detectados
+                                            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: ${boxes.length}`, 20, 30);
                                         } else {
+                                            // Mensaje cuando no se detectan rostros
+                                            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);
                                             console.log('No hay cajas para dibujar o formato inválido');
                                         }
+                                        
+                                        // Dibuja un rectángulo de prueba siempre, para verificar que el canvas funciona
+                                        drawTestRect();
                                     }
                                 } catch (error) {
                                     console.error('Error al procesar mensaje:', error);
@@ -2545,12 +2616,14 @@ def main():
                             
                             // Dibujar un rectángulo de prueba para verificar que el canvas funciona
                             function drawTestRect() {
-                                displayCtx.strokeStyle = '#FF0000';
-                                displayCtx.lineWidth = 3;
+                                displayCtx.strokeStyle = '#FF0000'; // Rojo brillante
+                                displayCtx.lineWidth = 5;
                                 displayCtx.strokeRect(50, 50, 100, 100);
+                                displayCtx.fillStyle = 'rgba(255, 0, 0, 0.3)'; // Relleno semitransparente
+                                displayCtx.fillRect(50, 50, 100, 100);
                                 displayCtx.fillStyle = '#FF0000';
-                                displayCtx.font = '16px Arial';
-                                displayCtx.fillText('Test Rectangle', 50, 40);
+                                displayCtx.font = 'bold 16px Arial';
+                                displayCtx.fillText('TEST', 85, 100);
                                 console.log('Rectángulo de prueba dibujado');
                             }
                             
@@ -2626,30 +2699,58 @@ def main():
                                             
                                             # Crear script para enviar datos al componente JavaScript
                                             face_boxes_js = f"""
-                                            <script>
-                                                (function() {{
-                                                    console.log('Enviando cajas al componente: {bbox_list}');
-                                                    // Usar postMessage para comunicarse con el componente
-                                                    window.postMessage({{
-                                                        type: 'faceBoxes',
-                                                        boxes: {json.dumps(bbox_list)}
-                                                    }}, '*');
+                                                <script>
+                                                    console.log("Enviando cajas de rostros al componente: {bbox_list}");
                                                     
-                                                    // Intentar también con window.parent para casos en iframe
-                                                    try {{
-                                                        window.parent.postMessage({{
-                                                            type: 'faceBoxes',
-                                                            boxes: {json.dumps(bbox_list)}
-                                                        }}, '*');
-                                                        console.log('Mensaje también enviado a window.parent');
-                                                    }} catch(e) {{
-                                                        console.error('Error enviando a window.parent:', e);
-                                                    }}
-                                                }})();
-                                            </script>
+                                                    // Usar setTimeout para asegurarse de que el componente está inicializado
+                                                    setTimeout(function() {{
+                                                        window.parent.postMessage(
+                                                            {{
+                                                                type: 'faceBoxes',
+                                                                boxes: {json.dumps(bbox_list)}
+                                                            }},
+                                                            '*'
+                                                        );
+                                                        
+                                                        // 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)}
+                                                                    }},
+                                                                    '*'
+                                                                );
+                                                            }}
+                                                            console.log("Mensaje enviado a todos los iframes");
+                                                        }} catch(e) {{
+                                                            console.error("Error enviando mensaje directo a iframes:", e);
+                                                        }}
+                                                    }}, 200);
+                                                </script>
                                             """
-                                            # Renderizar el script
+                                            
+                                            # Inyectar el script en la página
                                             st.components.v1.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 = """
+                                            <script>
+                                                console.log("Enviando señal de rectángulo de prueba");
+                                                setTimeout(function() {
+                                                    window.parent.postMessage(
+                                                        {
+                                                            type: 'testRect'
+                                                        },
+                                                        '*'
+                                                    );
+                                                }, 100);
+                                            </script>
+                                        """
+                                        st.components.v1.html(test_rect_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.")