Gradio入门到进阶全网最详细教程[一]：快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享)

常用的两款AI可视化交互应用比较：

• Gradio Gradio的优势在于易用性，代码结构相比Streamlit简单，只需简单定义输入和输出接口即可快速构建简单的交互页面，更轻松部署模型。适合场景相对简单，想要快速部署应用的开发者。便于分享：gradio可以在启动应用时设置share=True参数创建外部分享链接，可以直接在微信中分享给用户使用。方便调试：gradio可以在jupyter中直接展示页面，更加方便调试。

• Streamlit Streamlit的优势在于可扩展性，相比Gradio复杂，完全熟练使用需要一定时间。可以使用Python编写完整的包含前后端的交互式应用。适合场景相对复杂，想要构建丰富多样交互页面的开发者。

Gradio官网链接：https://gradio.app/

1. 安装&基本用法

Python第三方库Gradio快速上手，当前版本V3.27.0

• python版本要求3.7及以上

pip install gradio#为了更快安装，可以使用清华镜像源
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple gradio

安装完直接在IDE上启动快速，

1.1 快速入门

运行程序后，打开 http://localhost:7860 即可看到网页效果。左边是文本输入框，右边是结果展示框。Clear按钮用于重置网页状态，Submit按钮用于执行处理程序，Flag按钮用于保存结果到本地。

打开浏览器使用即可

在本地开发时，如果你想将代码作为Python脚本运行，你可以使用Gradio CLI在重载模式下启动应用程序，这将提供无缝和快速的开发。

Note：你也可以做python app.py，但它不会提供自动重新加载机制。

2.基本参数|支持的接口

2.1 Interface类以及基础模块

Gradio 可以包装几乎任何 Python 函数为易于使用的用户界面。从上面例子我们看到，简单的基于文本的函数。但这个函数还可以处理很多类型。
Interface类通过以下三个参数进行初始化：

• fn：包装的函数

• inputs：输入组件类型，（例如：“text”、"image）

• ouputs：输出组件类型，（例如：“text”、"image）

通过这三个参数，我们可以快速创建一个接口并发布他们。

• 最常用的基础模块构成。

• 应用界面：gr.Interface(简易场景), gr.Blocks(定制化场景)

• 输入输出：gr.Image(图像), gr.Textbox(文本框), gr.DataFrame(数据框), gr.Dropdown(下拉选项), gr.Number(数字), gr.Markdown, gr.Files

• 控制组件：gr.Button(按钮)

• 布局组件：gr.Tab(标签页), gr.Row(行布局), gr.Column(列布局)

1.2.1 自定义输入组件

• Interface.launch()方法返回三个值

• app，为 Gradio 演示提供支持的 FastAPI 应用程序

• local_url，本地地址

• share_url，公共地址，当share=True时生成

1.2.2 多个输入和输出

对于复杂程序，输入列表中的每个组件按顺序对应于函数的一个参数。输出列表中的每个组件按顺序排列对应于函数返回的一个值。

inputs列表里的每个字段按顺序对应函数的每个参数，outputs同理。

1.2.3 图像组件

Gradio支持许多类型的组件，如image、dataframe、video。使用示例如下：

当使用Image组件作为输入时，函数将收到一个维度为（w,h,3)的numpy数组，按照RGB的通道顺序排列。要注意的是，我们的输入图像组件带有一个编辑按钮，可以对图像进行裁剪和放大。以这种方式处理图像可以帮助揭示机器学习模型中的偏差或隐藏的缺陷。此外对于输入组件有个shape参数，指的设置输入图像大小。但是处理方式是保持长宽比的情况下，将图像最短边缩放为指定长度，然后按照中心裁剪方式裁剪最长边到指定长度。当图像不大的情况，一种更好的方式是不设置shape，这样直接传入原图。输入组件Image也可以设置输入类型type，比如type=filepath设置传入处理图像的路径。具体可以查看官方文档，文档写的很清楚。

1.2.4 动态界面接口：简单计算器模板实时变化

在Interface添加live=True参数，只要输入发生变化，结果马上发生改变。

2.2 interface进阶使用

2.2.1 interface状态

全局变量

全局变量的好处就是在调用函数后仍然能够保存，例如在机器学习中通过全局变量从外部加载一个大型模型，并在函数内部使用它，以便每次函数调用都不需要重新加载模型。下面就展示了全局变量使用的好处。

会话状态

Gradio支持的另一种数据持久性是会话状态，数据在一个页面会话中的多次提交中持久存在。然而，数据不会在你模型的不同用户之间共享。会话状态的典型例子就是聊天机器人，你想访问用户之前提交的信息，但你不能将聊天记录存储在一个全局变量中，因为那样的话，聊天记录会在不同的用户之间乱成一团。注意该状态会在每个页面内的提交中持续存在，但如果您在另一个标签页中加载该演示（或刷新页面），该演示将不会共享聊天历史。

要在会话状态下存储数据，你需要做三件事。

• 在你的函数中传入一个额外的参数，它代表界面的状态。

• 在函数的最后，将状态的更新值作为一个额外的返回值返回。

• 在添加输入和输出时添加state组件。

2.2.2 interface交互

实时变化

在Interface中设置live=True，则输出会跟随输入实时变化。这个时候界面不会有submit按钮，因为不需要手动提交输入。

同1.2.4

流模式

在许多情形下，我们的输入是实时视频流或者音频流，那么意味这数据不停地发送到后端，这是可以采用streaming模式处理数据。

2.3自定制组件：Blocks构建应用

相比Interface，Blocks提供了一个低级别的API，用于设计具有更灵活布局和数据流的网络应用。Blocks允许控制组件在页面上出现的位置，处理复杂的数据流（例如，输出可以作为其他函数的输入），并根据用户交互更新组件的属性可见性。可以定制更多组件，更多详细定制可查看文档

2.3.1 简单演示

Blocks方式需要with语句添加组件，如果不设置布局方式，那么组件将按照创建的顺序垂直出现在应用程序中，运行界面

2.3.2 多模块应用☆

2.3.3 Flagging标记

相信有小伙伴已经注意到，输出框下有个Flag按钮。当测试您的模型的用户看到某个输入导致输出错误或意外的模型行为，他们可以标记这个输入让开发者知道。这个文件夹由Interface的flagging_dir参数指定，默认为’flagged’。将这些会导致错误的输入保存到一个csv文件。如果Interface包含文件数据，文件夹也会创建来保存这些标记数据。

打开log.csv展示如下：

2.3.4 样式、队列、生成器

• 样式

在Gradio官方文档，搜索不同的组件加.style（如image.style），可以获取该组件的样式参数设置样例。例如image组件的设置如下：

• 队列
  如果函数推理时间较长，比如目标检测；或者应用程序处理流量过大，则需要使用queue方法进行排队。queue方法使用websockets，可以防止网络超时。使用方式如下：

• 生成器

在某些情况下，你可能想显示一连串的输出，而不是单一的输出。例如，你可能有一个图像生成模型，如果你想显示在每个步骤中生成的图像，从而得到最终的图像。在这种情况下，你可以向Gradio提供一个生成器函数，而不是一个常规函数。下面是一个生成器的例子，每隔1秒返回1张图片。

2.4 Blocks进阶使用

2.4.1 Blocks事件

可交互设置

任何输入的组件内容都是可编辑的，而输出组件默认是不能编辑的。如果想要使得输出组件内容可编辑，设置interactive=True即可。

事件设置

我们可以为不同的组件设置不同事件，如为输入组件添加change事件。可以进一步查看官方文档，看看组件还有哪些事件。

多个数据流

如果想处理多个数据流，只要设置相应的输入输出组件即可。

多输出值处理

• 下面的例子展示了输出多个值时，以列表形式表现的处理方式。

• 下面的例子展示了输出多个值时，以字典形式表现的处理方式。

组件配置修改

事件监听器函数的返回值通常是相应的输出组件的更新值。有时我们也想更新组件的配置，比如说可见性。在这种情况下，我们可以通过返回update函数更新组件的配置。

2.4.2 Blocks布局

Blocks应用的是html中的flexbox模型布局，默认情况下组件垂直排列。

组件水平排列

使用Row函数会将组件按照水平排列，但是在Row函数块里面的组件都会保持同等高度。

组件垂直排列与嵌套

组件通常是垂直排列，我们可以通过Row函数和Column函数生成不同复杂的布局。

组件可视化：输出可视化从无到有

如下所示，我们可以通过visible和update函数构建更为复杂的应用。

组件渲染：点击作为输入

在某些情况下，您可能希望在实际在UI中呈现组件之前定义组件。例如，您可能希望在相应的gr.Textbox输入上方显示使用gr.examples的示例部分。由于gr.Examples需要输入组件对象作为参数，因此您需要先定义输入组件，然后在定义gr.Exmples对象后再进行渲染。解决方法是在gr.Blocks()范围外定义gr.Textbox，并在UI中希望放置的任何位置使用组件的.render()方法。

2.4.3 样式修改

自定义css

要获得额外的样式功能，您可以设置行内css属性将任何样式给应用程序。如下所示。

元素选择

您可以向任何组件添加HTML元素。通过elem_id选择对应的css元素。

3. 应用分享

3.1 互联网分享

如果运行环境能够连接互联网，在launch函数中设置share参数为True，那么运行程序后。Gradio的服务器会提供XXXXX.gradio.app地址。通过其他设备，比如手机或者笔记本电脑，都可以访问该应用。这种方式下该链接只是本地服务器的代理，不会存储通过本地应用程序发送的任何数据。这个链接在有效期内是免费的，好处就是不需要自己搭建服务器，坏处就是太慢了，毕竟数据经过别人的服务器。

3.2 huggingface托管

为了便于向合作伙伴永久展示我们的模型App,可以将gradio的模型部署到 HuggingFace的 Space托管空间中，完全免费的哦。

方法如下：

1，注册huggingface账号：https://huggingface.co/join

2，在space空间中创建项目：https://huggingface.co/spaces

3，创建好的项目有一个Readme文档，可以根据说明操作，也可以手工编辑app.py和requirements.txt文件。

3.3 局域网分享

通过设置server_name=‘0.0.0.0’（表示使用本机ip）,server_port（可不改，默认值是7860）。那么可以通过本机ip:端口号在局域网内分享应用。

这里host地址可以自行在电脑查询，C:\Windows\System32\drivers\etc\hosts 修改一下即可 127.0.0.1再制定端口号

3.4 密码验证

在首次打开网页前，可以设置账户密码。比如auth参数为（账户，密码）的元组数据。这种模式下不能够使用queue函数。

如果想设置更为复杂的账户密码和密码提示，可以通过函数设置校验规则。

4.案例升级展示

4.1 文本分类

4.2 图像分类

4.3 目标检测

4.4 图片筛选器

尽管gradio的设计初衷是为了快速创建机器学习用户交互页面。但实际上，通过组合gradio的各种组件，用户可以很方便地实现非常实用的各种应用小工具。

例如: 数据分析展示dashboard, 数据标注工具, 制作一个小游戏界面等等。

本范例我们将应用 gradio来构建一个图片筛选器，从百度爬取的一堆猫咪表情包中刷选一些我们喜欢的出来。