Hugging Face's logo

Spaces:
awacke1
/
RescuerOfStolenBikes
Running

App Files Community
3
awacke1 commited on
Commit
aa83e40
•
1 Parent(s): cfbd1da

Update mycomponent/index.html

Browse files
Files changed (1) hide show
  1. mycomponent/index.html +163 -2
mycomponent/index.html CHANGED
@@ -1,9 +1,163 @@
 
1
  <html>
2
- <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <!-- Set up your HTML here -->
4
  <input id="myinput" value="" />
5
 
 
 
 
 
 
 
 
 
 
 
 
6
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  // ----------------------------------------------------
8
  // Just copy/paste these functions as-is:
9
 
@@ -61,6 +215,13 @@
61
  // Optionally, if the automatic height computation fails you, give this component a height manually
62
  // by commenting out below:
63
  //setFrameHeight(200);
 
 
 
 
 
64
  </script>
65
  </body>
66
- </html>
 
 
 
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
+ .controls {
34
+ margin: 10px 0;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
  <!-- Set up your HTML here -->
40
  <input id="myinput" value="" />
41
 
42
+ <div class="controls">
43
+ <button id="start">Start Listening</button>
44
+ <button id="stop" disabled>Stop Listening</button>
45
+ <button id="clear">Clear Text</button>
46
+ </div>
47
+ <div id="status">Ready</div>
48
+ <div id="output"></div>
49
+
50
+ <!-- Add the hidden input here -->
51
+ <input type="hidden" id="streamlit-data" value="">
52
+
53
  <script>
54
+ if (!('webkitSpeechRecognition' in window)) {
55
+ alert('Speech recognition not supported');
56
+ } else {
57
+ const recognition = new webkitSpeechRecognition();
58
+ const startButton = document.getElementById('start');
59
+ const stopButton = document.getElementById('stop');
60
+ const clearButton = document.getElementById('clear');
61
+ const status = document.getElementById('status');
62
+ const output = document.getElementById('output');
63
+ let fullTranscript = '';
64
+ let lastUpdateTime = Date.now();
65
+
66
+ // Configure recognition
67
+ recognition.continuous = true;
68
+ recognition.interimResults = true;
69
+
70
+ // Function to start recognition
71
+ const startRecognition = () => {
72
+ try {
73
+ recognition.start();
74
+ status.textContent = 'Listening...';
75
+ startButton.disabled = true;
76
+ stopButton.disabled = false;
77
+ } catch (e) {
78
+ console.error(e);
79
+ status.textContent = 'Error: ' + e.message;
80
+ }
81
+ };
82
+
83
+ // Auto-start on load
84
+ window.addEventListener('load', () => {
85
+ setTimeout(startRecognition, 1000);
86
+ });
87
+
88
+ startButton.onclick = startRecognition;
89
+
90
+ stopButton.onclick = () => {
91
+ recognition.stop();
92
+ status.textContent = 'Stopped';
93
+ startButton.disabled = false;
94
+ stopButton.disabled = true;
95
+ };
96
+
97
+ clearButton.onclick = () => {
98
+ fullTranscript = '';
99
+ output.textContent = '';
100
+ window.parent.postMessage({
101
+ type: 'clear_transcript',
102
+ }, '*');
103
+ };
104
+
105
+ recognition.onresult = (event) => {
106
+ let interimTranscript = '';
107
+ let finalTranscript = '';
108
+
109
+ for (let i = event.resultIndex; i < event.results.length; i++) {
110
+ const transcript = event.results[i][0].transcript;
111
+ if (event.results[i].isFinal) {
112
+ finalTranscript += transcript + '\\n';
113
+ } else {
114
+ interimTranscript += transcript;
115
+ }
116
+ }
117
+
118
+ if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
119
+ if (finalTranscript) {
120
+ fullTranscript += finalTranscript;
121
+
122
+ // Update the hidden input value
123
+ document.getElementById('streamlit-data').value = fullTranscript;
124
+ }
125
+ lastUpdateTime = Date.now();
126
+ }
127
+
128
+ output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
129
+ output.scrollTop = output.scrollHeight;
130
+
131
+ document.getElementById('streamlit-data').value = fullTranscript;
132
+
133
+ };
134
+
135
+ recognition.onend = () => {
136
+ if (!stopButton.disabled) {
137
+ try {
138
+ recognition.start();
139
+ console.log('Restarted recognition');
140
+ } catch (e) {
141
+ console.error('Failed to restart recognition:', e);
142
+ status.textContent = 'Error restarting: ' + e.message;
143
+ startButton.disabled = false;
144
+ stopButton.disabled = true;
145
+ }
146
+ }
147
+ };
148
+
149
+ recognition.onerror = (event) => {
150
+ console.error('Recognition error:', event.error);
151
+ status.textContent = 'Error: ' + event.error;
152
+
153
+ if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
154
+ startButton.disabled = false;
155
+ stopButton.disabled = true;
156
+ }
157
+ };
158
+ }
159
+
160
+
161
  // ----------------------------------------------------
162
  // Just copy/paste these functions as-is:
163
 
 
215
  // Optionally, if the automatic height computation fails you, give this component a height manually
216
  // by commenting out below:
217
  //setFrameHeight(200);
218
+
219
+
220
+
221
+
222
+
223
  </script>
224
  </body>
225
+ </html>
226
+
227
+