全网最详细Gradio教程系列——Gradio的3+1种部署方式实践

前言

本系列文章主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的一个简易的webui开发框架，它基于FastAPI和svelte，便于部署人工智能模型，是当前热门的非常易于开发和展示机器大语言模型及扩散模型的UI框架。本系列文章不仅从概念上介绍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的3+1种部署方式，包括本地部署launch()、huggingface托管、FastAPI挂载与Gradio-lite浏览器集成。

3. 部署Gradio

当开发完成后，就需要将Gradio应用部署，以便他人使用。这里分享几个常用的部署方式，包括本地部署launch()、huggingface托管、FastAPI挂载与Gradio-lite浏览器集成。

3.1 本地部署launch()

launch()将启动一个简单的web服务器来提供演示，launch()接受不同的设置参数，在执行成功后返回三个值：（1）app，为 Gradio 演示提供支持的 FastAPI 应用程序，在下一章Gradio Client部分会介绍其访问及使用方法；（2）local_url，本地地址；（3）share_url，公共地址，当share=True时生成。launch()有不同的参数设置，对部署非常有用。

3.1.1 局域网分享

不带参数的launch()默认提供的是形如：http://127.0.0.1:7860的局域网地址。可以通过设置server_name（默认‘127.0.0.1’表示localhost）、server_port（默认值是7860）更改，然后通过局域网ip：端口号在局域网内访问应用。通过命令cat /etc/hosts可查看局域网IP：localhost。在jupyter notebook中运行结果如下：

3.1.2 互联网分享

如果希望向外网提供访问地址，只需设置参数share为true即可，运行程序后Gradio的服务器会提供形式为XXX.gradio.app的外网url，同时也会提供本地url。这种方式下该链接只是本地服务器的代理，不会存储通过本地应用程序发送的任何数据。当首次运行时，会提示下载并重命名文件frpc_linux_amd64，按照提示操作即可。具体提示如下：

#show_error为True表示在控制台显示错误信息。If True, any errors in the gradio app will be displayed in an alert modal and printed in the browser console log
demo.launch(share=True, show_errow=True)

首次运行提示：

Could not create share link. Missing file: /home/shoe/program/anaconda3/envs/pytorch/lib/python3.12/site-packages/gradio/frpc_linux_amd64_v0.2. 

Please check your internet connection. This can happen if your antivirus software blocks the download of this file. You can install manually by following these steps: 

1. Download this file: https://cdn-media.huggingface.co/frpc-gradio-0.2/frpc_linux_amd64
2. Rename the downloaded file to: frpc_linux_amd64_v0.2
3. Move the file to this location: /home/shoe/program/anaconda3/envs/pytorch/lib/python3.12/site-packages/gradio

按提示操作成功后，运行结果如下：

Running on local URL:  http://127.0.0.1:7870
Running on public URL: https://daf4d7ab15acf0031c.gradio.live

This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run `gradio deploy` from Terminal to deploy to Spaces (https://huggingface.co/spaces)

此时demo返回了本地URL和互联网URL，都可以通过浏览器访问。其中公共链接在72小时内是免费的，好处就是不需要自己搭建服务器，坏处就是太慢了，毕竟数据经过别人的服务器，也可以部署到Hugging Face升级付费，解锁永久链接。

3.1.3 密码验证

在首次打开网页前，可以设置登录账户密码。比如auth参数为（账户，密码）的元组数据。

demo.launch(auth=("admin", "pass1234"))

如果想设置更为复杂的账户密码和密码提示，可以将auth设置为函数校验规则，如下：

#账户和密码相同就可以通过
def same_auth(username, password):
    return username == password
demo.launch(auth=same_auth,auth_message="username and password must be the same")

注意：这种模式下不能够使用queue函数。

3.1.4 其他参数

此外，launch()还有其他参数，简单罗列如下：

1. inline：是否在同一iframe内展示gradio app；
2. inbrowser：是否在新标签页打开gradio app；
3. debug：阻塞运行中的主线程进入调试模式，如果运行在Colab则将错误信息打印在输出单元；
4. favicon_path：设置网页图标目录；
5. show_api：是否在app脚页显示api帮助文档；
6. ssl_verify：是否使用自签名证书的证书验证。

关于更多的设置参数，请参考官方文档：https://www.gradio.app/main/docs/gradio/interface#interface-launch。

3.2 huggingface托管

为了便于向合作伙伴永久展示我们的模型App，可以将gradio的模型托管到HuggingFace的Spaces，无需费用但需要定期激活。

方法如下，打开hugging Face的Spaces并登录：https://huggingface.co/spaces，然后点击Create new Space，出现如下界面：
操作步骤如下：

1. 选择创建者和填写Space名称，然后选择License，默认或根据项目选择。
2. Space SDK选为Gradio，对应的Gradio template根据项目任选或为Blank。
3. Space hardware选择免费版即可，不过免费版在两天闲置后就会陷入休眠，如长期使用可升级为收费版硬件。
4. Space Dev Mode为Pro用户特选，可升级为Pro用户后选择，此处可不予理会。
5. 操作权限根据提示和自己需要选择，此处选为Public。

最后点击Create Space，如果选择为Blank，此时没有app.py，则会出现如下界面：
点击右上角的Files->+ Add Files->create a new file，添加文件，将样例代码或项目文件导入即可，如下：

最后点击Commit new file to main，等待启动，此时点击App，就可以看到我们的Gradio程序已部署成功，如下：

3.3 FastAPI挂载

除了启动自己的Gradio app，还可以将Gradio创建的web挂载到FastAPI。FastAPI是一个现代、快速的Web框架，它开箱即用，基于Python标准类型构建API，支持通过Swagger UI使用OpenAPI标准自动生成API文档。

我们将使用 FastAPI 来构建我们的API，并使用uvicorn来运行它。Gradio将用于创建演示Web界面，并通过mount_gradio_app挂载到FastAPI 应用程序上。
首先在当前环境下安装fastapi和uvicorn。然后将程序代码写入后缀名为.py的文件。程序代码如下：

# main.py
from fastapi import FastAPI  
import uvicorn  
import gradio as gr  
  
app = FastAPI()  

@app.get("/")  
def read_main():  
    return {"message": "This is your main app"}  
  
def greet(name):  
    return "Hello, " + name + "!"  
  
io = gr.Interface(greet, "textbox", "textbox")  
  
# Mount the Gradio interface onto the FastAPI app  
app = gr.mount_gradio_app(app, io, path="/gradio")  
  
# Run the FastAPI app using uvicorn (or another ASGI server)  

if __name__ == "__main__":  
    uvicorn.run(app, host="127.0.0.1", port=7860)

函数mount_gradio_app()用于将gradio.Blocks挂载到一个已存在的FastAPI程序，详细参数设置请参考官方文档：https://www.gradio.app/main/docs/gradio/mount_gradio_app。
打开终端，在.py文件所在目录输入命令：

$ uvicorn main:app
INFO:     Started server process [32710]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)

注意：命令中main是.py文件的名称，app为.py文件中定义的FastAPI类，根据项目替换即可。
此时访问http://127.0.0.1:7860即可得到主页信息，如下所示：
切换到http://127.0.0.1:7860/gradio，即可访问挂载的Gradio Interface界面：

第四种部署方式Gradio-Lite内容较多，单独列一章讲解。

参考文献

WebAssembly 完全入门：了解 wasm 的前世今身