gradio作为原型工具

发布于:2025-08-04 ⋅ 阅读:(11) ⋅ 点赞:(0)

存在的问题,页面的展示和value不是同一个值的问题,比如说选中了北京,但实际上后端想要的是110000地区码。

在实际开发中,前端展示给用户的是可读的地区名称(如“北京”),而背后处理时通常需要的是对应的唯一标识符(如 areaid)。因此,我们需要在 Gradio 前端将“地区名称”映射为 areaid,然后传递给后端函数。

<option value="idxxxx">文本</option>

demo1

在这里插入图片描述

import gradio as gr

# 定义学段选项
segment_options = ["不限", "小学", "初中", "高中", "中职"]

# 定义类别选项
category_options = ["不限", "课件", "教案", "学案", "作业", "试卷", "题集", "素材", "示范课", "备课包"]

# 定义地区选项
region_options = [
    "不限",
    "全国",
    "北京",
    "天津",
    "河北",
    "山西",
    "内蒙古",
    "辽宁",
    "吉林",
    "黑龙江",
    "上海",
    "江苏",
    "浙江",
    "安徽",
    "福建",
    "江西",
    "山东",
    "河南",
    "湖北",
    "湖南",
    "广东",
    "广西",
    "海南",
    "重庆",
    "四川",
    "贵州",
    "云南",
    "西藏",
    "甘肃",
    "青海",
    "宁夏",
    "新疆",
    "台湾",
    "香港",
    "澳门"
]

# 定义等级选项
level_options = ["不限", "免费", "普通", "特供", "精品", "教辅"]

# 定义更多选项
more_options = ["年份", "年级"]

# 定义函数,用于处理用户输入
def filter_resources(segment, category, region, level, more):
    # 这里可以添加逻辑来根据用户选择过滤资源
    result = f"您选择了:\n学段: {segment}\n类别: {category}\n地区: {region}\n等级: {level}\n更多: {more}"
    return result

# 创建Gradio界面
with gr.Blocks() as demo:
    gr.Markdown("### 资源筛选工具")
    
    # 学段选择
    segment = gr.Radio(segment_options, label="学段:", value="不限")
    
    # 类别选择
    category = gr.Radio(category_options, label="类别:", value="不限")
    
    # 地区选择
    region = gr.Dropdown(region_options, label="地区:", value="不限")
    
    # 等级选择
    level = gr.Radio(level_options, label="等级:", value="不限")
    
    # 更多选项(下拉菜单)
    more = gr.Dropdown(more_options, label="更多:", value="年份")
    
    # 提交按钮
    submit_button = gr.Button("提交")
    
    # 输出结果
    output = gr.Textbox(label="筛选结果")

    # 绑定事件
    submit_button.click(
        fn=filter_resources,
        inputs=[segment, category, region, level, more],
        outputs=output
    )

# 启动Gradio应用
demo.launch()
import gradio as gr

# 定义选项:使用 (显示文本, 实际值) 的元组
segment_options = [
    ("不限", "all"),
    ("小学", "primary"),
    ("初中", "middle"),
    ("高中", "high"),
    ("中职", "vocational")
]

category_options = [
    ("不限", "all"),
    ("课件", "kejian"),
    ("教案", "jiaoan"),
    ("学案", "xuean"),
    ("作业", "zuoye"),
    ("试卷", "shijuan"),
    ("题集", "tiji"),
    ("素材", "sucai"),
    ("示范课", "shifan"),
    ("备课包", "beike")
]

# 地区:显示名称,返回areaid(整数或字符串均可)
region_options = [
    ("不限", 0),
    ("北京", 110000),
    ("天津", 120000),
    ("河北", 130000),
    ("山西", 140000),
    ("内蒙古", 150000),
    ("辽宁", 210000),
    ("吉林", 220000),
    ("黑龙江", 230000),
    ("上海", 310000),
    ("江苏", 320000),
    ("浙江", 330000),
    ("安徽", 340000),
    ("福建", 350000),
    ("江西", 360000),
    ("山东", 370000),
    ("河南", 410000),
    ("湖北", 420000),
    ("湖南", 430000),
    ("广东", 440000),
    ("广西", 450000),
    ("海南", 460000),
    ("重庆", 500000),
    ("四川", 510000),
    ("贵州", 520000),
    ("云南", 530000),
    ("西藏", 540000),
    ("甘肃", 620000),
    ("青海", 630000),
    ("宁夏", 640000),
    ("新疆", 650000),
    ("台湾", 710000),
    ("香港", 810000),
    ("澳门", 820000),
]

level_options = [
    ("不限", "all"),
    ("免费", "free"),
    ("普通", "normal"),
    ("特供", "tegong"),
    ("精品", "jingpin"),
    ("教辅", "jiaofu")
]

more_options = [
    ("年份", "year"),
    ("年级", "grade")
]

# 后端函数:接收实际值(如areaid),无需查表
def filter_resources(segment, category, region_areaid, level, more):
    result = f"""
接收到的后端参数:
学段编码: {segment}
类别编码: {category}
地区areaid: {region_areaid}
等级编码: {level}
筛选维度: {more}
""".strip()
    return result

with gr.Blocks() as demo:
    gr.Markdown("### 资源筛选工具(显示名 ≠ 实际值)")

    segment = gr.Radio(segment_options, label="学段:", value="all")
    category = gr.Radio(category_options, label="类别:", value="all")
    region = gr.Dropdown(region_options, label="地区:", value=0)  # value是areaid
    level = gr.Radio(level_options, label="等级:", value="all")
    more = gr.Dropdown(more_options, label="更多:", value="year")

    submit_button = gr.Button("提交")
    output = gr.Textbox(label="后端接收到的数据")

    submit_button.click(
        fn=filter_resources,
        inputs=[segment, category, region, level, more],
        outputs=output
    )

demo.launch()

demo2

在这里插入图片描述

import gradio as gr

# 定义搜索函数(模拟处理逻辑)
def search(
    all_keywords,
    any_keywords,
    exclude_keywords,
    author,
    post_time,
    forum,
    keyword_location,
    sort_by,
    items_per_page
):
    # 模拟搜索逻辑
    result = f"""
    搜索条件:
    - 包含全部关键词: {all_keywords}
    - 包含至少一个关键词: {any_keywords}
    - 不包含关键词: {exclude_keywords}
    - 发帖作者: {author}
    - 发帖时间: {post_time}
    - 所属版块: {forum}
    - 关键词位置: {keyword_location}
    - 排序方式: {sort_by}
    - 每页显示条数: {items_per_page}
    """
    return result

# 创建界面
with gr.Blocks() as demo:
    gr.Markdown("### 使用以下条件来搜索")
    
    # 包含全部关键词
    all_keywords = gr.Textbox(label="包含全部关键词", placeholder="请输入")
    
    # 包含至少一个关键词
    any_keywords = gr.Textbox(label="包含至少一个关键词", placeholder="请输入")
    
    # 不包含关键词
    exclude_keywords = gr.Textbox(label="不包含关键词", placeholder="请输入")
    
    gr.Markdown("### 使用以下条件来缩小搜索结果范围")
    
    # 发帖作者
    author = gr.Textbox(label="发帖作者", placeholder="请输入")
    
    # 发帖时间
    post_time = gr.Dropdown(
        choices=["全部时间", "最近一天", "最近一周", "最近一个月"],
        label="发帖时间",
        value="全部时间"
    )
    
    # 所属版块
    forum = gr.Dropdown(
        choices=["所有版块", "技术讨论", "生活分享", "娱乐资讯"],
        label="所属版块",
        value="所有版块"
    )
    
    # 关键词位置
    keyword_location = gr.Radio(
        choices=["帖子的任何地方", "仅限帖子标题", "仅限帖子正文"],
        label="关键词位置",
        value="帖子的任何地方"
    )
    
    gr.Markdown("### 其他")
    
    # 排序方式
    sort_by = gr.Radio(
        choices=["按相关度排序", "按发布时间排序"],
        label="排序方式",
        value="按相关度排序"
    )
    
    # 每页显示条数
    items_per_page = gr.Radio(
        choices=["每页显示 15 条", "每页显示 30 条", "每页显示 50 条"],
        label="每页显示条数",
        value="每页显示 15 条"
    )
    
    # 确定按钮
    submit_button = gr.Button("确定")
    
    # 取消按钮
    cancel_button = gr.Button("取消")
    
    # 输出结果
    output_text = gr.Textbox(label="搜索结果", interactive=False)
    
    # 绑定事件
    submit_button.click(
        fn=search,
        inputs=[
            all_keywords, any_keywords, exclude_keywords,
            author, post_time, forum, keyword_location,
            sort_by, items_per_page
        ],
        outputs=output_text
    )
    
    # 简化取消按钮的实现
    def cancel_action():
        # 在这里可以添加任何取消操作,例如重置输入或关闭应用
        return "", "", "", "", "全部时间", "所有版块", "帖子的任何地方", "按相关度排序", "每页显示 15 条"
    
    cancel_button.click(
        fn=cancel_action,
        inputs=None,
        outputs=[all_keywords, any_keywords, exclude_keywords, author, post_time, forum, keyword_location, sort_by, items_per_page]
    )

# 启动界面
demo.launch()

原始图
在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到