awacke1 commited on
Commit
59c35d2
·
verified ·
1 Parent(s): 916759b

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +45 -30
app.py CHANGED
@@ -15,7 +15,6 @@ html = """
15
  <html>
16
  <head>
17
  <title>Continuous Speech Demo</title>
18
- <script src="https://streamlit.io/releases/latest/streamlit.js"></script>
19
  <style>
20
  body {
21
  font-family: sans-serif;
@@ -58,11 +57,11 @@ html = """
58
  </div>
59
  <div id="status">Ready</div>
60
  <div id="output"></div>
 
 
 
61
 
62
  <script>
63
- // Initialize Streamlit
64
- const streamlit = new Streamlit.SharedObject();
65
-
66
  if (!('webkitSpeechRecognition' in window)) {
67
  alert('Speech recognition not supported');
68
  } else {
@@ -72,9 +71,18 @@ html = """
72
  const clearButton = document.getElementById('clear');
73
  const status = document.getElementById('status');
74
  const output = document.getElementById('output');
 
 
75
  let fullTranscript = '';
76
  let lastUpdateTime = Date.now();
77
 
 
 
 
 
 
 
 
78
  // Configure recognition
79
  recognition.continuous = true;
80
  recognition.interimResults = true;
@@ -101,7 +109,7 @@ html = """
101
  clearButton.onclick = () => {
102
  fullTranscript = '';
103
  output.textContent = '';
104
- Streamlit.setComponentValue("");
105
  };
106
 
107
  recognition.onresult = (event) => {
@@ -122,8 +130,7 @@ html = """
122
  if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
123
  if (finalTranscript) {
124
  fullTranscript += finalTranscript;
125
- // Send to Streamlit
126
- Streamlit.setComponentValue(finalTranscript);
127
  }
128
  lastUpdateTime = Date.now();
129
  }
@@ -158,10 +165,17 @@ html = """
158
  stopButton.disabled = true;
159
  }
160
  };
161
- }
162
 
163
- // Initialize the component
164
- Streamlit.setComponentReady();
 
 
 
 
 
 
 
 
165
  </script>
166
  </body>
167
  </html>
@@ -181,25 +195,22 @@ def save_transcript(text):
181
  # Main app
182
  st.title("Speech Recognition with Transcript History")
183
 
184
- # Create custom component with key
185
- component_value = st.components.v1.html(
186
- html,
187
- height=600,
188
- key="speech_recognition"
189
- )
190
-
191
- # Handle component value
192
- if component_value != "":
193
- # Update the transcript history
194
- new_text = str(component_value)
195
- st.session_state.transcript_history += new_text
196
-
197
- # Save to file
198
- save_transcript(new_text)
199
-
200
- # Update the display
201
- history_container.markdown(st.session_state.transcript_history)
202
- text_area.text_area("Full Transcript", st.session_state.transcript_history, height=200)
203
 
204
  # Add a download button for the full transcript
205
  if st.session_state.transcript_history:
@@ -208,4 +219,8 @@ if st.session_state.transcript_history:
208
  data=st.session_state.transcript_history,
209
  file_name=f"transcript_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}.md",
210
  mime="text/markdown"
211
- )
 
 
 
 
 
15
  <html>
16
  <head>
17
  <title>Continuous Speech Demo</title>
 
18
  <style>
19
  body {
20
  font-family: sans-serif;
 
57
  </div>
58
  <div id="status">Ready</div>
59
  <div id="output"></div>
60
+ <form id="transcriptForm" style="display:none;">
61
+ <input type="hidden" id="transcriptData" name="transcript" value="">
62
+ </form>
63
 
64
  <script>
 
 
 
65
  if (!('webkitSpeechRecognition' in window)) {
66
  alert('Speech recognition not supported');
67
  } else {
 
71
  const clearButton = document.getElementById('clear');
72
  const status = document.getElementById('status');
73
  const output = document.getElementById('output');
74
+ const transcriptForm = document.getElementById('transcriptForm');
75
+ const transcriptData = document.getElementById('transcriptData');
76
  let fullTranscript = '';
77
  let lastUpdateTime = Date.now();
78
 
79
+ // Function to update Streamlit
80
+ function updateStreamlit(text) {
81
+ transcriptData.value = text;
82
+ const event = new Event('submit');
83
+ transcriptForm.dispatchEvent(event);
84
+ }
85
+
86
  // Configure recognition
87
  recognition.continuous = true;
88
  recognition.interimResults = true;
 
109
  clearButton.onclick = () => {
110
  fullTranscript = '';
111
  output.textContent = '';
112
+ updateStreamlit('');
113
  };
114
 
115
  recognition.onresult = (event) => {
 
130
  if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
131
  if (finalTranscript) {
132
  fullTranscript += finalTranscript;
133
+ updateStreamlit(finalTranscript);
 
134
  }
135
  lastUpdateTime = Date.now();
136
  }
 
165
  stopButton.disabled = true;
166
  }
167
  };
 
168
 
169
+ // Handle form submission
170
+ transcriptForm.onsubmit = (e) => {
171
+ e.preventDefault();
172
+ const formData = new FormData(transcriptForm);
173
+ fetch('', {
174
+ method: 'POST',
175
+ body: formData
176
+ });
177
+ };
178
+ }
179
  </script>
180
  </body>
181
  </html>
 
195
  # Main app
196
  st.title("Speech Recognition with Transcript History")
197
 
198
+ # Create custom component
199
+ st.components.v1.html(html, height=600)
200
+
201
+ # Handle form data
202
+ if st.session_state.get('form_submitted', False):
203
+ transcript = st.session_state.get('transcript', '')
204
+ if transcript:
205
+ # Update the transcript history
206
+ st.session_state.transcript_history += transcript + '\n'
207
+
208
+ # Save to file
209
+ save_transcript(transcript)
210
+
211
+ # Update the display
212
+ history_container.markdown(st.session_state.transcript_history)
213
+ text_area.text_area("Full Transcript", st.session_state.transcript_history, height=200)
 
 
 
214
 
215
  # Add a download button for the full transcript
216
  if st.session_state.transcript_history:
 
219
  data=st.session_state.transcript_history,
220
  file_name=f"transcript_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}.md",
221
  mime="text/markdown"
222
+ )
223
+
224
+ # Reset form_submitted state
225
+ if 'form_submitted' in st.session_state:
226
+ st.session_state.form_submitted = False