"<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Aurora Voice</title>\n<style>\nbody { background: #1e1a2e; color: #f8fafc; font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }\n.container { text-align: center; background: #2d2c40; padding: 40px; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.5); width: 400px; }\nh1 { color: #cba6f7; margin-bottom: 20px; }\nbutton { background: #7c3aed; color: white; border: none; padding: 15px 30px; font-size: 18px; border-radius: 50px; cursor: pointer; transition: 0.3s; }\nbutton:focus { outline: none; }\nbutton.recording { background: #ef4444; animation: pulse 1s infinite; }\n@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }\n.result { margin-top: 20px; text-align: left; background: #1a172b; padding: 15px; border-radius: 10px; display: none; }\n.result span { color: #cba6f7; }\n</style>\n</head>\n<body>\n<div class=\"container\">\n<h1>Аврора</h1>\n<button id=\"recBtn\">Нажми и говори</button>\n<div class=\"result\" id=\"result\">\n<p><span>Вы сказали:</span> <span id=\"userText\"></span></p>\n<p><span>Аврора:</span> <span id=\"auroraText\"></span></p>\n<audio id=\"audioPlayer\" controls style=\"width:100%; margin-top:10px;\"></audio>\n</div>\n</div>\n<script>\nconst recBtn = document.getElementById('recBtn');\nconst resultDiv = document.getElementById('result');\nconst userText = document.getElementById('userText');\nconst auroraText = document.getElementById('auroraText');\nconst audioPlayer = document.getElementById('audioPlayer');\n\nlet mediaRecorder;\nlet audioChunks = [];\n\nrecBtn.onclick = async () => {\n    if (mediaRecorder && mediaRecorder.state === \"recording\") {\n        mediaRecorder.stop();\n        recBtn.classList.remove('recording');\n        recBtn.textContent = \"Нажми и говори\";\n        return;\n    }\n\n    try {\n        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n        mediaRecorder = new MediaRecorder(stream);\n        audioChunks = [];\n\n        mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);\n        mediaRecorder.onstop = async () => {\n            const blob = new Blob(audioChunks, { type: 'audio/webm' });\n            const formData = new FormData();\n            formData.append('file', blob, 'voice.webm');\n            \n            recBtn.textContent = \"Думаю...\";\n            try {\n                const resp = await fetch('/api/voice', { method: 'POST', body: formData });\n                const data = await resp.json();\n                \n                if (data.text) {\n                    resultDiv.style.display = 'block';\n                    userText.textContent = data.text;\n                    auroraText.textContent = data.reply;\n                    audioPlayer.src = \"data:audio/mp3;base64,\" + data.audio;\n                    audioPlayer.play();\n                }\n            } catch (e){ alert(\"Ошибка: \" + e); }\n            recBtn.textContent = \"Нажми и говори\";\n        };\n\n        mediaRecorder.start();\n        recBtn.classList.add('recording');\n        recBtn.textContent = \"Слушаю... (нажми чтобы остановить)\";\n    } catch (e) { alert(\"Нет доступа к микрофону: \" + e); }\n};\n</script>\n</body>\n</html>"