响应式界面

最后，我们将介绍如何让 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 执行自动语音识别的指南。