轻松部署算法到网页端应用：Gradio+HuggingFace

snooby101

已于 2022-10-20 10:35:04 修改

阅读量1w

点赞数 7

分类专栏：编程技术类文章标签： python 开发语言

于 2022-10-08 19:47:02 首次发布

本文链接：https://blog.csdn.net/xmh_free/article/details/127210992

版权

编程技术类专栏收录该内容

8 篇文章

订阅专栏

计算机视觉和图像处理的算法具有直观的实用性。作为算法研发人员，将自己的算法部署到网页端的UI接口供大家使用是一件很妙的事。但这个简单的愿望涉及到前后端知识而且需要购买域名，技术复杂且不免费。这里我将介绍一种简单且免费的方案供大家参考。
👉样例项目：可交互的上色Demo

Part 1: 界面设计库Gradio

Gradio是MIT的开源项目，使用时可理解为一个Python包，它的安装命令：pip install gradio。使用Gradio，通过少量的几行Python代码就能自动化生成交互式web页面，并支持多种输入输出格式，图像加载/显示框、文本框、各类按钮等常见控件。同时，还支持生成能外部网络访问的链接，能够迅速让非技术人员体验你的算法。

1. 小试牛刀: 彩图灰度化算法

import gradio as gr
import cv2

def to_black(image):
    output = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    return output

interface = gr.Interface(fn=to_black, inputs="image", outputs="image")
interface.launch(server_name='127.0.0.1',server_port=7788)

运行这个简单的代码文件，就能实现一个本地静态交互页面。在浏览器输入http://127.0.0.1:7788/就能看到如下的页面：

2. 高阶用法

设计符合自己要求的界面需要了解各种控件的用法，建议参考Gradio官方文档。相比高度封装的Interface类，Blocks类更基础一些，提供了更大的设计灵活性。Blocks类具有多个数据流和样式，可以控制组件在页面上出现的位置，处理复杂的数据流，以及根据用户交互更新组件的属性或者组件可见性。

这里提供一个已成功部署的样例项目：可交互的上色Demo，请参考其UI构建文件app.py。

Part 2：在线托管平台HuggingFace

在本地测试完成后，接下来就是考虑如何将程序发布到在线平台的问题了。HuggingFace提供了一个项目托管平台，而且能免费提供如Google Colab的在线计算资源。在使用以下服务前，请先注册账号（官网界面右上角"Sign Up"）。

1. 在线计算空间:Space

在HuggingFace官网登录账号后，切换到Spaces创建一个新的空间。记得选中"Gradio"和"Public"，以生成一个可公开使用的Gradio在线应用。每个项目空间免费配备8个CPU核和16GB 运行内存，而GPU资源需要单独付费。更多关于Spaces的介绍请参考官方文档。
创建完Space之后，我们需要把本地项目文件（UI构建文件必须得命名成app.py且位于根目录）上传到该空间。具体方法与Github项目的上传和版本维护方式完全一样。

克隆space项目到本地：git clone https://huggingface.co/spaces/your_account/proj_name/tree/main
将本地已跑通的项目文件复制到刚才克隆的space项目文件夹。
新建描述运行环境依赖的文件：requirements.txt指定Python依赖的包；packages.txt指定特殊的系统依赖配置。详情参考。

将此更新同步到远程仓库：

git add -A .
git commit -m "add project files"
git push

完成以上步骤后（等待1~2分钟系统刷新），进入Space项目的App选项卡即可查看部署到web端的应用。

2. 模型托管仓库:Models

如果我们运行的程序是AI模型，那么一般需要提供一个训练好的checkpoint（一般上百兆）供在线加载。这时，我们可以在HuggingFace的Models页面创建一个与Space项目同名的模型仓库，用于存储需要的checkpoint等文件。

上传文件：通过上文提到的git方式，或者直接点击已创建的模型页面的Add file。
获取文件路径：例如上传到模型仓库的文件路径是：https://huggingface.co/menghanxia/disco/tree/main/model.pth.tar，其对应的下载路径则需要将tree修改为resolve，即https://huggingface.co/menghanxia/disco/resolve/main/disco-beta.pth.tar

在Space项目的app.py文件中调用文件下载命令：

os.system("wget https://huggingface.co/menghanxia/disco/resolve/main/disco-beta.pth.rar")

⭐参考资料

Gradio文档：https://www.gradio.app/docs/
Spaces文档：https://huggingface.co/docs/hub/spaces、
CSDN博文：https://blog.csdn.net/SoulmateY/article/details/117327898