How do I refresh a gradio button after pressing submit?

Question

I have a simple input/output gradio interface:

import gradio as gr

def generate_output(input_text):
    output_text = "Hello, " + input_text + "!"
    return output_text

iface = gr.Interface(fn=generate_output, 
                     inputs= gr.Textbox(label="Input Text"),#gr.Textbox(label="Input Text"), 
                     outputs="text",
                     title="Basic Text Input and Output",
                     description="Enter some text and get a modified version of it as output")

iface.launch(share=False)

My objective is using gradio to answer questions in a sequence, like a chatbot.

When I press the submit button, how can I change the label of the input textbox from "input text" to "question 2"?

score 2 · Answer 1 · answered Mar 22 '23 at 14:06

Such behavior is only possible using the Blocks Layout, as you somehow need to update the input component. Here is an example:

import gradio as gr

counter = 1

def generate_output(input_text):
    global counter
    output_text = "Hello, " + input_text + "!"
    counter += 1
    return output_text, gr.Textbox.update(label=f"Question {counter}")

with gr.Blocks() as demo:
    with gr.Row():
    
        # column for inputs
        with gr.Column():
            input_text = gr.Textbox(label="Input Text")
            submit_button = gr.Button("Submit")
                   
        # column for outputs
        with gr.Column():
            output_text = gr.Textbox()
            
    submit_button.click(
        fn=generate_output,
        inputs=input_text,
        outputs=[output_text, input_text]
    )

demo.launch()

Here, the input text component is also passed to outputs and then updated in the generate_output function using gr.update. You could do this too with using gr.Interface, but this would result in the Textbox being displayd also on the output side.

Note, that there also is a Chatbot Component for Gradio!

How do I refresh a gradio button after pressing submit?

1 Answers1