HuggingFace课程：深入理解Gradio Blocks框架-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01135/article/details/148756093

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：适合构建复杂的多步骤应用，提供完整的布局控制和数据流管理

Blocks的核心优势

布局定制：可以自由安排组件位置，创建多标签页、多行多列布局
事件处理：精细控制各种用户交互事件
状态管理：支持复杂的数据流和多步骤处理
组件属性动态更新：可以运行时修改组件属性

基础Blocks示例

让我们从一个简单的文本翻转示例开始：

import gradio as gr

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

with gr.Blocks() as demo:
    gr.Markdown("""
    # 文本翻转演示
    在下方输入文本查看效果
    """)
    input_box = gr.Textbox(placeholder="输入要翻转的文本")
    output_box = gr.Textbox()
    
    input_box.change(fn=flip_text, inputs=input_box, outputs=output_box)

demo.launch()

这个例子展示了Blocks的四个基本概念：

在with gr.Blocks()上下文中创建组件
定义处理函数（这里是简单的文本翻转）
为组件绑定事件处理
自动确定组件的交互性

布局定制详解

Blocks提供了多种布局组件：

行布局(Row)

with gr.Row():
    component1 = gr.Textbox()
    component2 = gr.Textbox()

列布局(Column)

with gr.Column():
    component1 = gr.Textbox()
    component2 = gr.Textbox()

标签页(Tabs)

with gr.Tabs():
    with gr.TabItem("标签1"):
        # 标签1内容
    with gr.TabItem("标签2"):
        # 标签2内容

事件处理机制

Blocks中的每个组件都支持特定的事件：

文本框：change、submit
按钮：click
音频组件：play、pause、stop等

事件绑定语法：

component.event(fn=处理函数, inputs=[输入组件], outputs=[输出组件])

多步骤处理示例

Blocks特别适合构建多步骤处理流程：

from transformers import pipeline
import gradio as gr

asr = pipeline("automatic-speech-recognition")
classifier = pipeline("text-classification")

def speech_to_text(speech):
    return asr(speech)["text"]

def text_to_sentiment(text):
    return classifier(text)[0]["label"]

with gr.Blocks() as demo:
    audio_input = gr.Audio(type="filepath")
    text_output = gr.Textbox()
    sentiment_output = gr.Label()
    
    btn1 = gr.Button("语音转文本")
    btn2 = gr.Button("分析情感")
    
    btn1.click(speech_to_text, inputs=audio_input, outputs=text_output)
    btn2.click(text_to_sentiment, inputs=text_output, outputs=sentiment_output)

demo.launch()

动态更新组件属性

Blocks允许运行时动态更新组件属性：

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)
    else:
        return gr.Textbox.update(visible=False)

with gr.Blocks() as demo:
    radio = gr.Radio(["short", "long", "none"], label="选择文本框类型")
    textbox = gr.Textbox(lines=2, interactive=True)
    radio.change(fn=update_textbox, inputs=radio, outputs=textbox)