Hugging Face's logo

Spaces:
Chris4K
/
VoiceBot
Sleeping

App Files Community
Chris4K commited on
Commit
005d3a9
·
verified ·
1 Parent(s): c55b80e

Create static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +122 -0
static/index.html ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!-- static/index.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI Voice Assistant</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ max-width: 800px;
12
+ margin: 0 auto;
13
+ padding: 20px;
14
+ }
15
+ .conversation {
16
+ margin-top: 20px;
17
+ border: 1px solid #ccc;
18
+ padding: 20px;
19
+ height: 400px;
20
+ overflow-y: auto;
21
+ }
22
+ .status {
23
+ margin-top: 10px;
24
+ color: #666;
25
+ }
26
+ .user-message {
27
+ color: blue;
28
+ margin: 10px 0;
29
+ }
30
+ .assistant-message {
31
+ color: green;
32
+ margin: 10px 0;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <h1>AI Voice Assistant</h1>
38
+ <div class="status" id="status">Initializing...</div>
39
+ <div class="conversation" id="conversation"></div>
40
+
41
+ <script>
42
+ let mediaRecorder;
43
+ let socket;
44
+ let audioChunks = [];
45
+
46
+ async function initializeAudio() {
47
+ try {
48
+ const stream = await navigator.mediaDevices.getUserMedia({
49
+ audio: {
50
+ sampleRate: 16000,
51
+ channelCount: 1,
52
+ echoCancellation: true,
53
+ noiseSuppression: true
54
+ }
55
+ });
56
+
57
+ // Initialize WebSocket connection
58
+ socket = new WebSocket(`ws://${window.location.host}/ws`);
59
+
60
+ socket.onmessage = (event) => {
61
+ const data = JSON.parse(event.data);
62
+
63
+ if (data.user_text) {
64
+ addMessage('user', data.user_text);
65
+ addMessage('assistant', `German: ${data.response_de}\nEnglish: ${data.response_en}`);
66
+ }
67
+
68
+ if (data.audio) {
69
+ // Convert base64 audio to ArrayBuffer and play it
70
+ const audio = new Audio(URL.createObjectURL(
71
+ new Blob([new Uint8Array(atob(data.audio).split('').map(c => c.charCodeAt(0)))],
72
+ { type: 'audio/wav' })
73
+ ));
74
+ audio.play();
75
+ }
76
+ };
77
+
78
+ // Initialize MediaRecorder
79
+ mediaRecorder = new MediaRecorder(stream);
80
+
81
+ mediaRecorder.ondataavailable = (event) => {
82
+ if (event.data.size > 0) {
83
+ audioChunks.push(event.data);
84
+ }
85
+
86
+ // Send chunks to server
87
+ if (audioChunks.length > 0) {
88
+ const audioBlob = new Blob(audioChunks);
89
+ audioBlob.arrayBuffer().then(buffer => {
90
+ if (socket.readyState === WebSocket.OPEN) {
91
+ socket.send(buffer);
92
+ }
93
+ });
94
+ audioChunks = [];
95
+ }
96
+ };
97
+
98
+ // Start recording in chunks
99
+ mediaRecorder.start(2000); // Send 2 seconds of audio at a time
100
+
101
+ document.getElementById('status').textContent = 'Listening... (Say "Computer" to activate)';
102
+
103
+ } catch (error) {
104
+ console.error('Error initializing audio:', error);
105
+ document.getElementById('status').textContent = 'Error initializing audio';
106
+ }
107
+ }
108
+
109
+ function addMessage(sender, text) {
110
+ const conversation = document.getElementById('conversation');
111
+ const message = document.createElement('div');
112
+ message.className = sender === 'user' ? 'user-message' : 'assistant-message';
113
+ message.textContent = text;
114
+ conversation.appendChild(message);
115
+ conversation.scrollTop = conversation.scrollHeight;
116
+ }
117
+
118
+ // Initialize when page loads
119
+ window.addEventListener('load', initializeAudio);
120
+ </script>
121
+ </body>
122
+ </html>