Update src/streamlit_app.py

src/streamlit_app.py

@@ -41,26 +41,6 @@ def load_context():
         st.error("Context file not found!")
         return ""
 
-def record_audio():
-    """Record audio and return the buffer."""
-    progress_bar = st.progress(0)
-    recording = sd.rec(int(RECORD_DURATION * SAMPLE_RATE), 
-                      samplerate=SAMPLE_RATE, 
-                      channels=1)
-    
-    # Update progress bar while recording
-    for i in range(RECORD_DURATION * 10):
-        progress_bar.progress((i + 1) / (RECORD_DURATION * 10))
-        time.sleep(0.1)
-    
-    sd.wait()
-    progress_bar.empty()  # Remove progress bar after recording
-    
-    buf = io.BytesIO()
-    scipy.io.wavfile.write(buf, SAMPLE_RATE, recording)
-    buf.seek(0)
-    return buf
-
 def transcribe_audio(audio_buffer):
     """Transcribe audio using Whisper API."""
     with open(TEMP_AUDIO_FILE, "wb") as f:
@@ -112,6 +92,12 @@ def handle_record_button():
     info_placeholder.empty()
     st.session_state.recorded_audio = audio_buffer
 
+def handle_recorded_audio(audio_bytes):
+    """Handle the recorded audio data from browser"""
+    audio_buffer = io.BytesIO(base64.b64decode(audio_bytes))
+    st.session_state.recorded_audio = audio_buffer
+    st.session_state.processing = True
+
 def main():
     st.title("Voice Bot")
     
@@ -126,7 +112,13 @@ def main():
 
         with audio:
             st.subheader("Audio Input")
-            st.button("🎙️ Record Voice", on_click=handle_record_button)
+            # Replace button with HTML/JS audio recorder
+            st.components.v1.html(get_audio_recorder_html(), height=100)
+            
+            # Handle audio data from JavaScript
+            if st.session_state.get('browser_audio'):
+                handle_recorded_audio(st.session_state.browser_audio)
+                st.session_state.browser_audio = None
             
             # Create placeholder for processing status
             process_placeholder = st.empty()
@@ -161,5 +153,65 @@ def main():
         st.text_area("Context", value=st.session_state.context, height=270, disabled=False)
         st.markdown("You can update the context in the `context.txt` file.")
 
+# Add JavaScript for audio recording
+def get_audio_recorder_html():
+    return """
+        <script>
+        const audioRecorder = {
+            start: async function() {
+                this.mediaRecorder = null;
+                this.audioChunks = [];
+                
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                this.mediaRecorder = new MediaRecorder(stream);
+                
+                this.mediaRecorder.ondataavailable = (e) => {
+                    if (e.data.size > 0) this.audioChunks.push(e.data);
+                };
+                
+                this.mediaRecorder.onstop = () => {
+                    const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
+                    const reader = new FileReader();
+                    reader.readAsDataURL(audioBlob);
+                    reader.onloadend = () => {
+                        const base64Audio = reader.result.split(',')[1];
+                        window.parent.postMessage({type: 'AUDIO_DATA', data: base64Audio}, '*');
+                    };
+                };
+                
+                this.mediaRecorder.start();
+            },
+            
+            stop: function() {
+                if (this.mediaRecorder) {
+                    this.mediaRecorder.stop();
+                    this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+                }
+            }
+        };
+
+        const startButton = document.getElementById('recordButton');
+        startButton.addEventListener('mousedown', () => audioRecorder.start());
+        startButton.addEventListener('mouseup', () => audioRecorder.stop());
+        </script>
+        <button id="recordButton" style="padding: 20px 40px; font-size: 16px;">🎙️ Hold to Record</button>
+    """
+
+# Add JavaScript message handler
+js = """
+<script>
+window.addEventListener('message', function(e) {
+    if (e.data.type === 'AUDIO_DATA') {
+        window.parent.streamlit.setComponentValue({
+            'browser_audio': e.data.data
+        });
+    }
+}, false);
+</script>
+"""
+
+st.components.v1.html(js, height=0)
+
 if __name__ == "__main__":
     main()
+