Hugging Face's logo

Spaces:
awacke1
/
InstantASRforYouNow
Running

App Files Community
awacke1 commited on
Commit
9dc594c
·
verified ·
1 Parent(s): 2da09a8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +70 -45
index.html CHANGED
@@ -24,11 +24,21 @@
24
  border: 1px solid #ccc;
25
  min-height: 100px;
26
  }
 
 
 
 
 
 
 
 
 
 
27
  </style>
28
  </head>
29
  <body>
30
  <h1>Simple Speech Recognition</h1>
31
- <div id="status">Loading model...</div>
32
  <button id="startBtn" disabled>Start Recording</button>
33
  <div id="output"></div>
34
 
@@ -44,57 +54,72 @@
44
  const output = document.getElementById('output');
45
 
46
  // Initialize the model
47
- let model;
48
- try {
49
- model = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
50
- statusElement.textContent = 'Model loaded! Ready to record.';
51
- startBtn.disabled = false;
52
- } catch (e) {
53
- statusElement.textContent = 'Error loading model: ' + e.message;
54
- console.error(e);
55
- }
 
 
 
56
 
57
- startBtn.onclick = async () => {
58
- if (!isRecording) {
59
- // Start recording
60
- try {
61
- const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
62
- mediaRecorder = new MediaRecorder(stream);
63
- audioChunks = [];
64
 
65
- mediaRecorder.ondataavailable = (event) => {
66
- audioChunks.push(event.data);
67
- };
68
 
69
- mediaRecorder.onstop = async () => {
70
- const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
71
- try {
72
- const result = await model(audioBlob);
73
- output.textContent += result.text + ' ';
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  } catch (e) {
75
- console.error('Transcription error:', e);
76
- statusElement.textContent = 'Error during transcription';
 
77
  }
78
- audioChunks = [];
79
- };
 
 
 
 
 
 
 
80
 
81
- mediaRecorder.start(1000);
82
- isRecording = true;
83
- startBtn.textContent = 'Stop Recording';
84
- statusElement.textContent = 'Recording...';
85
- } catch (e) {
86
- console.error('Recording error:', e);
87
- statusElement.textContent = 'Error accessing microphone';
88
- }
89
- } else {
90
- // Stop recording
91
- mediaRecorder.stop();
92
- mediaRecorder.stream.getTracks().forEach(track => track.stop());
93
- isRecording = false;
94
- startBtn.textContent = 'Start Recording';
95
- statusElement.textContent = 'Processing...';
96
  }
97
- };
 
 
 
98
  </script>
99
  </body>
100
  </html>
 
24
  border: 1px solid #ccc;
25
  min-height: 100px;
26
  }
27
+ .ready {
28
+ color: green;
29
+ font-weight: bold;
30
+ }
31
+ .loading {
32
+ color: orange;
33
+ }
34
+ .error {
35
+ color: red;
36
+ }
37
  </style>
38
  </head>
39
  <body>
40
  <h1>Simple Speech Recognition</h1>
41
+ <div id="status" class="loading">Loading model...</div>
42
  <button id="startBtn" disabled>Start Recording</button>
43
  <div id="output"></div>
44
 
 
54
  const output = document.getElementById('output');
55
 
56
  // Initialize the model
57
+ async function initModel() {
58
+ try {
59
+ console.log('Starting model loading...');
60
+ statusElement.textContent = 'Loading model...';
61
+ statusElement.className = 'loading';
62
+
63
+ const model = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
64
+
65
+ console.log('Model loaded successfully!');
66
+ statusElement.textContent = 'MODEL LOADED SUCCESSFULLY! Ready to record.';
67
+ statusElement.className = 'ready';
68
+ startBtn.disabled = false;
69
 
70
+ startBtn.onclick = async () => {
71
+ if (!isRecording) {
72
+ try {
73
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
74
+ mediaRecorder = new MediaRecorder(stream);
75
+ audioChunks = [];
 
76
 
77
+ mediaRecorder.ondataavailable = (event) => {
78
+ audioChunks.push(event.data);
79
+ };
80
 
81
+ mediaRecorder.onstop = async () => {
82
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
83
+ try {
84
+ const result = await model(audioBlob);
85
+ output.textContent += result.text + ' ';
86
+ } catch (e) {
87
+ console.error('Transcription error:', e);
88
+ statusElement.textContent = 'Error during transcription';
89
+ statusElement.className = 'error';
90
+ }
91
+ audioChunks = [];
92
+ };
93
+
94
+ mediaRecorder.start(1000);
95
+ isRecording = true;
96
+ startBtn.textContent = 'Stop Recording';
97
+ statusElement.textContent = 'Recording...';
98
+ statusElement.className = 'loading';
99
  } catch (e) {
100
+ console.error('Recording error:', e);
101
+ statusElement.textContent = 'Error accessing microphone';
102
+ statusElement.className = 'error';
103
  }
104
+ } else {
105
+ mediaRecorder.stop();
106
+ mediaRecorder.stream.getTracks().forEach(track => track.stop());
107
+ isRecording = false;
108
+ startBtn.textContent = 'Start Recording';
109
+ statusElement.textContent = 'Processing...';
110
+ statusElement.className = 'loading';
111
+ }
112
+ };
113
 
114
+ } catch (e) {
115
+ console.error('Model loading error:', e);
116
+ statusElement.textContent = 'Error loading model: ' + e.message;
117
+ statusElement.className = 'error';
 
 
 
 
 
 
 
 
 
 
 
118
  }
119
+ }
120
+
121
+ // Start loading the model
122
+ initModel();
123
  </script>
124
  </body>
125
  </html>