如何在Gradio中实现基于城市选择的HotelID联动下拉框？

问题背景 #

现有如下酒店数据DataFrame：

需要创建一个Gradio界面，实现以下功能：

• 提供城市（City）和酒店ID（HotelID）两个下拉选择框
• 根据选中的城市自动过滤HotelID选项，避免无效组合（如选Paris后无法选HotelID=2）
• 选择HotelID后输出对应酒店的价格

此前尝试的代码因Gradio版本兼容问题报错，gr.inputs.Dropdown为已废弃的2.x版本API，调整参数后仍无法实现需求。

可行解决方案（Gradio 3.x+版本） #

使用Gradio的Blocks模式实现动态组件更新，代码如下：

import gradio as gr
import pandas as pd

# 初始化酒店数据DataFrame
df = pd.DataFrame({
    "HotelID": [1, 2],
    "Location": ["Paris", "Madrid"],
    "Price": [15, 80]
})

# 获取所有可选城市
city_choices = df["Location"].unique().tolist()

# 根据选中城市过滤HotelID选项
def update_hotel_options(selected_city):
    filtered_ids = df[df["Location"] == selected_city]["HotelID"].tolist()
    # 返回更新后的下拉框配置：选项列表+默认选中第一个有效ID
    return gr.update(choices=filtered_ids, value=filtered_ids[0] if filtered_ids else None)

# 根据HotelID查询对应价格
def fetch_hotel_price(hotel_id):
    price = df[df["HotelID"] == hotel_id]["Price"].iloc[0]
    return f"当前酒店价格：{price}"

# 使用Blocks构建支持动态交互的界面
with gr.Blocks(title="酒店价格查询工具") as demo:
    gr.Markdown("### 酒店价格查询")
    
    # 布局城市和酒店ID下拉框
    with gr.Row():
        city_drop = gr.Dropdown(choices=city_choices, label="选择城市", value=city_choices[0])
        hotel_id_drop = gr.Dropdown(label="选择酒店ID")
    
    price_display = gr.Textbox(label="查询结果")
    
    # 城市选择变化时，更新酒店ID下拉选项
    city_drop.change(
        fn=update_hotel_options,
        inputs=city_drop,
        outputs=hotel_id_drop
    )
    
    # 酒店ID选择变化时，更新价格显示
    hotel_id_drop.change(
        fn=fetch_hotel_price,
        inputs=hotel_id_drop,
        outputs=price_display
    )
    
    # 界面加载时初始化酒店ID选项
    demo.load(
        fn=update_hotel_options,
        inputs=city_drop,
        outputs=hotel_id_drop
    )

# 启动界面
demo.launch()

关键说明 #

1. 废弃API替代：Gradio 3.x+已移除gr.inputs和gr.outputs模块，直接使用gr.Dropdown、gr.Textbox等组件类创建输入输出。
2. 动态组件更新：通过change事件监听城市下拉框的选择变化，调用update_hotel_options函数筛选对应HotelID，并用gr.update()返回新的下拉选项配置。
3. 初始化处理：通过demo.load()在界面启动时自动加载默认城市的酒店ID选项，避免初始状态下HotelID下拉框为空。
4. 价格查询逻辑：根据选中的HotelID直接从DataFrame中提取对应价格，确保结果准确。

内容的提问来源于stack exchange，提问作者Novly