【Gradio】Reactive Interfaces 响应式接口

最后，我们介绍如何让 Gradio 演示自动刷新或连续流式传输数据。

实时接口

您可以通过在接口中设置 live=True 来使接口自动刷新。现在，接口将在用户输入更改时立即重新计算。

import gradio as gr  # 导入gradio库，用于构建web应用界面


# 定义一个计算器函数，根据不同的操作执行不同的计算
def calculator(num1, operation, num2):
    # 判断用户选择的运算类型，并根据类型执行相应的数学运算
    if operation == "add":  # 如果选择加法
        return num1 + num2  # 返回两数之和
    elif operation == "subtract":  # 如果选择减法
        return num1 - num2  # 返回两数之差
    elif operation == "multiply":  # 如果选择乘法
        return num1 * num2  # 返回两数之积
    elif operation == "divide":  # 如果选择除法
        return num1 / num2  # 返回两数之商


# 创建一个Gradio界面，用于用户输入和显示计算结果
demo = gr.Interface(
    calculator,  # 指定后端处理函数为calculator
    [  # 定义输入控件
        "number",  # 第一个输入控件：数字输入，用于输入第一个操作数
        gr.Radio(["add", "subtract", "multiply", "divide"]),  # 第二个输入控件：单选按钮，用于选择运算类型
        "number"  # 第三个输入控件：数字输入，用于输入第二个操作数
    ],
    "number",  # 定义输出控件为数字显示，用于展示计算结果
    live=True,  # 设置为实时模式，用户每次输入后会自动计算并更新结果
)
demo.launch()  # 启动界面

这段代码创建了一个简单的在线计算器，允许用户通过web界面执行基本的数学运算（加、减、乘、除）。用户可以输入两个数值和选择一个运算符，界面将实时显示计算结果。Gradio库使得创建这样的交互式界面变得简单快捷。gr.Radio输入控件用于选择操作类型，而设定live=True使得每次用户的输入变化后，接口都会自动重新计算并更新显示结果，不需要手动触发。

注意这里没有提交按钮，因为界面会在更改时自动重新提交。

流媒体组件

一些组件具有“流媒体”模式，例如音频组件在麦克风模式下或图像组件在网络摄像头模式下。流媒体意味着数据连续地发送到后端，并且界面函数不断地重新运行。

gr.Audio(source='microphone') 和 gr.Audio(source='microphone', streaming=True) 之间的区别在于，当两者都用于 gr.Interface(live=True) 时，第一个组件将自动提交数据并在用户停止录制时运行界面函数，而第二个组件将在录制期间连续发送数据并运行界面函数。

以下是从网络摄像头流媒体图像的示例代码。

import gradio as gr  # 导入gradio库，用于构建web应用界面
import numpy as np  # 导入numpy库，用于执行数组操作


# 定义一个函数，用于翻转图像
def flip(im):
    return np.flipud(im)  # 使用numpy的flipud函数上下翻转图像


# 创建Gradio界面
demo = gr.Interface(
    flip,  # 指定处理图像的函数为flip
    gr.Image(sources=["webcam"], streaming=True),  # 定义输入控件为图像输入，允许用户通过摄像头捕获图像，开启实时流传输
    "image",  # 定义输出控件为图像显示
    live=True  # 设置为实时模式，当用户通过摄像头捕获图像时，界面会自动处理并显示翻转后的图像
)
demo.launch()  # 启动界面

此代码段实现了一个简单的图像处理界面，允许用户通过他们的网络摄像头捕获图像，并实时展示该图像的上下翻转效果。它依赖于gradio库来创建用户交互界面和numpy库来处理图像数据。np.flipud函数用于将输入图像在垂直方向上翻转。通过设置streaming=True，界面实现了实时图像流的捕获和显示，与此同时，live=True确保每当捕获到新图像时，都会自动应用翻转效果并更新输出显示。

流媒体也可以在输出组件中进行。gr.Audio(streaming=True) 输出组件可以将生成器函数逐步产生的音频数据流合并成一个音频文件。

import gradio as gr  # 导入gradio库，用于构建web应用界面
from pydub import AudioSegment  # 导入pydub库的AudioSegment，用于音频处理
from time import sleep  # 导入sleep函数，用于暂停执行


# 使用gr.Blocks创建一个自定义布局的Gradio应用
with gr.Blocks() as demo:
    input_audio = gr.Audio(label="Input Audio", type="filepath", format="mp3")  # 创建一个音频输入组件，用户上传mp3文件


    # 使用gr.Row和gr.Column创建布局，这里定义了两列
    with gr.Row():
        with gr.Column():
            # 列1: 文件流式传输
            stream_as_file_btn = gr.Button("Stream as File")  # 创建一个按钮，点击时触发文件流式传输
            format = gr.Radio(["wav", "mp3"], value="wav", label="Format")  # 创建一个单选按钮，让用户选择导出音频的格式
            stream_as_file_output = gr.Audio(streaming=True)  # 创建一个音频输出组件，用于实时播放音频


            # 定义处理音频文件流式传输的函数
            def stream_file(audio_file, format):
                audio = AudioSegment.from_file(audio_file)  # 从文件加载音频
                i = 0
                chunk_size = 1000  # 定义每个音频片段的大小
                while chunk_size * i < len(audio):  # 按片段读取和输出音频
                    chunk = audio[chunk_size * i : chunk_size * (i + 1)]
                    i += 1
                    if chunk:
                        file = f"/tmp/{i}.{format}"  # 临时保存片段文件
                        chunk.export(file, format=format)  # 导出片段为选定格式
                        yield file  # 把文件路径传给stream_as_file_output进行播放
                        sleep(0.5)  # 暂停0.5秒，模拟流式传输


            # 将按钮点击事件与处理函数绑定
            stream_as_file_btn.click(
                stream_file, [input_audio, format], stream_as_file_output
            )


            # 提供示例输入，以便快速测试
            gr.Examples(
                [["audio/cantina.wav", "wav"], ["audio/cantina.wav", "mp3"]],
                [input_audio, format],
                fn=stream_file,
                outputs=stream_as_file_output,
            )


        with gr.Column():
            # 列2: 字节流式传输
            stream_as_bytes_btn = gr.Button("Stream as Bytes")  # 创建一个按钮，点击时触发字节流式传输
            stream_as_bytes_output = gr.Audio(format="bytes", streaming=True)  # 创建一个音频输出组件，用于实时播放字节流


            # 定义处理音频字节流式传输的函数
            def stream_bytes(audio_file):
                chunk_size = 20_000  # 定义每个字节流片段的大小
                with open(audio_file, "rb") as f:  # 以二进制形式读取文件
                    while True:
                        chunk = f.read(chunk_size)
                        if chunk:
                            yield chunk  # 把读取的字节流传给stream_as_bytes_output进行播放
                            sleep(1)  # 暂停1秒，模拟流式传输
                        else:
                            break
            # 将按钮点击事件与处理函数绑定
            stream_as_bytes_btn.click(stream_bytes, input_audio, stream_as_bytes_output)


# 通过队列方式启动Gradio应用，提高并发处理能力
if __name__ == "__main__":
    demo.queue().launch()

此代码通过Gradio库构建了一个交互式的音频处理应用，它包括两个主要功能：

1. 将上传的音频文件分割成小片段，并以选定的音频格式（wav或mp3）流式传输给用户。这是通过stream_file函数实现的。

2. 直接以字节流的形式读取上传的音频文件，并逐块传输给用户，模拟流媒体播放。这是通过stream_bytes函数实现的。

用户上传音频文件后，可以选择是通过文件流方式还是字节流方式来播放。这个示例展示了如何使用Gradio和pydub库进行音频处理和流式传输，同时也演示了如何使用Gradio的Blocks API来创建复杂的布局和交互模式。

查看我们的 Gradio 自动语音识别指南，以获取更详细的示例https://www.gradio.app/guides/real-time-speech-recognition 。