|
import streamlit as st |
|
import asyncio |
|
import websockets |
|
|
|
st.markdown('<h1 style="color: darkblue;">AI Voice Assistant</h1>', unsafe_allow_html=True) |
|
|
|
|
|
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> |
|
""" |
|
|
|
|
|
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 |
|
) |
|
|