experiment

ui.py

@@ -1,4 +1,5 @@
 import gradio as gr
+import requests
 from fastapi import FastAPI
 from shared import DEFAULT_CHANGE_THRESHOLD, DEFAULT_MAX_SPEAKERS, ABSOLUTE_MAX_SPEAKERS, FINAL_TRANSCRIPTION_MODEL, REALTIME_TRANSCRIPTION_MODEL
 print(gr.__version__)
@@ -13,10 +14,11 @@ def build_ui():
         # Add configuration variables to page using custom component
         gr.HTML(
             f"""
-            <!-- Configuration parameters -->
             <script>
                 window.RENDER_SIGNALING_URL = "{RENDER_SIGNALING_URL}";
                 window.HF_SPACE_URL = "{HF_SPACE_URL}";
+                window.FINAL_TRANSCRIPTION_MODEL = "{FINAL_TRANSCRIPTION_MODEL}";  <!-- ADDED -->
+                window.REALTIME_TRANSCRIPTION_MODEL = "{REALTIME_TRANSCRIPTION_MODEL}";  <!-- ADDED -->
             </script>
             """
         )
@@ -60,36 +62,55 @@ def build_ui():
                             let response = await fetch(`${window.HF_SPACE_URL}/health`);
                             return response.ok;
                         } catch (err) {
+                            console.warn("HF Space connection failed:", err);
                             return false;
                         }
                     }
                     
-                    // Start the connection and audio streaming
+                    // Improved start streaming function with offline mode support
                     async function startStreaming() {
                         try {
                             // Update status
                             updateStatus('connecting');
                             
-                            // Request microphone access
+                            // Request microphone access - this will work even offline
                             mediaStream = await navigator.mediaDevices.getUserMedia({audio: {
                                 echoCancellation: true,
                                 noiseSuppression: true,
                                 autoGainControl: true
                             }});
                             
-                            // Set up WebRTC connection to Render signaling server
-                            await setupWebRTC();
+                            // Check if we can connect to backend
+                            let backendAvailable = await checkHfConnection();
                             
-                            // Also connect WebSocket directly to HF Space for conversation updates
-                            setupWebSocket();
+                            try {
+                                // Try WebRTC connection, might fail if backend is down
+                                await setupWebRTC();
+                            } catch (rtcErr) {
+                                console.error("WebRTC setup failed:", rtcErr);
+                                // Continue even if WebRTC fails
+                            }
                             
-                            // Start status update interval
-                            statusUpdateInterval = setInterval(updateConnectionInfo, 5000);
+                            try {
+                                // Try WebSocket connection, might fail if backend is down
+                                setupWebSocket();
+                            } catch (wsErr) {
+                                console.error("WebSocket setup failed:", wsErr);
+                                // Continue even if WebSocket fails
+                            }
                             
-                            // Update status
-                            updateStatus('connected');
+                            // Start status update interval regardless
+                            statusUpdateInterval = setInterval(updateConnectionInfo, 5000);
                             
-                            document.getElementById("conversation").innerHTML = "<i>Connected! Start speaking...</i>";
+                            // Update status - either connected or offline mode
+                            if (backendAvailable) {
+                                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>";
+                            }
                         } catch (err) {
                             console.error('Error starting stream:', err);
                             updateStatus('error', err.message);
@@ -271,20 +292,41 @@ def build_ui():
                         };
                     }
                     
-                    // Update connection info in the UI
+                    // Update connection info in the UI with better error handling
                     async function updateConnectionInfo() {
                         try {
                             const hfConnected = await checkHfConnection();
+                            
                             if (!hfConnected) {
-                                updateStatus('warning', 'HF Space connection issue');
+                                // If backend is unavailable, update status but don't break functionality
+                                updateStatus('warning', 'Backend unavailable - limited functionality');
+                                
+                                // Try to reconnect WebSocket if it was disconnected
+                                if (!wsConnection || wsConnection.readyState !== WebSocket.OPEN) {
+                                    try {
+                                        setupWebSocket();
+                                    } catch (e) {
+                                        console.warn("Failed to reconnect WebSocket:", e);
+                                    }
+                                }
                             } else if (rtcConnection?.connectionState === 'connected' || 
                                       rtcConnection?.iceConnectionState === 'connected') {
                                 updateStatus('connected');
                             } else {
                                 updateStatus('warning', 'Connection unstable');
+                                
+                                // Try to reconnect if needed
+                                if (!rtcConnection || rtcConnection.connectionState === 'failed') {
+                                    try {
+                                        await setupWebRTC();
+                                    } catch (e) {
+                                        console.warn("Failed to reconnect WebRTC:", e);
+                                    }
+                                }
                             }
                       } catch (err) {
                             console.error('Error updating connection info:', err);
+                            // Don't update status here to avoid flickering
                         }
                     }
                     
@@ -349,31 +391,157 @@ def build_ui():
                         // 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
+                        checkHfConnection().then(isConnected => {
+                            if (isConnected) {
+                                return fetch(`${window.HF_SPACE_URL}/clear`, {
+                                    method: 'POST'
+                                });
+                            } else {
+                                throw new Error("Backend unavailable");
+                            }
+                        })
+                        .then(resp => resp.json())
+                        .then(data => {
+                            console.log("Backend conversation cleared successfully");
+                        })
+                        .catch(err => {
+                            console.warn("Backend clear API failed:", err);
+                            // No need to update UI again as we already did it above
+                        });
+                    }
+                    
+                    // Update settings with better error handling and offline mode support
+                    function updateSettings() {
+                        const threshold = document.querySelector('input[data-testid="threshold-slider"]').value;
+                        const maxSpeakers = document.querySelector('input[data-testid="speakers-slider"]').value;
+                        
+                        // 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
+                        checkHfConnection().then(isConnected => {
+                            if (isConnected) {
+                                return fetch(`${window.HF_SPACE_URL}/settings?threshold=${threshold}&max_speakers=${maxSpeakers}`, {
+                                    method: 'POST'
+                                });
+                            } else {
+                                throw new Error("Backend unavailable");
+                            }
+                        })
+                        .then(resp => resp.json())
+                        .then(data => {
+                            console.log("Backend settings updated successfully:", data);
+                        })
+                        .catch(err => {
+                            console.warn("Backend settings update failed:", err);
+                            // No need to update UI again as we already did it above
+                        });
+                    }
 
                     // Set up event listeners when the DOM is loaded
                     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');
+                            
+                            // Fallback to aria-label if IDs aren't found
+                            if (!startBtn) startBtn = document.querySelector('button[aria-label="Start Listening"]');
+                            if (!stopBtn) stopBtn = document.querySelector('button[aria-label="Stop"]');
+                            if (!clearBtn) clearBtn = document.querySelector('button[aria-label="Clear"]');
+                            if (!updateBtn) updateBtn = document.querySelector('button[aria-label="Update Settings"]');
+                            
+                            // Check if all buttons are found
+                            const buttonsFound = startBtn && stopBtn && clearBtn && updateBtn;
+                            
+                            if (buttonsFound) {
+                                console.log("All buttons found, binding events");
+                                
+                                // Bind event handlers
+                                startBtn.onclick = () => startStreaming();
+                                stopBtn.onclick = () => stopStreaming();
+                                clearBtn.onclick = () => clearConversation();
+                                updateBtn.onclick = () => 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');
+                                
+                                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 = 10;
+                            const retryInterval = 500; // 500ms 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);
+                        }
                     });
                     </script>
                     """,
                     label="Live Conversation"
                 )
                 
-                # Control buttons
+                # Control buttons with elem_id for reliable selection
                 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")
+                    start_btn = gr.Button("▶️ Start Listening", variant="primary", size="lg", elem_id="btn-start")
+                    stop_btn = gr.Button("⏹️ Stop", variant="stop", size="lg", elem_id="btn-stop")
+                    clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="lg", elem_id="btn-clear")
                 
-                # Status display
+                # Status display with elem_id for reliable selection
                 status_output = gr.Markdown(
                     """
                     ## System Status
-                    Waiting to connect...
+                    "Waiting to connect...\n\n*Click Start Listening to begin*"
                     
                     *Click Start Listening to begin*
                     """,
-                    label="Status Information"
+                    label="Status Information",
+                    elem_id="status-output"
                 )
             
             with gr.Column(scale=1):
@@ -386,7 +554,8 @@ def build_ui():
                     step=0.05,
                     value=DEFAULT_CHANGE_THRESHOLD,
                     label="Speaker Change Sensitivity",
-                    info="Lower = more sensitive (more speaker changes)"
+                    info="Lower = more sensitive (more speaker changes)",
+                    elem_id="threshold-slider"
                 )
                 
                 max_speakers_slider = gr.Slider(
@@ -394,10 +563,11 @@ def build_ui():
                     maximum=ABSOLUTE_MAX_SPEAKERS,
                     step=1,
                     value=DEFAULT_MAX_SPEAKERS,
-                    label="Maximum Speakers"
+                    label="Maximum Speakers",
+                    elem_id="speakers-slider"
                 )
                 
-                update_btn = gr.Button("Update Settings", variant="secondary")
+                update_btn = gr.Button("Update Settings", variant="secondary", elem_id="btn-update")
                 
                 # Instructions
                 gr.Markdown("""
@@ -418,63 +588,8 @@ def build_ui():
                 - 🟠 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"]');
-                    
-                    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>
-        """)
+        # JavaScript to connect buttons to the script functions is now embedded directly in the conversation_display
+        # We removed the separate gr.HTML for button bindings since it's now handled with more robust code
         
         # Set up periodic status updates
         def get_status():
@@ -487,9 +602,6 @@ def build_ui():
                 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