Update app.py

app.py

@@ -619,7 +619,10 @@ speech_recognition_html = """
     </div>
     <div id="status">Ready</div>
     <div id="output"></div>
-
+    
+    <!-- Add the hidden input here -->
+    <input type="hidden" id="streamlit-data" value="">
+    
     <script>
         if (!('webkitSpeechRecognition' in window)) {
             alert('Speech recognition not supported');
@@ -688,18 +691,18 @@ speech_recognition_html = """
                 if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
                     if (finalTranscript) {
                         fullTranscript += finalTranscript;
-                        // Send to Streamlit
-                        window.parent.postMessage({
-                            type: 'final_transcript',
-                            text: finalTranscript
-                        }, '*');
+                        
+                        // Update the hidden input value
+                        document.getElementById('streamlit-data').value = fullTranscript;
                     }
                     lastUpdateTime = Date.now();
-                }
-                                
+                }            
 
                 output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
                 output.scrollTop = output.scrollHeight;
+
+                document.getElementById('streamlit-data').value = fullTranscript;
+
             };
 
             recognition.onend = () => {
@@ -864,7 +867,6 @@ def set_transcript(text):
     
 def main():
     st.sidebar.markdown("### 🚲BikeAI🏆 Claude and GPT Multi-Agent Research AI")
-    
     # Main navigation
     tab_main = st.radio("Choose Action:", 
                         ["🎤 Voice Input", "💬 Chat", "📸 Media Gallery", "🔍 Search ArXiv", "📝 File Editor"],
@@ -873,38 +875,31 @@ def main():
     if tab_main == "🎤 Voice Input":
         st.subheader("Voice Recognition")
         
-        # Display speech recognition component
-        speech_component = st.components.v1.html(speech_recognition_html, height=400)
-        #Experiment:   Use `st.session_state` to store the transcript
+        # Initialize session state for the transcript
         if 'voice_transcript' not in st.session_state:
             st.session_state.voice_transcript = ""
-
-        # JavaScript and Streamlit integration to capture transcript
-        st.components.v1.html("""
-        <script>
-            window.addEventListener('message', (event) => {
-                if (event.data.type === 'final_transcript') {
-                    const transcript = event.data.text;
-                    // Update Streamlit session state with the transcript
-                    Streamlit.setComponentValue(transcript);
-                }
-            });
-        </script>
-        """, height=0)
+        
+        # Display speech recognition component and capture returned value
+        transcript = st.components.v1.html(speech_recognition_html, height=400)
+        
+        # Update session state if there's new data
+        if transcript is not None:
+            st.session_state.voice_transcript = transcript
+        
         # Display the transcript in a Streamlit text area
         st.markdown("### Processed Voice Input:")
         st.text_area("Voice Transcript", st.session_state.voice_transcript, height=100)
-    
+        
         # Add functionality to process the transcript
         if st.button("Process Transcript"):
             st.subheader("AI Response to Transcript")
             gpt_response = process_with_gpt(st.session_state.voice_transcript)
             st.markdown(gpt_response)
-    
+        
         # Option to clear the transcript
         if st.button("Clear Transcript"):
             st.session_state.voice_transcript = ""
-
+            st.rerun()
 
         #st.markdown("### Processed Voice Input:")
         #st.text_area("Voice Transcript", st.session_state.voice_transcript, height=100)