【Gradio】Building With Blocks 块和事件监听器

我们在快速入门中简要描述了 Blocks 类，作为构建自定义演示的一种方式。让我们更深入地研究。

 Blocks 结构 

看看下面的演示。

import gradio as gr  # 导入gradio库，用于创建交云式Web应用界面


# 定义一个函数，接受一个名字作为输入，返回一个问候语
def greet(name):
    return "Hello " + name + "!"  # 拼接问候语


# 使用‘with’语法和Blocks API构造Gradio界面
with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")  # 创建一个文本框，用于输入名字
    output = gr.Textbox(label="Output Box")  # 创建一个文本框，用于显示问候语输出
    greet_btn = gr.Button("Greet")  # 创建一个按钮，点击后将触发问候语函数
    # 为按钮设置点击事件，绑定greet函数，指定输入为name文本框，输出到output文本框
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")


demo.launch()  # 启动Gradio界面

代码使用了Gradio的Blocks API来构建一个简单的交互式Web页面，页面包含一个输入框、一个输出框和一个按钮。用户在输入框中输入名字，点击按钮后，页面会在输出框中显示相应的问候语："Hello [输入的名字]!"。这是通过绑定按钮的点击事件到一个自定义的greet函数实现的，greet函数接收输入框中的名字作为参数，并返回构造的问候语。最后，通过调用.launch()方法来启动和展示Gradio界面。这个界面可以作为一个交互式的问候工具。

• 首先，注意 with gr.Blocks() as demo: 条款。Blocks 应用程序代码将包含在此条款中。

• 接下来是组件。这些是在 Interface 中使用的相同组件。但是，组件不是被传递给某个构造函数，而是在 with 子句中创建块时自动添加的。

• 最后是 click() 事件监听器。事件监听器定义了应用程序内的数据流。在上面的例子中，监听器将两个文本框连接在一起。文本框 name 作为输入，文本框 output 作为输出到 greet 方法。当点击按钮 greet_btn 时，会触发这个数据流。就像一个接口，事件监听器可以有多个输入或输出。

您还可以使用装饰器附加事件监听器 - 跳过 fn 参数并直接分配 inputs 和 outputs ：

import gradio as gr  # 导入gradio模块，用于构建交互式的Web应用


# 使用gr.Blocks创建一个布局，这允许我们更灵活地设计页面
with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")  # 创建一个标签为"Name"的文本框用于用户输入名字
    output = gr.Textbox(label="Output Box")  # 创建一个标签为"Output Box"的文本框用于显示输出
    greet_btn = gr.Button("Greet")  # 创建一个文本为"Greet"的按钮


    # 定义点击"greet_btn"按钮时触发的行为
    @greet_btn.click(inputs=name, outputs=output) 
    def greet(name):  # 定义一个问候函数，输入参数是name
        return "Hello " + name + "!"  # 拼接问候语并返回


demo.launch()  # 启动demo，展现定义好的交云界面

事件监听和交互性 

在上面的例子中，您会注意到您可以编辑文本框 name ，但不能编辑文本框 output 。这是因为任何作为事件监听器输入的组件都会变得可交互。然而，由于文本框 output 仅作为输出，Gradio 决定不应该使其可交互。您可以覆盖默认行为，并直接使用布尔 interactive 关键字参数配置组件的交互性。

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

注意：如果 Gradio 组件既不是输入也不是输出会怎样？如果一个组件被构造了一个默认值，那么它被假定为显示内容并且被渲染为非交互式。否则，它被渲染为交互式。同样，这种行为可以通过为 interactive 参数指定一个值来覆盖。

事件监听器类型 

看看下面的演示：

import gradio as gr  # 导入gradio库


# 定义一个欢迎函数，接收用户输入的名字
def welcome(name):
    return f"Welcome to Gradio, {name}!"  # 返回带有用户名字的欢迎信息


# 使用gr.Blocks创建交互界面的布局
with gr.Blocks() as demo:
    gr.Markdown(  # 创建一个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)  # 绑定inp文本框的内容改变事件到欢迎函数


demo.launch()  # 启动应用，显示交互界面

此段代码采用Gradio的Blocks API构建了一个简单的Web应用。它包含一个Markdown组件来显示一段欢迎信息和说明文字，一个输入框inp供用户输入名字，一个输出框out用来显示根据用户输入生成的欢迎信息。当用户在inp文本框中输入名字时，绑定到该文本框的change事件被触发，执行welcome函数。该函数根据用户输入的名字返回一条欢迎信息，然后这条信息自动出现在out文本框中。

不是由点击触发，而是由在文本框 inp 中输入触发 welcome 函数。这是由于 change() 事件监听器。不同的组件支持不同的事件监听器。例如， Video 组件支持 play() 事件监听器，当用户按下播放时触发。查看每个组件的事件监听器文档。

多重数据流 

Blocks 应用程序不像接口那样仅限于单一数据流。请看下面的演示：

import gradio as gr  # 导入gradio库


# 定义一个增加函数，将输入数值加一
def increase(num):
    return num + 1


# 使用gr.Blocks来创建布局
with gr.Blocks() as demo:
    a = gr.Number(label="a")  # 创建一个数字输入框，标签为"a"
    b = gr.Number(label="b")  # 创建另一个数字输入框，标签为"b"
    atob = gr.Button("a > b")  # 创建一个按钮，表示将"a"的值增加后显示在"b"
    btoa = gr.Button("b > a")  # 创建另一个按钮，表示将"b"的值增加后显示在"a"
    
    # 当点击"atob"按钮时，调用increa