Update app.py

app.py

@@ -1245,11 +1245,49 @@ KEYBOARD_JS = """
 APP_JS = """
 () => {
     // ==========================================
-    // 1. BI-DIRECTIONAL AUDIO (Talk & Listen)
+    // 1. BI-DIRECTIONAL AUDIO WITH MIC SELECTION
     // ==========================================
+    
+    // Global handles to manage hot-swapping
+    window.currentStream = null;
+    window.wsHandle = null;
+
+    // --- Helper: Populate Mic List ---
+    window.refreshMicList = async function() {
+        const select = document.getElementById('mic-select');
+        try {
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const audioInputs = devices.filter(device => device.kind === 'audioinput');
+            
+            const currentVal = select.value;
+            select.innerHTML = ''; // Clear existing
+            
+            // Add Default option
+            const defaultOpt = document.createElement('option');
+            defaultOpt.value = "";
+            defaultOpt.text = "Default Microphone";
+            select.appendChild(defaultOpt);
+
+            audioInputs.forEach(device => {
+                const option = document.createElement('option');
+                option.value = device.deviceId;
+                // If label is empty, permission isn't granted yet
+                option.text = device.label || `Microphone ${device.deviceId.slice(0,5)}...`; 
+                select.appendChild(option);
+            });
+            
+            // Restore selection if it still exists
+            if (currentVal) select.value = currentVal;
+            
+        } catch (e) {
+            console.error("Error listing devices", e);
+        }
+    };
+
     window.startAudioPlayer = async function() {
         const btn = document.getElementById('start-stream-btn');
         const status = document.getElementById('audio-status');
+        const micSelect = document.getElementById('mic-select');
         
         console.log("[Audio] Starting Bi-Directional Stream...");
         
@@ -1266,24 +1304,38 @@ APP_JS = """
             btn.disabled = true;
 
             // --- B. Get Microphone (Input) ---
-            const stream = await navigator.mediaDevices.getUserMedia({ 
+            // Check dropdown for specific device ID
+            const selectedMicId = micSelect.value;
+            const constraints = { 
                 audio: { 
+                    deviceId: selectedMicId ? { exact: selectedMicId } : undefined,
                     channelCount: 1, 
                     sampleRate: 16000,
                     echoCancellation: true,
                     noiseSuppression: true,
                     autoGainControl: true
                 } 
-            });
+            };
+
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            window.currentStream = stream; // Save global ref
+
+            // **Refresh list now that we have permission (to show labels)**
+            await window.refreshMicList();
+            if (selectedMicId) micSelect.value = selectedMicId;
 
             status.innerText = "Status: Connecting WS...";
             
             // --- C. Setup WebSocket ---
-            // Determine correct protocol (ws:// or wss://)
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const wsUrl = `${protocol}//${window.location.host}/browser_stream`;
-            const ws = new WebSocket(wsUrl);
-            ws.binaryType = 'arraybuffer';
+            // If we are restarting, reuse WS if open, or create new
+            let ws = window.wsHandle;
+            if (!ws || ws.readyState !== WebSocket.OPEN) {
+                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+                const wsUrl = `${protocol}//${window.location.host}/browser_stream`;
+                ws = new WebSocket(wsUrl);
+                ws.binaryType = 'arraybuffer';
+                window.wsHandle = ws;
+            }
 
             // --- D. Setup Input Processor (Mic -> WS) ---
             const source = ctx.createMediaStreamSource(stream);
@@ -1302,66 +1354,79 @@ APP_JS = """
                     int16Buffer[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
                 }
                 
-                // Send to Server
                 ws.send(int16Buffer.buffer);
             };
 
             source.connect(processor);
-            processor.connect(ctx.destination); // Essential to keep the processor running
+            processor.connect(ctx.destination);
 
             // --- E. Setup Output (WS -> Speaker) ---
-            let nextTime = 0;
-            
-            ws.onopen = () => {
-                console.log("[Audio] WebSocket Open");
-                status.innerText = "Status: 🟢 Connected (Talk & Listen)";
+            // Only attach listener if it's a new WS connection
+            if (!ws.onmessage) {
+                let nextTime = 0;
+                
+                ws.onopen = () => {
+                    console.log("[Audio] WebSocket Open");
+                    status.innerText = "Status: 🟢 Connected";
+                    btn.innerText = "Microphone Active";
+                };
+
+                ws.onmessage = (event) => {
+                    const int16Data = new Int16Array(event.data);
+                    const floatBuffer = ctx.createBuffer(1, int16Data.length, 16000);
+                    const channelData = floatBuffer.getChannelData(0);
+                    
+                    for (let i = 0; i < int16Data.length; i++) {
+                        // Apply 5x gain
+                        channelData[i] = (int16Data[i] / 32768.0) * 5.0; 
+                    }
+
+                    const src = ctx.createBufferSource();
+                    src.buffer = floatBuffer;
+                    src.connect(ctx.destination);
+                    
+                    const now = ctx.currentTime;
+                    if (nextTime < now) nextTime = now;
+                    src.start(nextTime);
+                    nextTime += floatBuffer.duration;
+                };
+
+                ws.onerror = (e) => {
+                    console.error("WS Error", e);
+                    status.innerText = "Status: WebSocket Error";
+                    btn.disabled = false;
+                };
+                
+                ws.onclose = () => {
+                    status.innerText = "Status: Disconnected";
+                    btn.disabled = false;
+                    btn.innerText = "▶️ Reconnect";
+                    if (window.currentStream) {
+                        window.currentStream.getTracks().forEach(track => track.stop());
+                    }
+                    processor.disconnect();
+                    source.disconnect();
+                };
+            } else {
+                // If WS was already open, just update UI
+                status.innerText = "Status: 🟢 Connected (Mic Switched)";
                 btn.innerText = "Microphone Active";
-            };
+            }
 
-            ws.onmessage = (event) => {
-                // We received Raw Int16 PCM from Robot
-                const int16Data = new Int16Array(event.data);
-                const floatBuffer = ctx.createBuffer(1, int16Data.length, 16000);
-                const channelData = floatBuffer.getChannelData(0);
+            // Handle Mic Switching
+            micSelect.onchange = async () => {
+                console.log("Switching microphone...");
+                status.innerText = "Status: Switching Mic...";
                 
-                let maxVol = 0;
-                for (let i = 0; i < int16Data.length; i++) {
-                    // Convert Int16 -> Float32
-                    const floatVal = int16Data[i] / 32768.0;
-                    channelData[i] = floatVal;
-                    if (Math.abs(floatVal) > maxVol) maxVol = Math.abs(floatVal);
+                // Stop current mic tracks
+                if (window.currentStream) {
+                    window.currentStream.getTracks().forEach(t => t.stop());
                 }
-
-                // Log silence occasionaly
-                if (Math.random() < 0.01) {
-                     console.log(`[Audio In] Vol: ${maxVol.toFixed(3)}`);
-                }
-
-                // Play it
-                const src = ctx.createBufferSource();
-                src.buffer = floatBuffer;
-                src.connect(ctx.destination);
-                
-                const now = ctx.currentTime;
-                if (nextTime < now) nextTime = now;
-                src.start(nextTime);
-                nextTime += floatBuffer.duration;
-            };
-
-            ws.onerror = (e) => {
-                console.error("WS Error", e);
-                status.innerText = "Status: WebSocket Error";
-                btn.disabled = false;
-            };
-            
-            ws.onclose = () => {
-                status.innerText = "Status: Disconnected";
-                btn.disabled = false;
-                btn.innerText = "▶️ Reconnect";
-                // Stop mic tracks
-                stream.getTracks().forEach(track => track.stop());
                 processor.disconnect();
                 source.disconnect();
+                
+                // Restart player (will pick up new value from dropdown)
+                await window.startAudioPlayer();
             };
 
         } catch (err) {
@@ -1370,9 +1435,13 @@ APP_JS = """
             btn.disabled = false;
         }
     };
+    
+    // Attempt to list mics on load (will likely have empty labels until permission)
+    setTimeout(window.refreshMicList, 1000);
+
 
     // ==========================================
-    // 2. KEYBOARD & GAUGE LOGIC (Keep existing)
+    // 2. KEYBOARD & GAUGE LOGIC (Unchanged)
     // ==========================================
     const keyMap = {'w':'w','s':'s','a':'a','d':'d','q':'q','e':'e','h':'h','j':'j','l':'l'};
     const btnMap = {'w':'btn-forward','s':'btn-back','a':'btn-left','d':'btn-right','q':'btn-tilt-up','e':'btn-tilt-down','h':'btn-center','j':'btn-body-left','l':'btn-body-right'};
@@ -1423,7 +1492,7 @@ APP_JS = """
         textarea.style.color = isConnected ? '#10b981' : '#ef4444';
     };
     setInterval(updateStatusStyle, 500);
-    console.log('🎮 Controls & Bi-Directional Audio Ready');
+    console.log('🎮 Controls & Mic Select Ready');
 }
 """
 
@@ -1491,13 +1560,38 @@ with gr.Blocks(
                         trigger=listen_btn.click,
                     )
                 else:
-                    # Pure HTML, logic is handled in APP_JS
+                    # HTML with Microphone Select Dropdown
                     audio_player_html = """
                     <div style="padding: 10px; background: rgba(0,0,0,0.2); border-radius: 8px;">
+                        
+                        <div style="margin-bottom: 8px; display: flex; gap: 8px;">
+                            <select id="mic-select" style="
+                                background: #1f1f2e; 
+                                color: #ccc; 
+                                border: 1px solid #3a3a4a; 
+                                padding: 6px; 
+                                border-radius: 4px; 
+                                flex-grow: 1;
+                                outline: none;">
+                                <option value="">Default Microphone</option>
+                            </select>
+                            
+                            <button onclick="window.refreshMicList()" style="
+                                background: #2a2a3a; 
+                                border: 1px solid #3a3a4a; 
+                                color: #aaa; 
+                                border-radius: 4px; 
+                                cursor: pointer; 
+                                padding: 0 8px;" title="Refresh Device List">
+                                🔄
+                            </button>
+                        </div>
+
                         <button id="start-stream-btn" onclick="window.startAudioPlayer()" 
                             style="background: #7c3aed; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; width: 100%;">
                             ▶️ Click to Start Audio Stream
                         </button>
+                        
                         <div id="audio-status" style="margin-top: 8px; font-size: 12px; color: #aaa;">Status: Stopped</div>
                     </div>
                     """
@@ -1607,7 +1701,7 @@ with gr.Blocks(
     gr.HTML(GAUGES_HTML)
 
     # Load keyboard handler
-    demo.load(None, None, None, js=APP_JS)
+    demo.load(None, None, None, js=KEYBOARD_JS if USE_AUDIO_WEBRTC else APP_JS)
 
 # -------------------------------------------------------------------
 # 10. Mount & run
@@ -1620,3 +1714,4 @@ if __name__ == "__main__":
     print("ℹ️ Point your Robot/Sim to: ws://<YOUR_PC_IP>:7860/robot")
     uvicorn.run(app, host="0.0.0.0", port=7860, proxy_headers=True, forwarded_allow_ips="*", log_level="warning")
 
+