Revert

ui.py

@@ -1,339 +1,506 @@
 import gradio as gr
-import json
-import time
-import os
-import asyncio
-import websockets
-import logging
-from fastrtc import RTCComponent
-import threading
+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__)
+# 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"
 
-# Configure logging
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-RENDER_SIGNALING_URL = os.getenv("RENDER_SIGNALING_URL", "wss://render-signal-audio.onrender.com/stream")
-HF_SPACE_URL = os.getenv("HF_SPACE_URL", "androidguy-speaker-diarization.hf.space")
-WS_TRANSCRIPTION_URL = f"wss://{HF_SPACE_URL}/ws_transcription"
-
-class TranscriptionClient:
-    """Client to handle WebSocket connection to transcription service"""
-    
-    def __init__(self, url, on_message, on_error=None, on_close=None):
-        self.url = url
-        self.on_message = on_message
-        self.on_error = on_error or (lambda e: logger.error(f"WebSocket error: {e}"))
-        self.on_close = on_close or (lambda: logger.info("WebSocket closed"))
-        self.ws = None
-        self.running = False
-        self.connected = False
-        self.reconnect_task = None
-        self.thread = None
-
-    async def connect_async(self):
-        """Connect to WebSocket server asynchronously"""
-        try:
-            self.ws = await websockets.connect(self.url)
-            self.connected = True
-            logger.info(f"Connected to {self.url}")
-            
-            # Start listening for messages
-            while self.running:
-                try:
-                    message = await self.ws.recv()
-                    self.on_message(message)
-                except websockets.exceptions.ConnectionClosed:
-                    logger.warning("Connection closed")
-                    self.connected = False
-                    break
-                except Exception as e:
-                    self.on_error(e)
-                    break
-                    
-            # Handle connection closed
-            self.connected = False
-            self.on_close()
-            
-        except Exception as e:
-            logger.error(f"Connection error: {e}")
-            self.connected = False
-            self.on_error(e)
-    
-    def connect(self):
-        """Start connection in a separate thread"""
-        if self.running:
-            return
-            
-        self.running = True
+def build_ui():
+    """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(
+            f"""
+            <!-- Configuration parameters -->
+            <script>
+                window.RENDER_SIGNALING_URL = "{RENDER_SIGNALING_URL}";
+                window.HF_SPACE_URL = "{HF_SPACE_URL}";
+            </script>
+            """
+        )
         
-        def run_async_loop():
-            loop = asyncio.new_event_loop()
-            asyncio.set_event_loop(loop)
-            loop.run_until_complete(self.connect_async())
-            loop.close()
+        # Header and description
+        gr.Markdown("# 🎤 Live Speaker Diarization")
+        gr.Markdown(f"Real-time speech recognition with automatic speaker identification")
         
-        self.thread = threading.Thread(target=run_async_loop, daemon=True)
-        self.thread.start()
-    
-    def disconnect(self):
-        """Disconnect from WebSocket server"""
-        self.running = False
-        if self.ws:
-            asyncio.run(self.ws.close())
-            self.ws = None
-        self.connected = False
-
-class SpeakerDiarizationUI:
-    """Main UI for speaker diarization"""
-    
-    def __init__(self):
-        self.transcription_client = None
-        self.conversation_html = ""
-        self.system_status = {"status": "disconnected"}
-        self.webrtc_state = "stopped"
+        # Add transcription model info
+        gr.Markdown(f"**Using Models:** Final: {FINAL_TRANSCRIPTION_MODEL}, Realtime: {REALTIME_TRANSCRIPTION_MODEL}")
         
-    def handle_transcription_message(self, message):
-        """Handle incoming transcription messages"""
-        try:
-            data = json.loads(message)
-            message_type = data.get("type", "unknown")
-            
-            if message_type == "conversation_update":
-                # Update the conversation display
-                self.conversation_html = data.get("conversation_html", "")
-                # Update system status if available
-                if "status" in data:
-                    self.system_status = data.get("status", {})
-            
-            elif message_type == "connection":
-                # Handle connection status update
-                status = data.get("status", "unknown")
-                logger.info(f"Connection status: {status}")
-                if "hf_space_status" in data:
-                    self.system_status["hf_space_status"] = data["hf_space_status"]
-            
-            elif message_type == "error":
-                # Handle error message
-                error_msg = data.get("message", "Unknown error")
-                logger.error(f"Error from server: {error_msg}")
-                
-        except json.JSONDecodeError:
-            logger.warning(f"Received invalid JSON: {message}")
-        except Exception as e:
-            logger.error(f"Error handling message: {e}")
-    
-    def handle_transcription_error(self, error):
-        """Handle WebSocket errors"""
-        logger.error(f"WebSocket error: {error}")
-    
-    def handle_transcription_close(self):
-        """Handle WebSocket connection closure"""
-        logger.info("WebSocket connection closed")
-        self.system_status["status"] = "disconnected"
-    
-    def connect_to_transcription(self):
-        """Connect to transcription WebSocket"""
-        if self.transcription_client and self.transcription_client.connected:
-            return
-            
-        self.transcription_client = TranscriptionClient(
-            url=WS_TRANSCRIPTION_URL,
-            on_message=self.handle_transcription_message,
-            on_error=self.handle_transcription_error,
-            on_close=self.handle_transcription_close
+        # Status indicator
+        connection_status = gr.HTML(
+            """<div class="status-indicator">
+                <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>"""
         )
-        self.transcription_client.connect()
-    
-    def disconnect_from_transcription(self):
-        """Disconnect from transcription WebSocket"""
-        if self.transcription_client:
-            self.transcription_client.disconnect()
-            self.transcription_client = None
-    
-    def start_listening(self):
-        """Start listening to audio and connect to services"""
-        self.connect_to_transcription()
-        self.webrtc_state = "started"
-        return {
-            webrtc: gr.update(streaming=True),
-            status_display: gr.update(value=f"Status: Connected and listening"),
-            start_button: gr.update(visible=False),
-            stop_button: gr.update(visible=True),
-            clear_button: gr.update(visible=True)
-        }
-    
-    def stop_listening(self):
-        """Stop listening to audio and disconnect from services"""
-        self.disconnect_from_transcription()
-        self.webrtc_state = "stopped"
-        return {
-            webrtc: gr.update(streaming=False),
-            status_display: gr.update(value=f"Status: Disconnected"),
-            start_button: gr.update(visible=True),
-            stop_button: gr.update(visible=False),
-            clear_button: gr.update(visible=True)
-        }
-    
-    def clear_conversation(self):
-        """Clear the conversation display"""
-        # Call API to clear conversation
-        import requests
-        try:
-            response = requests.post(f"https://{HF_SPACE_URL}/clear")
-            if response.status_code == 200:
-                logger.info("Conversation cleared")
-            else:
-                logger.error(f"Failed to clear conversation: {response.status_code}")
-        except Exception as e:
-            logger.error(f"Error clearing conversation: {e}")
         
-        # Clear local display
-        self.conversation_html = ""
-        return {
-            conversation_display: gr.update(value="<div class='conversation-container'><p>Conversation cleared</p></div>")
-        }
-    
-    def update_display(self):
-        """Update conversation display - called periodically"""
-        status_text = f"Status: "
-        if self.webrtc_state == "started":
-            status_text += "Connected and listening"
-        else:
-            status_text += "Disconnected"
-            
-        if self.system_status.get("hf_space_status"):
-            status_text += f" | HF Space: {self.system_status['hf_space_status']}"
-            
-        return {
-            conversation_display: gr.update(value=self.conversation_html if self.conversation_html else "<div class='conversation-container'><p>No conversation yet. Start speaking to begin transcription.</p></div>"),
-            status_display: gr.update(value=status_text)
-        }
+        with gr.Row():
+            with gr.Column(scale=2):
+                # Conversation display with embedded JavaScript for WebRTC and audio handling
+                conversation_display = gr.HTML(
+                    """
+                    <div class='output' id="conversation" style='padding:20px; background:#111; border-radius:10px; 
+                      min-height:400px; font-family:Arial; font-size:16px; line-height:1.5; overflow-y:auto;'>
+                      <i>Click 'Start Listening' to begin...</i>
+                    </div>
 
-# Create UI instance
-ui = SpeakerDiarizationUI()
+                    <script>
+                    // Global variables
+                    let rtcConnection;
+                    let mediaStream;
+                    let wsConnection;
+                    let statusUpdateInterval;
+                    
+                    // Check connection to HF space
+                    async function checkHfConnection() {
+                        try {
+                            let response = await fetch(`${window.HF_SPACE_URL}/health`);
+                            return response.ok;
+                        } catch (err) {
+                            return false;
+                        }
+                    }
+                    
+                    // Start the connection and audio streaming
+                    async function startStreaming() {
+                        try {
+                            // Update status
+                            updateStatus('connecting');
+                            
+                            // Request microphone access
+                            mediaStream = await navigator.mediaDevices.getUserMedia({audio: {
+                                echoCancellation: true,
+                                noiseSuppression: true,
+                                autoGainControl: true
+                            }});
+                            
+                            // Set up WebRTC connection to Render signaling server
+                            await setupWebRTC();
+                            
+                            // Also connect WebSocket directly to HF Space for conversation updates
+                            setupWebSocket();
+                            
+                            // Start status update interval
+                            statusUpdateInterval = setInterval(updateConnectionInfo, 5000);
+                            
+                            // Update status
+                            updateStatus('connected');
+                            
+                            document.getElementById("conversation").innerHTML = "<i>Connected! Start speaking...</i>";
+                        } 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();
+                            }
+                            
+                            // Use FastRTC's connection approach
+                            const pc = new RTCPeerConnection({
+                                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+                            });
+                            
+                            // Add audio track
+                            mediaStream.getAudioTracks().forEach(track => {
+                                pc.addTrack(track, mediaStream);
+                            });
+                            
+                            // Connect to FastRTC signaling via WebSocket
+                            const signalWs = new WebSocket(window.RENDER_SIGNALING_URL.replace('wss://', 'wss://'));
+                            
+                            // 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));
+                                    }
+                                }
+                            };
+                            
+                            // 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
+                            await new Promise((resolve, reject) => {
+                                const timeout = setTimeout(() => reject(new Error("WebRTC connection timeout")), 10000);
+                                pc.onconnectionstatechange = () => {
+                                    if (pc.connectionState === 'connected') {
+                                        clearTimeout(timeout);
+                                        resolve();
+                                    } else if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
+                                        clearTimeout(timeout);
+                                        reject(new Error("WebRTC connection failed"));
+                                    }
+                                };
+                            });
+                            
+                            updateStatus('connected');
+                        } catch (err) {
+                            console.error('WebRTC setup error:', err);
+                            updateStatus('error', 'WebRTC setup failed: ' + err.message);
+                        }
+                    }
+                    
+                    // 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`;
+                                                }
+                                            }
+                                        } 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;
+                                }
+                                
+                                // 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);
+                        };
+                    }
+                    
+                    // Update connection info in the UI
+                    async function updateConnectionInfo() {
+                        try {
+                            const hfConnected = await checkHfConnection();
+                            if (!hfConnected) {
+                                updateStatus('warning', 'HF Space connection issue');
+                            } else if (rtcConnection?.connectionState === 'connected' || 
+                                      rtcConnection?.iceConnectionState === 'connected') {
+                                updateStatus('connected');
+                            } else {
+                                updateStatus('warning', 'Connection unstable');
+                            }
+                      } catch (err) {
+                            console.error('Error updating connection info:', err);
+                        }
+                    }
+                    
+                    // Update status indicator
+                    function updateStatus(status, message = '') {
+                        const statusText = document.getElementById('status-text');
+                        const statusIcon = document.getElementById('status-icon');
+                        
+                        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';
+                        }
+                    }
 
-# Custom CSS for better styling
-css = """
-.conversation-container {
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 15px;
-    margin-bottom: 10px;
-    max-height: 500px;
-    overflow-y: auto;
-    background-color: white;
-}
-.speaker {
-    margin-bottom: 12px;
-    border-radius: 8px;
-    padding: 8px 12px;
-}
-.speaker-label {
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-.status-display {
-    margin-top: 10px;
-    padding: 5px 10px;
-    background-color: #f0f0f0;
-    border-radius: 5px;
-    font-size: 0.9rem;
-}
-"""
+                    // 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;
+                        }
+                        
+                        // Update status
+                        updateStatus('disconnected');
+                    }
 
-# Create Gradio interface as a function to avoid clashing
-def create_interface():
-    with gr.Blocks(css=css) as interface:
-        gr.Markdown("# Real-Time Speaker Diarization")
-        gr.Markdown("This app performs real-time speaker diarization on your audio. It automatically transcribes speech and identifies different speakers.")
-        
-        with gr.Row():
-            with gr.Column(scale=2):
-                conversation_display = gr.HTML("<div class='conversation-container'><p>No conversation yet. Start speaking to begin transcription.</p></div>")
-            
-            with gr.Column(scale=1):
-                status_display = gr.Markdown("Status: Disconnected", elem_classes=["status-display"])
-                webrtc = RTCComponent(url=RENDER_SIGNALING_URL, streaming=False, modality="audio", mode="send-receive")
+                    // Set up event listeners when the DOM is loaded
+                    document.addEventListener('DOMContentLoaded', () => {
+                        updateStatus('disconnected');
+                    });
+                    </script>
+                    """,
+                    label="Live Conversation"
+                )
                 
+                # Control buttons
                 with gr.Row():
-                    start_button = gr.Button("Start Listening", variant="primary")
-                    stop_button = gr.Button("Stop Listening", variant="secondary", visible=False)
-                    clear_button = gr.Button("Clear Conversation", visible=True)
+                    start_btn = gr.Button("▶️ Start Listening", variant="primary", size="lg")
+                    stop_btn = gr.Button("⏹️ Stop", variant="stop", size="lg")
+                    clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="lg")
                 
-                with gr.Accordion("Advanced Settings", open=False):
-                    speaker_threshold = gr.Slider(0.5, 0.9, value=0.65, label="Speaker Change Threshold")
-                    max_speakers = gr.Slider(2, 8, value=4, step=1, label="Maximum Number of Speakers")
+                # Status display
+                status_output = gr.Markdown(
+                    """
+                    ## System Status
+                    Waiting to connect...
                     
-                    def update_settings(threshold, speakers):
-                        import requests
-                        try:
-                            response = requests.post(
-                                f"https://{HF_SPACE_URL}/settings",
-                                params={"threshold": threshold, "max_speakers": speakers}
-                            )
-                            if response.status_code == 200:
-                                return gr.update(value=f"Settings updated: Threshold={threshold}, Max Speakers={speakers}")
-                            else:
-                                return gr.update(value=f"Failed to update settings: {response.status_code}")
-                        except Exception as e:
-                            return gr.update(value=f"Error updating settings: {e}")
+                    *Click Start Listening to begin*
+                    """,
+                    label="Status Information"
+                )
+            
+            with gr.Column(scale=1):
+                # Settings
+                gr.Markdown("## ⚙️ Settings")
+                
+                threshold_slider = gr.Slider(
+                    minimum=0.3,
+                    maximum=0.9,
+                    step=0.05,
+                    value=DEFAULT_CHANGE_THRESHOLD,
+                    label="Speaker Change Sensitivity",
+                    info="Lower = more sensitive (more speaker changes)"
+                )
+                
+                max_speakers_slider = gr.Slider(
+                    minimum=2,
+                    maximum=ABSOLUTE_MAX_SPEAKERS,
+                    step=1,
+                    value=DEFAULT_MAX_SPEAKERS,
+                    label="Maximum Speakers"
+                )
+                
+                update_btn = gr.Button("Update Settings", variant="secondary")
+                
+                # Instructions
+                gr.Markdown("""
+                ## 📋 Instructions
+                1. **Start Listening** - allows browser to access microphone
+                2. **Speak** - system will transcribe and identify speakers
+                3. **Stop** when finished
+                4. **Clear** to reset conversation
+                
+                ## 🎨 Speaker Colors
+                - 🔴 Speaker 1 (Red)
+                - 🟢 Speaker 2 (Teal) 
+                - 🔵 Speaker 3 (Blue)
+                - 🟡 Speaker 4 (Green)
+                - ⭐ Speaker 5 (Yellow)
+                - 🟣 Speaker 6 (Plum)
+                - 🟤 Speaker 7 (Mint)
+                - 🟠 Speaker 8 (Gold)
+                """)
+        
+        # JavaScript to connect buttons to the script functions
+        gr.HTML("""
+        <script>
+            // Wait for Gradio to fully load
+            document.addEventListener('DOMContentLoaded', () => {
+                // Wait a bit for Gradio buttons to be created
+                setTimeout(() => {
+                    // Get the buttons
+                    const startBtn = document.querySelector('button[aria-label="Start Listening"]');
+                    const stopBtn = document.querySelector('button[aria-label="Stop"]');
+                    const clearBtn = document.querySelector('button[aria-label="Clear"]');
                     
-                    settings_button = gr.Button("Update Settings")
-                    settings_status = gr.Markdown("", elem_classes=["status-display"])
+                    if (startBtn) startBtn.onclick = () => startStreaming();
+                    if (stopBtn) stopBtn.onclick = () => stopStreaming();
+                    if (clearBtn) clearBtn.onclick = () => {
+                        // Make API call to clear conversation
+                        fetch(`${window.HF_SPACE_URL}/clear`, {
+                            method: 'POST'
+                        }).then(resp => resp.json())
+                        .then(data => {
+                            document.getElementById("conversation").innerHTML = 
+                                "<i>Conversation cleared. Start speaking again...</i>";
+                        });
+                    }
                     
-                    settings_button.click(
-                        update_settings,
-                        [speaker_threshold, max_speakers],
-                        [settings_status]
-                    )
-        
-        # Set up event handlers
-        start_button.click(
-            ui.start_listening,
-            [],
-            [webrtc, status_display, start_button, stop_button, clear_button]
-        )
+                    // Set up settings update
+                    const updateBtn = document.querySelector('button[aria-label="Update Settings"]');
+                    if (updateBtn) updateBtn.onclick = () => {
+                        const threshold = document.querySelector('input[aria-label="Speaker Change Sensitivity"]').value;
+                        const maxSpeakers = document.querySelector('input[aria-label="Maximum Speakers"]').value;
+                        
+                        fetch(`${window.HF_SPACE_URL}/settings?threshold=${threshold}&max_speakers=${maxSpeakers}`, {
+                            method: 'POST'
+                        }).then(resp => resp.json())
+                        .then(data => {
+                            const statusOutput = document.querySelector('.prose');
+                            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>
+                                `;
+                            }
+                        });
+                    }
+                }, 1000);
+            });
+        </script>
+        """)
         
-        stop_button.click(
-            ui.stop_listening,
-            [],
-            [webrtc, status_display, start_button, stop_button, clear_button]
-        )
+        # Set up periodic status updates
+        def get_status():
+            """API call to get system status - called periodically"""
+            import requests
+            try:
+                resp = requests.get(f"{HF_SPACE_URL}/status")
+                if resp.status_code == 200:
+                    return resp.json().get('status', 'No status information')
+                return "Error getting status"
+            except Exception as e:
+                return f"Connection error: {str(e)}"
         
-        clear_button.click(
-            ui.clear_conversation,
-            [],
-            [conversation_display]
-        )
-        
-        # Periodic update every 0.5 seconds
-        interface.load(
-            ui.update_display,
-            [],
-            [conversation_display, status_display],
-            every=0.5
-        )
+        status_timer = gr.Timer(5)
+        status_timer.tick(fn=get_status, outputs=status_output)
+
         
-        return interface
+    return demo
 
-# Global interface instance
-interface = None
+# Create Gradio interface
+demo = build_ui()
 
-# Launch the app
-if __name__ == "__main__":
-    interface = create_interface()
-    interface.launch()
+def mount_ui(app: FastAPI):
+    """Mount Gradio app to FastAPI"""
+    app.mount("/ui", demo.app)
 
-# Add mount_ui function for integration with FastAPI
-def mount_ui(app):
-    """Mount the Gradio interface at /ui path of the FastAPI app"""
-    global interface
-    
-    # Create interface if it doesn't exist yet
-    if interface is None:
-        interface = create_interface()
-    
-    # Mount Gradio app at /ui path
-    interface.mount_in_app(app, path="/ui")
-    
-    return app
+# For standalone testing
+if __name__ == "__main__":
+    demo.launch()