1

ui.py

@@ -81,40 +81,21 @@ def create_gradio_app():
                 this.baseUrl = 'https://{config.hf_space_url}';
                 this.wsUrl = 'wss://{config.hf_space_url}/ws';
                 this.renderUrl = 'wss://{config.render_url}/stream';
+                this.rtcComponentSynced = false;
             }}
             
             async startRecording() {{
                 try {{
-                    // Request microphone access
-                    this.mediaStream = await navigator.mediaDevices.getUserMedia({{
-                        audio: {{
-                            echoCancellation: true,
-                            noiseSuppression: true,
-                            autoGainControl: true,
-                            sampleRate: 16000
-                        }}
-                    }});
+                    this.isRecording = true;
+                    this.updateStatus('connecting', 'Connecting to server...');
                     
-                    // Set up WebSocket connection
+                    // Connect to WebSocket for transcription updates
                     await this.connectWebSocket();
                     
-                    // Set up MediaRecorder for audio chunks
-                    this.mediaRecorder = new MediaRecorder(this.mediaStream, {{
-                        mimeType: 'audio/webm;codecs=opus'
-                    }});
-                    
-                    this.mediaRecorder.ondataavailable = (event) => {{
-                        if (event.data.size > 0 && this.ws && this.ws.readyState === WebSocket.OPEN) {{
-                            // Send audio chunk to server
-                            this.ws.send(event.data);
-                        }}
-                    }};
-                    
-                    // Start recording with chunks every 1 second
-                    this.mediaRecorder.start(1000);
-                    this.isRecording = true;
+                    // Let the RTCComponent handle the audio streaming
+                    // This will be handled by Gradio's WebRTC component
                     
-                    this.updateStatus('connected', 'Recording started');
+                    this.updateStatus('connected', 'Connected and listening');
                     
                 }} catch (error) {{
                     console.error('Error starting recording:', error);
@@ -124,10 +105,11 @@ def create_gradio_app():
             
             async connectWebSocket() {{
                 return new Promise((resolve, reject) => {{
-                    this.ws = new WebSocket(this.wsUrl);
+                    // Only connect to the conversation updates WebSocket
+                    this.ws = new WebSocket('wss://{config.hf_space_url}/ws_transcription');
                     
                     this.ws.onopen = () => {{
-                        console.log('WebSocket connected');
+                        console.log('WebSocket connected for transcription updates');
                         resolve();
                     }};
                     
@@ -312,7 +294,9 @@ def create_gradio_app():
                     streaming=False,
                     modality="audio",
                     mode="send-receive",
-                    visible=False  # Hidden but functional
+                    audio_html_attrs="style='display:none;'",  # Hide the audio element
+                    visible=True,  # Make component visible but hide audio element
+                    elements=["video", "start", "stop"]  # Don't include audio element
                 )
                 
                 # Control buttons
@@ -498,13 +482,26 @@ async def process_audio_chunk(audio_data: bytes) -> dict:
 fastapi_app = create_fastapi_app()
 gradio_app = create_gradio_app()
 
-# Root redirect
+# Root redirect - keep this simple
 @fastapi_app.get("/")
-async def root():
-    return RedirectResponse(url="/ui")
+def root():
+    """Redirect root to the Gradio UI"""
+    return RedirectResponse(url="/ui/")  # Note the trailing slash is important
 
-# Mount Gradio app to FastAPI at /ui
-fastapi_app.mount("/ui", gradio_app.app)
+# Mount Gradio app to FastAPI - use correct mounting method for Gradio
+try:
+    # For newer Gradio versions
+    fastapi_app.mount("/ui", gradio_app)
+except Exception as e:
+    # Try alternative mounting method
+    try:
+        from gradio.routes import mount_gradio_app
+        app = mount_gradio_app(fastapi_app, gradio_app, path="/ui")
+        logger.info("Mounted Gradio app using mount_gradio_app")
+    except Exception as e2:
+        logger.error(f"Failed to mount Gradio app: {e2}")
+        # As a last resort, try the simplest mounting
+        fastapi_app.mount("/ui", gradio_app.app)
 
 # Add diagnostic endpoints to check connections
 @fastapi_app.get("/check-backend")
@@ -542,6 +539,20 @@ async def log_configuration():
     logger.info(f"- WebRTC URL: wss://{config.render_url}/stream")
     logger.info(f"- WebSocket URL: wss://{config.hf_space_url}/ws_inference")
     logger.info("Note: Audio will be streamed through the Render backend using WebRTC")
+    
+    # Test connection to Render backend
+    try:
+        async with websockets.connect(f"wss://{config.render_url}/stream", ping_interval=None, ping_timeout=None) as ws:
+            logger.info("Successfully connected to Render backend WebSocket")
+    except Exception as e:
+        logger.error(f"Failed to connect to Render backend: {e}")
+        
+    # Test connection to HF Space backend
+    try:
+        async with websockets.connect(f"wss://{config.hf_space_url}/ws_inference", ping_interval=None, ping_timeout=None) as ws:
+            logger.info("Successfully connected to HF Space WebSocket")
+    except Exception as e:
+        logger.error(f"Failed to connect to HF Space: {e}")
 
 if __name__ == "__main__":
     import uvicorn