Update app.py

app.py

@@ -54,8 +54,9 @@ st.set_page_config(
 )
 
 
+
 def create_speech_component():
-    """Create speech recognition component with JavaScript function to get transcript."""
+    """Create speech recognition component using postMessage for communication."""
     
     speech_recognition_html = """
     <div style="padding: 20px;">
@@ -66,15 +67,24 @@ def create_speech_component():
         </div>
         <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>
+        <div id="debug" style="margin-top: 10px; color: #666;"></div>
         
         <script>
             let currentTranscript = '';
+            const debug = document.getElementById('debug');
             
-            // Function that Streamlit can call to get current transcript
-            function getCurrentTranscript() {
-                return currentTranscript;
+            function sendTranscriptUpdate() {
+                // Send transcript to parent (Streamlit)
+                window.parent.postMessage({
+                    type: 'transcript_update',
+                    data: currentTranscript
+                }, '*');
+                debug.textContent = `Last update: ${new Date().toLocaleTimeString()} - Length: ${currentTranscript.length}`;
             }
             
+            // Set up periodic updates
+            setInterval(sendTranscriptUpdate, 3000);  // Send update every 3 seconds
+            
             const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
             const startButton = document.getElementById('start');
             const stopButton = document.getElementById('stop');
@@ -97,11 +107,13 @@ def create_speech_component():
                 status.textContent = 'Stopped';
                 startButton.disabled = false;
                 stopButton.disabled = true;
+                sendTranscriptUpdate();  // Send final update when stopped
             };
             
             clearButton.onclick = () => {
                 currentTranscript = '';
                 output.textContent = '';
+                sendTranscriptUpdate();  // Send empty transcript
             };
             
             recognition.onresult = (event) => {
@@ -120,6 +132,10 @@ def create_speech_component():
                 
                 output.textContent = currentTranscript + (interimTranscript ? '... ' + interimTranscript : '');
                 output.scrollTop = output.scrollHeight;
+                
+                if (finalTranscript) {
+                    sendTranscriptUpdate();  // Send update when we have final transcript
+                }
             };
             
             recognition.onend = () => {
@@ -136,71 +152,41 @@ def create_speech_component():
     </div>
     """
     
-    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
-
-
-
-
-
-
+    # Return both the component value
+    return components.html(
+        speech_recognition_html,
+        height=400,
+    )
 
 def integrate_speech_component():
-    """Integrate speech component with debug output."""
+    """Integrate speech component with session state management."""
     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()
     
-    # Add debug toggle
-    show_debug = st.checkbox("Show Debug Info")
-        
-    # Create the speech component
-    create_speech_component()
-    
-    # Create placeholder for transcript display
+    # Create placeholders for display
     transcript_container = st.empty()
-    debug_container = st.empty()
+    status_container = st.empty()
     
-    # Check for updates every 10 seconds
-    current_time = time.time()
-    if current_time - st.session_state.last_update >= 10:
-        new_transcript = get_transcript()
-        if show_debug:
-            debug_container.write(f"Debug: Checking for updates... Got: {new_transcript}")
-        
-        if new_transcript and new_transcript != st.session_state.voice_transcript:
-            if show_debug:
-                st.write("Debug: Updating transcript")
-                st.write(f"Old: {st.session_state.voice_transcript}")
-                st.write(f"New: {new_transcript}")
-            
-            st.session_state.voice_transcript = new_transcript
-            st.session_state.last_update = current_time
+    # Create component
+    component_val = create_speech_component()
     
     # Display current transcript
+    current_transcript = st.session_state.voice_transcript
     transcript_container.text_area(
         "Voice Transcript:", 
-        value=st.session_state.voice_transcript,
+        value=current_transcript,
         height=100,
-        key=f"transcript_display_{int(current_time)}"  # Force refresh
+        key=f"transcript_display_{int(time.time())}"
     )
     
-    if show_debug:
-        st.write("Session State:", st.session_state)
-        
-    return st.session_state.voice_transcript
-
-
+    # Show status
+    status_container.text(
+        f"Last updated: {datetime.fromtimestamp(st.session_state.last_update).strftime('%H:%M:%S')}"
+    )
+    
+    return current_transcript