Streamlit input box value update from js but when i click submit at that time it is not display the value

Using Streamlit
, ,
1

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:

  1. 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

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.