Hugging Face's logo

Spaces:
awacke1
/
RescuerOfStolenBikes
Running

App Files Community
3
awacke1 commited on
Commit
65a0e2e
•
1 Parent(s): c0bb5a2

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +46 -31
app.py CHANGED
@@ -55,9 +55,8 @@ st.set_page_config(
55
 
56
 
57
 
58
-
59
  def create_speech_component():
60
- """Create a custom speech recognition component with bidirectional communication."""
61
 
62
  speech_recognition_html = """
63
  <!DOCTYPE html>
@@ -65,7 +64,36 @@ def create_speech_component():
65
  <head>
66
  <title>Continuous Speech Demo</title>
67
  <style>
68
- /* Your existing styles here */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </style>
70
  </head>
71
  <body>
@@ -78,14 +106,6 @@ def create_speech_component():
78
  <div id="output"></div>
79
 
80
  <script>
81
- // Function to send data back to Streamlit
82
- function sendToStreamlit(data) {
83
- window.parent.postMessage({
84
- type: 'streamlit:setComponentValue',
85
- value: data
86
- }, '*');
87
- }
88
-
89
  if (!('webkitSpeechRecognition' in window)) {
90
  alert('Speech recognition not supported');
91
  } else {
@@ -97,7 +117,6 @@ def create_speech_component():
97
  const output = document.getElementById('output');
98
  let fullTranscript = '';
99
 
100
- // Configure recognition
101
  recognition.continuous = true;
102
  recognition.interimResults = true;
103
 
@@ -113,14 +132,17 @@ def create_speech_component():
113
  status.textContent = 'Stopped';
114
  startButton.disabled = false;
115
  stopButton.disabled = true;
116
- // Send final transcript to Streamlit
117
- sendToStreamlit(fullTranscript);
118
  };
119
 
120
  clearButton.onclick = () => {
121
  fullTranscript = '';
122
  output.textContent = '';
123
- sendToStreamlit('');
 
 
 
 
 
124
  };
125
 
126
  recognition.onresult = (event) => {
@@ -132,8 +154,6 @@ def create_speech_component():
132
  if (event.results[i].isFinal) {
133
  finalTranscript += transcript + '\\n';
134
  fullTranscript += transcript + '\\n';
135
- // Send update to Streamlit
136
- sendToStreamlit(fullTranscript);
137
  } else {
138
  interimTranscript += transcript;
139
  }
@@ -141,6 +161,13 @@ def create_speech_component():
141
 
142
  output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
143
  output.scrollTop = output.scrollHeight;
 
 
 
 
 
 
 
144
  };
145
 
146
  recognition.onend = () => {
@@ -161,14 +188,8 @@ def create_speech_component():
161
  </html>
162
  """
163
 
164
- # Create the component with a key
165
- component_value = components.html(
166
- speech_recognition_html,
167
- height=400,
168
- key="speech_recognition"
169
- )
170
-
171
- return component_value
172
 
173
  def integrate_speech_component():
174
  """Integrate the speech component into the main app."""
@@ -178,13 +199,7 @@ def integrate_speech_component():
178
  # Get the transcript from the component
179
  transcript = create_speech_component()
180
 
181
- # Update session state if there's new data
182
- if transcript is not None and transcript != "":
183
- st.session_state.voice_transcript = transcript
184
-
185
  return st.session_state.voice_transcript
186
-
187
-
188
 
189
 
190
 
 
55
 
56
 
57
 
 
58
  def create_speech_component():
59
+ """Create a speech recognition component compatible with basic Streamlit HTML."""
60
 
61
  speech_recognition_html = """
62
  <!DOCTYPE html>
 
64
  <head>
65
  <title>Continuous Speech Demo</title>
66
  <style>
67
+ body {
68
+ font-family: sans-serif;
69
+ padding: 20px;
70
+ max-width: 800px;
71
+ margin: 0 auto;
72
+ }
73
+ button {
74
+ padding: 10px 20px;
75
+ margin: 10px 5px;
76
+ font-size: 16px;
77
+ }
78
+ #status {
79
+ margin: 10px 0;
80
+ padding: 10px;
81
+ background: #e8f5e9;
82
+ border-radius: 4px;
83
+ }
84
+ #output {
85
+ white-space: pre-wrap;
86
+ padding: 15px;
87
+ background: #f5f5f5;
88
+ border-radius: 4px;
89
+ margin: 10px 0;
90
+ min-height: 100px;
91
+ max-height: 400px;
92
+ overflow-y: auto;
93
+ }
94
+ .controls {
95
+ margin: 10px 0;
96
+ }
97
  </style>
98
  </head>
99
  <body>
 
106
  <div id="output"></div>
107
 
108
  <script>
 
 
 
 
 
 
 
 
109
  if (!('webkitSpeechRecognition' in window)) {
110
  alert('Speech recognition not supported');
111
  } else {
 
117
  const output = document.getElementById('output');
118
  let fullTranscript = '';
119
 
 
120
  recognition.continuous = true;
121
  recognition.interimResults = true;
122
 
 
132
  status.textContent = 'Stopped';
133
  startButton.disabled = false;
134
  stopButton.disabled = true;
 
 
135
  };
136
 
137
  clearButton.onclick = () => {
138
  fullTranscript = '';
139
  output.textContent = '';
140
+ if (window.parent.document) {
141
+ const event = new CustomEvent('transcript-update', {
142
+ detail: { transcript: '' }
143
+ });
144
+ window.parent.document.dispatchEvent(event);
145
+ }
146
  };
147
 
148
  recognition.onresult = (event) => {
 
154
  if (event.results[i].isFinal) {
155
  finalTranscript += transcript + '\\n';
156
  fullTranscript += transcript + '\\n';
 
 
157
  } else {
158
  interimTranscript += transcript;
159
  }
 
161
 
162
  output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
163
  output.scrollTop = output.scrollHeight;
164
+
165
+ // Update hidden input with the current transcript
166
+ const hiddenInput = document.createElement('input');
167
+ hiddenInput.type = 'hidden';
168
+ hiddenInput.value = fullTranscript;
169
+ hiddenInput.id = 'transcript-value';
170
+ document.body.appendChild(hiddenInput);
171
  };
172
 
173
  recognition.onend = () => {
 
188
  </html>
189
  """
190
 
191
+ # Create the component without a key
192
+ return components.html(speech_recognition_html, height=400)
 
 
 
 
 
 
193
 
194
  def integrate_speech_component():
195
  """Integrate the speech component into the main app."""
 
199
  # Get the transcript from the component
200
  transcript = create_speech_component()
201
 
 
 
 
 
202
  return st.session_state.voice_transcript
 
 
203
 
204
 
205