Update app.py

app.py

@@ -17,7 +17,7 @@ speech_recognition_html = """
         var transcript = event.results[event.resultIndex][0].transcript;
         document.getElementById('output').textContent = transcript;
         // Send transcript back to Streamlit using postMessage
-        window.parent.postMessage({func: 'update_output', transcript: transcript}, '*');
+        window.parent.postMessage(JSON.stringify({func: 'update_output', transcript: transcript}), '*');
       };
 
       recognition.onerror = function(event) {
@@ -45,4 +45,8 @@ output = st.empty()
 
 # The Streamlit component listens for the postMessage event and updates the output
 st.write("Recognized Text:")
+
+# In Streamlit, we capture the transcript message sent via postMessage
 transcript = st.text_area("Transcript:", "", height=150)
+
+# You can handle the `postMessage` event by using the `streamlit.components.v1` methods for client-server interaction.