Code splitting

ui.py

@@ -13,11 +13,51 @@ def build_ui():
         
         with gr.Row():
             with gr.Column(scale=2):
-                # Conversation display
+                # Conversation display with embedded JavaScript
                 output = gr.HTML(
-                    value="<div style='padding: 20px; background: #f8f9fa; border-radius: 10px; min-height: 300px;'><i>Click 'Start' to begin listening...</i></div>",
-                    label="Live Conversation",
-                    elem_classes=["output"]
+                    """
+                    <div class='output' style='padding:20px; background:#f8f9fa; border-radius:10px; min-height:300px;'>
+                      <i>Click 'Start Listening' to begin…</i>
+                    </div>
+                    <script>
+                    const API_WS = 'wss://your-space.hf.space/ws_inference';
+                    let ws, recorder, mediaStream;
+
+                    async function startStream() {
+                      try {
+                        mediaStream = await navigator.mediaDevices.getUserMedia({audio:true});
+                        ws = new WebSocket(API_WS);
+                        ws.onopen = () => {
+                          recorder = new MediaRecorder(mediaStream, {mimeType:'audio/webm'});
+                          recorder.ondataavailable = e => {
+                            if (ws.readyState===1 && e.data.size>0) ws.send(e.data);
+                          };
+                          recorder.start(200);
+                        };
+                        ws.onmessage = evt => {
+                          document.querySelector('.output').innerHTML = evt.data;
+                        };
+                        ws.onerror = err => console.error('WebSocket error:', err);
+                        ws.onclose = () => stopStream();
+                      } catch (err) {
+                        console.error('Error starting stream:', err);
+                        alert(`Error: ${err.message}`);
+                      }
+                    }
+
+                    function stopStream() {
+                      recorder?.state!=='inactive' && recorder.stop();
+                      mediaStream?.getTracks().forEach(t=>t.stop());
+                      ws?.close();
+                    }
+
+                    document.addEventListener('DOMContentLoaded', () => {
+                      document.querySelector('button[aria-label="Start Listening"]').onclick = startStream;
+                      document.querySelector('button[aria-label="Stop"]').onclick = stopStream;
+                    });
+                    </script>
+                    """,
+                    label="Live Conversation"
                 )
                 
                 # Control buttons
@@ -71,96 +111,6 @@ def build_ui():
                 - 🟡 Speaker 4 (Green)
                 """)
         
-        # JavaScript for browser audio capture and WebRTC
-        js = f"""
-        <script>
-        let ws, recorder, mediaStream;
-        
-        async function startStream() {{
-            try {{
-                // Get user media
-                mediaStream = await navigator.mediaDevices.getUserMedia({{audio: true}});
-                
-                // Connect to WebSocket
-                ws = new WebSocket('{API_WS}');
-                
-                ws.onopen = () => {{
-                    console.log('WebSocket connected');
-                    document.getElementById('status').textContent = 'Connected to server';
-                    
-                    // Create MediaRecorder
-                    recorder = new MediaRecorder(mediaStream, {{mimeType: 'audio/webm'}});
-                    
-                    // Send audio chunks to WebSocket
-                    recorder.ondataavailable = (e) => {{
-                        if (ws && ws.readyState === 1 && e.data.size > 0) {{
-                            ws.send(e.data);
-                        }}
-                    }};
-                    
-                    // Start recording
-                    recorder.start(200);  // Send chunks every 200ms
-                }};
-                
-                ws.onmessage = (evt) => {{
-                    // Update the HTML output with conversation
-                    document.querySelector('.output').innerHTML = evt.data;
-                }};
-                
-                ws.onerror = (error) => {{
-                    console.error('WebSocket error:', error);
-                    document.getElementById('status').textContent = 'WebSocket error';
-                }};
-                
-                ws.onclose = () => {{
-                    console.log('WebSocket closed');
-                    document.getElementById('status').textContent = 'Disconnected';
-                    stopStream();
-                }};
-                
-            }} catch (error) {{
-                console.error('Error starting stream:', error);
-                document.getElementById('status').textContent = `Error: ${{error.message}}`;
-            }}
-        }}
-        
-        function stopStream() {{
-            // Stop the MediaRecorder
-            if (recorder && recorder.state !== 'inactive') {{
-                recorder.stop();
-            }}
-            
-            // Stop all audio tracks
-            if (mediaStream) {{
-                mediaStream.getTracks().forEach(track => track.stop());
-            }}
-            
-            // Close the WebSocket
-            if (ws) {{
-                ws.close();
-            }}
-            
-            document.getElementById('status').textContent = 'Stopped';
-        }}
-        
-        // Attach event listeners to buttons
-        document.addEventListener('DOMContentLoaded', function() {{
-            // Add hidden status element
-            const statusElem = document.createElement('div');
-            statusElem.id = 'status';
-            statusElem.style.display = 'none';
-            document.body.appendChild(statusElem);
-        }});
-        
-        // Connect buttons to functions
-        document.querySelector('button[aria-label="Start Listening"]').onclick = startStream;
-        document.querySelector('button[aria-label="Stop"]').onclick = stopStream;
-        </script>
-        """
-        
-        # Inject JavaScript
-        demo.load(js, outputs=[output, status_output])
-        
     return demo
 
 # Create Gradio interface