Reescribir completamente el componente de cámara para evitar problemas de formateo

streamlit_app.py

@@ -2529,9 +2529,11 @@ def main():
                     with camera_container:
                         st.info("Auto-capture enabled. Camera should start automatically.")
                         
-                        # Construir el HTML del componente de cámara con valor de FPS inyectado directamente
-                        fps_value = st.session_state.get('capture_fps', 1.0)
-                        camera_component_html = """
+                        # 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>
@@ -2563,7 +2565,13 @@ def main():
                             let lastBoxes = [];
                             
                             // Configuración dinámica del FPS (desde Streamlit)
-                            const captureDelay = 1000 / """ + str(fps_value) + """;
+                            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() {
@@ -2809,7 +2817,10 @@ def main():
                             // Limpiar cuando se desmonte el componente
                             window.addEventListener('beforeunload', stopCapture);
                         </script>
-                        """.format(st.session_state.get('capture_fps', 1.0))
+                        """
+                        
+                        # 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)