Hugging Face's logo

Spaces:
awacke1
/
InstantASRforYouNow
Running

App Files Community
awacke1 commited on
Commit
2b113b3
·
verified ·
1 Parent(s): 0145c6e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +42 -4
index.html CHANGED
@@ -4,7 +4,6 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>ASR Client</title>
7
- <script src="https://cdnjs.cloudflare.com/ajax/libs/transformers/1.4.1/transformers.min.js"></script>
8
  <style>
9
  body {
10
  font-family: system-ui, -apple-system, sans-serif;
@@ -53,37 +52,68 @@
53
  .status-error {
54
  background: #f8d7da;
55
  }
 
 
 
 
56
  </style>
57
  </head>
58
  <body>
59
  <div class="container">
60
  <h1>Speech Recognition Client</h1>
61
  <div id="status">Loading model...</div>
 
62
  <button id="startButton" disabled>Start Recording</button>
63
  <div id="transcription"></div>
64
  </div>
65
 
66
  <script type="module">
67
- import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.15.0/+esm';
68
 
69
  let isRecording = false;
70
  let model = null;
71
  const startButton = document.getElementById('startButton');
72
  const statusDiv = document.getElementById('status');
 
73
  const transcriptionDiv = document.getElementById('transcription');
74
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  // Initialize the model
76
  async function initializeModel() {
77
  try {
78
  statusDiv.textContent = 'Loading model...';
79
  statusDiv.className = 'status-loading';
80
 
81
- model = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
 
 
 
82
 
83
  statusDiv.textContent = 'Model ready! Click Start Recording to begin.';
84
  statusDiv.className = 'status-ready';
 
85
  startButton.disabled = false;
 
 
86
  } catch (error) {
 
87
  statusDiv.textContent = 'Error loading model: ' + error.message;
88
  statusDiv.className = 'status-error';
89
  }
@@ -118,6 +148,7 @@
118
 
119
  await processor.readable.pipeTo(transformer.writable);
120
  } catch (error) {
 
121
  statusDiv.textContent = 'Error accessing microphone: ' + error.message;
122
  statusDiv.className = 'status-error';
123
  isRecording = false;
@@ -133,7 +164,14 @@
133
 
134
  // Initialize the app
135
  startButton.addEventListener('click', toggleRecording);
136
- initializeModel();
 
 
 
 
 
 
 
137
  </script>
138
  </body>
139
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>ASR Client</title>
 
7
  <style>
8
  body {
9
  font-family: system-ui, -apple-system, sans-serif;
 
52
  .status-error {
53
  background: #f8d7da;
54
  }
55
+ #progress {
56
+ width: 100%;
57
+ margin-top: 10px;
58
+ }
59
  </style>
60
  </head>
61
  <body>
62
  <div class="container">
63
  <h1>Speech Recognition Client</h1>
64
  <div id="status">Loading model...</div>
65
+ <div id="progress"></div>
66
  <button id="startButton" disabled>Start Recording</button>
67
  <div id="transcription"></div>
68
  </div>
69
 
70
  <script type="module">
71
+ import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.9.0/+esm';
72
 
73
  let isRecording = false;
74
  let model = null;
75
  const startButton = document.getElementById('startButton');
76
  const statusDiv = document.getElementById('status');
77
+ const progressDiv = document.getElementById('progress');
78
  const transcriptionDiv = document.getElementById('transcription');
79
 
80
+ // Set environment variables for better progress tracking
81
+ env.allowLocalModels = false;
82
+ env.backends.onnx.wasm.numThreads = 1;
83
+
84
+ class MyProgressCallback {
85
+ constructor() {
86
+ this.progress = 0;
87
+ }
88
+
89
+ onDownloadProgress(progress) {
90
+ progressDiv.textContent = `Downloading: ${(progress * 100).toFixed(2)}%`;
91
+ }
92
+
93
+ onProgress(progress) {
94
+ progressDiv.textContent = `Loading: ${(progress * 100).toFixed(2)}%`;
95
+ }
96
+ }
97
+
98
  // Initialize the model
99
  async function initializeModel() {
100
  try {
101
  statusDiv.textContent = 'Loading model...';
102
  statusDiv.className = 'status-loading';
103
 
104
+ // Initialize model with progress callback
105
+ model = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny', {
106
+ progress_callback: new MyProgressCallback(),
107
+ });
108
 
109
  statusDiv.textContent = 'Model ready! Click Start Recording to begin.';
110
  statusDiv.className = 'status-ready';
111
+ progressDiv.textContent = '';
112
  startButton.disabled = false;
113
+
114
+ console.log('Model loaded successfully');
115
  } catch (error) {
116
+ console.error('Model loading error:', error);
117
  statusDiv.textContent = 'Error loading model: ' + error.message;
118
  statusDiv.className = 'status-error';
119
  }
 
148
 
149
  await processor.readable.pipeTo(transformer.writable);
150
  } catch (error) {
151
+ console.error('Recording error:', error);
152
  statusDiv.textContent = 'Error accessing microphone: ' + error.message;
153
  statusDiv.className = 'status-error';
154
  isRecording = false;
 
164
 
165
  // Initialize the app
166
  startButton.addEventListener('click', toggleRecording);
167
+ window.addEventListener('load', initializeModel);
168
+
169
+ // Add error logging
170
+ window.addEventListener('error', function(e) {
171
+ console.error('Global error:', e.error);
172
+ statusDiv.textContent = 'An error occurred: ' + e.error.message;
173
+ statusDiv.className = 'status-error';
174
+ });
175
  </script>
176
  </body>
177
  </html>