import streamlit as st
import asyncio
import websockets

st.markdown('<h1 style="color: darkblue;">AI Voice Assistant</h1>', unsafe_allow_html=True)

# JavaScript for real-time voice streaming
audio_recorder_js = """
<script>
let mediaRecorder;
let ws;

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        ws = new WebSocket("ws://localhost:8765"); // Replace with your server's WebSocket URL
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
        
        mediaRecorder.ondataavailable = event => {
            ws.send(event.data);
        };

        ws.onmessage = function(event) {
            document.getElementById("response").innerHTML += "<br><b>AI:</b> " + event.data;
        };
    });
}

function stopRecording() {
    mediaRecorder.stop();
    ws.close();
}
</script>
"""

# Display buttons for real-time recording
st.components.v1.html(
    audio_recorder_js + """
    <button onclick="startRecording()">🎤 Start Talking</button>
    <button onclick="stopRecording()">🛑 Stop</button>
    <div id="response" style="margin-top: 10px; padding: 10px; border: 1px solid #ccc;"></div>
    """, height=200
)