Hugging Face's logo

Spaces:
atlury
/
digitalhuman
Running

App Files Community
atlury commited on
Commit
055955e
·
verified ·
1 Parent(s): 1ad72f4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +46 -3
index.html CHANGED
@@ -72,15 +72,42 @@
72
  display: inline-block;
73
  margin-right: 1px;
74
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  </style>
76
  </head>
77
  <body>
 
 
 
78
  <h1>Voice Chat Bot</h1>
79
  <div id="chat-container">
80
  <div id="conversation"></div>
81
  <div id="visualizer"></div>
82
  <div id="controls">
83
- <button id="startButton">Start Listening</button>
84
  <button id="stopButton" disabled>Stop Listening</button>
85
  </div>
86
  </div>
@@ -94,6 +121,7 @@
94
  const startButton = document.getElementById('startButton');
95
  const stopButton = document.getElementById('stopButton');
96
  const visualizer = document.getElementById('visualizer');
 
97
 
98
  let myvad;
99
  let sttPipeline;
@@ -102,6 +130,7 @@
102
  let analyser;
103
  let dataArray;
104
  let bars;
 
105
 
106
  function createVisualizer() {
107
  const barCount = 64;
@@ -119,7 +148,7 @@
119
  const barHeight = dataArray[i] / 2;
120
  bars[i].style.height = barHeight + 'px';
121
  }
122
- requestAnimationFrame(updateVisualizer);
123
  }
124
 
125
  async function initializePipelines() {
@@ -129,9 +158,12 @@
129
  quantized: false,
130
  });
131
  addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
 
 
132
  } catch (error) {
133
  console.error('Error initializing pipelines:', error);
134
  addMessage('System', 'Error initializing Voice Chat Bot. Please check the console for details.');
 
135
  }
136
  }
137
 
@@ -182,15 +214,25 @@
182
  dataArray = new Uint8Array(analyser.frequencyBinCount);
183
 
184
  myvad = await vad.MicVAD.new({
 
 
 
 
185
  onSpeechEnd: (audio) => {
 
 
186
  processSpeech(audio);
187
  }
188
  });
 
 
 
 
 
189
  await myvad.start();
190
  startButton.disabled = true;
191
  stopButton.disabled = false;
192
  addMessage('System', 'Listening...');
193
- updateVisualizer();
194
  } catch (error) {
195
  console.error('Error starting VAD:', error);
196
  addMessage('System', 'Error starting voice detection. Please check your microphone and try again.');
@@ -203,6 +245,7 @@
203
  startButton.disabled = false;
204
  stopButton.disabled = true;
205
  addMessage('System', 'Stopped listening.');
 
206
  }
207
  }
208
 
 
72
  display: inline-block;
73
  margin-right: 1px;
74
  }
75
+ #loading {
76
+ position: fixed;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ background-color: rgba(0, 0, 0, 0.5);
82
+ display: flex;
83
+ justify-content: center;
84
+ align-items: center;
85
+ z-index: 1000;
86
+ }
87
+ .spinner {
88
+ width: 50px;
89
+ height: 50px;
90
+ border: 5px solid #f3f3f3;
91
+ border-top: 5px solid #3498db;
92
+ border-radius: 50%;
93
+ animation: spin 1s linear infinite;
94
+ }
95
+ @keyframes spin {
96
+ 0% { transform: rotate(0deg); }
97
+ 100% { transform: rotate(360deg); }
98
+ }
99
  </style>
100
  </head>
101
  <body>
102
+ <div id="loading">
103
+ <div class="spinner"></div>
104
+ </div>
105
  <h1>Voice Chat Bot</h1>
106
  <div id="chat-container">
107
  <div id="conversation"></div>
108
  <div id="visualizer"></div>
109
  <div id="controls">
110
+ <button id="startButton" disabled>Start Listening</button>
111
  <button id="stopButton" disabled>Stop Listening</button>
112
  </div>
113
  </div>
 
121
  const startButton = document.getElementById('startButton');
122
  const stopButton = document.getElementById('stopButton');
123
  const visualizer = document.getElementById('visualizer');
124
+ const loadingDiv = document.getElementById('loading');
125
 
126
  let myvad;
127
  let sttPipeline;
 
130
  let analyser;
131
  let dataArray;
132
  let bars;
133
+ let animationId;
134
 
135
  function createVisualizer() {
136
  const barCount = 64;
 
148
  const barHeight = dataArray[i] / 2;
149
  bars[i].style.height = barHeight + 'px';
150
  }
151
+ animationId = requestAnimationFrame(updateVisualizer);
152
  }
153
 
154
  async function initializePipelines() {
 
158
  quantized: false,
159
  });
160
  addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
161
+ startButton.disabled = false;
162
+ loadingDiv.style.display = 'none';
163
  } catch (error) {
164
  console.error('Error initializing pipelines:', error);
165
  addMessage('System', 'Error initializing Voice Chat Bot. Please check the console for details.');
166
+ loadingDiv.style.display = 'none';
167
  }
168
  }
169
 
 
214
  dataArray = new Uint8Array(analyser.frequencyBinCount);
215
 
216
  myvad = await vad.MicVAD.new({
217
+ onSpeechStart: () => {
218
+ console.log('Speech started');
219
+ updateVisualizer();
220
+ },
221
  onSpeechEnd: (audio) => {
222
+ console.log('Speech ended');
223
+ cancelAnimationFrame(animationId);
224
  processSpeech(audio);
225
  }
226
  });
227
+
228
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
229
+ const source = audioContext.createMediaStreamSource(stream);
230
+ source.connect(analyser);
231
+
232
  await myvad.start();
233
  startButton.disabled = true;
234
  stopButton.disabled = false;
235
  addMessage('System', 'Listening...');
 
236
  } catch (error) {
237
  console.error('Error starting VAD:', error);
238
  addMessage('System', 'Error starting voice detection. Please check your microphone and try again.');
 
245
  startButton.disabled = false;
246
  stopButton.disabled = true;
247
  addMessage('System', 'Stopped listening.');
248
+ cancelAnimationFrame(animationId);
249
  }
250
  }
251