import gradio as gr

# Backend processing function
def process_text(input_text):
    # Example processing: Return the text with a prefix
    return f"Processed Text: {input_text}"

# Define the Gradio interface
with gr.Blocks() as demo:
    # Title
    gr.Markdown("# Speech-to-Text Demo with Web Speech API")
    
    # Input and output elements
    with gr.Row():
        input_box = gr.Textbox(label="Speech-to-Text Input", elem_id="speech-input")
        output_box = gr.Textbox(label="Processed Output")
    with gr.Row():
        speech_button = gr.Button("Start Speech Recognition", elem_id="speech-button")
    
    # Link the input box to the backend processing function
    speech_button.click(process_text, inputs=input_box, outputs=output_box)
    
    # Inject JavaScript for Web Speech API
    gr.HTML("""
    <script>
      // Function to initialize and start the Web Speech API
      function startSpeechRecognition() {
        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
        recognition.lang = 'en-US'; // Set language
        recognition.interimResults = true; // Enable real-time updates
        recognition.continuous = true; // Keep listening for multiple sentences

        // Handle results
        recognition.onresult = function(event) {
          const transcript = Array.from(event.results)
            .map(result => result[0].transcript)
            .join('');
          document.getElementById("speech-input").value = transcript; // Update the input box
        };

        // Handle errors
        recognition.onerror = function(event) {
          console.error("Speech Recognition Error:", event.error);
          alert("Speech recognition error: " + event.error);
        };

        recognition.start(); // Start listening
      }

      // Attach the start function to the button click
      document.getElementById('speech-button').addEventListener('click', startSpeechRecognition);
    </script>
    """)

# Launch the demo
demo.launch(share=True, port= 20005)