Experiment 3

ui.py

@@ -1,15 +1,46 @@
 import gradio as gr
 from fastapi import FastAPI
+import requests
+import json
 from shared import DEFAULT_CHANGE_THRESHOLD, DEFAULT_MAX_SPEAKERS, ABSOLUTE_MAX_SPEAKERS, FINAL_TRANSCRIPTION_MODEL, REALTIME_TRANSCRIPTION_MODEL
-import os
+
+print(gr.__version__)
 
 # Connection configuration (separate signaling server from model server)
-# 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")
+# 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"
+
+class ResourceManager:
+    """Manages cleanup of resources"""
+    def __init__(self):
+        self.timers = []
+        self.cleanup_callbacks = []
+    
+    def add_timer(self, timer):
+        self.timers.append(timer)
+    
+    def add_cleanup_callback(self, callback):
+        self.cleanup_callbacks.append(callback)
+    
+    def cleanup(self):
+        for timer in self.timers:
+            try:
+                timer.stop()
+            except:
+                pass
+        
+        for callback in self.cleanup_callbacks:
+            try:
+                callback()
+            except:
+                pass
+
+# Global resource manager
+resource_manager = ResourceManager()
 
 def build_ui():
-    """Build Gradio UI for speaker diarization with improved reliability"""
+    """Build Gradio UI for speaker diarization"""
     with gr.Blocks(title="Real-time Speaker Diarization", theme=gr.themes.Soft()) as demo:
         # Add configuration variables to page using custom component
         gr.HTML(
@@ -26,7 +57,7 @@ def build_ui():
         
         # Header and description
         gr.Markdown("# 🎤 Live Speaker Diarization")
-        gr.Markdown("Real-time speech recognition with automatic speaker identification")
+        gr.Markdown(f"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}")
@@ -37,8 +68,7 @@ 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>""",
-            elem_id="connection-status"
+            </div>"""
         )
         
         with gr.Row():
@@ -52,607 +82,625 @@ def build_ui():
                     </div>
 
                     <script>
-                    // Global variables
-                    let rtcConnection;
-                    let mediaStream;
-                    let wsConnection;
-                    let statusUpdateInterval;
-                    let isOfflineMode = false;
+                    // Global state management
+                    const AppState = {
+                        rtcConnection: null,
+                        mediaStream: null,
+                        wsConnection: null,
+                        statusUpdateInterval: null,
+                        wsReconnectAttempts: 0,
+                        maxReconnectAttempts: 5,
+                        isConnecting: false,
+                        isCleaningUp: false
+                    };
                     
-                    // Check connection to HF space with timeout
-                    async function checkHfConnection() {
-                        try {
-                            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);
-                            return false;
+                    // Utility functions
+                    const Utils = {
+                        // Check connection to HF space with timeout
+                        async checkHfConnection(timeout = 5000) {
+                            try {
+                                const controller = new AbortController();
+                                const timeoutId = setTimeout(() => controller.abort(), timeout);
+                                
+                                const response = await fetch(`${window.HF_SPACE_URL}/health`, {
+                                    signal: controller.signal,
+                                    method: 'GET',
+                                    cache: 'no-cache'
+                                });
+                                
+                                clearTimeout(timeoutId);
+                                return response.ok;
+                            } catch (err) {
+                                console.warn("HF Space connection failed:", err);
+                                return false;
+                            }
+                        },
+                        
+                        // Safe JSON parse
+                        safeJsonParse(str) {
+                            try {
+                                return JSON.parse(str);
+                            } catch (e) {
+                                return null;
+                            }
+                        },
+                        
+                        // Debounce function
+                        debounce(func, wait) {
+                            let timeout;
+                            return function executedFunction(...args) {
+                                const later = () => {
+                                    clearTimeout(timeout);
+                                    func(...args);
+                                };
+                                clearTimeout(timeout);
+                                timeout = setTimeout(later, wait);
+                            };
                         }
-                    }
+                    };
                     
-                    // Start the connection and audio streaming with robust error handling
-                    async function startStreaming() {
-                        try {
-                            // Update status
-                            updateStatus('connecting');
-                            
-                            // First check backend connectivity
-                            const backendAvailable = await checkHfConnection();
-                            isOfflineMode = !backendAvailable;
-                            
-                            // Request microphone access - this works even offline
-                            try {
-                                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);
+                    // Main streaming control
+                    const StreamController = {
+                        async start() {
+                            if (AppState.isConnecting || AppState.isCleaningUp) {
+                                console.log("Already connecting or cleaning up, ignoring start request");
                                 return;
                             }
                             
-                            if (backendAvailable) {
-                                // Try WebRTC connection
-                                try {
-                                    await setupWebRTC();
-                                } catch (rtcErr) {
-                                    console.error("WebRTC setup failed:", rtcErr);
-                                    // Continue even if WebRTC fails
-                                }
+                            AppState.isConnecting = true;
+                            
+                            try {
+                                // Update status
+                                StatusManager.update('connecting');
+                                
+                                // Request microphone access with proper error handling
+                                await this.setupMediaStream();
                                 
-                                // Try WebSocket connection
-                                try {
-                                    setupWebSocket();
-                                } catch (wsErr) {
-                                    console.error("WebSocket setup failed:", wsErr);
-                                    // Continue even if WebSocket fails
+                                // Check backend availability
+                                const backendAvailable = await Utils.checkHfConnection();
+                                
+                                // Setup connections
+                                if (backendAvailable) {
+                                    await Promise.allSettled([
+                                        this.setupWebRTC(),
+                                        this.setupWebSocket()
+                                    ]);
+                                    
+                                    StatusManager.update('connected');
+                                    document.getElementById("conversation").innerHTML = "<i>Connected! Start speaking...</i>";
+                                } else {
+                                    StatusManager.update('warning', 'Backend unavailable - limited functionality');
+                                    document.getElementById("conversation").innerHTML = 
+                                        "<i>Backend connection failed. Microphone active but transcription unavailable.</i>";
                                 }
                                 
-                                updateStatus('connected');
-                                document.getElementById("conversation").innerHTML = "<i>Connected! Start speaking...</i>";
-                            } else {
-                                updateStatus('warning', 'Running in offline mode - limited functionality');
-                                document.getElementById("conversation").innerHTML = 
-                                    "<i>Backend connection failed. Microphone active but transcription unavailable.</i>";
+                                // Start status monitoring
+                                AppState.statusUpdateInterval = setInterval(() => {
+                                    ConnectionMonitor.updateConnectionInfo();
+                                }, 5000);
+                                
+                            } catch (err) {
+                                console.error('Error starting stream:', err);
+                                StatusManager.update('error', err.message);
+                                this.cleanup();
+                            } finally {
+                                AppState.isConnecting = false;
                             }
-                            
-                            // Start status update interval regardless
-                            statusUpdateInterval = setInterval(updateConnectionInfo, 5000);
-                            
-                        } catch (err) {
-                            console.error('Error starting stream:', err);
-                            updateStatus('error', err.message);
-                        }
-                    }
-
-                    // Set up WebRTC connection to Render signaling server
-                    async function setupWebRTC() {
-                        try {
-                            if (rtcConnection) {
-                                rtcConnection.close();
+                        },
+                        
+                        async setupMediaStream() {
+                            try {
+                                AppState.mediaStream = await navigator.mediaDevices.getUserMedia({
+                                    audio: {
+                                        echoCancellation: true,
+                                        noiseSuppression: true,
+                                        autoGainControl: true,
+                                        sampleRate: 16000 // Specify sample rate for consistency
+                                    }
+                                });
+                            } catch (err) {
+                                let errorMessage;
+                                switch (err.name) {
+                                    case 'NotAllowedError':
+                                        errorMessage = 'Microphone access denied. Please allow microphone access and try again.';
+                                        break;
+                                    case 'NotFoundError':
+                                        errorMessage = 'No microphone found. Please connect a microphone and try again.';
+                                        break;
+                                    case 'NotReadableError':
+                                        errorMessage = 'Microphone is being used by another application.';
+                                        break;
+                                    case 'OverconstrainedError':
+                                        errorMessage = 'Microphone constraints cannot be satisfied.';
+                                        break;
+                                    default:
+                                        errorMessage = `Microphone error: ${err.message}`;
+                                }
+                                throw new Error(errorMessage);
                             }
-                            
-                            // Use FastRTC's connection approach
-                            const pc = new RTCPeerConnection({
-                                iceServers: [
-                                    { urls: 'stun:stun.l.google.com:19302' },
-                                    { urls: 'stun:stun1.l.google.com:19302' }
-                                ]
-                            });
-                            
-                            // Add audio track
-                            mediaStream.getAudioTracks().forEach(track => {
-                                pc.addTrack(track, mediaStream);
-                            });
-                            
-                            // 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");
+                        },
+                        
+                        async setupWebRTC() {
+                            try {
+                                // Close existing connection
+                                if (AppState.rtcConnection) {
+                                    AppState.rtcConnection.close();
                                 }
-                            }, 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) => {
-                                try {
-                                    const message = JSON.parse(event.data);
+                                
+                                const pc = new RTCPeerConnection({
+                                    iceServers: [
+                                        { urls: 'stun:stun.l.google.com:19302' },
+                                        { urls: 'stun:stun1.l.google.com:19302' }
+                                    ]
+                                });
+                                
+                                // Add audio track
+                                if (AppState.mediaStream) {
+                                    AppState.mediaStream.getAudioTracks().forEach(track => {
+                                        pc.addTrack(track, AppState.mediaStream);
+                                    });
+                                }
+                                
+                                // Connect to signaling server
+                                const signalWs = new WebSocket(window.RENDER_SIGNALING_URL);
+                                
+                                // Handle signaling messages
+                                signalWs.onmessage = async (event) => {
+                                    const message = Utils.safeJsonParse(event.data);
+                                    if (!message) return;
                                     
-                                    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) {
+                                    try {
+                                        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' && message.candidate) {
                                             await pc.addIceCandidate(new RTCIceCandidate(message));
                                         }
+                                    } catch (err) {
+                                        console.error('Error handling signaling message:', err);
                                     }
-                                } catch (err) {
-                                    console.error("Error processing signaling message:", err);
-                                }
-                            };
-                            
-                            // Send ICE candidates
-                            pc.onicecandidate = (event) => {
-                                if (event.candidate) {
-                                    signalWs.send(JSON.stringify({
-                                        type: 'candidate',
-                                        candidate: event.candidate
-                                    }));
-                                }
-                            };
-                            
-                            // Keep connection reference
-                            rtcConnection = pc;
-                            
-                            // Wait for connection to be established with timeout
-                            await new Promise((resolve, reject) => {
-                                const timeout = setTimeout(() => reject(new Error("WebRTC connection timeout")), 15000);
+                                };
+                                
+                                // Send ICE candidates
+                                pc.onicecandidate = (event) => {
+                                    if (event.candidate && signalWs.readyState === WebSocket.OPEN) {
+                                        signalWs.send(JSON.stringify({
+                                            type: 'candidate',
+                                            candidate: event.candidate
+                                        }));
+                                    }
+                                };
                                 
+                                // Handle connection state changes
                                 pc.onconnectionstatechange = () => {
-                                    console.log("WebRTC connection state:", pc.connectionState);
-                                    if (pc.connectionState === 'connected') {
-                                        clearTimeout(timeout);
-                                        resolve();
-                                    } else if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected' || pc.connectionState === 'closed') {
-                                        clearTimeout(timeout);
-                                        reject(new Error("WebRTC connection failed"));
+                                    console.log('WebRTC connection state:', pc.connectionState);
+                                    if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
+                                        StatusManager.update('warning', 'WebRTC connection lost');
                                     }
                                 };
                                 
-                                // 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"));
+                                AppState.rtcConnection = pc;
+                                
+                                // Wait for connection with timeout
+                                await new Promise((resolve, reject) => {
+                                    const timeout = setTimeout(() => {
+                                        reject(new Error("WebRTC connection timeout (15s)"));
+                                    }, 15000);
+                                    
+                                    pc.onconnectionstatechange = () => {
+                                        if (pc.connectionState === 'connected') {
+                                            clearTimeout(timeout);
+                                            resolve();
+                                        } else if (pc.connectionState === 'failed') {
+                                            clearTimeout(timeout);
+                                            reject(new Error("WebRTC connection failed"));
+                                        }
+                                    };
+                                });
+                                
+                            } catch (err) {
+                                console.error('WebRTC setup error:', err);
+                                throw new Error(`WebRTC setup failed: ${err.message}`);
+                            }
+                        },
+                        
+                        setupWebSocket() {
+                            try {
+                                // Close existing connection
+                                if (AppState.wsConnection) {
+                                    AppState.wsConnection.close();
+                                }
+                                
+                                const wsUrl = window.RENDER_SIGNALING_URL.replace('/stream', '/ws_relay');
+                                AppState.wsConnection = new WebSocket(wsUrl);
+                                
+                                AppState.wsConnection.onopen = () => {
+                                    console.log('WebSocket connection established');
+                                    AppState.wsReconnectAttempts = 0; // Reset on successful connection
+                                };
+                                
+                                AppState.wsConnection.onmessage = (event) => {
+                                    MessageHandler.process(event.data);
+                                };
+                                
+                                AppState.wsConnection.onerror = (error) => {
+                                    console.error('WebSocket error:', error);
+                                    StatusManager.update('warning', 'WebSocket error');
+                                };
+                                
+                                AppState.wsConnection.onclose = () => {
+                                    console.log('WebSocket connection closed');
+                                    
+                                    // Only attempt reconnection if not cleaning up and under limit
+                                    if (!AppState.isCleaningUp && 
+                                        AppState.wsReconnectAttempts < AppState.maxReconnectAttempts) {
+                                        
+                                        AppState.wsReconnectAttempts++;
+                                        const delay = Math.min(3000 * AppState.wsReconnectAttempts, 30000); // Max 30s delay
+                                        
+                                        console.log(`Attempting WebSocket reconnection ${AppState.wsReconnectAttempts}/${AppState.maxReconnectAttempts} in ${delay}ms`);
+                                        
+                                        setTimeout(() => {
+                                            if (!AppState.isCleaningUp) {
+                                                this.setupWebSocket();
+                                            }
+                                        }, delay);
+                                    } else if (AppState.wsReconnectAttempts >= AppState.maxReconnectAttempts) {
+                                        StatusManager.update('error', 'Max WebSocket reconnection attempts reached');
                                     }
                                 };
-                            });
+                                
+                            } catch (err) {
+                                console.error('WebSocket setup error:', err);
+                                throw new Error(`WebSocket setup failed: ${err.message}`);
+                            }
+                        },
+                        
+                        stop() {
+                            AppState.isCleaningUp = true;
+                            this.cleanup();
+                            StatusManager.update('disconnected');
+                            AppState.isCleaningUp = false;
+                        },
+                        
+                        cleanup() {
+                            // Close WebRTC connection
+                            if (AppState.rtcConnection) {
+                                AppState.rtcConnection.close();
+                                AppState.rtcConnection = null;
+                            }
                             
-                            updateStatus('connected');
-                            console.log("WebRTC connection established successfully");
+                            // Close WebSocket
+                            if (AppState.wsConnection) {
+                                AppState.wsConnection.close();
+                                AppState.wsConnection = null;
+                            }
                             
-                        } catch (err) {
-                            console.error('WebRTC setup error:', err);
-                            updateStatus('warning', 'WebRTC setup issue: ' + err.message);
-                            throw err;
-                        }
-                    }
-                    
-                    // Set up WebSocket connection to HF Space for conversation updates
-                    function setupWebSocket() {
-                        try {
-                            // Close existing connection if any
-                            if (wsConnection) {
-                                wsConnection.close();
+                            // Stop media stream
+                            if (AppState.mediaStream) {
+                                AppState.mediaStream.getTracks().forEach(track => track.stop());
+                                AppState.mediaStream = null;
                             }
                             
-                            const wsUrl = window.RENDER_SIGNALING_URL.replace('stream', 'ws_relay');
-                            wsConnection = new WebSocket(wsUrl);
+                            // Clear intervals
+                            if (AppState.statusUpdateInterval) {
+                                clearInterval(AppState.statusUpdateInterval);
+                                AppState.statusUpdateInterval = null;
+                            }
                             
-                            // Set connection timeout
-                            const connectionTimeout = setTimeout(() => {
-                                if (wsConnection.readyState !== WebSocket.OPEN) {
-                                    wsConnection.close();
-                                    throw new Error("WebSocket connection timeout");
+                            // Reset reconnection attempts
+                            AppState.wsReconnectAttempts = 0;
+                        }
+                    };
+                    
+                    // Message handling
+                    const MessageHandler = {
+                        process(data) {
+                            try {
+                                const message = Utils.safeJsonParse(data);
+                                
+                                if (message) {
+                                    this.handleStructuredMessage(message);
+                                } else {
+                                    // Fallback for plain HTML content
+                                    this.updateConversationDisplay(data);
                                 }
-                            }, 10000);
-                            
-                            wsConnection.onopen = () => {
-                                clearTimeout(connectionTimeout);
-                                console.log('WebSocket connection established');
-                            };
-                            
-                            wsConnection.onmessage = (event) => {
-                                try {
-                                    // Parse the JSON message
-                                    const message = JSON.parse(event.data);
+                                
+                                this.autoScroll();
+                            } catch (e) {
+                                console.error('Error processing message:', e);
+                                this.updateConversationDisplay(data);
+                                this.autoScroll();
+                            }
+                        },
+                        
+                        handleStructuredMessage(message) {
+                            switch(message.type) {
+                                case 'transcription':
+                                    if (message.data && message.data.conversation_html) {
+                                        this.updateConversationDisplay(message.data.conversation_html);
+                                    }
+                                    break;
                                     
-                                    // 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');
-                                            }
-                                            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;
+                                case 'processing_result':
+                                    this.handleProcessingResult(message.data);
+                                    break;
+                                    
+                                case 'connection':
+                                    StatusManager.update(message.status === 'connected' ? 'connected' : 'warning');
+                                    break;
+                                    
+                                case 'connection_established':
+                                    StatusManager.update('connected');
+                                    if (message.conversation) {
+                                        this.updateConversationDisplay(message.conversation);
                                     }
+                                    break;
                                     
-                                    // 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;
+                                case 'conversation_update':
+                                    if (message.conversation_html) {
+                                        this.updateConversationDisplay(message.conversation_html);
+                                    }
+                                    break;
                                     
-                                    // 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');
-                            };
+                                case 'conversation_cleared':
+                                    this.updateConversationDisplay("<i>Conversation cleared. Start speaking again...</i>");
+                                    break;
+                                    
+                                case 'error':
+                                    console.error('Server error:', message.message);
+                                    StatusManager.update('warning', message.message);
+                                    break;
+                                    
+                                default:
+                                    console.log('Unknown message type:', message.type);
+                            }
+                        },
+                        
+                        handleProcessingResult(data) {
+                            if (!data) return;
                             
-                            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);
-                                        }
-                                    }, 3000);
+                            if (data.status === "processed" && data.speaker_id !== undefined) {
+                                const statusElem = document.getElementById('status-text');
+                                if (statusElem) {
+                                    const speakerId = `Speaker ${data.speaker_id + 1}`;
+                                    statusElem.textContent = `Connected - ${speakerId} active`;
                                 }
-                            };
-                        } catch (err) {
-                            console.error("WebSocket setup error:", err);
-                            throw err;
+                            } else if (data.status === "error") {
+                                StatusManager.update('error', data.message || 'Processing error');
+                            }
+                        },
+                        
+                        updateConversationDisplay(content) {
+                            const container = document.getElementById("conversation");
+                            if (container) {
+                                container.innerHTML = content;
+                            }
+                        },
+                        
+                        autoScroll() {
+                            const container = document.getElementById("conversation");
+                            if (container) {
+                                container.scrollTop = container.scrollHeight;
+                            }
                         }
-                    }
+                    };
                     
-                    // Update connection info in the UI with better error handling
-                    async function updateConnectionInfo() {
-                        try {
-                            const hfConnected = await checkHfConnection();
-                            
-                            if (!hfConnected) {
-                                // If we were online but now offline, update mode
-                                if (!isOfflineMode) {
-                                    isOfflineMode = true;
-                                    updateStatus('warning', 'Backend unavailable - limited functionality');
-                                }
-                            } else {
-                                // If we were offline but now online, update mode
-                                if (isOfflineMode) {
-                                    isOfflineMode = false;
+                    // Connection monitoring
+                    const ConnectionMonitor = {
+                        async updateConnectionInfo() {
+                            try {
+                                const hfConnected = await Utils.checkHfConnection(3000);
+                                
+                                if (!hfConnected) {
+                                    StatusManager.update('warning', 'Backend unavailable');
                                     
-                                    // Try to reconnect services
-                                    try {
-                                        if (!rtcConnection || rtcConnection.connectionState !== 'connected') {
-                                            await setupWebRTC();
-                                        }
-                                        
-                                        if (!wsConnection || wsConnection.readyState !== WebSocket.OPEN) {
-                                            setupWebSocket();
+                                    // Try to reconnect WebSocket only if not already trying
+                                    if (!AppState.wsConnection || AppState.wsConnection.readyState !== WebSocket.OPEN) {
+                                        if (AppState.wsReconnectAttempts < AppState.maxReconnectAttempts) {
+                                            StreamController.setupWebSocket();
                                         }
-                                        
-                                        updateStatus('connected');
-                                    } catch (e) {
-                                        console.warn("Failed to reconnect services:", e);
-                                        updateStatus('warning', 'Connection partially restored');
                                     }
-                                } else if (rtcConnection?.connectionState === 'connected' || 
-                                          rtcConnection?.iceConnectionState === 'connected') {
-                                    updateStatus('connected');
+                                } else if (AppState.rtcConnection?.connectionState === 'connected' || 
+                                          AppState.rtcConnection?.iceConnectionState === 'connected') {
+                                    StatusManager.update('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);
-                                        }
-                                    }
+                                    StatusManager.update('warning', 'Connection unstable');
                                 }
+                            } catch (err) {
+                                console.error('Error updating connection info:', err);
                             }
-                        } catch (err) {
-                            console.error('Error updating connection info:', err);
-                            // Don't update status here to avoid flickering
                         }
-                    }
+                    };
                     
-                    // Update status indicator
-                    function updateStatus(status, message = '') {
-                        const statusText = document.getElementById('status-text');
-                        const statusIcon = document.getElementById('status-icon');
-                        
-                        if (!statusText || !statusIcon) return;
-                        
-                        switch(status) {
-                            case 'connected':
-                                statusText.textContent = 'Connected';
-                                statusIcon.style.backgroundColor = '#4CAF50';
-                                break;
-                            case 'connecting':
-                                statusText.textContent = 'Connecting...';
-                                statusIcon.style.backgroundColor = '#FFC107';
-                                break;
-                            case 'disconnected':
-                                statusText.textContent = 'Disconnected';
-                                statusIcon.style.backgroundColor = '#9E9E9E';
-                                break;
-                            case 'error':
-                                statusText.textContent = 'Error: ' + message;
-                                statusIcon.style.backgroundColor = '#F44336';
-                                break;
-                            case 'warning':
-                                statusText.textContent = 'Warning: ' + message;
-                                statusIcon.style.backgroundColor = '#FF9800';
-                                break;
-                            default:
-                                statusText.textContent = 'Unknown';
-                                statusIcon.style.backgroundColor = '#9E9E9E';
-                        }
-                    }
-
-                    // Stop streaming and clean up
-                    function stopStreaming() {
-                        // Close WebRTC connection
-                        if (rtcConnection) {
-                            rtcConnection.close();
-                            rtcConnection = null;
-                        }
-                        
-                        // Close WebSocket
-                        if (wsConnection) {
-                            wsConnection.close();
-                            wsConnection = null;
-                        }
-                        
-                        // Stop all tracks in media stream
-                        if (mediaStream) {
-                            mediaStream.getTracks().forEach(track => track.stop());
-                            mediaStream = null;
-                        }
-                        
-                        // Clear interval
-                        if (statusUpdateInterval) {
-                            clearInterval(statusUpdateInterval);
-                            statusUpdateInterval = null;
+                    // Status management
+                    const StatusManager = {
+                        update(status, message = '') {
+                            const statusText = document.getElementById('status-text');
+                            const statusIcon = document.getElementById('status-icon');
+                            
+                            if (!statusText || !statusIcon) return;
+                            
+                            switch(status) {
+                                case 'connected':
+                                    statusText.textContent = message || 'Connected';
+                                    statusIcon.style.backgroundColor = '#4CAF50';
+                                    break;
+                                case 'connecting':
+                                    statusText.textContent = 'Connecting...';
+                                    statusIcon.style.backgroundColor = '#FFC107';
+                                    break;
+                                case 'disconnected':
+                                    statusText.textContent = 'Disconnected';
+                                    statusIcon.style.backgroundColor = '#9E9E9E';
+                                    break;
+                                case 'error':
+                                    statusText.textContent = `Error: ${message}`;
+                                    statusIcon.style.backgroundColor = '#F44336';
+                                    break;
+                                case 'warning':
+                                    statusText.textContent = `Warning: ${message}`;
+                                    statusIcon.style.backgroundColor = '#FF9800';
+                                    break;
+                                default:
+                                    statusText.textContent = 'Unknown';
+                                    statusIcon.style.backgroundColor = '#9E9E9E';
+                            }
                         }
-                        
-                        // Update status
-                        updateStatus('disconnected');
-                    }
+                    };
                     
-                    // Clear conversation with better error handling and offline mode support
-                    function clearConversation() {
-                        // First update the UI immediately regardless of backend availability
-                        document.getElementById("conversation").innerHTML = 
-                            "<i>Conversation cleared. Start speaking again...</i>";
-                        
-                        // Then try to update on the backend if available
-                        if (!isOfflineMode) {
-                            checkHfConnection().then(isConnected => {
+                    // API functions
+                    const ApiManager = {
+                        async clearConversation() {
+                            // Update UI immediately
+                            document.getElementById("conversation").innerHTML = 
+                                "<i>Conversation cleared. Start speaking again...</i>";
+                            
+                            // Try backend API
+                            try {
+                                const isConnected = await Utils.checkHfConnection();
                                 if (isConnected) {
-                                    return fetch(`${window.HF_SPACE_URL}/clear`, {
-                                        method: 'POST'
+                                    const response = await fetch(`${window.HF_SPACE_URL}/clear`, {
+                                        method: 'POST',
+                                        headers: {
+                                            'Content-Type': 'application/json'
+                                        }
                                     });
-                                } else {
-                                    throw new Error("Backend unavailable");
+                                    
+                                    if (!response.ok) {
+                                        throw new Error(`HTTP ${response.status}`);
+                                    }
+                                    
+                                    console.log("Backend conversation cleared successfully");
                                 }
-                            })
-                            .then(resp => resp.json())
-                            .then(data => {
-                                console.log("Backend conversation cleared successfully");
-                            })
-                            .catch(err => {
+                            } 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 || 
-                                         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');
-                        if (statusOutput) {
-                            statusOutput.innerHTML = `
-                                <h2>System Status</h2>
-                                <p>Settings updated:</p>
-                                <ul>
-                                    <li>Threshold: ${threshold}</li>
-                                    <li>Max Speakers: ${maxSpeakers}</li>
-                                </ul>
-                                <p>Transcription Models:</p>
-                                <ul>
-                                    <li>Final: ${window.FINAL_TRANSCRIPTION_MODEL || "distil-large-v3"}</li>
-                                    <li>Realtime: ${window.REALTIME_TRANSCRIPTION_MODEL || "distil-small.en"}</li>
-                                </ul>
-                            `;
-                        }
+                            }
+                        },
                         
-                        // Then try to update on the backend if available and not in offline mode
-                        if (!isOfflineMode) {
-                            checkHfConnection().then(isConnected => {
+                        async updateSettings() {
+                            const threshold = document.querySelector('input[data-testid="threshold-slider"]')?.value || 0.7;
+                            const maxSpeakers = document.querySelector('input[data-testid="speakers-slider"]')?.value || 4;
+                            
+                            // Update UI immediately
+                            const statusOutput = document.getElementById('status-output');
+                            if (statusOutput) {
+                                statusOutput.innerHTML = `
+                                    <h2>System Status</h2>
+                                    <p>Settings updated:</p>
+                                    <ul>
+                                        <li>Threshold: ${threshold}</li>
+                                        <li>Max Speakers: ${maxSpeakers}</li>
+                                    </ul>
+                                    <p>Transcription Models:</p>
+                                    <ul>
+                                        <li>Final: ${window.FINAL_TRANSCRIPTION_MODEL || "distil-large-v3"}</li>
+                                        <li>Realtime: ${window.REALTIME_TRANSCRIPTION_MODEL || "distil-small.en"}</li>
+                                    </ul>
+                                `;
+                            }
+                            
+                            // Try backend API
+                            try {
+                                const isConnected = await Utils.checkHfConnection();
                                 if (isConnected) {
-                                    return fetch(`${window.HF_SPACE_URL}/settings?threshold=${threshold}&max_speakers=${maxSpeakers}`, {
-                                        method: 'POST'
-                                    });
-                                } else {
-                                    throw new Error("Backend unavailable");
+                                    const response = await fetch(
+                                        `${window.HF_SPACE_URL}/settings?threshold=${threshold}&max_speakers=${maxSpeakers}`, 
+                                        {
+                                            method: 'POST',
+                                            headers: {
+                                                'Content-Type': 'application/json'
+                                            }
+                                        }
+                                    );
+                                    
+                                    if (!response.ok) {
+                                        throw new Error(`HTTP ${response.status}`);
+                                    }
+                                    
+                                    console.log("Backend settings updated successfully");
                                 }
-                            })
-                            .then(resp => resp.json())
-                            .then(data => {
-                                console.log("Backend settings updated successfully:", data);
-                            })
-                            .catch(err => {
+                            } 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
-                    document.addEventListener('DOMContentLoaded', () => {
-                        updateStatus('disconnected');
-                        
-                        // Function to find and bind buttons with retries
-                        function findAndBindButtons() {
-                            // Try to find buttons by ID first (most reliable)
-                            let startBtn = document.getElementById('btn-start');
-                            let stopBtn = document.getElementById('btn-stop');
-                            let clearBtn = document.getElementById('btn-clear');
-                            let updateBtn = document.getElementById('btn-update');
+                    };
+                    
+                    // DOM initialization
+                    const DOMManager = {
+                        init() {
+                            StatusManager.update('disconnected');
                             
-                            // 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) stopBtn = document.querySelector('button[aria-label="Clear"]');
-                            if (!updateBtn) updateBtn = document.querySelector('button[aria-label="Update Settings"]');
+                            // Use MutationObserver for reliable button detection
+                            const observer = new MutationObserver(Utils.debounce(() => {
+                                if (this.bindButtons()) {
+                                    observer.disconnect();
+                                }
+                            }, 100));
                             
-                            // 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'));
+                            observer.observe(document.body, {
+                                childList: true,
+                                subtree: true
+                            });
                             
-                            // Check if all buttons are found
-                            const buttonsFound = startBtn && stopBtn && clearBtn && updateBtn;
+                            // Fallback: try binding immediately
+                            this.bindButtons();
                             
-                            if (buttonsFound) {
-                                console.log("All buttons found, binding events");
+                            // Cleanup on page unload
+                            window.addEventListener('beforeunload', () => {
+                                StreamController.cleanup();
+                            });
+                        },
+                        
+                        bindButtons() {
+                            const buttons = {
+                                start: document.getElementById('btn-start') || 
+                                       document.querySelector('button[aria-label="Start Listening"]'),
+                                stop: document.getElementById('btn-stop') || 
+                                      document.querySelector('button[aria-label="Stop"]'),
+                                clear: document.getElementById('btn-clear') || 
+                                       document.querySelector('button[aria-label="Clear"]'),
+                                update: document.getElementById('btn-update') || 
+                                        document.querySelector('button[aria-label="Update Settings"]')
+                            };
+                            
+                            const allFound = Object.values(buttons).every(btn => btn !== null);
+                            
+                            if (allFound) {
+                                // Remove existing listeners to prevent duplicates
+                                Object.values(buttons).forEach(btn => {
+                                    if (btn.dataset.bound !== 'true') {
+                                        btn.onclick = null;
+                                    }
+                                });
                                 
-                                // Bind event handlers
-                                startBtn.onclick = () => startStreaming();
-                                stopBtn.onclick = () => stopStreaming();
-                                clearBtn.onclick = () => clearConversation();
-                                updateBtn.onclick = () => updateSettings();
+                                // Bind new listeners
+                                buttons.start.onclick = () => StreamController.start();
+                                buttons.stop.onclick = () => StreamController.stop();
+                                buttons.clear.onclick = () => ApiManager.clearConversation();
+                                buttons.update.onclick = () => ApiManager.updateSettings();
                                 
-                                // Add data attributes to make it clear these are bound
-                                startBtn.setAttribute('data-bound', 'true');
-                                stopBtn.setAttribute('data-bound', 'true');
-                                clearBtn.setAttribute('data-bound', 'true');
-                                updateBtn.setAttribute('data-bound', 'true');
+                                // Mark as bound
+                                Object.values(buttons).forEach(btn => {
+                                    btn.dataset.bound = 'true';
+                                });
                                 
+                                console.log("All buttons bound successfully");
                                 return true;
-                            } else {
-                                console.log("Not all buttons found, will retry");
-                                return false;
                             }
-                        }
-                        
-                        // Try to bind immediately
-                        if (!findAndBindButtons()) {
-                            // If not successful, set up a retry mechanism
-                            let retryCount = 0;
-                            const maxRetries = 20;  // More retries, longer interval
-                            const retryInterval = 300; // 300ms between retries
                             
-                            const retryBinding = setInterval(() => {
-                                if (findAndBindButtons() || ++retryCount >= maxRetries) {
-                                    clearInterval(retryBinding);
-                                    if (retryCount >= maxRetries) {
-                                        console.warn("Failed to find all buttons after maximum retries");
-                                    }
-                                }
-                            }, retryInterval);
+                            return false;
                         }
-                    });
+                    };
+                    
+                    // Initialize when DOM is ready
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', () => DOMManager.init());
+                    } else {
+                        DOMManager.init();
+                    }
                     </script>
                     """,
                     label="Live Conversation"
@@ -720,22 +768,26 @@ def build_ui():
                 - 🟠 Speaker 8 (Gold)
                 """)
         
-        # Function to get backend status (for periodic updates)
+        # Set up periodic status updates with proper error handling
         def get_status():
             """API call to get system status - called periodically"""
-            import requests
             try:
-                # Use a short timeout to prevent UI hanging
-                resp = requests.get(f"{HF_SPACE_URL}/status", timeout=2)
+                resp = requests.get(f"{HF_SPACE_URL}/status", timeout=5)
                 if resp.status_code == 200:
-                    return resp.json().get('formatted_text', 'No status information')
-                return "Error getting status"
+                    data = resp.json()
+                    return data.get('status', 'No status information')
+                return f"HTTP {resp.status_code}"
+            except requests.exceptions.Timeout:
+                return "Connection timeout"
+            except requests.exceptions.ConnectionError:
+                return "Connection error - backend unavailable"
             except Exception as e:
-                return f"Status update unavailable: Backend may be offline"
+                return f"Error: {str(e)}"
         
-        # Set up periodic status updates with shorter interval and error handling
-        status_timer = gr.Timer(10)  # 10 seconds between updates
+        # Create timer and add to resource manager
+        status_timer = gr.Timer(5)
         status_timer.tick(fn=get_status, outputs=status_output)
+        resource_manager.add_timer(status_timer)
         
     return demo
 
@@ -746,6 +798,23 @@ def mount_ui(app: FastAPI):
     """Mount Gradio app to FastAPI"""
     app.mount("/ui", demo.app)
 
+def cleanup_resources():
+    """Cleanup function to be called on app shutdown"""
+    resource_manager.cleanup()
+
 # For standalone testing
 if __name__ == "__main__":
-    demo.launch()
+    try:
+        demo.launch(
+            share=False,
+            debug=False,
+            show_error=True,
+            server_name="0.0.0.0",
+            server_port=7860
+        )
+    except KeyboardInterrupt:
+        print("\nShutting down...")
+        cleanup_resources()
+    except Exception as e:
+        print(f"Error launching demo: {e}")
+        cleanup_resources()