Improve UI: Fix audio recording with better button detection and feedback

app.py

@@ -2,7 +2,10 @@ import asyncio
 import logging
 from fastapi import FastAPI, UploadFile, File
 from fastapi.responses import JSONResponse
+from fastapi.staticfiles import StaticFiles
 import gradio as gr
+import os
+import tempfile
 
 import server_wrapper
 
@@ -40,6 +43,7 @@ async def api_chunk(file: UploadFile = File(...)):
         out = await asyncio.get_event_loop().run_in_executor(None, server_wrapper.process_chunk_from_bytes, raw)
         return JSONResponse(out)
     except Exception as e:
+        logger.error(f"Error processing chunk: {e}")
         return JSONResponse({"status": "error", "message": str(e)}, status_code=500)
 
 
@@ -49,139 +53,226 @@ async def api_finish():
         out = await asyncio.get_event_loop().run_in_executor(None, server_wrapper.finish)
         return JSONResponse(out)
     except Exception as e:
+        logger.error(f"Error finishing: {e}")
         return JSONResponse({"status": "error", "message": str(e)}, status_code=500)
 
 
 def create_ui():
-    with gr.Blocks() as demo:
-        gr.Markdown("# Streaming ASR — SimulWhisper\nGraba tu voz y verás la transcripción incrementalmente.")
+    with gr.Blocks(title="Streaming ASR", theme=gr.themes.Soft()) as demo:
+        gr.Markdown("""
+        # 🎙️ Streaming ASR — SimulWhisper
+        
+        Graba tu voz y verás la transcripción en tiempo real.
+        
+        **Instrucciones:**
+        1. Haz clic en **"Start Recording"**
+        2. Habla en el micrófono
+        3. Haz clic en **"Stop Recording"** cuando termines
+        """)
+        
         with gr.Row():
-            start_btn = gr.Button("Start Recording")
-            stop_btn = gr.Button("Stop Recording")
-        transcript = gr.HTML("<div id='transcript' style='white-space:pre-wrap; border:1px solid #ddd; padding:10px; min-height:120px'></div>")
-        # include JS responsible for recording and sending chunks to /api/chunk
-        js = r"""
+            start_btn = gr.Button("🔴 Start Recording", size="lg", scale=1)
+            stop_btn = gr.Button("⏹️ Stop Recording", size="lg", scale=1)
+            reset_btn = gr.Button("🔄 Reset", size="lg", scale=1)
+        
+        transcript_output = gr.Textbox(
+            label="Transcription",
+            lines=5,
+            interactive=False,
+            placeholder="Transcription will appear here..."
+        )
+        
+        status_output = gr.Textbox(
+            label="Status",
+            lines=2,
+            interactive=False,
+            placeholder="Ready"
+        )
+        
+        # JavaScript para captura de audio
+        js_code = r"""
 <script>
-let mediaRecorder, audioCtx, source;
+let mediaRecorder, audioCtx, source, processor;
 let recording = false;
-let startBtn = null, stopBtn = null;
-function to16BitPCM(float32Array){
-  const l = float32Array.length;
-  const buffer = new ArrayBuffer(l*2);
-  const view = new DataView(buffer);
-  let offset=0;
-  for(let i=0;i<l;i++){
-    let s = Math.max(-1, Math.min(1, float32Array[i]));
-    view.setInt16(offset, s<0 ? s*0x8000 : s*0x7FFF, true);
-    offset += 2;
-  }
-  return buffer;
+let transcriptDiv = null;
+let statusDiv = null;
+
+function to16BitPCM(float32Array) {
+    const l = float32Array.length;
+    const buffer = new ArrayBuffer(l * 2);
+    const view = new DataView(buffer);
+    let offset = 0;
+    for (let i = 0; i < l; i++) {
+        let s = Math.max(-1, Math.min(1, float32Array[i]));
+        view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+        offset += 2;
+    }
+    return buffer;
 }
 
-function writeWAV(samples, sampleRate){
-  const buffer = new ArrayBuffer(44 + samples.byteLength);
-  const view = new DataView(buffer);
-  function writeString(view, offset, string){
-    for(let i=0;i<string.length;i++) view.setUint8(offset+i, string.charCodeAt(i));
-  }
-  writeString(view,0,'RIFF');
-  view.setUint32(4,36 + samples.byteLength, true);
-  writeString(view,8,'WAVE');
-  writeString(view,12,'fmt ');
-  view.setUint32(16,16,true);
-  view.setUint16(20,1,true);
-  view.setUint16(22,1,true);
-  view.setUint32(24,sampleRate,true);
-  view.setUint32(28,sampleRate*2,true);
-  view.setUint16(32,2,true);
-  view.setUint16(34,16,true);
-  writeString(view,36,'data');
-  view.setUint32(40,samples.byteLength,true);
-  // write samples
-  const bytes = new Uint8Array(buffer,44);
-  bytes.set(new Uint8Array(samples));
-  return buffer;
+function writeWAV(samples, sampleRate) {
+    const buffer = new ArrayBuffer(44 + samples.byteLength);
+    const view = new DataView(buffer);
+    function writeString(view, offset, string) {
+        for (let i = 0; i < string.length; i++) {
+            view.setUint8(offset + i, string.charCodeAt(i));
+        }
+    }
+    writeString(view, 0, 'RIFF');
+    view.setUint32(4, 36 + samples.byteLength, true);
+    writeString(view, 8, 'WAVE');
+    writeString(view, 12, 'fmt ');
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);
+    view.setUint16(22, 1, true);
+    view.setUint32(24, sampleRate, true);
+    view.setUint32(28, sampleRate * 2, true);
+    view.setUint16(32, 2, true);
+    view.setUint16(34, 16, true);
+    writeString(view, 36, 'data');
+    view.setUint32(40, samples.byteLength, true);
+    const bytes = new Uint8Array(buffer, 44);
+    bytes.set(new Uint8Array(samples));
+    return buffer;
 }
 
-async function sendChunk(float32Array, sampleRate){
-  // resample to 16000 if needed
-  if(sampleRate !== 16000){
-    // offline resampling using OfflineAudioContext
-    let offlineCtx = new OfflineAudioContext(1, Math.round(float32Array.length * 16000 / sampleRate), 16000);
-    let buffer = offlineCtx.createBuffer(1, float32Array.length, sampleRate);
-    buffer.copyToChannel(float32Array,0,0);
-    let src = offlineCtx.createBufferSource();
+async function resampleAudio(float32Array, fromSampleRate, toSampleRate) {
+    if (fromSampleRate === toSampleRate) {
+        return float32Array;
+    }
+    const offlineCtx = new OfflineAudioContext(1, Math.round(float32Array.length * toSampleRate / fromSampleRate), toSampleRate);
+    const buffer = offlineCtx.createBuffer(1, float32Array.length, fromSampleRate);
+    buffer.copyToChannel(float32Array, 0, 0);
+    const src = offlineCtx.createBufferSource();
     src.buffer = buffer;
     src.connect(offlineCtx.destination);
     src.start(0);
-    let rendered = await offlineCtx.startRendering();
-    float32Array = rendered.getChannelData(0);
-    sampleRate = 16000;
-  }
-  const pcm16 = to16BitPCM(float32Array);
-  const wav = writeWAV(pcm16, sampleRate);
-  const blob = new Blob([wav], {type:'audio/wav'});
-  const fd = new FormData();
-  fd.append('file', blob, 'chunk.wav');
-  try{
-    const resp = await fetch('/api/chunk', {method:'POST', body: fd});
-    if(!resp.ok) { console.error('Chunk upload failed', resp.status); return; }
-    const j = await resp.json();
-    if(j.text){
-      const div = document.getElementById('transcript');
-      div.innerText = j.text;
+    const rendered = await offlineCtx.startRendering();
+    return rendered.getChannelData(0);
+}
+
+async function sendChunk(float32Array, sampleRate) {
+    try {
+        let resampled = await resampleAudio(float32Array, sampleRate, 16000);
+        const pcm16 = to16BitPCM(resampled);
+        const wav = writeWAV(pcm16, 16000);
+        const blob = new Blob([wav], { type: 'audio/wav' });
+        const fd = new FormData();
+        fd.append('file', blob, 'chunk.wav');
+        
+        const resp = await fetch('/api/chunk', { method: 'POST', body: fd });
+        if (!resp.ok) {
+            console.error('Chunk upload failed:', resp.status);
+            return;
+        }
+        const j = await resp.json();
+        if (j.text && transcriptDiv) {
+            transcriptDiv.value = j.text;
+        }
+    } catch (e) {
+        console.error('Error sending chunk:', e);
     }
-  }catch(e){ console.error(e); }
 }
 
-async function initRecording(){
-  if(recording) return;
-  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-  const stream = await navigator.mediaDevices.getUserMedia({audio:true});
-  source = audioCtx.createMediaStreamSource(stream);
-  const processor = audioCtx.createScriptProcessor(4096, 1, 1);
-  source.connect(processor);
-  processor.connect(audioCtx.destination);
-  processor.onaudioprocess = function(e){
-    const ch = e.inputBuffer.getChannelData(0);
-    // copy to a new Float32Array because the buffer is reused
-    sendChunk(new Float32Array(ch), audioCtx.sampleRate);
-  }
-  recording = true;
+async function startRecording() {
+    try {
+        if (recording) return;
+        
+        recording = true;
+        if (statusDiv) statusDiv.value = "Recording... listening to audio";
+        
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: false, noiseSuppression: false } });
+        source = audioCtx.createMediaStreamSource(stream);
+        processor = audioCtx.createScriptProcessor(4096, 1, 1);
+        
+        let chunkBuffer = [];
+        let bufferLength = 0;
+        const bufferThreshold = 16000 * 1; // 1 second of audio at 16kHz
+        
+        processor.onaudioprocess = function(e) {
+            const ch = e.inputBuffer.getChannelData(0);
+            for (let i = 0; i < ch.length; i++) {
+                chunkBuffer.push(ch[i]);
+                bufferLength++;
+            }
+            // Send chunks of ~1 second
+            if (bufferLength >= bufferThreshold) {
+                const chunk = new Float32Array(chunkBuffer);
+                chunkBuffer = [];
+                bufferLength = 0;
+                sendChunk(chunk, audioCtx.sampleRate);
+            }
+        };
+        
+        source.connect(processor);
+        processor.connect(audioCtx.destination);
+    } catch (e) {
+        console.error('Error starting recording:', e);
+        recording = false;
+        if (statusDiv) statusDiv.value = "Error: " + e.message;
+    }
 }
 
-function stopRecording(){
-  if(!recording) return;
-  // notify server that stream finished
-  fetch('/api/finish', {method:'POST'}).then(()=>console.log('finished'));
-  if(source && source.mediaStream){
-    const tracks = source.mediaStream.getTracks();
-    tracks.forEach(t=>t.stop());
-  }
-  recording = false;
+function stopRecording() {
+    try {
+        if (!recording) return;
+        
+        recording = false;
+        if (statusDiv) statusDiv.value = "Stopping...";
+        
+        // Notify server
+        fetch('/api/finish', { method: 'POST' }).then(() => {
+            if (statusDiv) statusDiv.value = "Done";
+            console.log('Recording finished');
+        }).catch(e => console.error('Error finishing:', e));
+        
+        if (source && source.mediaStream) {
+            const tracks = source.mediaStream.getTracks();
+            tracks.forEach(t => t.stop());
+        }
+        if (processor) processor.disconnect();
+        if (source) source.disconnect();
+    } catch (e) {
+        console.error('Error stopping recording:', e);
+    }
 }
 
-document.addEventListener('DOMContentLoaded', ()=>{
-  // find the buttons rendered by Gradio
-  const btns = document.querySelectorAll('button');
-  // crude: take first two as start/stop
-  startBtn = btns[0]; stopBtn = btns[1];
-  startBtn.addEventListener('click', ()=>{ initRecording(); });
-  stopBtn.addEventListener('click', ()=>{ stopRecording(); });
+document.addEventListener('DOMContentLoaded', () => {
+    // Esperar a que Gradio cargue completamente
+    setTimeout(() => {
+        // Encontrar textboxes por label
+        const textboxes = document.querySelectorAll('textarea');
+        if (textboxes.length >= 2) {
+            transcriptDiv = textboxes[0];
+            statusDiv = textboxes[1];
+            console.log('UI elements found');
+        }
+        
+        // Encontrar botones
+        const buttons = document.querySelectorAll('button');
+        if (buttons.length >= 2) {
+            buttons[0].addEventListener('click', startRecording);
+            buttons[1].addEventListener('click', stopRecording);
+            console.log('Button listeners attached');
+        }
+    }, 500);
 });
 </script>
 """
-
-        gr.HTML(js)
-
+        
+        gr.HTML(js_code)
+    
     return demo
 
 
 demo = create_ui()
 
-# Mount Gradio app on FastAPI root
+# Mount Gradio app on FastAPI
 app = gr.mount_gradio_app(app, demo, path="/")
 
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)
+