Clicking on an example so that it directly displays the expected output without requiring the user to press Enter?
python
Ethan JacksonI have a simple Gradio interface for machine translation:
How can I change it so that clicking on an example (e.g., 'Avion blanc') directly displays the translation without requiring the user to press Enter?
Code:
import gradio as gr
import time
def translate_sentence(src_text):
start_time = time.time()
translation = "hello" # I removed the translation model
duration = (time.time() - start_time)*1000
return translation, f"{duration:.0f} ms"
with gr.Blocks(title="French to English Translation", css="footer{display:none !important}") as demo:
input_box = gr.Textbox(lines=1, label="Input (French)")
output_box = gr.Textbox(lines=1, label="Translation (English)")
time_box = gr.Text(label="Time Taken")
translate_btn = gr.Button("Translate")
gr.Examples(
examples=[
["Avion blanc"],
["Chat sur un arbre"],
["Un oiseau sur l'eau"]
],
inputs=input_box,
outputs=[output_box, time_box],
fn=translate_sentence
)
translate_btn.click(translate_sentence, inputs=input_box, outputs=[output_box, time_box])
input_box.submit(translate_sentence, inputs=input_box, outputs=[output_box, time_box])
if __name__ == "__main__":
demo.launch()
Answer
One can add this listener:
input_box.change(
translate_sentence,
inputs=input_box,
outputs=[output_box, time_box],
queue=False
)
so that any input box change causes the translation to be run.
Full code:
import gradio as gr
import time
def translate_sentence(src_text):
start_time = time.time()
translation = "hello" # I removed the translation model
duration = (time.time() - start_time)*1000
return translation, f"{duration:.0f} ms"
with gr.Blocks(title="French to English Translation", css="footer{display:none !important}") as demo:
input_box = gr.Textbox(lines=1, label="Input (French)")
output_box = gr.Textbox(lines=1, label="Translation (English)")
time_box = gr.Text(label="Time Taken")
translate_btn = gr.Button("Translate")
gr.Examples(
examples=[
["Avion blanc"],
["Chat sur un arbre"],
["Un oiseau sur l'eau"]
],
inputs=input_box,
outputs=[output_box, time_box],
fn=translate_sentence
)
input_box.change(
translate_sentence,
inputs=input_box,
outputs=[output_box, time_box],
queue=False
)
translate_btn.click(translate_sentence, inputs=input_box, outputs=[output_box, time_box])
input_box.submit(translate_sentence, inputs=input_box, outputs=[output_box, time_box])
if __name__ == "__main__":
demo.launch()