HuggingFace课程：深入理解Gradio Blocks框架

宣连璐Maura

于 2025-06-19 09:14:12 发布

阅读量278

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00152/article/details/148756195

HuggingFace课程：深入理解Gradio Blocks框架

course The Hugging Face course on Transformers 项目地址: https://gitcode.com/gh_mirrors/cou/course

什么是Gradio Blocks

Gradio Blocks是Gradio库提供的一个底层API，它允许开发者以更灵活的方式构建交互式机器学习演示应用。与高级API Interface 相比，Blocks提供了更细粒度的控制能力，让开发者能够创建复杂的多步骤应用和自定义布局。

Blocks与Interface的核心区别

Interface 和 Blocks 是Gradio提供的两种不同抽象级别的API：

Interface：高级API，适合快速创建简单演示
- 只需定义输入和输出组件
- 自动生成完整界面
- 适合单一功能的简单应用
Blocks：低级API，提供完全控制能力
- 可自定义布局和组件排列
- 支持多步骤交互流程
- 可动态修改组件属性
- 适合构建复杂应用

Blocks的核心概念

1. 上下文管理器模式

Blocks采用Python的with语句作为上下文管理器，这种设计使得界面构建更加直观：

with gr.Blocks() as demo:
    # 在这里添加组件
    gr.Markdown("## 我的应用标题")
    input = gr.Textbox()
    output = gr.Textbox()

2. 组件渲染顺序

在Blocks中，组件的渲染顺序与代码中的创建顺序一致。这种声明式的方式让界面构建更加直观。

3. 事件绑定机制

Blocks允许将Python函数绑定到组件事件上：

def process(input_text):
    return input_text.upper()

input.change(fn=process, inputs=input, outputs=output)

4. 交互性判断

Blocks会自动判断组件的交互性：

作为输入的组件默认为交互式
仅作为输出的组件默认为非交互式
可通过interactive参数手动覆盖

布局控制

Blocks提供了多种布局控制方式：

1. 行布局(Row)

with gr.Row():
    gr.Textbox(label="输入1")
    gr.Textbox(label="输入2")

2. 列布局(Column)

with gr.Column():
    gr.Markdown("## 第一部分")
    gr.Image()

3. 标签页(Tabs)

with gr.Tabs():
    with gr.TabItem("文本处理"):
        gr.Textbox()
    with gr.TabItem("图像处理"):
        gr.Image()

高级功能

1. 多步骤流程

Blocks支持构建多步骤处理流程：

# 第一步：语音转文本
b1.click(speech_to_text, inputs=audio, outputs=text)

# 第二步：情感分析
b2.click(text_to_sentiment, inputs=text, outputs=label)

2. 动态组件更新

可以通过update()方法动态修改组件属性：

def update_textbox(choice):
    if choice == "short":
        return gr.Textbox.update(lines=2, visible=True)
    elif choice == "long":
        return gr.Textbox.update(lines=8, visible=True)

3. 复杂事件处理

Blocks支持多种事件类型：

change：值改变时触发
submit：用户提交时触发
click：按钮点击时触发
组件特定事件（如音频的播放、暂停等）

实际应用示例

文本翻转应用

def flip_text(x):
    return x[::-1]

with gr.Blocks() as demo:
    input = gr.Textbox(placeholder="输入要翻转的文本")
    output = gr.Textbox()
    input.change(fn=flip_text, inputs=input, outputs=output)

多标签页应用

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.TabItem("文本处理"):
            text_input = gr.Textbox()
            text_output = gr.Textbox()
        with gr.TabItem("图像处理"):
            image_input = gr.Image()
            image_output = gr.Image()

GPT文本补全

def complete_with_gpt(text):
    return text[:-50] + api(text[-50:])

with gr.Blocks() as demo:
    textbox = gr.Textbox(placeholder="输入文本...", lines=4)
    btn = gr.Button("生成")
    btn.click(complete_with_gpt, textbox, textbox)