Gradio官方学习文档（三）-Blocks

一、块和事件监听器

📌是引用；💭 是个人观点

块的结构：

块相对于其他结构来说，更灵活，更具备自定义的多样性。
📌
基本使用：

import gradio as gr


def greet(name):
    return "Hello " + name + "!"

#和interface不同的是，可以自定义label的名称，以及单个部件的构建
with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()

也可以在采用一个装饰器来在内部定义函数：

import gradio as gr


with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
	#在这里定义了一个装饰器，只需要写入输入参数和输出参数即可
    @greet_btn.click(inputs=name, outputs=output)
    def greet(name):
        return "Hello " + name + "!"

demo.launch()

显示结果如下：

💭Blocks相比较Interface来说，一个很明显的不同就是，Blocks可以自定义button，而Inerface模块基本使用就含有clear按钮和submit两个按钮。
interface模块ui如下：

二、事件侦听器和交互性

1.交互性：

在上面的示例中，您会注意到您可以编辑Name Textbox ，但不能编辑Output Textbox 。这是因为任何充当事件侦听器输入的组件都是交互式的。但是，由于Output Textbox 仅充当输出，因此 Gradio 确定不应将其设置为交互式。您可以覆盖默认行为，并使用 boolean 关键字参数interactive直接配置组件的交互性。📌

output = gr.Textbox(label="Output", interactive=True)

💭在这里的interactive关键字在Textbox组件中，标识是否是可交互。（即用户可否编辑）

2.事件侦听器

💭和之前提到的Interface中的及时响应（具体看Gradio官方学习文档（一））是一样的结果，但用法不同，这里采用事件监听器这个名称，具体用法是在上述代码中with gr.Blocks() as demo:下删除button相关的代码，添加inp.change(welcome, inp, out)，必须是对输入做监听。
代码示例：

with gr.Blocks() as demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

📌该函数不是通过单击触发，而是通过键入文本框来触发。这是由于事件侦听器造成的。不同的组件支持不同的事件侦听器。例如，组件支持事件侦听器，该侦听器在用户按下播放键时触发。请参阅文档，了解每个组件的事件侦听器。

三、多个数据流

📌Blocks 应用不像 Interfaces 那样局限于单个数据流。请看下面的演示代码：
`

import gradio as gr

`def increase(num):`
    `return num + 1`

`with gr.Blocks() as demo:`
    `a = gr.Number(label="a")`
    `b = gr.Number(label="b")`
    `atob = gr.Button("a > b")`
    `btoa = gr.Button("b > a")`
    `atob.click(increase, a, b)`
    `btoa.click(increase, b, a)`

`demo.launch()`

💭这里也就是说，一个组件并不仅仅是输入或者是输出，可以作为一个数据流的输入和另一个数据流的输出。

📌举例：下面是一个“多步骤”演示示例，其中一个模型（语音转文本模型）的输出被馈送到下一个模型（情绪分类器）中。
代码：

from transformers import pipeline

import gradio as gr

asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")


def speech_to_text(speech):
    text = asr(speech)["text"]
    return text


def text_to_sentiment(text):
    return classifier(text)[0]["label"]


demo = gr.Blocks()

with demo:
    audio_file = gr.Audio(type="filepath")
    text = gr.Textbox()
    label = gr