Gradio入门教程
原创
什么是Gradio
一个名为 gradio 的 Python 库经常用于 AI 工具，例如以图像生成而闻名的 Stable Diffusion 和因语音合成而备受关注的 RVC。
gradio 具有丰富的 UI 组件集，可以轻松创建用于 AI 和数据分析的复杂 Web UI。
然而，即使你在完全不了解的情况下浏览官方网站，也确实需要时间来理解 gradio 的理念和每个用户界面部分的行为。 因此，在本文中，我想通过屏幕截图和示例源代码来解释使用 gradio 创建 Web UI 的基本理念以及常用部分的行为。
它的特点是只需在一个名为Interface()的方法中指定三点就能轻松创建一个 Web UI 界面：描述要进行处理的函数、用于输入的 UI 部件和用于输出结果的 UI 部件。
另一方面，与其他 Web UI 库相比，gradio 的设计较差，因此不适合创建精细的界面。
虽然 gradio 擅长机器学习演示，但它在机器学习以外的其他用途上也很有效，例如创建转换和处理文件的工具。
gradio 中有很多有用的用户界面部件和功能。
本文不可能一一解释，因此请阅读本网站的文章，然后从 Gradio官方网站：获取所需的信息。
如何安装
和其他的Python库一样，安装十分方便，运行一下命令即可安装
pip install gradio使用时只需要导入这个库即可
import gradio as gr
WebUI创建的三个步骤
在回调函数中，描述屏幕布局中按下按钮时要调用的函数。
创建屏幕布局时，请描述要在屏幕上显示的用户界面部分，以及按下按钮或其他对象时的操作（要调用的回调函数名称）。
要启动 Web UI，只需调用 launch() 方法，该方法会启动一个简单的 Web 服务器，并使 Web UI 显示在浏览器中。我在前面提到过，如果你在调用 launch() 方法后在浏览器地址栏中输入 http://127.0.0.1:7860，你创建的 Web UI 就会显示出来，但是通过为 inborwser 参数指定 True，你可以强制浏览器显示 Web UI。 通过为 inborwser 参数指定 True，可以强制在浏览器中显示 Web UI。
webui.launch(inbrowser=True)
gradio 的基本配置
如果你按照刚才描述的三个步骤编写一个程序，它将如下所示
import gradio as gr
# 定义回调函数
def my_func(my_name, is_disp, my_value):
return f"### {my_name} ###", my_value * 100
# 使用Interface定义页面布局
demo = gr.Interface(
fn=my_func,
inputs=["text", "checkbox", gr.Slider(0, 100)],
outputs=["text", "number"]
)
# Web UI启动
demo.launch(inbrowser=True)在 (gr.Intaerace) 方法的inputs参数中，列出要用作输入的 UI 部件，并在outputs中列出要用作输出的 UI 部件。
如果 UI 部件的行为很简单，您可以简单地将其描述为 “文本 ”或 “复选框”，但如果是需要多个参数的 UI 部件（如滑块），或者如果您想自己指定尺寸或标签，则需要使用 gradio 方法创建一个实例。 如果您想自己指定大小或标签，则需要使用 gradio 方法创建一个实例。
inputs/outpust与用户界面部件之间的关系
Clear和 Submit 显示在输入端，Flag按钮显示在输出端。
这些按钮是自动生成的：Clear按钮一次性清除输入中指定的所有输入用户界面部件，而 Submit 按钮则调用一个以用户界面部件值为参数的回调函数。Flag按钮可以将字段中输入的数据保存在本地。
如果不想显示它，则可以在Interface方法中加入allow_flagging='never'
import gradio as gr
# 定义回调函数
def my_func(my_name, is_disp, my_value):
return f"### {my_name} ###", my_value * 100
# 使用Interface定义页面布局
demo = gr.Interface(
fn=my_func,
inputs=["text", "checkbox", gr.Slider(0, 100)],
outputs=["text", "number"],
allow_flagging='never'
)
# Web UI启动
demo.launch(inbrowser=True)
inputs和回调函数参数之间的关系。
输入中描述的 UI 部件按从上到下的顺序显示在屏幕上，但输入值则按从左到右的顺序传递给回调函数。
这次描述了 text、checkbox和 gr.Slider(0,100)三个部分，因此调用 my_func 时，值 “text” ⇒ my_name、“checkbox” ⇒ is_disp、gr.Slider(0,100) ⇒ my_value 。
回调函数与outputs之间的关系
回调函数的返回值按照从左到右、从上到下的顺序反映在输出列举的用户界面部分中。
我们稍微看一下一个稍微复杂的例子，请你试着分析一下代码与界面之间的关系
import gradio as gr
# 回调函数
def callback_func(val1,val2,val3):
return str(int(val1) * int(val2)), f"温度是 {val3} 度"
# 页面布局
app = gr.Interface(
title="计算器",
fn=callback_func,
inputs=[
gr.Textbox(label="输入栏1",lines=3, placeholder="请输入数值..."),
gr.Textbox(label="输入栏2",lines=5, placeholder="请输入数值..."),
gr.Slider(label="温度",minimum=0,maximum=100,step=1)
],
outputs=[
gr.Label(label="计算结果1"),
gr.Textbox(label="计算结果2",lines=3)
]
)
# Web UI启动
app.launch(inbrowser=True)
如何创建稍微复杂些的页面
如果一个要么的功能比较多，我们使用Interface可能就不是很方便了，这里大家可以使用Blocls来做页面布局。还可以使用Tab来做功能的区分。具体的用法大家可以自行查看一下官方文档，我们这里给大家一个示例代码。
import gradio as gr
def save_func(val1,val2):
return str(int(val1) * int(val2))
def synthesis_func(val1,val2):
return val1 + val2
with gr.Blocks() as app:
gr.Markdown("参数计算和图像处理")
with gr.Tab("参数计算"):
param1 = gr.Textbox(label="参数1")
param2 = gr.Textbox(label="参数2")
result_param = gr.Textbox(label="计算结果")
exec_btn = gr.Button("计算")
exec_btn.click(fn=save_func, inputs=[param1,param2],outputs=result_param, api_name="计算功能")
with gr.Tab("图片处理"):
with gr.Row():
image1 = gr.Image()
image2 = gr.Image()
result_img = gr.Image(height=300)
exec_btn = gr.Button("合成")
exec_btn.click(fn=synthesis_func, inputs=[image1,image2],outputs=result_img, api_name="合成功能")
app.launch(inbrowser=True)
这样我们就很快的构建出来了一个功能丰富的WebUI界面。
总结
本文介绍了 gradio 库，该库非常适合在浏览器中演示机器学习，并提供了如何安装和使用该库的示例和图解。
虽然它很容易创建符合某种程度的用户界面，但它并不适合创建具有复杂布局的 Web 用户界面。
如果你能在使用它时考虑到这一点，我认为你可以非常有效地开发网络用户界面。
如果你对本文中的 gradio 感兴趣，不妨一试。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
