| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Voice Assistant</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| max-width: 800px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| .conversation { |
| margin-top: 20px; |
| border: 1px solid #ccc; |
| padding: 20px; |
| height: 400px; |
| overflow-y: auto; |
| } |
| .status { |
| margin-top: 10px; |
| color: #666; |
| } |
| .user-message { |
| color: blue; |
| margin: 10px 0; |
| } |
| .assistant-message { |
| color: green; |
| margin: 10px 0; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>AI Voice Assistant</h1> |
| <div class="status" id="status">Initializing...</div> |
| <div class="conversation" id="conversation"></div> |
|
|
| <script> |
| let mediaRecorder; |
| let socket; |
| let audioChunks = []; |
| |
| function initializeAudio() { |
| function connect() { |
| socket = new WebSocket(`wss://${window.location.host}/ws`); |
| |
| socket.onopen = () => { |
| document.getElementById('status').textContent = 'Connected. Listening... (Say "Computer" to activate)'; |
| }; |
| |
| socket.onmessage = (event) => { |
| try { |
| const data = JSON.parse(event.data); |
| |
| if (data.user_text) { |
| addMessage('user', data.user_text); |
| addMessage('assistant', `German: ${data.response_de}\nEnglish: ${data.response_en}`); |
| } |
| |
| if (data.audio) { |
| |
| const audio = new Audio(URL.createObjectURL( |
| new Blob([new Uint8Array(atob(data.audio).split('').map(c => c.charCodeAt(0)))], |
| { type: 'audio/wav' }) |
| )); |
| audio.play(); |
| } |
| } catch (error) { |
| console.error('Error parsing WebSocket message:', error); |
| } |
| }; |
| |
| socket.onclose = (event) => { |
| document.getElementById('status').textContent = 'Disconnected. Reconnecting...'; |
| setTimeout(connect, 1000); |
| }; |
| |
| socket.onerror = (error) => { |
| console.error('WebSocket error:', error); |
| document.getElementById('status').textContent = 'Connection error'; |
| }; |
| } |
| |
| connect(); |
| |
| |
| mediaRecorder.ondataavailable = (event) => { |
| if (event.data.size > 0) { |
| const reader = new FileReader(); |
| reader.onloadend = () => { |
| |
| if (socket.readyState === WebSocket.OPEN) { |
| socket.send(reader.result); |
| } |
| }; |
| reader.readAsArrayBuffer(event.data); |
| } |
| }; |
| |
| mediaRecorder.start(480); |
| } |
| function addMessage(sender, text) { |
| const conversation = document.getElementById('conversation'); |
| const message = document.createElement('div'); |
| message.className = sender === 'user' ? 'user-message' : 'assistant-message'; |
| message.textContent = text; |
| conversation.appendChild(message); |
| conversation.scrollTop = conversation.scrollHeight; |
| } |
| |
| |
| window.addEventListener('load', initializeAudio); |
| |
| |
| </script> |
| </body> |
| </html> |
