入门 Eva J Patel（freeCodeCamp） 2026-09-10 16:14:02 · 0 阅读

第12章多模态媒体处理：图像、音频与视频

文本只是信息的一种形式。现代 AI 应用还经常处理图像、音频和视频。

例如：

图像分类器
语音转写工具
图像生成器
目标检测系统
语音助手
视频分析工具
无障碍应用

Gradio 提供了相关组件，能大幅简化这类应用的快速原型开发。

图像处理

最基础的图像组件是：

image = gr.Image()

示例：

import gradio as gr

def describe_image(image):
    return "Image received."

with gr.Blocks() as demo:
    image = gr.Image(
        label="Upload an image"
    )

    button = gr.Button("Analyze")

    output = gr.Textbox()

    button.click(
        fn=describe_image,
        inputs=image,
        outputs=output
    )

demo.launch()

Python 函数会根据组件配置接收图像数据。

图像输入类型

根据配置和 Gradio 版本不同，图像可以以不同形式传入。

一种常见形式是 NumPy 数组：

image = gr.Image(type="numpy")

另一种是文件路径：

image = gr.Image(type="filepath")

选哪种取决于你的模型或处理库需要什么。

如果用的是基于 NumPy 数组的计算机视觉库，NumPy 形式更方便。

如果下游库需要文件路径，那 filepath 更合适。

简单图像处理

下面来做一个灰度转换器。

from PIL import Image, ImageOps
import gradio as gr

def grayscale(image):
    if image is None:
        return None

    return ImageOps.grayscale(image)

with gr.Blocks() as demo:
    input_image = gr.Image(
        type="pil",
        label="Original Image"
    )

    button = gr.Button("Convert to Grayscale")

    output_image = gr.Image(
        type="pil",
        label="Grayscale Image"
    )

    button.click(
        fn=grayscale,
        inputs=input_image,
        outputs=output_image
    )

demo.launch()

这里展示了一个很实用的模式：

Image input
→ Python image processing
→ Image output

图像分类

假设你有一个机器学习模型，能预测出：

cat
dog
horse
bird

你的 Gradio 应用可以这样写：

image = gr.Image()
button = gr.Button("Classify")
result = gr.Label()

函数负责执行推理：

def classify(image):
    prediction = model(image)

    return prediction

模型与 Gradio 是解耦的。

这是一个重要的架构思想：Gradio 负责界面，Python 代码负责应用逻辑，模型负责推理，各司其职。

图像输出画廊

如果应用需要展示多张图片，用 Gallery 组件。

gallery = gr.Gallery(
    label="Results"
)

例如：

def generate_variations(image):
    return [image, image, image]

实际场景中，这些通常是经过变换或生成的图片。

音频输入

Gradio 的 Audio 组件可以收集录制或上传的音频。

audio = gr.Audio(
    label="Record or upload audio"
)

一个语音转写应用可能长这样：

import gradio as gr

def transcribe(audio):
    if audio is None:
        return "No audio provided."

    return "Transcription would appear here."

with gr.Blocks() as demo:
    audio = gr.Audio(
        label="Audio"
    )

    button = gr.Button("Transcribe")

    output = gr.Textbox(
        label="Transcript",
        lines=10
    )

    button.click(
        fn=transcribe,
        inputs=audio,
        outputs=output
    )

demo.launch()

音频格式

音频有多种不同的格式。

你的模型或处理库可能要求特定的格式，也可能需要先对输入做转换再处理。

例如，一个音频处理流水线可能是这样：

Audio upload
→ Decode audio
→ Resample
→ Normalize
→ Model
→ Transcript

Gradio 负责界面层，这些转换工作则由你的 Python 代码完成。

语音识别

典型的语音识别应用会使用预训练模型。

基本结构大致如下：

def transcribe(audio):
    waveform = load_audio(audio)
    transcript = model(waveform)

    return transcript

具体的模型代码取决于你使用的库。

Gradio 不要求你必须用某个特定的机器学习框架。

视频输入

视频组件的用法类似：

video = gr.Video(
    label="Upload video"
)

然后你的函数就可以对视频进行分析。

可能的应用场景包括：

动作识别
目标检测
场景分析
教学视频处理
视频摘要

视频处理可能开销很大

与处理单张图片不同，一段视频可能包含数千帧，逐帧处理的成本会非常高。

实际做法往往是采样部分帧，而不是分析每一帧。

例如：

def sample_frames(video):
    ...

具体实现取决于你使用的计算机视觉工具。

媒体输出

媒体组件同样可以展示结果。

例如：

output_image = gr.Image()

或者：

output_audio = gr.Audio()

或者：

output_video = gr.Video()

这意味着 Gradio 能够支持完整的媒体处理流程。

媒体与文本的组合

许多 AI 应用会同时输出媒体和文本。

一个图像分类器可能返回：

Prediction: Golden Retriever
Confidence: 96%

以及原始图像或标注后的图像。

你的函数可以返回多个输出：

return prediction, confidence, annotated_image

界面中可以用不同组件分别展示它们。

示例：图像分析界面

import gradio as gr

def analyze(image):
    if image is None:
        return "No image provided.", 0, None

    prediction = "Example class"
    confidence = 0.95
    processed = image

    return prediction, confidence, processed

with gr.Blocks() as demo:
    gr.Markdown("# Image Analyzer")

    image = gr.Image(
        label="Input Image"
    )

    button = gr.Button("Analyze")

    prediction = gr.Textbox(
        label="Prediction"
    )

    confidence = gr.Number(
        label="Confidence"
    )

    processed = gr.Image(
        label="Processed Image"
    )

    button.click(
        fn=analyze,
        inputs=image,
        outputs=[
            prediction,
            confidence,
            processed
        ]
    )

demo.launch()

媒体输入校验

用户可能会：

上传不支持的格式
提供损坏的文件
提交空输入
提供体积过大的媒体文件

对这些情况都要做校验。不要对用户的操作做假设，以免导致应用出错。

图像与文本输入的组合

多模态应用通常需要两者兼备。

例如：

def answer_question(image, question):
    ...

界面中可以包含：

image = gr.Image()
question = gr.Textbox()
button = gr.Button("Ask")
answer = gr.Textbox()

然后：

button.click(
    fn=answer_question,
    inputs=[image, question],
    outputs=answer
)

这个模式是视觉问答应用的基础。

示例：视觉问答

即使没有真实模型，也能展示其结构：

import gradio as gr

def answer_question(image, question):
    if image is None:
        return "Please upload an image."

    if not question.strip():
        return "Please ask a question."

    return (
        f"You asked: {question}\n"
        "A vision model would analyze the image here."
    )

with gr.Blocks() as demo:
    image = gr.Image(
        label="Image"
    )

    question = gr.Textbox(
        label="Question"
    )

    button = gr.Button("Ask")

    answer = gr.Textbox(
        label="Answer",
        lines=6
    )

    button.click(
        fn=answer_question,
        inputs=[image, question],
        outputs=answer
    )

demo.launch()

之后，可以用真实的多模态模型替换占位逻辑。

媒体与机器学习

Gradio 不关心你的模型来自哪里：

PyTorch
TensorFlow
scikit-learn
Transformers
某个 API
自定义 Python 函数

接口层基本不变。这种分离正是 Gradio 最大的优势之一。

动手试试

构建一个具备三项功能的图像工具：

图像上传
灰度转换
查看图像尺寸

应用应显示处理后的图像及其宽高。

再加一个文本输入框，让用户可以就图像提问。

暂时不需要真实的视觉模型，先返回占位响应来练习界面设计。

要点总结

gr.Image 支持基于图像的应用。
gr.Audio 支持录制和上传的音频。
gr.Video 支持视频处理流程。
媒体组件既可以作为输入，也可以作为输出。
根据配置不同，图像数据可以有多种表示形式。
媒体处理通常需要进行校验和格式转换。
相比单张图像，视频的计算开销要大得多。
多模态应用可以把媒体和文本输入结合起来。

第11章文件上传与文件处理

第13章聊天机器人与 gr.ChatInterface

本篇用到的工具

Gradio

用Python构建并分享令人愉悦的机器学习应用，🌟 点亮Star支持我们！

第12章 多模态媒体处理：图像、音频与视频