Gradio：让你的AI算法可视化（二）

Gradio使用教程（二）

这篇文章主要用于记录在部署ChatGLM2-6B时，遇到的Gradio常见用法。Gradio version=3.48
Gradio官方教程

Blocks用法

相比于用Interface来创建UI页面，Blocks提供了更加灵活的控制组件，在创建页面之前，需要先添加一句：

with gradio.Blocks():

一个start_demo

接下来我们来利用Blocks创建一个页面

import gradio as gr
def update(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown("Start typing below and then click **Run** to see the output.") #1
    with gr.Row():#2
        inp = gr.Textbox(placeholder="What is your name?")
        out = gr.Textbox()
    btn = gr.Button("Run")
    btn.click(fn=update, inputs=inp, outputs=out)

demo.launch()

这段代码得到的网页如下图所示：

可以发现，在网页的最上面，有一行“Start typing below and then click run to see the output” 这是#1中的gr.Markdown在起作用。gr.Markdown可以让我们在设计网页时，使用markdown语法。
在#2 中，定义了按行（with gr.row():）排列的两个textbox(gr.textbox())，inp用于接收用户输入，out用于返回函数的输出。gr.Button用于创建上图中最下端的“Run”按钮。Button提供了click方法来监听用户的点击事件。

gr.Textbox()

gradio.Textbox(···)

Textbox接收一个str类型的输入，并输出一个str类型的输出。Textbox也提供了一系列的可选参数。如placeholder，它接收一个字符串类型的值，显示在对应的Textbox框里，可以用于提示用户该网页的使用方法；
同样的，Textbox也提供了一系列的事件监听器：
以gr.Textbox.submit为例，它有fn，input，output参数。当用户按下Enter键时，会调用fn，fn会传入用户提交的input来执行并返回给output。这里值得注意的是，input和output是一个Gradio的列表。
除了获取用户文本类型的输入Textbox，Gradio也提供了Number，Image等控件来获取用户其他类型的输入，感兴趣的小伙伴可以看看官方教程: Gradio用户输入和输出控件教程

在上述代码中，我们可以发现，在gr.row()下的控件（两个textbox）是按行排列，随后定义的Button和markdown默认按列排列。所以，gr.Blocks可以让我们灵活的设计控件的位置，让网页更加美观。