Update app.py

app.py

@@ -54,9 +54,8 @@ st.set_page_config(
 )
 
 
-
 def create_speech_component():
-    """Create speech recognition component with direct value monitoring."""
+    """Create speech recognition component with JavaScript function to get transcript."""
     
     speech_recognition_html = """
     <div style="padding: 20px;">
@@ -68,31 +67,24 @@ def create_speech_component():
         <div id="status" style="margin: 10px 0; padding: 10px; background: #e8f5e9;">Ready</div>
         <div id="output" style="white-space: pre-wrap; padding: 15px; background: #f5f5f5; min-height: 100px; max-height: 400px; overflow-y: auto;"></div>
         
-        <!-- Hidden input for Streamlit communication -->
-        <input type="hidden" id="transcript_value" name="transcript_value" value="">
-        
         <script>
+            let currentTranscript = '';
+            
+            // Function that Streamlit can call to get current transcript
+            function getCurrentTranscript() {
+                return currentTranscript;
+            }
+            
             const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
             const startButton = document.getElementById('start');
             const stopButton = document.getElementById('stop');
             const clearButton = document.getElementById('clear');
             const status = document.getElementById('status');
             const output = document.getElementById('output');
-            const transcriptInput = document.getElementById('transcript_value');
-            let fullTranscript = '';
             
-            // Set up recognition
             recognition.continuous = true;
             recognition.interimResults = true;
             
-            // Function to update transcript value
-            function updateTranscript(text) {
-                transcriptInput.value = text;
-                // Trigger a change event
-                const event = new Event('change', { bubbles: true });
-                transcriptInput.dispatchEvent(event);
-            }
-            
             startButton.onclick = () => {
                 recognition.start();
                 status.textContent = '🎤 Listening...';
@@ -105,13 +97,11 @@ def create_speech_component():
                 status.textContent = 'Stopped';
                 startButton.disabled = false;
                 stopButton.disabled = true;
-                updateTranscript(fullTranscript);
             };
             
             clearButton.onclick = () => {
-                fullTranscript = '';
+                currentTranscript = '';
                 output.textContent = '';
-                updateTranscript('');
             };
             
             recognition.onresult = (event) => {
@@ -122,14 +112,13 @@ def create_speech_component():
                     const transcript = event.results[i][0].transcript;
                     if (event.results[i].isFinal) {
                         finalTranscript += transcript + ' ';
-                        fullTranscript += transcript + ' ';
-                        updateTranscript(fullTranscript);
+                        currentTranscript += transcript + ' ';
                     } else {
                         interimTranscript += transcript;
                     }
                 }
                 
-                output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
+                output.textContent = currentTranscript + (interimTranscript ? '... ' + interimTranscript : '');
                 output.scrollTop = output.scrollHeight;
             };
             
@@ -139,7 +128,7 @@ def create_speech_component():
                 }
             };
             
-            // Auto-start 
+            // Auto-start on load
             window.addEventListener('load', () => {
                 setTimeout(() => startButton.click(), 1000);
             });
@@ -149,27 +138,43 @@ def create_speech_component():
     
     return components.html(speech_recognition_html, height=400)
 
+def get_transcript():
+    """Get current transcript from JavaScript."""
+    # Evaluate JavaScript to get current transcript
+    js_code = "getCurrentTranscript()"
+    try:
+        return components.eval_js(js_code)
+    except Exception as e:
+        st.error(f"Error getting transcript: {str(e)}")
+        return None
+
 def integrate_speech_component():
-    """Integrate speech component with session state."""
+    """Integrate speech component with timer-based polling."""
     if "voice_transcript" not in st.session_state:
         st.session_state.voice_transcript = ""
+    if "last_update" not in st.session_state:
+        st.session_state.last_update = time.time()
         
-    # Create a container for the transcript
+    # Create the speech component
+    create_speech_component()
+    
+    # Create placeholder for transcript display
     transcript_container = st.empty()
-        
-    # Create the component and get value from hidden input
-    component = create_speech_component()
     
-    # Get current transcript value
-    if component is not None:
-        st.session_state.voice_transcript = component
-        # Update display
-        transcript_container.text_area(
-            "Voice Transcript:", 
-            value=st.session_state.voice_transcript,
-            height=100,
-            key="transcript_display"
-        )
+    # Check for updates every 10 seconds
+    if time.time() - st.session_state.last_update >= 10:
+        new_transcript = get_transcript()
+        if new_transcript and new_transcript != st.session_state.voice_transcript:
+            st.session_state.voice_transcript = new_transcript
+            st.session_state.last_update = time.time()
+    
+    # Display current transcript
+    transcript_container.text_area(
+        "Voice Transcript:", 
+        value=st.session_state.voice_transcript,
+        height=100,
+        key="transcript_display"
+    )
     
     return st.session_state.voice_transcript
 
@@ -988,7 +993,6 @@ def get_media_html(media_path, media_type="video", width="100%"):
 def set_transcript(text):
     """Set transcript in session state."""
     st.session_state.voice_transcript = text
-
 def main():
     st.sidebar.markdown("### 🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI")
     
@@ -999,18 +1003,14 @@ def main():
     if tab_main == "🎤 Voice Input":
         st.subheader("Voice Recognition")
         
-        # Debug toggle
-        show_debug = st.checkbox("Show Debug Info")
-        
         try:
-            # Get transcript
+            # Initialize speech component
             current_transcript = integrate_speech_component()
             
-            if show_debug:
-                st.write("Session State:", st.session_state)
-                st.write("Current Transcript:", current_transcript)
+            # Show last update time
+            st.text(f"Last updated: {datetime.fromtimestamp(st.session_state.last_update).strftime('%H:%M:%S')}")
             
-            # Process buttons
+            # Process buttons if we have a transcript
             if current_transcript:
                 col1, col2, col3 = st.columns(3)
                 
@@ -1034,8 +1034,6 @@ def main():
         
         except Exception as e:
             st.error(f"Error in voice input: {str(e)}")
-            if show_debug:
-                st.exception(e)
             
 
     # Always show file manager in sidebar