Gradio Dropdown Not Updating with Category Change in Blocks Interface

Beginners
1

I’m working with Gradio to create an interface where a user can select a product category, and the other dropdown menus update based on the selection. However, the dropdowns are not updated upon category selection.

Here’s a snippet of the code that’s supposed to handle the updates:

import gradio as gr
import json

# Load category mappings from a JSON file
def load_category_mappings():
    with open('category_mappings.json', 'r') as file:
        return json.load(file)

category_mappings = load_category_mappings()

# Function to update dropdown options based on the selected category
def update_options(category):
    mappings = category_mappings.get(category, {})
    # Instead of returning a list, return a dictionary with the new choices
    return {
        "design": mappings.get("design", []),
        "material": mappings.get("material", []),
        "material_kind": mappings.get("material_kind", []),
        "color": mappings.get("color", []),
        "length": mappings.get("length", []),
        "neckline": mappings.get("neckline", []),
        "sleeve": mappings.get("sleeve", []),
        "sleeve_length": mappings.get("sleeve_length", []),
        "collar": mappings.get("collar", []),
        "shape_outline": mappings.get("shape_outline", [])
    }

# Function to generate product description
def generate_description(category, design, material, material_kind, color, length, neckline, sleeve, sleeve_length, collar, shape_outline):
    description = f"Category: {category}, Design: {design}, Material: {material}, Material Kind: {material_kind}, " \
                  f"Color: {color}, Length: {length}, Neckline: {neckline}, Sleeve: {sleeve}, " \
                  f"Sleeve Length: {sleeve_length}, Collar: {collar}, Shape/Outline: {shape_outline}"
    return description

# Define the layout of the Gradio app
with gr.Blocks() as app:
    gr.Markdown("# Product Attribute Selector")
    gr.Markdown("Welcome! Select a category to get started and then choose the attributes to generate a product description.")
    
    with gr.Row():
        category = gr.Dropdown(label="Category", choices=[] + list(category_mappings.keys()), value="Please select category...")
    
    with gr.Row():
        design = gr.Dropdown(label="Design", choices=[])
        material = gr.Dropdown(label="Material", choices=[])
    with gr.Row():
        material_kind = gr.Dropdown(label="Material Kind", choices=[])
        color = gr.Dropdown(label="Color", choices=[])
    with gr.Row():
        length = gr.Dropdown(label="Length", choices=[])
        neckline = gr.Dropdown(label="Neckline", choices=[])
    with gr.Row():
        sleeve = gr.Dropdown(label="Sleeve", choices=[])
        sleeve_length = gr.Dropdown(label="Sleeve Length", choices=[])
    with gr.Row():
        collar = gr.Dropdown(label="Collar", choices=[])
        shape_outline = gr.Dropdown(label="Shape/Outline", choices=[])
    
    # Inside your Gradio Blocks setup
    # Link the update_options function to the change event of the category dropdown
    category.change(fn=update_options, inputs=category, outputs=[design, material, material_kind, color, length, neckline, sleeve, sleeve_length, collar, shape_outline])

    with gr.Row():
        generate_btn = gr.Button("Generate Description")
        description_output = gr.Textbox(label="Product Description", placeholder="Your product description will appear here...")

    generate_btn.click(fn=generate_description, 
                       inputs=[category, design, material, material_kind, color, length, neckline, sleeve, sleeve_length, collar, shape_outline], 
                       outputs=description_output)

if __name__ == "__main__":
    app.launch()

I expected the update_options function to be called with the selected category, and for it to return a dictionary with new choices for the dropdowns. However, the dropdowns remain empty after a category is selected.

Here’s what I’ve checked:

  1. The category_mappings.json file is properly formatted and contains the correct data.
  2. The keys in the mappings dictionary match the names of the dropdowns.
  3. I’m not using gr.Dropdown.update as I’m aware it’s deprecated in Gradio version 4.x.

I’ve structured my code based on the example from the Gradio GitHub repository. Can someone help me understand why the dropdowns are not updating and how to fix it?

2

This discussion may help: Discord

The main thing I see is that you aren’t returning any component value updates from your ‘update_options’ function.