响应式界面

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

实时界面

您可以通过在接口中设置 live=True 来使其自动刷新。现在，只要用户输入发生变化，接口就会重新计算。

import gradio as gr

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

demo = gr.Interface(
    calculator,
    [
        "number",
        gr.Radio(["add", "subtract", "multiply", "divide"]),
        "number"
    ],
    "number",
    live=True,
)
demo.launch()

请注意，没有提交按钮，因为接口会在更改时自动重新提交。

流式组件

某些组件具有“流式传输”模式，例如麦克风模式下的 Audio 组件，或网络摄像头模式下的 Image 组件。流式传输意味着数据会持续发送到后端，并且 Interface 函数会持续重新运行。

当 gr.Audio(source='microphone') 和 gr.Audio(source='microphone', streaming=True) 都用于 gr.Interface(live=True) 时，区别在于第一个 Component 会在用户停止录制时自动提交数据并运行 Interface 函数，而第二个 Component 会在录制期间持续发送数据并运行 Interface 函数。

这是从网络摄像头流式传输图像的示例代码。

import gradio as gr
import numpy as np

def flip(im):
    return np.flipud(im)

demo = gr.Interface(
    flip,
    gr.Image(sources=["webcam"], streaming=True),
    "image",
    live=True
)
demo.launch()

流式传输也可以在输出组件中完成。一个 gr.Audio(streaming=True) 输出组件可以接收由生成器函数分段产生的音频数据流，并将它们组合成一个单独的音频文件。有关详细示例，请参阅我们关于使用 Gradio 执行自动语音识别的指南。