python系列&deep_study系列：Gradio中文教程（八）Reactive Interfaces

Gradio中文教程（八）Reactive Interfaces

• Gradio中文教程（八）Reactive Interfaces
• • 响应式接口
  • • 实时接口
    • 流式组件

---

Gradio中文教程（八）Reactive Interfaces

响应式接口

最后，我们将介绍如何使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) 的区别在于，第一个 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) 输出组件可以接收由生成器函数逐块生成的音频数据流，并将它们合并成一个单一的音频文件。

import gradio as gr
from pydub import AudioSegment
from time import sleep

with gr.Blocks() as demo:
    input_audio = gr.Audio(label="Input Audio", type="filepath", format="mp3")
    with gr.Row():
        with gr.Column():
            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
                        sleep(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():
            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
                            sleep(1)
                        else:
                            break
            stream_as_bytes_btn.click(stream_bytes, input_audio, stream_as_bytes_output)

if __name__ == "__main__":
    demo.queue().launch()

有关更详细的示例，请参阅我们关于使用Gradio进行自动语音识别的指南。

---

老刘

Gradio中文教程（八）Reactive Interfaces