Unable to clear input after submit

🔒 Gradio
1

I’m very new to both huggingface and Gradio, so forgive me if this is a trivial issue, and I’m just a fool.

I’m using a Blocks object to implement a very basic chatbot, and I’d like to essentially clear the input textbox after the user presses enter or presses the submit button.

with gr.Blocks() as test:
    outp = gr.Chatbot(label="Reply", )
    inp = gr.Textbox(label="Chat with AI")
    inp.submit(chatbot, [outp, inp], outp)
    inp.update(lambda: None, inp)
    btn = gr.Button("Submit")
    btn.click(fn=chatbot, inputs=inp, outputs=outp)

My code looks like this currently.
I simply wish to clear the input textbox after the input is submitted.

2

hi @alexjedi ,

You need to send an empty value back to the input textbox, just add these two lines

    btn.click(lambda x: gr.update(value=''), [],[inp])
    inp.submit(lambda x: gr.update(value=''), [],[inp])
2 Likes
3

Hi @alexjedi
I came across the same issue.
In my scenario, I am using the chatbot UI from Gradio.

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")
    chat_history = []

    print(msg)
    
    def user(user_message, history):
        print("User message:", user_message)
        print("Chat history:", history)
        # Get response from QA chain
        response = qa({"question": user_message, "chat_history": history})
        # Append user message and response to chat history
        history.append((user_message, response["answer"]))
        print("Updated chat history:", history)
        # Clear the message box
        msg = ""
        print(msg)
        # Return response to chatbot
        return response["answer"], history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False)
    clear.click(lambda: None, None, chatbot, queue=False)

I have the same problem that we I submit the query, the Textbox doesn’t get cleared, but also get filled up with the response from the model. (The response also shows up in the chat window, so the same text gets displayed twice!)

How can I modify the code so as soon as the model returns the response, the text box will also get cleared?

Thanks!

4

hi @nhtkid

You want to return a clear state to msg box, can you try this?

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")
    chat_history = []

    print(msg)
    
    def user(user_message, history):
        print("User message:", user_message)
        print("Chat history:", history)
        # Get response from QA chain
        response = qa({"question": user_message, "chat_history": history})
        # Append user message and response to chat history
        history.append((user_message, response["answer"]))
        print("Updated chat history:", history)
        # Clear the message box
        msg = ""
        print(msg)
        # Return response to chatbot
        return gr.update(value=""), history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False)
    clear.click(lambda: None, None, chatbot, queue=False)
5

Hi @radames,
It worked beautifully.

And the only difference in your code is
return gr.update(value=“”), history

Thank you so much!

1 Like
6

Hi please I have the same problem using the blocks in Gradio:

interface = gr.Blocks()

with interface:
logos = gr.Image(value=logo_path, interactive=False, show_label=False, elem_id=“logo”)
logos.style(height=100)
chatbot = gr.Chatbot(label=“Conversation”)
chatbot.style(height=350)
message = gr.Textbox(placeholder=“Send a message”, label=“Chat”, elem_id=“back”)
message.style(container=True)
state = gr.State()
send = gr.Button(“Send”, elem_id=“send”)
message.submit(conversation_history, [message, state], [chatbot, state], queue=False)
send.click(conversation_history, inputs=[message, state], outputs=[chatbot, state])
send.style(size=“lg”)

interface.launch()

I want the Textbox to automatically clear after sending or the user hits enter.
Thanks in advance

7

you can add these two lines to click after submit or click

  # clear message after click or submit
  message.submit(lambda x: gr.update(value=""), None, [message], queue=False)
  send.click(lambda x: gr.update(value=""), None, [message], queue=False)
2 Likes
8

@radames
I just did and I got this error
UserWarning: Expected at least 1 arguments for function <function at 0x0000016A157749D0>, received 0

Note: It cleared the Textbox (thank you for that) when I send it works but I get this error on my ide
UserWarning: Unexpected argument. Filling with None.
warnings.warn(“Unexpected argument. Filling with None.”)
please help

9

sorry, I can’t help you without more context, check your conversation_history function

11

sorry I’m not sure if I can help, this code snippet below works for me, but I don’t have your callmocbt , running latest Gradio

import gradio as gr

def conversation_history(input, history):
  history = history or [] 
  s = list(sum(history, ()))
  s.append(input)
  inp = ''.join(s)
  output = inp
  history.append((input, output))
  return history, history

with gr.Blocks() as interface:
  logos = gr.Image(interactive=False, show_label=False, elem_id="logo")
  logos.style(height=100)
  chatbot = gr.Chatbot(label="Conversation")
  chatbot.style(height=325)
  message = gr.Textbox(placeholder="Send a message", label="Chat", lines=1)
  message.style(container=True)
  state = gr.State()
  send = gr.Button("Send")
  message.submit(conversation_history, [message, state], [chatbot, state], queue=False)
  message.submit(lambda x: gr.update(value=""), None, [message], queue=False)
  send.click(conversation_history, inputs=[message, state], outputs=[chatbot, state])
  send.click(lambda x: gr.update(value=""), None, [message], queue=False)
  send.style(size="lg")

interface.launch()
1 Like
12

@radames fixed it, I changed None to [state], thanks :+1:

1 Like
13

Hi please I have the same problem using the blocks in Gradio

def chatgpt_clone(input, history):
history = history or
s = list(sum(history, ()))
s.append(input)
inp = ’ '.join(s)
output = openai_create(inp)
history.append((input, output))
return history, history

block = gr.Blocks()

with block:
gr.Markdown(“”“

Build Yo’own ChatGPT with OpenAI API & Gradio


“””)

chatbot = gr.Chatbot()
message = gr.Textbox(placeholder=prompt)
state = gr.State()
submit = gr.Button("SEND")
submit.click(chatgpt_clone, inputs=[message, state], outputs=[chatbot, state])

And how i close the app from gradio? I use the terminal

14

Hello, I am not able to assign enter key to submit button in my gradio UI.
could you please help me to do so ?