Removed complex code

ui.py

@@ -1,506 +1,475 @@
 import gradio as gr
-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"
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import JSONResponse
+import asyncio
+import json
+import logging
+from typing import Dict, List, Optional
+import os
+from datetime import datetime
+import httpx
+import websockets
 
-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>
-            """
-        )
-        
-        # Header and description
-        gr.Markdown("# 🎤 Live Speaker Diarization")
-        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}")
-        
-        # 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>"""
-        )
+# Configuration - use environment variables for deployment
+class Config:
+    def __init__(self):
+        self.hf_space_url = os.getenv("HF_SPACE_URL", "https://your-space.hf.space")
+        self.render_url = os.getenv("RENDER_URL", "https://your-app.onrender.com")
+        self.default_threshold = float(os.getenv("DEFAULT_THRESHOLD", "0.7"))
+        self.default_max_speakers = int(os.getenv("DEFAULT_MAX_SPEAKERS", "4"))
+        self.max_speakers_limit = int(os.getenv("MAX_SPEAKERS_LIMIT", "8"))
+
+config = Config()
+logger = logging.getLogger(__name__)
+
+class ConnectionManager:
+    """Manage WebSocket connections"""
+    def __init__(self):
+        self.active_connections: List[WebSocket] = []
+        self.conversation_history: List[Dict] = []
+    
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+        logger.info(f"Client connected. Total connections: {len(self.active_connections)}")
+    
+    def disconnect(self, websocket: WebSocket):
+        if websocket in self.active_connections:
+            self.active_connections.remove(websocket)
+        logger.info(f"Client disconnected. Total connections: {len(self.active_connections)}")
+    
+    async def send_personal_message(self, message: str, websocket: WebSocket):
+        try:
+            await websocket.send_text(message)
+        except Exception as e:
+            logger.error(f"Error sending message: {e}")
+            self.disconnect(websocket)
+    
+    async def broadcast(self, message: str):
+        """Send message to all connected clients"""
+        disconnected = []
+        for connection in self.active_connections:
+            try:
+                await connection.send_text(message)
+            except Exception as e:
+                logger.error(f"Error broadcasting to connection: {e}")
+                disconnected.append(connection)
         
-        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>
+        # Clean up disconnected clients
+        for conn in disconnected:
+            self.disconnect(conn)
 
-                    <script>
-                    // Global variables
-                    let rtcConnection;
-                    let mediaStream;
-                    let wsConnection;
-                    let statusUpdateInterval;
+manager = ConnectionManager()
+
+def create_gradio_app():
+    """Create the Gradio interface"""
+    
+    def get_client_js():
+        """Return the client-side JavaScript"""
+        return f"""
+        <script>
+        class SpeakerDiarizationClient {{
+            constructor() {{
+                this.ws = null;
+                this.mediaStream = null;
+                this.mediaRecorder = null;
+                this.isRecording = false;
+                this.baseUrl = '{config.hf_space_url}';
+                this.wsUrl = this.baseUrl.replace('https://', 'wss://').replace('http://', 'ws://') + '/ws';
+            }}
+            
+            async startRecording() {{
+                try {{
+                    // Request microphone access
+                    this.mediaStream = await navigator.mediaDevices.getUserMedia({{
+                        audio: {{
+                            echoCancellation: true,
+                            noiseSuppression: true,
+                            autoGainControl: true,
+                            sampleRate: 16000
+                        }}
+                    }});
                     
-                    // 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;
-                        }
-                    }
+                    // Set up WebSocket connection
+                    await this.connectWebSocket();
                     
-                    // 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 MediaRecorder for audio chunks
+                    this.mediaRecorder = new MediaRecorder(this.mediaStream, {{
+                        mimeType: 'audio/webm;codecs=opus'
+                    }});
                     
-                    // 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);
-                        };
-                    }
+                    this.mediaRecorder.ondataavailable = (event) => {{
+                        if (event.data.size > 0 && this.ws && this.ws.readyState === WebSocket.OPEN) {{
+                            // Send audio chunk to server
+                            this.ws.send(event.data);
+                        }}
+                    }};
                     
-                    // 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);
-                        }
-                    }
+                    // Start recording with chunks every 1 second
+                    this.mediaRecorder.start(1000);
+                    this.isRecording = true;
                     
-                    // 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';
-                        }
-                    }
-
-                    // 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');
-                    }
-
-                    // Set up event listeners when the DOM is loaded
-                    document.addEventListener('DOMContentLoaded', () => {
-                        updateStatus('disconnected');
-                    });
-                    </script>
-                    """,
-                    label="Live Conversation"
-                )
+                    this.updateStatus('connected', 'Recording started');
+                    
+                }} catch (error) {{
+                    console.error('Error starting recording:', error);
+                    this.updateStatus('error', `Failed to start: ${{error.message}}`);
+                }}
+            }}
+            
+            async connectWebSocket() {{
+                return new Promise((resolve, reject) => {{
+                    this.ws = new WebSocket(this.wsUrl);
+                    
+                    this.ws.onopen = () => {{
+                        console.log('WebSocket connected');
+                        resolve();
+                    }};
+                    
+                    this.ws.onmessage = (event) => {{
+                        try {{
+                            const data = JSON.parse(event.data);
+                            this.handleServerMessage(data);
+                        }} catch (e) {{
+                            console.error('Error parsing message:', e);
+                        }}
+                    }};
+                    
+                    this.ws.onerror = (error) => {{
+                        console.error('WebSocket error:', error);
+                        reject(error);
+                    }};
+                    
+                    this.ws.onclose = () => {{
+                        console.log('WebSocket closed');
+                        if (this.isRecording) {{
+                            // Try to reconnect after a delay
+                            setTimeout(() => this.connectWebSocket(), 3000);
+                        }}
+                    }};
+                }});
+            }}
+            
+            handleServerMessage(data) {{
+                switch(data.type) {{
+                    case 'transcription':
+                        this.updateConversation(data.conversation_html);
+                        break;
+                    case 'speaker_update':
+                        this.updateStatus('connected', `Active: ${{data.speaker}}`);
+                        break;
+                    case 'error':
+                        this.updateStatus('error', data.message);
+                        break;
+                    case 'status':
+                        this.updateStatus(data.status, data.message);
+                        break;
+                }}
+            }}
+            
+            stopRecording() {{
+                this.isRecording = false;
+                
+                if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {{
+                    this.mediaRecorder.stop();
+                }}
+                
+                if (this.mediaStream) {{
+                    this.mediaStream.getTracks().forEach(track => track.stop());
+                    this.mediaStream = null;
+                }}
+                
+                if (this.ws) {{
+                    this.ws.close();
+                    this.ws = null;
+                }}
+                
+                this.updateStatus('disconnected', 'Recording stopped');
+            }}
+            
+            async clearConversation() {{
+                try {{
+                    const response = await fetch(`${{this.baseUrl}}/clear`, {{
+                        method: 'POST'
+                    }});
+                    
+                    if (response.ok) {{
+                        this.updateConversation('<i>Conversation cleared. Start speaking...</i>');
+                    }}
+                }} catch (error) {{
+                    console.error('Error clearing conversation:', error);
+                }}
+            }}
+            
+            updateConversation(html) {{
+                const elem = document.getElementById('conversation');
+                if (elem) {{
+                    elem.innerHTML = html;
+                    elem.scrollTop = elem.scrollHeight;
+                }}
+            }}
+            
+            updateStatus(status, message = '') {{
+                const statusText = document.getElementById('status-text');
+                const statusIcon = document.getElementById('status-icon');
+                
+                if (!statusText || !statusIcon) return;
+                
+                const colors = {{
+                    'connected': '#4CAF50',
+                    'connecting': '#FFC107', 
+                    'disconnected': '#9E9E9E',
+                    'error': '#F44336',
+                    'warning': '#FF9800'
+                }};
+                
+                const labels = {{
+                    'connected': 'Connected',
+                    'connecting': 'Connecting...',
+                    'disconnected': 'Disconnected', 
+                    'error': 'Error',
+                    'warning': 'Warning'
+                }};
+                
+                statusText.textContent = message ? `${{labels[status]}}: ${{message}}` : labels[status];
+                statusIcon.style.backgroundColor = colors[status] || '#9E9E9E';
+            }}
+        }}
+        
+        // Global client instance
+        window.diarizationClient = new SpeakerDiarizationClient();
+        
+        // Button event handlers
+        function startListening() {{
+            window.diarizationClient.startRecording();
+        }}
+        
+        function stopListening() {{
+            window.diarizationClient.stopRecording();
+        }}
+        
+        function clearConversation() {{
+            window.diarizationClient.clearConversation();
+        }}
+        
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', () => {{
+            window.diarizationClient.updateStatus('disconnected');
+        }});
+        </script>
+        """
+    
+    with gr.Blocks(
+        title="Real-time Speaker Diarization",
+        theme=gr.themes.Soft(),
+        css="""
+        .status-indicator { margin: 10px 0; }
+        .conversation-display { 
+            background: #f8f9fa; 
+            border: 1px solid #dee2e6; 
+            border-radius: 8px; 
+            padding: 20px;
+            min-height: 400px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            overflow-y: auto;
+        }
+        """
+    ) as demo:
+        
+        # Inject client-side JavaScript
+        gr.HTML(get_client_js())
+        
+        # Header
+        gr.Markdown("# 🎤 Real-time Speaker Diarization")
+        gr.Markdown("Advanced speech recognition with automatic speaker identification")
+        
+        # Status indicator
+        gr.HTML(f"""
+        <div class="status-indicator">
+            <span id="status-text" style="color:#666;">Ready to connect</span>
+            <span id="status-icon" style="width:12px; height:12px; display:inline-block; 
+                background-color:#9E9E9E; border-radius:50%; margin-left:8px;"></span>
+        </div>
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                # Conversation display
+                gr.HTML(f"""
+                <div id="conversation" class="conversation-display">
+                    <i>Click 'Start Listening' to begin real-time transcription...</i>
+                </div>
+                """)
                 
                 # Control buttons
                 with gr.Row():
-                    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")
-                
-                # Status display
-                status_output = gr.Markdown(
-                    """
-                    ## System Status
-                    Waiting to connect...
+                    gr.Button(
+                        "▶️ Start Listening", 
+                        variant="primary", 
+                        size="lg",
+                        elem_id="start-btn"
+                    ).click(fn=None, js="startListening()")
                     
-                    *Click Start Listening to begin*
-                    """,
-                    label="Status Information"
-                )
+                    gr.Button(
+                        "⏹️ Stop", 
+                        variant="stop", 
+                        size="lg",
+                        elem_id="stop-btn"
+                    ).click(fn=None, js="stopListening()")
+                    
+                    gr.Button(
+                        "🗑️ Clear", 
+                        variant="secondary", 
+                        size="lg",
+                        elem_id="clear-btn"
+                    ).click(fn=None, js="clearConversation()")
             
             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,
+                    value=config.default_threshold,
                     label="Speaker Change Sensitivity",
-                    info="Lower = more sensitive (more speaker changes)"
+                    info="Lower = more sensitive to speaker changes"
                 )
                 
                 max_speakers_slider = gr.Slider(
                     minimum=2,
-                    maximum=ABSOLUTE_MAX_SPEAKERS,
+                    maximum=config.max_speakers_limit,
                     step=1,
-                    value=DEFAULT_MAX_SPEAKERS,
+                    value=config.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
+                ## 📋 How to Use
+                1. **Start Listening** - Grant microphone access
+                2. **Speak** - System transcribes and identifies 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)
+                - 🔴 Speaker 1 - 🟢 Speaker 2 - 🔵 Speaker 3 - 🟡 Speaker 4
+                - ⭐ Speaker 5 - 🟣 Speaker 6 - 🟤 Speaker 7 - 🟠 Speaker 8
                 """)
+    
+    return demo
+
+def create_fastapi_app():
+    """Create the FastAPI backend"""
+    app = FastAPI(title="Speaker Diarization API")
+    
+    @app.websocket("/ws")
+    async def websocket_endpoint(websocket: WebSocket):
+        await manager.connect(websocket)
+        try:
+            while True:
+                # Receive audio data
+                data = await websocket.receive_bytes()
+                
+                # Process audio data here
+                # This is where you'd integrate your actual speaker diarization model
+                result = await process_audio_chunk(data)
+                
+                # Send result back to client
+                await manager.send_personal_message(
+                    json.dumps(result), 
+                    websocket
+                )
+                
+        except WebSocketDisconnect:
+            manager.disconnect(websocket)
+        except Exception as e:
+            logger.error(f"WebSocket error: {e}")
+            manager.disconnect(websocket)
+    
+    @app.post("/clear")
+    async def clear_conversation():
+        """Clear the conversation history"""
+        manager.conversation_history.clear()
+        await manager.broadcast(json.dumps({
+            "type": "conversation_cleared"
+        }))
+        return {"status": "cleared"}
+    
+    @app.get("/health")
+    async def health_check():
+        """Health check endpoint"""
+        return {
+            "status": "healthy",
+            "timestamp": datetime.now().isoformat(),
+            "active_connections": len(manager.active_connections)
+        }
+    
+    @app.get("/status")
+    async def get_status():
+        """Get system status"""
+        return {
+            "status": "online",
+            "connections": len(manager.active_connections),
+            "conversation_length": len(manager.conversation_history)
+        }
+    
+    return app
+
+async def process_audio_chunk(audio_data: bytes) -> dict:
+    """
+    Process audio chunk and return diarization result by sending it to the Speaker Diarization backend
+    """
+    try:
+        # Convert WebM audio to appropriate format if needed
+        # This step may require additional processing depending on your backend requirements
         
-        # 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"]');
-                    
-                    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>";
-                        });
-                    }
-                    
-                    // 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>
-        """)
+        # Connect to the Speaker Diarization backend via WebSocket
+        websocket_url = f"wss://{config.hf_space_url.replace('https://', '').replace('http://', '')}/ws_inference"
+        logger.info(f"Connecting to diarization backend at {websocket_url}")
         
-        # Set up periodic status updates
-        def get_status():
-            """API call to get system status - called periodically"""
-            import requests
+        async with websockets.connect(websocket_url) as websocket:
+            # Send audio data
+            await websocket.send(audio_data)
+            
+            # Receive the response (may need to handle multiple messages)
+            response = await websocket.recv()
+            
+            # Parse the response
             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)}"
-        
-        status_timer = gr.Timer(5)
-        status_timer.tick(fn=get_status, outputs=status_output)
-
-        
-    return demo
+                result = json.loads(response)
+                
+                # Add to conversation history if it's a transcription
+                if result.get("type") == "transcription" or result.get("type") == "conversation_update":
+                    if "conversation_html" in result:
+                        manager.conversation_history.append({
+                            "timestamp": datetime.now().isoformat(),
+                            "html": result["conversation_html"]
+                        })
+                
+                return result
+            except json.JSONDecodeError:
+                logger.error(f"Invalid JSON response: {response}")
+                return {
+                    "type": "error",
+                    "error": "Invalid response from backend",
+                    "timestamp": datetime.now().isoformat()
+                }
+    except Exception as e:
+        logger.exception(f"Error processing audio chunk: {e}")
+        return {
+            "type": "error",
+            "error": str(e),
+            "timestamp": datetime.now().isoformat()
+        }
 
-# Create Gradio interface
-demo = build_ui()
+# Create both apps
+fastapi_app = create_fastapi_app()
+gradio_app = create_gradio_app()
 
-def mount_ui(app: FastAPI):
-    """Mount Gradio app to FastAPI"""
-    app.mount("/ui", demo.app)
+# Mount Gradio app to FastAPI
+fastapi_app.mount("/", gradio_app.app)
 
-# For standalone testing
 if __name__ == "__main__":
-    demo.launch() 
+    import uvicorn
+    uvicorn.run(fastapi_app, host="0.0.0.0", port=7860)