How to update the gr.Dropdown() block in Gradio Blocks

Spaces
1

Hey peeps! I want to create a Gradio app which recommends an item with interactive blocks like a dropdown so the user can select their preferred option.

But I can’t get my head around the gr.Dropdown() logic when it comes to Gradio Blocks. How do you update the list of choices based on new inputs?

Here is my code below where the Dropdown section doesn’t update. Any guidance would be appreciated!

(the real thing will have more complicated functions but I wanted to work out the structure first)

def closest_match(x):
    return x + ": The Definitive Edition"

def Dropdown_list(x):
    return [x, x + " Remastered", x + ": The Remake", x + ": Game of the Year Edition", x + " Steelbook Edition"]

def Recommend_new(x):
  return x + ": Highest Cosine Similarity"

demo = gr.Blocks()

with demo:
    text_input = gr.Textbox(label="Search bar")
    b1 = gr.Button("Match Closest Title")

    text_options = gr.Dropdown(['Placeholder A', 'Placeholder B', 'Placeholder C'], label="Top 5 options")
    b2 = gr.Button("Provide Additional options")
    
    new_title = gr.Textbox(label="Here you go!")
    b3 = gr.Button("Recommend a new title")

    b1.click(closest_match, inputs=text_input, outputs=text_input)
    b2.click(Dropdown_list, inputs=text_input, outputs=text_options)
    b3.click(Recommend_new, inputs=text_options, outputs=new_title)
    # text_options.update(interactive=True)


demo.launch()
2 Likes
2

hi @seyia92coding , to update the choices on a gr.Dropdown, you have to return gr.Dropdown.update with new choices, here is an example base on your code.
You can also see another example here gradio/demo/blocks_update/run.py at main · gradio-app/gradio · GitHub

import gradio as gr

def closest_match(x):
    return x + ": The Definitive Edition"

def Dropdown_list(x):
    new_options =  [*options, x + " Remastered", x + ": The Remake", x + ": Game of the Year Edition", x + " Steelbook Edition"]
    return gr.Dropdown.update(choices=new_options)


def Recommend_new(x):
  return x + ": Highest Cosine Similarity"

demo = gr.Blocks()

options = ['Placeholder A', 'Placeholder B', 'Placeholder C']
with demo:
    text_input = gr.Textbox(label="Search bar")
    b1 = gr.Button("Match Closest Title")

    text_options = gr.Dropdown(options, label="Top 5 options")
    b2 = gr.Button("Provide Additional options")
    
    new_title = gr.Textbox(label="Here you go!")
    b3 = gr.Button("Recommend a new title")

    b1.click(closest_match, inputs=text_input, outputs=text_options)
    b2.click(Dropdown_list, inputs=text_input, outputs=text_options)
    b3.click(Recommend_new, inputs=text_options, outputs=new_title)
    # text_options.update(interactive=True)


demo.launch(debug=True)

update Jan/2024 Gradio 4 refer to

3 Likes
3

Thank you, this works now! @radames

2 Likes
4

Please note that gr.Dropdown.update has been deprecated in version 4.x. You can directly use gr.Dropdown instead. See AttributeError: type object 'Dropdown' has no attribute 'update' · Issue #6862 · gradio-app/gradio · GitHub.

1 Like