Implementar visualización en tiempo real de la detección de rostros dentro del componente JavaScript

streamlit_app.py

@@ -14,6 +14,7 @@ from sklearn.metrics.pairwise import cosine_similarity # type: ignore
 import pandas as pd
 import av
 from streamlit_webrtc import webrtc_streamer, VideoProcessorBase, RTCConfiguration, WebRtcMode
+import json
 
 # Importar las utilidades para la base de datos de rostros
 try:
@@ -2432,11 +2433,14 @@ def main():
                         <div style="margin-bottom: 20px;">
                             <video id="webcam" autoplay playsinline width="640" height="480" style="border-radius: 5px;"></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>
                         <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;
                             
                             // Configuración dinámica del FPS (desde Streamlit)
@@ -2473,6 +2477,9 @@ def main():
                                     // Dibujar el video en el 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
                                     const imageData = canvas.toDataURL('image/jpeg', 0.8);
                                     
@@ -2484,6 +2491,34 @@ 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);
+                                    
+                                    // Dibujar cada caja
+                                    boxes.forEach(box => {
+                                        const [x1, y1, x2, y2, confidence] = box;
+                                        
+                                        // Dibujar rectángulo
+                                        displayCtx.strokeStyle = '#00FF00';
+                                        displayCtx.lineWidth = 2;
+                                        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);
+                                    });
+                                }
+                            });
+                            
                             // Arrancar todo
                             async function initCapture() {
                                 await setupCamera();
@@ -2537,12 +2572,22 @@ def main():
                                         # 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
+                                        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):