experiment 2

ui.py

@@ -1,31 +1,32 @@
 import gradio as gr
-import requests
 from fastapi import FastAPI
 from shared import DEFAULT_CHANGE_THRESHOLD, DEFAULT_MAX_SPEAKERS, ABSOLUTE_MAX_SPEAKERS, FINAL_TRANSCRIPTION_MODEL, REALTIME_TRANSCRIPTION_MODEL
-print(gr.__version__)
+import os
+
 # Connection configuration (separate signaling server from model server)
-# These will be replaced at deployment time with the correct URLs
-RENDER_SIGNALING_URL = "wss://render-signal-audio.onrender.com/stream" 
-HF_SPACE_URL = "https://androidguy-speaker-diarization.hf.space"
+# These will be replaced with environment variables or defaults
+RENDER_SIGNALING_URL = os.environ.get("RENDER_SIGNALING_URL", "wss://render-signal-audio.onrender.com/stream")
+HF_SPACE_URL = os.environ.get("HF_SPACE_URL", "https://androidguy-speaker-diarization.hf.space")
 
 def build_ui():
-    """Build Gradio UI for speaker diarization"""
+    """Build Gradio UI for speaker diarization with improved reliability"""
     with gr.Blocks(title="Real-time Speaker Diarization", theme=gr.themes.Soft()) as demo:
         # Add configuration variables to page using custom component
         gr.HTML(
             f"""
+            <!-- Configuration parameters -->
             <script>
                 window.RENDER_SIGNALING_URL = "{RENDER_SIGNALING_URL}";
                 window.HF_SPACE_URL = "{HF_SPACE_URL}";
-                window.FINAL_TRANSCRIPTION_MODEL = "{FINAL_TRANSCRIPTION_MODEL}";  <!-- ADDED -->
-                window.REALTIME_TRANSCRIPTION_MODEL = "{REALTIME_TRANSCRIPTION_MODEL}";  <!-- ADDED -->
+                window.FINAL_TRANSCRIPTION_MODEL = "{FINAL_TRANSCRIPTION_MODEL}";
+                window.REALTIME_TRANSCRIPTION_MODEL = "{REALTIME_TRANSCRIPTION_MODEL}";
             </script>
             """
         )
         
         # Header and description
         gr.Markdown("# 🎤 Live Speaker Diarization")
-        gr.Markdown(f"Real-time speech recognition with automatic speaker identification")
+        gr.Markdown("Real-time speech recognition with automatic speaker identification")
         
         # Add transcription model info
         gr.Markdown(f"**Using Models:** Final: {FINAL_TRANSCRIPTION_MODEL}, Realtime: {REALTIME_TRANSCRIPTION_MODEL}")
@@ -36,7 +37,8 @@ def build_ui():
                 <span id="status-text" style="color:#888;">Waiting to connect...</span>
                 <span id="status-icon" style="width:10px; height:10px; display:inline-block; 
                     background-color:#888; border-radius:50%; margin-left:5px;"></span>
-            </div>"""
+            </div>""",
+            elem_id="connection-status"
         )
         
         with gr.Row():
@@ -55,11 +57,18 @@ def build_ui():
                     let mediaStream;
                     let wsConnection;
                     let statusUpdateInterval;
+                    let isOfflineMode = false;
                     
-                    // Check connection to HF space
+                    // Check connection to HF space with timeout
                     async function checkHfConnection() {
                         try {
-                            let response = await fetch(`${window.HF_SPACE_URL}/health`);
+                            const controller = new AbortController();
+                            const timeoutId = setTimeout(() => controller.abort(), 5000);
+                            
+                            const response = await fetch(`${window.HF_SPACE_URL}/health`, {
+                                signal: controller.signal
+                            });
+                            clearTimeout(timeoutId);
                             return response.ok;
                         } catch (err) {
                             console.warn("HF Space connection failed:", err);
@@ -67,43 +76,46 @@ def build_ui():
                         }
                     }
                     
-                    // Improved start streaming function with offline mode support
+                    // Start the connection and audio streaming with robust error handling
                     async function startStreaming() {
                         try {
                             // Update status
                             updateStatus('connecting');
                             
-                            // Request microphone access - this will work even offline
-                            mediaStream = await navigator.mediaDevices.getUserMedia({audio: {
-                                echoCancellation: true,
-                                noiseSuppression: true,
-                                autoGainControl: true
-                            }});
-                            
-                            // Check if we can connect to backend
-                            let backendAvailable = await checkHfConnection();
-                            
-                            try {
-                                // Try WebRTC connection, might fail if backend is down
-                                await setupWebRTC();
-                            } catch (rtcErr) {
-                                console.error("WebRTC setup failed:", rtcErr);
-                                // Continue even if WebRTC fails
-                            }
+                            // First check backend connectivity
+                            const backendAvailable = await checkHfConnection();
+                            isOfflineMode = !backendAvailable;
                             
+                            // Request microphone access - this works even offline
                             try {
-                                // Try WebSocket connection, might fail if backend is down
-                                setupWebSocket();
-                            } catch (wsErr) {
-                                console.error("WebSocket setup failed:", wsErr);
-                                // Continue even if WebSocket fails
+                                mediaStream = await navigator.mediaDevices.getUserMedia({audio: {
+                                    echoCancellation: true,
+                                    noiseSuppression: true,
+                                    autoGainControl: true
+                                }});
+                            } catch (micErr) {
+                                console.error('Microphone access error:', micErr);
+                                updateStatus('error', 'Microphone access denied: ' + micErr.message);
+                                return;
                             }
                             
-                            // Start status update interval regardless
-                            statusUpdateInterval = setInterval(updateConnectionInfo, 5000);
-                            
-                            // Update status - either connected or offline mode
                             if (backendAvailable) {
+                                // Try WebRTC connection
+                                try {
+                                    await setupWebRTC();
+                                } catch (rtcErr) {
+                                    console.error("WebRTC setup failed:", rtcErr);
+                                    // Continue even if WebRTC fails
+                                }
+                                
+                                // Try WebSocket connection
+                                try {
+                                    setupWebSocket();
+                                } catch (wsErr) {
+                                    console.error("WebSocket setup failed:", wsErr);
+                                    // Continue even if WebSocket fails
+                                }
+                                
                                 updateStatus('connected');
                                 document.getElementById("conversation").innerHTML = "<i>Connected! Start speaking...</i>";
                             } else {
@@ -111,6 +123,10 @@ def build_ui():
                                 document.getElementById("conversation").innerHTML = 
                                     "<i>Backend connection failed. Microphone active but transcription unavailable.</i>";
                             }
+                            
+                            // Start status update interval regardless
+                            statusUpdateInterval = setInterval(updateConnectionInfo, 5000);
+                            
                         } catch (err) {
                             console.error('Error starting stream:', err);
                             updateStatus('error', err.message);
@@ -126,7 +142,10 @@ def build_ui():
                             
                             // Use FastRTC's connection approach
                             const pc = new RTCPeerConnection({
-                                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+                                iceServers: [
+                                    { urls: 'stun:stun.l.google.com:19302' },
+                                    { urls: 'stun:stun1.l.google.com:19302' }
+                                ]
                             });
                             
                             // Add audio track
@@ -134,22 +153,46 @@ def build_ui():
                                 pc.addTrack(track, mediaStream);
                             });
                             
-                            // Connect to FastRTC signaling via WebSocket
-                            const signalWs = new WebSocket(window.RENDER_SIGNALING_URL.replace('wss://', 'wss://'));
+                            // Connect to FastRTC signaling via WebSocket with timeout
+                            const signalWs = new WebSocket(window.RENDER_SIGNALING_URL);
+                            
+                            // Set connection timeout
+                            const connectionTimeout = setTimeout(() => {
+                                if (signalWs.readyState !== WebSocket.OPEN) {
+                                    signalWs.close();
+                                    throw new Error("WebRTC signaling connection timeout");
+                                }
+                            }, 10000);
+                            
+                            // Wait for connection to open
+                            await new Promise((resolve, reject) => {
+                                signalWs.onopen = () => {
+                                    clearTimeout(connectionTimeout);
+                                    resolve();
+                                };
+                                signalWs.onerror = (err) => {
+                                    clearTimeout(connectionTimeout);
+                                    reject(new Error("WebRTC signaling connection failed"));
+                                };
+                            });
                             
                             // Handle signaling messages
                             signalWs.onmessage = async (event) => {
-                                const message = JSON.parse(event.data);
-                                
-                                if (message.type === 'offer') {
-                                    await pc.setRemoteDescription(new RTCSessionDescription(message));
-                                    const answer = await pc.createAnswer();
-                                    await pc.setLocalDescription(answer);
-                                    signalWs.send(JSON.stringify(pc.localDescription));
-                                } else if (message.type === 'candidate') {
-                                    if (message.candidate) {
-                                        await pc.addIceCandidate(new RTCIceCandidate(message));
+                                try {
+                                    const message = JSON.parse(event.data);
+                                    
+                                    if (message.type === 'offer') {
+                                        await pc.setRemoteDescription(new RTCSessionDescription(message));
+                                        const answer = await pc.createAnswer();
+                                        await pc.setLocalDescription(answer);
+                                        signalWs.send(JSON.stringify(pc.localDescription));
+                                    } else if (message.type === 'candidate') {
+                                        if (message.candidate) {
+                                            await pc.addIceCandidate(new RTCIceCandidate(message));
+                                        }
                                     }
+                                } catch (err) {
+                                    console.error("Error processing signaling message:", err);
                                 }
                             };
                             
@@ -166,130 +209,175 @@ def build_ui():
                             // Keep connection reference
                             rtcConnection = pc;
                             
-                            // Wait for connection to be established
+                            // Wait for connection to be established with timeout
                             await new Promise((resolve, reject) => {
-                                const timeout = setTimeout(() => reject(new Error("WebRTC connection timeout")), 10000);
+                                const timeout = setTimeout(() => reject(new Error("WebRTC connection timeout")), 15000);
+                                
                                 pc.onconnectionstatechange = () => {
+                                    console.log("WebRTC connection state:", pc.connectionState);
                                     if (pc.connectionState === 'connected') {
                                         clearTimeout(timeout);
                                         resolve();
-                                    } else if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
+                                    } else if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected' || pc.connectionState === 'closed') {
                                         clearTimeout(timeout);
                                         reject(new Error("WebRTC connection failed"));
                                     }
                                 };
+                                
+                                // Also check ice connection state as fallback
+                                pc.oniceconnectionstatechange = () => {
+                                    console.log("ICE connection state:", pc.iceConnectionState);
+                                    if (pc.iceConnectionState === 'connected' || pc.iceConnectionState === 'completed') {
+                                        clearTimeout(timeout);
+                                        resolve();
+                                    } else if (pc.iceConnectionState === 'failed' || pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'closed') {
+                                        clearTimeout(timeout);
+                                        reject(new Error("ICE connection failed"));
+                                    }
+                                };
                             });
                             
                             updateStatus('connected');
+                            console.log("WebRTC connection established successfully");
+                            
                         } catch (err) {
                             console.error('WebRTC setup error:', err);
-                            updateStatus('error', 'WebRTC setup failed: ' + err.message);
+                            updateStatus('warning', 'WebRTC setup issue: ' + err.message);
+                            throw err;
                         }
                     }
                     
                     // Set up WebSocket connection to HF Space for conversation updates
                     function setupWebSocket() {
-                        const wsUrl = window.RENDER_SIGNALING_URL.replace('stream', 'ws_relay');
-                        wsConnection = new WebSocket(wsUrl);
-                        
-                        wsConnection.onopen = () => {
-                            console.log('WebSocket connection established');
-                        };
-                        
-                        wsConnection.onmessage = (event) => {
-                            try {
-                                // Parse the JSON message
-                                const message = JSON.parse(event.data);
-                                
-                                // Process different message types
-                                switch(message.type) {
-                                    case 'transcription':
-                                        // Handle transcription data
-                                        if (message && message.data && typeof message.data === 'object') {
-                                            document.getElementById("conversation").innerHTML = message.data.conversation_html || 
-                                                JSON.stringify(message.data);
-                                        }
-                                        break;
-                                        
-                                    case 'processing_result':
-                                        // Handle individual audio chunk processing result
-                                        console.log('Processing result:', message.data);
-                                        
-                                        // Update status info if needed
-                                        if (message.data && message.data.status === "processed") {
-                                            const statusElem = document.getElementById('status-text');
-                                            if (statusElem) {
-                                                const speakerId = message.data.speaker_id !== undefined ? 
-                                                    `Speaker ${message.data.speaker_id + 1}` : '';
-                                                
-                                                if (speakerId) {
-                                                    statusElem.textContent = `Connected - ${speakerId} active`;
+                        try {
+                            // Close existing connection if any
+                            if (wsConnection) {
+                                wsConnection.close();
+                            }
+                            
+                            const wsUrl = window.RENDER_SIGNALING_URL.replace('stream', 'ws_relay');
+                            wsConnection = new WebSocket(wsUrl);
+                            
+                            // Set connection timeout
+                            const connectionTimeout = setTimeout(() => {
+                                if (wsConnection.readyState !== WebSocket.OPEN) {
+                                    wsConnection.close();
+                                    throw new Error("WebSocket connection timeout");
+                                }
+                            }, 10000);
+                            
+                            wsConnection.onopen = () => {
+                                clearTimeout(connectionTimeout);
+                                console.log('WebSocket connection established');
+                            };
+                            
+                            wsConnection.onmessage = (event) => {
+                                try {
+                                    // Parse the JSON message
+                                    const message = JSON.parse(event.data);
+                                    
+                                    // Process different message types
+                                    switch(message.type) {
+                                        case 'transcription':
+                                            // Handle transcription data
+                                            if (message && message.data && typeof message.data === 'object') {
+                                                document.getElementById("conversation").innerHTML = message.data.conversation_html || 
+                                                    JSON.stringify(message.data);
+                                            }
+                                            break;
+                                            
+                                        case 'processing_result':
+                                            // Handle individual audio chunk processing result
+                                            console.log('Processing result:', message.data);
+                                            
+                                            // Update status info if needed
+                                            if (message.data && message.data.status === "processed") {
+                                                const statusElem = document.getElementById('status-text');
+                                                if (statusElem) {
+                                                    const speakerId = message.data.speaker_id !== undefined ? 
+                                                        `Speaker ${message.data.speaker_id + 1}` : '';
+                                                    
+                                                    if (speakerId) {
+                                                        statusElem.textContent = `Connected - ${speakerId} active`;
+                                                    }
                                                 }
+                                            } else if (message.data && message.data.status === "error") {
+                                                updateStatus('error', message.data.message || 'Processing error');
                                             }
-                                        } else if (message.data && message.data.status === "error") {
-                                            updateStatus('error', message.data.message || 'Processing error');
-                                        }
-                                        break;
-                                        
-                                    case 'connection':
-                                        console.log('Connection status:', message.status);
-                                        updateStatus(message.status === 'connected' ? 'connected' : 'warning');
-                                        break;
-                                        
-                                    case 'connection_established':
-                                        console.log('Connection established:', message);
-                                        updateStatus('connected');
-                                        
-                                        // If initial conversation is provided, display it
-                                        if (message.conversation) {
-                                            document.getElementById("conversation").innerHTML = message.conversation;
-                                        }
-                                        break;
-                                        
-                                    case 'conversation_update':
-                                        if (message.conversation_html) {
-                                            document.getElementById("conversation").innerHTML = message.conversation_html;
+                                            break;
+                                            
+                                        case 'connection':
+                                            console.log('Connection status:', message.status);
+                                            updateStatus(message.status === 'connected' ? 'connected' : 'warning');
+                                            break;
+                                            
+                                        case 'connection_established':
+                                            console.log('Connection established:', message);
+                                            updateStatus('connected');
+                                            
+                                            // If initial conversation is provided, display it
+                                            if (message.conversation) {
+                                                document.getElementById("conversation").innerHTML = message.conversation;
+                                            }
+                                            break;
+                                            
+                                        case 'conversation_update':
+                                            if (message.conversation_html) {
+                                                document.getElementById("conversation").innerHTML = message.conversation_html;
+                                            }
+                                            break;
+                                            
+                                        case 'conversation_cleared':
+                                            document.getElementById("conversation").innerHTML = 
+                                                "<i>Conversation cleared. Start speaking again...</i>";
+                                            break;
+                                            
+                                        case 'error':
+                                            console.error('Error message from server:', message.message);
+                                            updateStatus('warning', message.message);
+                                            break;
+                                            
+                                        default:
+                                            // If it's just HTML content without proper JSON structure (legacy format)
+                                            document.getElementById("conversation").innerHTML = event.data;
+                                    }
+                                    
+                                    // Auto-scroll to bottom
+                                    const container = document.getElementById("conversation");
+                                    container.scrollTop = container.scrollHeight;
+                                } catch (e) {
+                                    // Fallback for non-JSON messages (legacy format)
+                                    document.getElementById("conversation").innerHTML = event.data;
+                                    
+                                    // Auto-scroll to bottom
+                                    const container = document.getElementById("conversation");
+                                    container.scrollTop = container.scrollHeight;
+                                }
+                            };
+                            
+                            wsConnection.onerror = (error) => {
+                                clearTimeout(connectionTimeout);
+                                console.error('WebSocket error:', error);
+                                updateStatus('warning', 'WebSocket error');
+                            };
+                            
+                            wsConnection.onclose = () => {
+                                console.log('WebSocket connection closed');
+                                // Try to reconnect after a delay if not in offline mode
+                                if (!isOfflineMode) {
+                                    setTimeout(() => {
+                                        try {
+                                            setupWebSocket();
+                                        } catch (e) {
+                                            console.error("Failed to reconnect WebSocket:", e);
                                         }
-                                        break;
-                                        
-                                    case 'conversation_cleared':
-                                        document.getElementById("conversation").innerHTML = 
-                                            "<i>Conversation cleared. Start speaking again...</i>";
-                                        break;
-                                        
-                                    case 'error':
-                                        console.error('Error message from server:', message.message);
-                                        updateStatus('warning', message.message);
-                                        break;
-                                        
-                                    default:
-                                        // If it's just HTML content without proper JSON structure (legacy format)
-                                        document.getElementById("conversation").innerHTML = event.data;
+                                    }, 3000);
                                 }
-                                
-                                // Auto-scroll to bottom
-                                const container = document.getElementById("conversation");
-                                container.scrollTop = container.scrollHeight;
-                            } catch (e) {
-                                // Fallback for non-JSON messages (legacy format)
-                                document.getElementById("conversation").innerHTML = event.data;
-                                
-                                // Auto-scroll to bottom
-                                const container = document.getElementById("conversation");
-                                container.scrollTop = container.scrollHeight;
-                            }
-                        };
-                        
-                        wsConnection.onerror = (error) => {
-                            console.error('WebSocket error:', error);
-                            updateStatus('warning', 'WebSocket error');
-                        };
-                        
-                        wsConnection.onclose = () => {
-                            console.log('WebSocket connection closed');
-                            // Try to reconnect after a delay
-                            setTimeout(setupWebSocket, 3000);
-                        };
+                            };
+                        } catch (err) {
+                            console.error("WebSocket setup error:", err);
+                            throw err;
+                        }
                     }
                     
                     // Update connection info in the UI with better error handling
@@ -298,33 +386,58 @@ def build_ui():
                             const hfConnected = await checkHfConnection();
                             
                             if (!hfConnected) {
-                                // If backend is unavailable, update status but don't break functionality
-                                updateStatus('warning', 'Backend unavailable - limited functionality');
-                                
-                                // Try to reconnect WebSocket if it was disconnected
-                                if (!wsConnection || wsConnection.readyState !== WebSocket.OPEN) {
-                                    try {
-                                        setupWebSocket();
-                                    } catch (e) {
-                                        console.warn("Failed to reconnect WebSocket:", e);
-                                    }
+                                // If we were online but now offline, update mode
+                                if (!isOfflineMode) {
+                                    isOfflineMode = true;
+                                    updateStatus('warning', 'Backend unavailable - limited functionality');
                                 }
-                            } else if (rtcConnection?.connectionState === 'connected' || 
-                                      rtcConnection?.iceConnectionState === 'connected') {
-                                updateStatus('connected');
                             } else {
-                                updateStatus('warning', 'Connection unstable');
-                                
-                                // Try to reconnect if needed
-                                if (!rtcConnection || rtcConnection.connectionState === 'failed') {
+                                // If we were offline but now online, update mode
+                                if (isOfflineMode) {
+                                    isOfflineMode = false;
+                                    
+                                    // Try to reconnect services
                                     try {
-                                        await setupWebRTC();
+                                        if (!rtcConnection || rtcConnection.connectionState !== 'connected') {
+                                            await setupWebRTC();
+                                        }
+                                        
+                                        if (!wsConnection || wsConnection.readyState !== WebSocket.OPEN) {
+                                            setupWebSocket();
+                                        }
+                                        
+                                        updateStatus('connected');
                                     } catch (e) {
-                                        console.warn("Failed to reconnect WebRTC:", e);
+                                        console.warn("Failed to reconnect services:", e);
+                                        updateStatus('warning', 'Connection partially restored');
+                                    }
+                                } else if (rtcConnection?.connectionState === 'connected' || 
+                                          rtcConnection?.iceConnectionState === 'connected') {
+                                    updateStatus('connected');
+                                } else {
+                                    updateStatus('warning', 'Connection unstable');
+                                    
+                                    // Try to reconnect if needed
+                                    if (!rtcConnection || 
+                                        rtcConnection.connectionState === 'failed' || 
+                                        rtcConnection.connectionState === 'disconnected') {
+                                        try {
+                                            await setupWebRTC();
+                                        } catch (e) {
+                                            console.warn("Failed to reconnect WebRTC:", e);
+                                        }
+                                    }
+                                    
+                                    if (!wsConnection || wsConnection.readyState !== WebSocket.OPEN) {
+                                        try {
+                                            setupWebSocket();
+                                        } catch (e) {
+                                            console.warn("Failed to reconnect WebSocket:", e);
+                                        }
                                     }
                                 }
                             }
-                      } catch (err) {
+                        } catch (err) {
                             console.error('Error updating connection info:', err);
                             // Don't update status here to avoid flickering
                         }
@@ -335,6 +448,8 @@ def build_ui():
                         const statusText = document.getElementById('status-text');
                         const statusIcon = document.getElementById('status-icon');
                         
+                        if (!statusText || !statusIcon) return;
+                        
                         switch(status) {
                             case 'connected':
                                 statusText.textContent = 'Connected';
@@ -399,29 +514,38 @@ def build_ui():
                             "<i>Conversation cleared. Start speaking again...</i>";
                         
                         // Then try to update on the backend if available
-                        checkHfConnection().then(isConnected => {
-                            if (isConnected) {
-                                return fetch(`${window.HF_SPACE_URL}/clear`, {
-                                    method: 'POST'
-                                });
-                            } else {
-                                throw new Error("Backend unavailable");
-                            }
-                        })
-                        .then(resp => resp.json())
-                        .then(data => {
-                            console.log("Backend conversation cleared successfully");
-                        })
-                        .catch(err => {
-                            console.warn("Backend clear API failed:", err);
-                            // No need to update UI again as we already did it above
-                        });
+                        if (!isOfflineMode) {
+                            checkHfConnection().then(isConnected => {
+                                if (isConnected) {
+                                    return fetch(`${window.HF_SPACE_URL}/clear`, {
+                                        method: 'POST'
+                                    });
+                                } else {
+                                    throw new Error("Backend unavailable");
+                                }
+                            })
+                            .then(resp => resp.json())
+                            .then(data => {
+                                console.log("Backend conversation cleared successfully");
+                            })
+                            .catch(err => {
+                                console.warn("Backend clear API failed:", err);
+                                // No need to update UI again as we already did it above
+                            });
+                        }
                     }
                     
                     // Update settings with better error handling and offline mode support
                     function updateSettings() {
-                        const threshold = document.querySelector('input[data-testid="threshold-slider"]').value;
-                        const maxSpeakers = document.querySelector('input[data-testid="speakers-slider"]').value;
+                        const threshold = document.querySelector('input[data-testid="threshold-slider"]')?.value || 
+                                         document.getElementById('threshold-slider')?.value;
+                        const maxSpeakers = document.querySelector('input[data-testid="speakers-slider"]')?.value || 
+                                           document.getElementById('speakers-slider')?.value;
+                                           
+                        if (!threshold || !maxSpeakers) {
+                            console.error("Could not find slider values");
+                            return;
+                        }
                         
                         // First update the UI immediately regardless of API success
                         const statusOutput = document.getElementById('status-output');
@@ -441,24 +565,26 @@ def build_ui():
                             `;
                         }
                         
-                        // Then try to update on the backend if available
-                        checkHfConnection().then(isConnected => {
-                            if (isConnected) {
-                                return fetch(`${window.HF_SPACE_URL}/settings?threshold=${threshold}&max_speakers=${maxSpeakers}`, {
-                                    method: 'POST'
-                                });
-                            } else {
-                                throw new Error("Backend unavailable");
-                            }
-                        })
-                        .then(resp => resp.json())
-                        .then(data => {
-                            console.log("Backend settings updated successfully:", data);
-                        })
-                        .catch(err => {
-                            console.warn("Backend settings update failed:", err);
-                            // No need to update UI again as we already did it above
-                        });
+                        // Then try to update on the backend if available and not in offline mode
+                        if (!isOfflineMode) {
+                            checkHfConnection().then(isConnected => {
+                                if (isConnected) {
+                                    return fetch(`${window.HF_SPACE_URL}/settings?threshold=${threshold}&max_speakers=${maxSpeakers}`, {
+                                        method: 'POST'
+                                    });
+                                } else {
+                                    throw new Error("Backend unavailable");
+                                }
+                            })
+                            .then(resp => resp.json())
+                            .then(data => {
+                                console.log("Backend settings updated successfully:", data);
+                            })
+                            .catch(err => {
+                                console.warn("Backend settings update failed:", err);
+                                // No need to update UI again as we already did it above
+                            });
+                        }
                     }
 
                     // Set up event listeners when the DOM is loaded
@@ -476,9 +602,15 @@ def build_ui():
                             // Fallback to aria-label if IDs aren't found
                             if (!startBtn) startBtn = document.querySelector('button[aria-label="Start Listening"]');
                             if (!stopBtn) stopBtn = document.querySelector('button[aria-label="Stop"]');
-                            if (!clearBtn) clearBtn = document.querySelector('button[aria-label="Clear"]');
+                            if (!clearBtn) stopBtn = document.querySelector('button[aria-label="Clear"]');
                             if (!updateBtn) updateBtn = document.querySelector('button[aria-label="Update Settings"]');
                             
+                            // Fallback to text content as last resort
+                            if (!startBtn) startBtn = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent.includes('Start'));
+                            if (!stopBtn) stopBtn = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent.includes('Stop'));
+                            if (!clearBtn) clearBtn = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent.includes('Clear'));
+                            if (!updateBtn) updateBtn = Array.from(document.querySelectorAll('button')).find(btn => btn.textContent.includes('Update'));
+                            
                             // Check if all buttons are found
                             const buttonsFound = startBtn && stopBtn && clearBtn && updateBtn;
                             
@@ -508,8 +640,8 @@ def build_ui():
                         if (!findAndBindButtons()) {
                             // If not successful, set up a retry mechanism
                             let retryCount = 0;
-                            const maxRetries = 10;
-                            const retryInterval = 500; // 500ms between retries
+                            const maxRetries = 20;  // More retries, longer interval
+                            const retryInterval = 300; // 300ms between retries
                             
                             const retryBinding = setInterval(() => {
                                 if (findAndBindButtons() || ++retryCount >= maxRetries) {
@@ -536,7 +668,7 @@ def build_ui():
                 status_output = gr.Markdown(
                     """
                     ## System Status
-                    "Waiting to connect...\n\n*Click Start Listening to begin*"
+                    Waiting to connect...
                     
                     *Click Start Listening to begin*
                     """,
@@ -588,21 +720,22 @@ def build_ui():
                 - 🟠 Speaker 8 (Gold)
                 """)
         
-        # JavaScript to connect buttons to the script functions is now embedded directly in the conversation_display
-        # We removed the separate gr.HTML for button bindings since it's now handled with more robust code
-        
-        # Set up periodic status updates
+        # Function to get backend status (for periodic updates)
         def get_status():
             """API call to get system status - called periodically"""
             import requests
             try:
-                resp = requests.get(f"{HF_SPACE_URL}/status")
+                # Use a short timeout to prevent UI hanging
+                resp = requests.get(f"{HF_SPACE_URL}/status", timeout=2)
                 if resp.status_code == 200:
-                    return resp.json().get('status', 'No status information')
+                    return resp.json().get('formatted_text', 'No status information')
                 return "Error getting status"
             except Exception as e:
-                return f"Connection error: {str(e)}"
-
+                return f"Status update unavailable: Backend may be offline"
+        
+        # Set up periodic status updates with shorter interval and error handling
+        status_timer = gr.Timer(10)  # 10 seconds between updates
+        status_timer.tick(fn=get_status, outputs=status_output)
         
     return demo
 
@@ -615,4 +748,4 @@ def mount_ui(app: FastAPI):
 
 # For standalone testing
 if __name__ == "__main__":
-    demo.launch() 
+    demo.launch()