Hugging Face's logo

Spaces:
awacke1
/
InstantASRforYouNow
Running

App Files Community
awacke1 commited on
Commit
d5df8c3
·
verified ·
1 Parent(s): 47b8b9f

Create index.htm

Browse files
Files changed (1) hide show
  1. index.htm +148 -0
index.htm ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <h1>Continuous Speech Recognition</h1>
40
+ <div class="controls">
41
+ <button id="start">Start Listening</button>
42
+ <button id="stop" disabled>Stop Listening</button>
43
+ <button id="clear">Clear Text</button>
44
+ </div>
45
+ <div id="status">Ready</div>
46
+ <div id="output"></div>
47
+
48
+ <script>
49
+ if (!('webkitSpeechRecognition' in window)) {
50
+ alert('Speech recognition not supported');
51
+ } else {
52
+ const recognition = new webkitSpeechRecognition();
53
+ const startButton = document.getElementById('start');
54
+ const stopButton = document.getElementById('stop');
55
+ const clearButton = document.getElementById('clear');
56
+ const status = document.getElementById('status');
57
+ const output = document.getElementById('output');
58
+ let fullTranscript = '';
59
+ let lastUpdateTime = Date.now();
60
+
61
+ // Configure recognition
62
+ recognition.continuous = true;
63
+ recognition.interimResults = true;
64
+
65
+ startButton.onclick = () => {
66
+ try {
67
+ recognition.start();
68
+ status.textContent = 'Listening...';
69
+ startButton.disabled = true;
70
+ stopButton.disabled = false;
71
+ } catch (e) {
72
+ console.error(e);
73
+ status.textContent = 'Error: ' + e.message;
74
+ }
75
+ };
76
+
77
+ stopButton.onclick = () => {
78
+ recognition.stop();
79
+ status.textContent = 'Stopped';
80
+ startButton.disabled = false;
81
+ stopButton.disabled = true;
82
+ };
83
+
84
+ clearButton.onclick = () => {
85
+ fullTranscript = '';
86
+ output.textContent = '';
87
+ };
88
+
89
+ recognition.onresult = (event) => {
90
+ let interimTranscript = '';
91
+ let finalTranscript = '';
92
+
93
+ // Process results
94
+ for (let i = event.resultIndex; i < event.results.length; i++) {
95
+ const transcript = event.results[i][0].transcript;
96
+ if (event.results[i].isFinal) {
97
+ finalTranscript += transcript + '\n';
98
+ } else {
99
+ interimTranscript += transcript;
100
+ }
101
+ }
102
+
103
+ // Update if we have final results or it's been 5 seconds
104
+ if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
105
+ if (finalTranscript) {
106
+ fullTranscript += finalTranscript;
107
+ } else if (interimTranscript) {
108
+ fullTranscript += interimTranscript + '\n';
109
+ }
110
+ lastUpdateTime = Date.now();
111
+ }
112
+
113
+ // Display results
114
+ output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
115
+
116
+ // Auto-scroll to bottom
117
+ output.scrollTop = output.scrollHeight;
118
+ };
119
+
120
+ recognition.onend = () => {
121
+ // Automatically restart if not manually stopped
122
+ if (!stopButton.disabled) {
123
+ try {
124
+ recognition.start();
125
+ console.log('Restarted recognition');
126
+ } catch (e) {
127
+ console.error('Failed to restart recognition:', e);
128
+ status.textContent = 'Error restarting: ' + e.message;
129
+ startButton.disabled = false;
130
+ stopButton.disabled = true;
131
+ }
132
+ }
133
+ };
134
+
135
+ recognition.onerror = (event) => {
136
+ console.error('Recognition error:', event.error);
137
+ status.textContent = 'Error: ' + event.error;
138
+
139
+ // Only reset buttons if it's a fatal error
140
+ if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
141
+ startButton.disabled = false;
142
+ stopButton.disabled = true;
143
+ }
144
+ };
145
+ }
146
+ </script>
147
+ </body>
148
+ </html>