Gradio Agents & MCP Hackathon

获奖者
Gradio logo
  1. 附加功能
  2. 流式输出

流式输出

在某些情况下,您可能希望流式传输一系列输出,而不是一次性显示单个输出。例如,您可能有一个图像生成模型,并且您希望在每个步骤中显示生成的图像,直到最终图像。或者您可能有一个聊天机器人,它一次流式传输一个响应标记,而不是一次性返回所有响应。

在这种情况下,您可以向 Gradio 提供一个**生成器**函数,而不是普通函数。在 Python 中创建生成器非常简单:函数不是返回单个`return`值,而是`yield`一系列值。通常`yield`语句会放在某种循环中。这里有一个简单的生成器示例,它只是计数到给定数字

def my_generator(x):
    for i in range(x):
        yield i

您以与普通函数相同的方式向 Gradio 提供生成器。例如,这里是一个(假)图像生成模型,它在输出图像之前会生成几步噪声,使用`gr.Interface`类

import gradio as gr
import numpy as np
import time

def fake_diffusion(steps):
    rng = np.random.default_rng()
    for i in range(steps):
        time.sleep(1)
        image = rng.random(size=(600, 600, 3))
        yield image
    image = np.ones((1000,1000,3), np.uint8)
    image[:] = [255, 124, 0]
    yield image

demo = gr.Interface(fake_diffusion,
                    inputs=gr.Slider(1, 10, 3, step=1),
                    outputs="image")

demo.launch()

请注意,我们在迭代器中添加了一个 `time.sleep(1)` 来在步骤之间创建人工暂停,以便您能够观察迭代器的步骤(在真实的图像生成模型中,这可能没有必要)。

同样,Gradio 可以处理流式输入,例如,一个图像生成模型,每次用户在文本框中输入一个字母时都会重新运行。这在我们的构建响应式界面指南中有更详细的介绍。

流式媒体

Gradio 可以直接从您的生成器函数流式传输音频和视频。这让您的用户几乎可以在您的函数`yield`出音频或视频时立即听到或看到它。您只需:

  1. 在您的`gr.Audio`或`gr.Video`输出组件中设置`streaming=True`。
  2. 编写一个 Python 生成器,生成下一个音频或视频的“块”。
  3. 设置`autoplay=True`,以便媒体自动播放。

对于音频,“下一个块”可以是 `.mp3` 或 `.wav` 文件,也可以是音频的 `bytes` 序列。对于视频,“下一个块”必须是 `.mp4` 文件或带有 `h.264` 编解码器且扩展名为 `.ts` 的文件。为了流畅播放,请确保块长度一致且大于 1 秒。

我们以一些简单的例子来结束,以说明这些要点。

流式音频

import gradio as gr
from time import sleep

def keep_repeating(audio_file):
    for _ in range(10):
        sleep(0.5)
        yield audio_file

gr.Interface(keep_repeating,
             gr.Audio(sources=["microphone"], type="filepath"),
             gr.Audio(streaming=True, autoplay=True)
).launch()

流式视频

import gradio as gr
from time import sleep

def keep_repeating(video_file):
    for _ in range(10):
        sleep(0.5)
        yield video_file

gr.Interface(keep_repeating,
             gr.Video(sources=["webcam"], format="mp4"),
             gr.Video(streaming=True, autoplay=True)
).launch()

端到端示例

有关流媒体的端到端示例,请参阅从视频进行对象检测的指南,或使用transformers流式传输 AI 生成音频的指南