Corregir visualización de rectángulos de detección facial en tiempo real

streamlit_app.py

@@ -2431,7 +2431,7 @@ def main():
                         # Componente HTML/JavaScript para acceder a la cámara automáticamente
                         camera_html = """
                         <div style="margin-bottom: 20px;">
-                            <video id="webcam" autoplay playsinline width="640" height="480" style="border-radius: 5px;"></video>
+                            <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>
                         </div>
@@ -2474,10 +2474,8 @@ def main():
                             // Capturar frame y enviar a Streamlit
                             function captureFrame() {
                                 if (video.readyState === video.HAVE_ENOUGH_DATA) {
-                                    // Dibujar el video en el canvas
+                                    // Dibujar el video en ambos canvas
                                     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                                    
-                                    // Mostrar el video en el canvas de visualización
                                     displayCtx.drawImage(video, 0, 0, display.width, display.height);
                                     
                                     // Convertir a base64
@@ -2493,29 +2491,39 @@ def main():
                             
                             // Recibir datos de detección de rostros y dibujarlos
                             window.addEventListener('message', function(event) {
-                                const message = event.data;
-                                
-                                // Verificar si es un mensaje con cajas de rostros
-                                if (message && message.type === 'faceBoxes') {
-                                    const boxes = message.boxes;
-                                    
-                                    // Limpiar el canvas y dibujar el frame actual
-                                    displayCtx.drawImage(video, 0, 0, display.width, display.height);
+                                try {
+                                    const message = event.data;
                                     
-                                    // Dibujar cada caja
-                                    boxes.forEach(box => {
-                                        const [x1, y1, x2, y2, confidence] = box;
+                                    // 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;
                                         
-                                        // Dibujar rectángulo
-                                        displayCtx.strokeStyle = '#00FF00';
-                                        displayCtx.lineWidth = 2;
-                                        displayCtx.strokeRect(x1, y1, x2-x1, y2-y1);
+                                        // Limpiar el canvas y dibujar el frame actual
+                                        displayCtx.drawImage(video, 0, 0, display.width, display.height);
                                         
-                                        // Dibujar etiqueta
-                                        displayCtx.fillStyle = '#00FF00';
-                                        displayCtx.font = '16px Arial';
-                                        displayCtx.fillText(`Rostro: ${confidence.toFixed(2)}`, x1, y1-5);
-                                    });
+                                        // Dibujar cada caja
+                                        if (boxes && boxes.length > 0) {
+                                            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
+                                                    displayCtx.strokeStyle = '#00FF00';
+                                                    displayCtx.lineWidth = 3;
+                                                    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);
+                                                }
+                                            });
+                                        }
+                                    }
+                                } catch (error) {
+                                    console.error('Error al procesar mensaje:', error);
                                 }
                             });
                             
@@ -2578,109 +2586,25 @@ def main():
                                             st.session_state.last_fps_update = current_time
                                         
                                         # Enviar las cajas detectadas al componente JavaScript para dibujarlas en tiempo real
-                                        face_boxes_js = f"""
-                                        <script>
-                                            window.parent.postMessage({{
-                                                type: 'faceBoxes',
-                                                boxes: {json.dumps(bboxes.tolist() if isinstance(bboxes, np.ndarray) else bboxes)}
-                                            }}, '*');
-                                        </script>
-                                        """
-                                        st.components.v1.html(face_boxes_js, height=0, width=0)
-                                        
-                                        # 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
-                                        with result_container:
-                                            st.image(result_img, channels="BGR", caption="Real-time capture", use_container_width=True)
-                                        
-                                        # Si hay rostros y hay una base de datos, intentar reconocerlos
-                                        if len(bboxes) > 0 and st.session_state.face_database and len(st.session_state.face_database) > 0:
-                                            recognition_results = []
-                                            
-                                            # Usar la configuración local
-                                            local_model = st.session_state.get('continuous_model_choice', 'VGG-Face')
-                                            local_threshold = st.session_state.get('continuous_similarity_threshold', 45.0) / 100.0
+                                        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
                                             
-                                            for i, bbox in enumerate(bboxes):
-                                                x1, y1, x2, y2, _ = bbox
-                                                face_img = image[y1:y2, x1:x2]
-                                                
-                                                # Extraer el embedding del rostro con el modelo seleccionado
-                                                if local_model == "VGG-Face":
-                                                    embedding = vggface_model(face_img)
-                                                elif local_model == "Facenet":
-                                                    embedding = facenet_model(face_img)
-                                                elif local_model == "OpenFace":
-                                                    embedding = openface_model(face_img)
-                                                elif local_model == "ArcFace":
-                                                    embedding = arcface_model(face_img)
-                                                else:
-                                                    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']:
-                                                        # Buscar embedding del mismo modelo
-                                                        for emb in info['embeddings']:
-                                                            if isinstance(emb, dict) and 'model' in emb and emb['model'] == local_model:
-                                                                stored_emb = emb['embedding']
-                                                                similarity = cosine_similarity(embedding, stored_emb)
-                                                                
-                                                                if similarity > local_threshold and similarity > best_similarity:
-                                                                    best_similarity = similarity
-                                                                    best_match = name
-                                                            elif not isinstance(emb, dict) and 'models' in info and local_model in info['models']:
-                                                                # Compatibilidad con formato anterior
-                                                                model_idx = info['models'].index(local_model)
-                                                                if model_idx < len(info['embeddings']):
-                                                                    stored_emb = info['embeddings'][model_idx]
-                                                                    similarity = cosine_similarity(embedding, stored_emb)
-                                                                    
-                                                                    if similarity > local_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="Recognized faces", 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)
+                                            # 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>
+                                            """
+                                            # Renderizar el script
+                                            st.components.v1.html(face_boxes_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.")
@@ -2800,7 +2724,8 @@ def main():
                                                     cv2.putText(result_with_names, label, (x1, y1-10), 
                                                               cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 0), 2)
                                                 
-                                                st.image(result_with_names, channels="BGR", caption="Recognized faces", use_container_width=True)
+                                                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([