Hugging Face's logo

Spaces:
awacke1
/
ColoradoMadLibs
Running

App Files Community
awacke1 commited on
Commit
e83786e
·
verified ·
1 Parent(s): 564d6f6

Update speech_component/index.html

Browse files
Files changed (1) hide show
  1. speech_component/index.html +40 -96
speech_component/index.html CHANGED
@@ -1,148 +1,92 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Continuous Speech Demo</title>
5
  <style>
6
- body {
7
- font-family: sans-serif;
8
- padding: 20px;
9
- max-width: 800px;
10
- margin: 0 auto;
11
  }
12
- button {
13
- padding: 10px 20px;
14
- margin: 10px 5px;
15
  font-size: 16px;
16
  }
17
- #status {
18
- margin: 10px 0;
19
- padding: 10px;
20
- background: #e8f5e9;
21
- border-radius: 4px;
22
- }
23
  #output {
24
- white-space: pre-wrap;
25
- padding: 15px;
26
  background: #f5f5f5;
27
- border-radius: 4px;
28
- margin: 10px 0;
29
  min-height: 100px;
30
- max-height: 400px;
31
- overflow-y: auto;
32
  }
33
  </style>
34
  </head>
35
  <body>
36
- <div class="controls">
37
- <button id="start">Start Listening</button>
38
- <button id="stop" disabled>Stop Listening</button>
39
- <button id="clear">Clear Text</button>
40
- </div>
41
- <div id="status">Ready</div>
42
- <div id="output"></div>
43
- <input type="hidden" id="streamlit-data" value="">
44
 
45
  <script>
 
 
 
 
 
 
 
 
 
46
  if (!('webkitSpeechRecognition' in window)) {
47
- alert('Speech recognition not supported');
48
  } else {
49
  const recognition = new webkitSpeechRecognition();
 
 
 
 
50
  const startButton = document.getElementById('start');
51
  const stopButton = document.getElementById('stop');
52
  const clearButton = document.getElementById('clear');
53
- const status = document.getElementById('status');
54
  const output = document.getElementById('output');
55
- let fullTranscript = '';
56
 
57
- recognition.continuous = true;
58
- recognition.interimResults = true;
59
-
60
- const startRecognition = () => {
61
  recognition.start();
62
- status.textContent = 'Listening...';
63
  startButton.disabled = true;
64
  stopButton.disabled = false;
 
65
  };
66
 
67
- window.addEventListener('load', () => setTimeout(startRecognition, 1000));
68
-
69
- startButton.onclick = startRecognition;
70
-
71
  stopButton.onclick = () => {
72
  recognition.stop();
73
- status.textContent = 'Stopped';
74
  startButton.disabled = false;
75
  stopButton.disabled = true;
 
76
  };
77
 
78
  clearButton.onclick = () => {
79
- fullTranscript = '';
80
- output.textContent = '';
81
  sendDataToPython({ value: '', dataType: "json" });
82
  };
83
 
84
  recognition.onresult = (event) => {
85
- let interimTranscript = '';
86
- let finalTranscript = '';
87
-
88
- for (let i = event.resultIndex; i < event.results.length; i++) {
89
- const transcript = event.results[i][0].transcript;
90
  if (event.results[i].isFinal) {
91
- finalTranscript += transcript + '\n';
92
- } else {
93
- interimTranscript += transcript;
94
  }
95
  }
96
-
97
- if (finalTranscript) {
98
- fullTranscript += finalTranscript;
99
- output.textContent = fullTranscript;
100
- output.scrollTop = output.scrollHeight;
101
- document.getElementById('streamlit-data').value = fullTranscript;
102
- sendDataToPython({ value: fullTranscript, dataType: "json" });
103
- } else {
104
- output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
105
- }
106
- };
107
-
108
- recognition.onend = () => {
109
- if (!stopButton.disabled) {
110
- recognition.start();
111
- }
112
  };
113
 
114
  recognition.onerror = (event) => {
115
- console.error('Recognition error:', event.error);
116
- status.textContent = 'Error: ' + event.error;
117
  startButton.disabled = false;
118
  stopButton.disabled = true;
119
  };
120
-
121
- function sendMessageToStreamlitClient(type, data) {
122
- var outData = Object.assign({ isStreamlitMessage: true, type: type }, data);
123
- window.parent.postMessage(outData, "*");
124
- }
125
-
126
- function init() {
127
- sendMessageToStreamlitClient("streamlit:componentReady", { apiVersion: 1 });
128
- }
129
-
130
- function setFrameHeight(height) {
131
- sendMessageToStreamlitClient("streamlit:setFrameHeight", { height: height });
132
- }
133
-
134
- function sendDataToPython(data) {
135
- sendMessageToStreamlitClient("streamlit:setComponentValue", data);
136
- }
137
-
138
- window.addEventListener("load", function() {
139
- window.setTimeout(function() {
140
- setFrameHeight(document.documentElement.clientHeight);
141
- }, 0);
142
- });
143
-
144
- init();
145
  }
146
  </script>
147
  </body>
148
- </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Continuous Speech Recognition</title>
5
  <style>
6
+ body {
7
+ font-family: sans-serif;
8
+ padding: 10px;
9
+ background: #ffffff;
 
10
  }
11
+ button {
12
+ padding: 10px 20px;
13
+ margin: 5px;
14
  font-size: 16px;
15
  }
 
 
 
 
 
 
16
  #output {
 
 
17
  background: #f5f5f5;
18
+ padding: 15px;
19
+ border-radius: 5px;
20
  min-height: 100px;
 
 
21
  }
22
  </style>
23
  </head>
24
  <body>
25
+ <button id="start">🎤 Start Listening</button>
26
+ <button id="stop" disabled>🛑 Stop Listening</button>
27
+ <button id="clear">🧹 Clear Text</button>
28
+ <div id="output">Click "Start Listening" to begin.</div>
 
 
 
 
29
 
30
  <script>
31
+ function sendMessageToStreamlitClient(type, data) {
32
+ const outData = { isStreamlitMessage: true, type: type, ...data };
33
+ window.parent.postMessage(outData, "*");
34
+ }
35
+
36
+ function sendDataToPython(data) {
37
+ sendMessageToStreamlitClient("streamlit:setComponentValue", data);
38
+ }
39
+
40
  if (!('webkitSpeechRecognition' in window)) {
41
+ document.getElementById('output').textContent = '🚨 Speech recognition not supported.';
42
  } else {
43
  const recognition = new webkitSpeechRecognition();
44
+ recognition.continuous = true;
45
+ recognition.interimResults = false;
46
+ recognition.lang = 'en-US';
47
+
48
  const startButton = document.getElementById('start');
49
  const stopButton = document.getElementById('stop');
50
  const clearButton = document.getElementById('clear');
 
51
  const output = document.getElementById('output');
52
+ let transcript = '';
53
 
54
+ startButton.onclick = () => {
 
 
 
55
  recognition.start();
 
56
  startButton.disabled = true;
57
  stopButton.disabled = false;
58
+ output.textContent = '🎙️ Listening...';
59
  };
60
 
 
 
 
 
61
  stopButton.onclick = () => {
62
  recognition.stop();
 
63
  startButton.disabled = false;
64
  stopButton.disabled = true;
65
+ output.textContent = '🛑 Stopped listening.';
66
  };
67
 
68
  clearButton.onclick = () => {
69
+ transcript = '';
70
+ output.textContent = 'Transcript cleared.';
71
  sendDataToPython({ value: '', dataType: "json" });
72
  };
73
 
74
  recognition.onresult = (event) => {
75
+ for (let i = event.resultIndex; i < event.results.length; ++i) {
 
 
 
 
76
  if (event.results[i].isFinal) {
77
+ transcript += event.results[i][0].transcript + ' ';
 
 
78
  }
79
  }
80
+ output.textContent = transcript.trim();
81
+ sendDataToPython({ value: transcript.trim(), dataType: "json" });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  };
83
 
84
  recognition.onerror = (event) => {
85
+ output.textContent = `⚠️ Error: ${event.error}`;
 
86
  startButton.disabled = false;
87
  stopButton.disabled = true;
88
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  }
90
  </script>
91
  </body>
92
+ </html>