HuggingFace教程：使用Gradio Blocks构建交互式机器学习应用

张涓曦Sea

于 2025-06-10 09:02:26 发布

阅读量258

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00672/article/details/148549322

HuggingFace教程：使用Gradio Blocks构建交互式机器学习应用

notebooks Notebooks using the Hugging Face libraries 🤗 项目地址: https://gitcode.com/gh_mirrors/note/notebooks

什么是Gradio Blocks

Gradio Blocks是Gradio库中的高级API，它允许开发者以更灵活的方式构建复杂的交互式界面。与Gradio的Interface API相比，Blocks提供了更细粒度的控制能力，可以创建包含多个输入输出组件、选项卡布局、条件显示等复杂交互逻辑的应用。

基础文本翻转示例

让我们从一个简单的文本翻转应用开始，了解Blocks的基本结构：

import gradio as gr

def flip_text(x):
    return x[::-1]  # 将输入文本反转

demo = gr.Blocks()

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

demo.launch()

这个例子展示了Blocks的几个关键特性：

使用gr.Blocks()创建应用容器
在with语句块中定义界面布局
使用gr.Markdown添加富文本说明
定义输入输出组件并建立交互关系

多选项卡应用开发

Blocks的强大之处在于可以构建包含多个功能模块的复杂应用。下面是一个同时处理文本和图像翻转的示例：

import numpy as np
import gradio as gr

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

def flip_image(x):
    return np.fliplr(x)  # 水平翻转图像

demo = gr.Blocks()

with demo:
    gr.Markdown("翻转文本或图像的演示应用")
    with gr.Tabs():  # 创建选项卡容器
        with gr.TabItem("文本翻转"):
            with gr.Row():  # 水平排列组件
                text_input = gr.Textbox()
                text_output = gr.Textbox()
            text_button = gr.Button("翻转")
        
        with gr.TabItem("图像翻转"):
            with gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            image_button = gr.Button("翻转")
    
    # 绑定按钮事件
    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

这个例子展示了：

使用gr.Tabs()创建多选项卡界面
使用gr.Row()实现组件水平布局
为不同功能模块分别定义交互逻辑

集成预训练模型

Gradio Blocks可以轻松集成各种预训练模型。下面是一个使用GPT-J 6B模型进行文本生成的例子：

import gradio as gr

# 加载HuggingFace模型
api = gr.Interface.load("EleutherAI/gpt-j-6B")

def complete_with_gpt(text):
    # 使用最后50个字符作为上下文
    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)

demo.launch()

语音识别与情感分析管道

下面是一个更复杂的例子，结合了语音识别和文本情感分析：

from transformers import pipeline
import gradio as gr

# 初始化语音识别和文本分类管道
asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")

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

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

demo = gr.Blocks()

with demo:
    audio_file = gr.Audio(type="filepath")
    text = gr.Textbox()
    label = gr.Label()
    
    b1 = gr.Button("语音识别")
    b2 = gr.Button("情感分析")
    
    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

demo.launch()

动态界面控制

Gradio Blocks支持根据用户输入动态调整界面。下面的例子展示了如何根据选择动态改变文本框大小：

import gradio as gr

def change_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 block:
    radio = gr.Radio(
        ["short", "long", "none"], 
        label="您想写什么类型的文章？"
    )
    text = gr.Textbox(lines=2, interactive=True)
    
    radio.change(fn=change_textbox, inputs=radio, outputs=text)
    block.launch()