前言

本系列文章主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的一个简易的webui开发框架，它基于FastAPI和svelte，同时便于部署人工智能模型，是当前热门的非常易于开发和展示机器学习和深度学习的大语言模型和扩散模型的框架。本系列文章不仅从概念上介绍Gradio的详细技术架构、历史、应用场景和其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO的区别，还进行了大量实践讲解。实践部分先讲解了多种不同的安装、运行和部署方式，然后实践了基础类的Interfaces、Blocks和Custom Components，最后对Gradio的高级特性进行了详细讲解和实践，比如Gradio-Lite、Gradio Client和Tabular Data Science And Plots等。

本系列文章如下：

1. 《全网最详细Gradio教程系列——Gradio简介》
2. 《全网最详细Gradio教程系列——Gradio的安装与运行》
3. 《全网最详细Gradio教程系列——Gradio的3+1种部署方式实践》
4. 《全网最详细Gradio教程系列——Gradio-Lite》
5. 《全网最详细Gradio教程系列——Gradio Client》
6. 《全网最详细Gradio教程系列——Interfaces》
7. 《全网最详细Gradio教程系列——Blocks》
8. 《全网最详细Gradio教程系列——Custom Components》
9. 《全网最详细Gradio教程系列——Tabular Data Science And Plots 》

实战导论：

从本章起进入Gradio实战部分，实战内容较多，分多个章节讲解。首先，我们来看一下gradio的安装、运行和部署，着重理解热重载技术，然后讲解基本组件Interfaces和Blocks，第三章讲解Components，通常WEB拥有复杂多样的组件，Gradio也不例外，本章挑选一些典型、复杂且常用的组件进行讲解，最后讲解Gradio的高级功能，比如数据科学的表格化与渲染操作、Gradio Clients and Lite等。

2. Gradio的安装与运行

本章详细介绍Gradio的安装、运行和部署，尽量详尽帮大家避坑。

2.1 安装

建议在Python中的虚拟环境安装Gradio，因为特定虚拟环境可以指定特定版本Python，同时和其他虚拟环境隔离，避免与其他Python项目冲突。当不同的项目需要同一库的不同版本时，这一点尤其有用。它还简化了依赖关系管理并增强了可重复性，方便与他人共享。

本篇示例均运行在Jupyter Notebook，所以除了Gradio，还需要在虚拟环境中安装Jupyter Notebook。

2.1.1 Windows安装Gradio

在Windows的虚拟环境中安装Gradio，分步如下：

1. 安装Python：从python官网下载安装即可。需要Python 3.8或更高版本，推荐使用最新版本。使用命令python --version或python3 --version查看版本。
2. 创建虚拟环境：打开命令行并切换到指定的项目目录，执行以下命令创建虚拟环境：

python -m venv gradio-env

3. 激活虚拟环境：

.\gradio-env\Scripts\activate

4. 安装Gradio：在虚拟环境中安装Gradio，命令如下

pip install gradio

为了更快安装，可以使用清华镜像源。同时为保证安装最新版，加入参数upgrade，如下：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --upgrade gradio

5. 验证：运行python并输入：

import gradio as gr
print(gr.__version__)    #当前最新版本4.36.1

2.1.2 MacOS/Linux安装Gradio

在MacOS/Linux安装Gradio与Windows下类似，在激活部分有所不同，分步如下：

1. 安装Python。一般MacOS/Linux会预装Python，只需python --verison/python3 --version验证版本即可。
2. 创建虚拟环境：打开终端并切换到项目目录，执行以下命令创建虚拟环境：

python -m venv gradio-env

3. 激活虚拟环境：

source gradio-env/bin/activate

4. 安装Gradio：在虚拟环境中安装Gradio，命令如下

pip install gradio

为了更快安装，可以使用清华镜像源。同时为保证安装最新版，加入参数upgrade，如下：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --upgrade gradio

5. 验证：运行python并输入：

import gradio as gr
print(gr.__version__)    #当前最新版本4.36.1

当在anaconda下使用时，同样需要创建虚拟环境并激活：conda create -n gradio-env&conda activate gradio-env，然后使用pip命令安装即可。

2.2 运行

本小节用一个例程demo来讲解如何运行gradio。

首先看例程demo，在代码编辑器、Jupyter Notebook、Google Colab 或其他任何编写 Python 的地方编写你的第一个 Gradio 应用：

import gradio as gr

def greet(name, intensity):
    return "Hello " * intensity + name + "!"

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

在上面的代码中，我们定义了一个名为greet的函数，该函数接受一个名为name的文本输入，并返回一个包含问候语的文本输出。然后，我们使用gr.Interface类创建一个新的Gradio界面，并将greet函数作为输入和输出函数传递给它，关于Interface类请参考后续章节。最后，我们调用了launch方法来启动Gradio应用程序。

2.2.1 普通方式运行

可以在Jupyter Notebook或Google Colab中直接运行代码，或者保存在一个名为app.py的文件中，在终端使用命令python app.py运行。简单几行代码，运行截图如下：
注意：当网络设置不当或开启代理时，可能会出现以下错误提示：

ValueError: Unknown scheme for proxy URL URL('socks://127.0.0.1:7890/')

此时关闭代理或调整网络设置即可。可以使用命令env | grep -i proxy查看代理设置，无输出时代表无代理，相反输出如下：

~$ env | grep -i proxy
no_proxy=localhost,127.0.0.1,::1
https_proxy=http://127.0.0.1:7890/
NO_PROXY=localhost,127.0.0.1,::1
HTTPS_PROXY=http://127.0.0.1:7890/
HTTP_PROXY=http://127.0.0.1:7890/
http_proxy=http://127.0.0.1:7890/
ALL_PROXY=socks://127.0.0.1:7890/
all_proxy=socks://127.0.0.1:7890/

此时需关闭代理，如果关闭代理后还提示，这时需要重启终端或jupyter即可。

2.2.2 热重载运行

当构建Gradio demo时，尤其是在Blocks中，你会发现不断重新运行代码来测试更改很麻烦。为了更快、更方便地编写代码，可以在Python IDE中开发（如VS code、Sublime Text、PyCharm等）并在终端运行Python代码时，通过热重载技术立即“重新加载”Gradio应用程序。而在Jupyter Notebooks（或任何类似的环境，如Colab），也可以使用类似的“魔术命令”更快地重新运行单元格。
下面将讲述这两种开启热重载的方式：命令行和Notebooks魔术命令。

2.2.2.1 命令行式热重载

只需在文件名前键入gradio替换python即可。在上述例子中，在终端输入：gradio app.py，如下所示：

:~/src/jupyter-notebook/hugging-face$ gradio app.py 
Watching: '/home/shoe/src/jupyter-notebook/hugging-face' 
'/home/shoe/src/jupyter-notebook/hugging-face'

Running on local URL:  http://127.0.0.1:7861

To create a public link, set `share=True` in `launch()`.
...
httpx.ConnectTimeout: _ssl.c:983: The handshake operation timed out

对于异常提示不用理会，重要部分是Watching…，它表示Gradio正在监视app.py所在的目录文件，此时更改app.py的内容，会重新运行并实时反馈在浏览器上。

✍️ 提示：

1. 不支持launch()参数更改：gradio命令不会检测传递给launch()方法的参数，因为在重载模式下永远不会调用launch()方法，因此在launch()中设置auth或show_error等参数将不会反映在应用程序中。

2. 支持demo重命名：在使用热重载模式时，还需要记住一件重要的事情：Gradio专门在代码中寻找一个名为demo的Blocks/Interface演示，如果演示命名为其他名称，则需要将演示的名称作为代码中的第二个参数传入。比如app.py文件内容如下：

import gradio as gr

with gr.Blocks() as my_demo:
    gr.Markdown("# Greetings from Gradio!")
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()

    inp.change(fn=lambda x: f"Welcome, {x}!",
               inputs=inp,
               outputs=out)

if __name__ == "__main__":
    my_demo.launch()

此时使用如下命令启动热重载：gradio run.py --demo-name=my_demo.

3. 支持其它编码格式，Gradio对脚本默认使用UTF-8编码。对于重载模式，如果使用UTF-8以外的编码格式（如cp1252），需做如下操作：（1）配置python脚本的编码声明，例如：#--coding：cp1252--；（2）确认您的代码编辑器已识别出该编码格式；（3）运行命令如下：gradio app.py --encoding cp1252

2.2.2.2 Notebook热重载

如果用Jupyter Notebooks（或Colab Notebooks等）开发代码，Gradio也提供了“魔法命令”来创建并运行Blocks Demo来开启热重载，只需在notebook顶部加载如下命令：

%load_ext gradio

然后，只需在Gradio Demo的开发单元中，在顶部加入“魔法命令”——%%blocks，然后像往常一样编写layout和components即可，如下所示：

%%blocks

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Greetings from Gradio!")
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()

    inp.change(fn=lambda x: f"Welcome, {x}!", inputs=inp, outputs=out)

注意：
（1）代码中不需要lanucn()——Gradio会自动启动；
（2）每次重新运行单元时，Gradio都会在相同的端口上使用相同的底层web服务器重新呈现应用程序。这意味着热重载将比正常重新运行单元格更快地看到更改效果。

运行效果如下图：

2.2.2.3 控制热重载

默认情况下，热重载模式将为每一次更改重新运行整个脚本。但在某些情况下，这是不可取的。比如加载机器学习模型可能只发生一次。还有一些使用C或Rust扩展的Python库如numpy和tiktoken，在重新加载时会抛出错误。
在这些情况下，可以将不希望重新运行的代码放在if gr.NO_RELOAD代码块中。下面是一个示例，说明如何在开发过程中使用它只加载一次transformers模型：

import gradio as gr

if gr.NO_RELOAD:
	from transformers import pipeline
	pipe = pipeline("text-classification", model="cardiffnlp/twitter-roberta-base-sentiment-latest")

demo = gr.Interface(lambda s: pipe(s), gr.Textbox(), gr.Label())

if __name__ == "__main__":
    demo.launch()

✍️ 提示：gr.NO_RELOAD的值为True。因此，当您完成开发并希望在生产中运行脚本时，不必更改脚本，只需使用python而非gradio来运行该文件。

参考文献

非常优秀的一个开源库Gradio，几行代码完成部署快速搭建AI算法可视化部署演示，直接启动零配置实现微信分享、公网分享、内网穿透，包含项目搭建和案例分享