Please take a moment to search the forum and documentation before posting a new topic.
If you’re creating a debugging post, please include the following info:
- Are you running your app locally or is it deployed?
- locally
i am creating chat application with audio search features
in below code it take audio from users browser and convert into text and add value in textbox using js
but when i click send button at that time it is not print
import streamlit as st
import streamlit.components.v1 as components
st.set_page_config(page_title="Voice Chatbot", layout="centered")
st.title("🎤 Voice-Enabled Chatbot")
# Set up text input to hold transcript
user_input = st.text_input("Say something or type:", key="voice_input")
# Add voice-to-text mic button with Web Speech API
components.html(
"""
<button id="mic-button">🎙️ Start Voice Input</button>
<script>
const btn = document.getElementById("mic-button");
btn.addEventListener("click", () => {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
alert("Speech Recognition not supported in this browser.");
return;
}
const recognition = new SpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.start();
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
const textarea = window.parent.document.querySelector('input[type="text"]');
if (textarea) {
textarea.value = transcript;
textarea.dispatchEvent(new Event("input", { bubbles: true }));
}
};
recognition.onerror = (event) => {
alert("Error occurred in recognition: " + event.error);
};
});
</script>
""",
height=100,
)
# Bot simulation (optional)
if st.button("Send"):
if user_input.strip():
st.write("👤 You:", user_input)
st.write("🤖 Bot:", f"I heard: '{user_input}'")
else:
st.warning("Please speak or type a message.")
I wanted to know how streamlit input is work.
is ther any other way to implement voice search features in streamlit without using js
Thanks