How can I update the value of my component

🔒 Gradio
1

Good day everyone, how can I update the value of my component if I capture a new value using JavaScript and deliver it to the component?

gradio.py

import gradio as gr
import torch
from transformers import AutoModelForCausalLM, AutoTokenizer
tokenizer = AutoTokenizer.from_pretrained("microsoft/DialoGPT-medium")
model = AutoModelForCausalLM.from_pretrained("microsoft/DialoGPT-medium")
customjs = "function(){console.log('loading custom.js'); let scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript'; scriptTag.src = 'file/js/custom.js'; document.getElementsByTagName('head')[0].appendChild(scriptTag); document.getElementsByTagName('footer')[0].remove(); }"

def user(message, history):
    if message == None:
        return message+ history
    return "", history + [[message, None]]
def bot(history):
    user_message = history[-1][0]
    new_user_input_ids = tokenizer.encode(
        user_message + tokenizer.eos_token, return_tensors="pt"
    )

    # append the new user input tokens to the chat history
    bot_input_ids = torch.cat([torch.LongTensor([]), new_user_input_ids], dim=-1)

    # generate a response
    response = model.generate(
        bot_input_ids, max_length=1000, pad_token_id=tokenizer.eos_token_id
    ).tolist()

    # convert the tokens to text, and then split the responses into lines
    response = tokenizer.decode(response[0]).split("<|endoftext|>")
    response = [
        (response[i], response[i + 1]) for i in range(0, len(response) - 1, 2)
    ]  # convert to tuples of list
    history[-1] = response[0]
    return history
with demo:
    chatbot= gr.Chatbot(show_label=False,elem_classes="chatb",avatar_images=[None,"./assets/img/bot.png"]) # [User/Bot] Image
            
    prompt = gr.Textbox(value="", show_label=False, placeholder="Ask me", elem_id='ms', min_width=800,container=False,autofocus=True)

    prompt.submit(user, [prompt, chatbot], [prompt, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )

custom.js

let output = document.querySelector("textarea[data-testid='textbox']");
  recognition.onresult = function (event) {
    var interim_transcript = "";
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    output.value = final_transcript + interim_transcript;
  };