File size: 1,658 Bytes
834d8bd
 
9f50d19
834d8bd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2aeecdb
834d8bd
 
 
 
7cde845
834d8bd
 
 
 
 
 
 
9f50d19
834d8bd
 
 
9f50d19
834d8bd
 
9f50d19
834d8bd
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import streamlit as st
import streamlit.components.v1 as components

# HTML and JavaScript for Speech Recognition using webkitSpeechRecognition
speech_recognition_html = """
<html>
  <body>
    <button onclick="startRecognition()">Start Speech Recognition</button>
    <p id="output">Speak something...</p>
    
    <script>
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = false;  // Stops after speech input
      recognition.interimResults = true;
      
      recognition.onresult = function(event) {
        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}, '*');
      };

      recognition.onerror = function(event) {
        console.error("Speech recognition error", event.error);
        document.getElementById('output').textContent = "Error in recognition";
      };

      function startRecognition() {
        recognition.start();
      }
    </script>
  </body>
</html>
"""

# Streamlit UI
st.title("Speech-to-Text Demo")
st.write("Click the button below and start speaking. The recognized text will be shown here:")

# Display the HTML with the embedded speech recognition
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
st.write("Recognized Text:")
transcript = st.text_area("Transcript:", "", height=150)