1. 构建界面
  2. 响应式界面

响应式界面

最后，我们将介绍如何让 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.Interface(live=True) 时，gr.Audio(source='microphone') 和 gr.Audio(source='microphone', streaming=True) 之间的区别在于，第一个组件会在用户停止录制时自动提交数据并运行 Interface 函数，而第二个组件会在录制*期间*持续发送数据并运行 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,
    api_name="predict",
)
demo.launch()

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

←

界面状态

四种界面类型

→
gradio