Update app.py

app.py

@@ -9,10 +9,14 @@ speech_recognition_html = """
     <p id="output">Speak something...</p>
     
     <script>
+      // Check if the browser supports speech recognition
+      if (!('webkitSpeechRecognition' in window)) {
+        document.getElementById('output').textContent = "Speech recognition not supported in this browser.";
+      }
+      
       var recognition = new webkitSpeechRecognition();
       recognition.continuous = false;  // Stops after speech input
       recognition.interimResults = true;
-      recognition.lang = "en-US";  // Set the language for recognition
 
       recognition.onresult = function(event) {
         var transcript = event.results[event.resultIndex][0].transcript;
@@ -27,12 +31,7 @@ speech_recognition_html = """
       };
 
       function startRecognition() {
-        try {
-          recognition.start();
-        } catch (error) {
-          console.error("Error starting recognition:", error);
-          document.getElementById('output').textContent = "Error starting recognition";
-        }
+        recognition.start();
       }
     </script>
   </body>
@@ -49,8 +48,19 @@ components.html(speech_recognition_html, height=200)
 # Output area where the recognized speech will be displayed
 output = st.empty()
 
-# The Streamlit component listens for the postMessage event and updates the output
+# This is where the recognized text will be shown on the Streamlit side
 st.write("Recognized Text:")
 transcript = st.text_area("Transcript:", "", height=150)
 
-# JavaScript is sending postMessage with 'update_output' func, you need to listen for this in the frontend
+# Listen for postMessage events from the iframe to update the text area
+components.html("""
+<script>
+  window.addEventListener('message', function(event) {
+    if (event.data.func === 'update_output') {
+      document.getElementById('output').textContent = event.data.transcript;
+      // Update the Streamlit text area with the transcript
+      window.parent.postMessage({func: 'update_text_area', text: event.data.transcript}, '*');
+    }
+  });
+</script>
+""", height=0)