WebUI可视化：第3章：Gradio入门实战

学习目标

✅ 掌握Gradio的安装与基础配置

✅ 能创建包含多种交互组件的界面

✅ 实现前后端数据交互逻辑

✅ 独立开发简单AI应用界面

3.1 Gradio快速安装

3.1.1 通过pip安装

打开终端（Windows：CMD/PowerShell，Mac/Linux：Terminal），执行：

bash

# 基础安装  
pip install gradio  

# 包含额外功能（推荐）  
pip install "gradio[all]"

3.1.2 验证安装

新建文件 test_install.py，写入：

python

import gradio as gr  
print("Gradio版本:", gr.__version__)

运行后看到版本号即成功：

bash

python test_install.py  
# 输出示例：Gradio版本: 3.36.0

3.2 创建第一个交互界面

3.2.1 基础问候程序

新建 hello_gradio.py：

python

import gradio as gr  

def greet(name):  
    return f"你好，{name}！欢迎来到Gradio世界。"  

# 创建界面  
demo = gr.Interface(  
    fn=greet,                # 处理函数  
    inputs=gr.Textbox(label="你的名字"),  
    outputs=gr.Textbox(label="问候语"),  
    title="我的第一个Gradio应用",  
    description="输入名字获取个性化问候"  
)  

demo.launch()

3.2.2 运行与访问

bash

python hello_gradio.py

在浏览器打开 http://localhost:7860，你会看到：

顶部显示标题和描述

左侧文本输入框

右侧结果显示框

底部的”Submit”提交按钮

3.3 核心组件详解

3.3.1 输入组件

组件类型	代码示例	功能说明
文本输入	`gr.Textbox(lines=3)`	支持多行输入的文本框
数字滑块	`gr.Slider(0, 100, step=1)`	范围滑动选择器
下拉选择框	`gr.Dropdown(["苹果","香蕉"])`	单选下拉菜单
文件上传	`gr.File(file_types=["jpg"])`	限制上传JPG文件

3.3.2 输出组件

组件类型	代码示例	适用场景
文本输出	`gr.Textbox()`	显示文字结果
图片展示	`gr.Image(type="pil")`	显示生成的图片
标签高亮	`gr.HighlightedText()`	显示带颜色标记的文本
动态表格	`gr.Dataframe()`	展示结构化数据

3.4 界面布局与样式

3.4.1 使用Blocks布局

python

with gr.Blocks() as demo:  
    gr.Markdown("# 智能问答系统")  
    with gr.Row():  
        input_question = gr.Textbox(label="输入问题")  
        submit_btn = gr.Button("提交")  
    output_answer = gr.Textbox(label="答案")  

    submit_btn.click(  
        fn=answer_question,  
        inputs=input_question,  
        outputs=output_answer  
    )

gr.Row()：水平排列组件

gr.Column()：垂直堆叠组件

3.4.2 自定义CSS样式

在launch()中添加主题：

python

demo.launch(theme=gr.themes.Default(  
    primary_hue="blue",  
    secondary_hue="gray",  
))

或直接注入CSS：

python

css = """  
.important-text {color: red !important;}  
#special-box {border: 2px solid green;}  
"""  
demo = gr.Blocks(css=css)

3.5 事件处理机制

3.5.1 自动绑定（Interface方式）

python

gr.Interface(  
    fn=calculate,  
    inputs=[gr.Number(), gr.Number()],  
    outputs=gr.Number()  
)

自动将输入值按顺序传递给calculate函数

3.5.2 手动绑定（Blocks方式）

python

btn.click(  
    fn=process_data,  
    inputs=[input1, input2],  
    outputs=output,  
    api_name="predict"  # 生成API端点  
)

支持更复杂的多输入多输出场景

3.6 实战项目：BMI计算器

3.6.1 功能需求

输入身高（米）和体重（千克）

计算BMI指数

给出健康建议

3.6.2 完整代码

python

import gradio as gr  

def calculate_bmi(height, weight):  
    bmi = weight / (height ** 2)  
    if bmi < 18.5:  
        status = "偏瘦，建议增加营养"  
    elif 18.5 <= bmi < 24:  
        status = "正常，保持良好习惯"  
    else:  
        status = "偏胖，建议适当运动"  
    return f"BMI: {bmi:.1f} ({status})"  

with gr.Blocks() as demo:  
    gr.Markdown("## BMI健康计算器")  
    with gr.Row():  
        height = gr.Number(label="身高（米）", minimum=0.5, maximum=2.5)  
        weight = gr.Number(label="体重（千克）", minimum=10, maximum=300)  
    submit_btn = gr.Button("计算")  
    output = gr.Textbox(label="分析结果")  

    submit_btn.click(  
        calculate_bmi,  
        [height, weight],  
        output  
    )  

demo.launch()

3.7 调试与优化

3.7.1 常见错误处理

错误1：端口占用

bash

demo.launch(server_port=7861)  # 更换端口

错误2：依赖缺失

bash

pip install numpy pillow  # 根据报错提示安装

错误3：函数参数不匹配

python

# 确保输入组件数量与函数参数一致  
def process(a, b): ...  
inputs=[input_a, input_b]

3.7.2 性能优化技巧

启用队列防止高并发崩溃：

python

demo.queue().launch()

添加加载动画提升体验：

python

btn.click(  
    fn=long_process,  
    inputs=...,  
    outputs=...,  
    api_name="process",  
    status_tracker=gr.StatusTracker(  
        loading_message="正在拼命计算...",  
        show_progress="minimal"  
    )  
)

3.8 进阶项目：天气查询系统

3.8.1 功能扩展

输入城市名称

调用天气API获取数据

显示温度、湿度、天气图标

3.8.2 核心代码片段

python

import requests  

def get_weather(city):  
    api_url = f"http://api.weather.com/{city}"  
    response = requests.get(api_url)  
    data = response.json()  
    return f"{city}当前温度：{data['temp']}℃，天气：{data['status']}"  

gr.Interface(  
    fn=get_weather,  
    inputs=gr.Textbox(label="输入城市"),  
    outputs=gr.Textbox(label="天气信息")  
).launch()