Hugging Face's logo

Spaces:
atlury
/
digitalhuman
Running

App Files Community
atlury commited on
Commit
0f941de
·
verified ·
1 Parent(s): 59ff6b9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +106 -62
index.html CHANGED
@@ -1,63 +1,107 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Voice Activity Detection Demo</title>
7
- <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script>
10
- ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/';
11
- </script>
12
- </head>
13
- <body>
14
- <main class="flex min-h-screen flex-col items-center justify-between p-24">
15
- <div class="text-center">
16
- <div id="status" class="text-4xl mb-4">🔇 Not Listening</div>
17
- <div id="audioList" class="space-y-4"></div>
18
- </div>
19
- </main>
20
-
21
- <script type="module">
22
- import { SpeechChunks } from './SpeechChunks.js';
23
-
24
- let speechChunks;
25
-
26
- function updateStatus(isListening) {
27
- document.getElementById('status').textContent = isListening ? "🎙️ Listening..." : "🔇 Not Listening";
28
- }
29
-
30
- function addAudioToList(blob) {
31
- const audioList = document.getElementById('audioList');
32
- const audio = document.createElement('audio');
33
- audio.controls = true;
34
- audio.src = URL.createObjectURL(blob);
35
- audio.onended = () => URL.revokeObjectURL(audio.src);
36
- audioList.appendChild(audio);
37
- }
38
-
39
- async function initializeSpeechChunks() {
40
- try {
41
- speechChunks = new SpeechChunks(
42
- () => {
43
- console.log("speech start");
44
- updateStatus(true);
45
- },
46
- (blob) => {
47
- console.log("speech end");
48
- updateStatus(false);
49
- addAudioToList(blob);
50
- }
51
- );
52
- await speechChunks.start();
53
- } catch (error) {
54
- console.error("Error initializing SpeechChunks:", error);
55
- updateStatus(false);
56
- document.getElementById('status').textContent = "Error: " + error.message;
57
- }
58
- }
59
-
60
- initializeSpeechChunks();
61
- </script>
62
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Voice Chat Bot</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/bundle.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@xenova/[email protected]"></script>
10
+ <style>
11
+ body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
12
+ button { font-size: 18px; padding: 10px 20px; margin: 10px 0; }
13
+ #conversation { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; margin-bottom: 10px; }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <h1>Voice Chat Bot</h1>
18
+ <div id="conversation"></div>
19
+ <button id="startButton">Start Listening</button>
20
+ <button id="stopButton" disabled>Stop Listening</button>
21
+
22
+ <script type="module">
23
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
24
+
25
+ const conversationDiv = document.getElementById('conversation');
26
+ const startButton = document.getElementById('startButton');
27
+ const stopButton = document.getElementById('stopButton');
28
+
29
+ let myvad;
30
+ let sttPipeline;
31
+ let ttsPipeline;
32
+
33
+ async function initializePipelines() {
34
+ sttPipeline = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');
35
+ ttsPipeline = await pipeline('text-to-speech', 'Xenova/speecht5_tts');
36
+ }
37
+
38
+ async function processSpeech(audio) {
39
+ try {
40
+ const transcription = await sttPipeline(audio);
41
+ addMessage('User', transcription.text);
42
+
43
+ // Placeholder for LLM response
44
+ const botResponse = `I heard you say: "${transcription.text}". This is a placeholder response.`;
45
+ addMessage('Bot', botResponse);
46
+
47
+ const speechOutput = await ttsPipeline(botResponse);
48
+ playAudio(speechOutput.audio);
49
+ } catch (error) {
50
+ console.error('Error processing speech:', error);
51
+ }
52
+ }
53
+
54
+ function addMessage(sender, message) {
55
+ const messageElement = document.createElement('p');
56
+ messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
57
+ conversationDiv.appendChild(messageElement);
58
+ conversationDiv.scrollTop = conversationDiv.scrollHeight;
59
+ }
60
+
61
+ function playAudio(audioArray) {
62
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
63
+ const audioBuffer = audioContext.createBuffer(1, audioArray.length, 16000);
64
+ const channelData = audioBuffer.getChannelData(0);
65
+ channelData.set(audioArray);
66
+
67
+ const source = audioContext.createBufferSource();
68
+ source.buffer = audioBuffer;
69
+ source.connect(audioContext.destination);
70
+ source.start();
71
+ }
72
+
73
+ async function startListening() {
74
+ try {
75
+ myvad = await vad.MicVAD.new({
76
+ onSpeechEnd: (audio) => {
77
+ processSpeech(audio);
78
+ }
79
+ });
80
+ await myvad.start();
81
+ startButton.disabled = true;
82
+ stopButton.disabled = false;
83
+ addMessage('System', 'Listening...');
84
+ } catch (error) {
85
+ console.error('Error starting VAD:', error);
86
+ }
87
+ }
88
+
89
+ function stopListening() {
90
+ if (myvad) {
91
+ myvad.stop();
92
+ startButton.disabled = false;
93
+ stopButton.disabled = true;
94
+ addMessage('System', 'Stopped listening.');
95
+ }
96
+ }
97
+
98
+ startButton.addEventListener('click', startListening);
99
+ stopButton.addEventListener('click', stopListening);
100
+
101
+ // Initialize pipelines when the page loads
102
+ initializePipelines().then(() => {
103
+ addMessage('System', 'Voice Chat Bot initialized. Click "Start Listening" to begin.');
104
+ });
105
+ </script>
106
+ </body>
107
  </html>