python系列&deep_study系列：Gradio：轻松实现AI算法可视化部署

Gradio：轻松实现AI算法可视化部署

• Gradio：轻松实现AI算法可视化部署
• • 快速开始
  • • 0.安装Gradio
    • 1.Hello World
    • 2.图像处理：写个简单的RGB转灰度
    • 3.增加案例example
    • 3.创建一个外部访问链接
    • 4.升个级:图像分类pytorch+resnet18
    • 5. 更多技巧
    • • 5.1 设置标题和描述
      • 5.2 设置ip和端口号
    • 6. 总结
  • 了解更多
  • 问题
  • • 为什么我用Gradio生成的排版都是乱的。
    • torchrun --nproc_per_node 2 web.py 这样就相当于启动了两个web.py，那gradio就有问题了，不知怎么解决
    • gradio 默认的端口号7860，如何修改默认的端口呀
    • 定制化就有点难了，为了防止以后有定制化的需求 是不是还得用前后端那套。。但是语言模型那种聊天的，还要服务器推送 怎么整呀yeild ws。。[大哭]
    • 这东西也有很多问题比如ssl版本冲突，其实后面也是导入了一大堆的lib，可以用，但不能太依赖，真正上线生产环境，还是要打包镜像比较好。
    • 感觉有点玩具了呢。我选了dash，比flask简单，但貌似更灵活
    • 为什么点submit右边输出框显示error

---

Gradio：轻松实现AI算法可视化部署

2024.5.1：狠狠更新一下这篇帖子 给大家安利一下我们最新发布的开源AI训练跟踪工具SwanLab，训模型真的很好用！

如何将你的AI算法迅速分享给别人，让对方体验，一直是一件麻烦事儿。

首先大部分人都是在本地跑代码，让别人使用你的模型，以往有这三种方案：

• 上github

• 将代码打包或者封装成docker后，用QQ/百度云/U盘传输

• 学习前后端知识，写个前端界面，买个域名，用flask这样微服务框架快速部署，看情况结合一下内网穿透。

这些方案的问题在于——前两者需要对方会编程会配置环境（还得愿意），我们的分享对象满足这个条件的寥寥无几；后者则需要你这个算法工程师升级成全栈，学习前后端开发，学习成本太高。

总结起来：场景不匹配，需求不契合，费时又费力！

那么有没有更好的解决方案呢？有！它就是我今天要给大家安利的一个python开源库：Gradio。

Gradio是HuggingFace的开源项目，GitHub 28k+ star。

最近Gradio是两位ML工程师独立开发的项目，一度因为赚不到钱项目濒临失败，后来被HuggingFace的创始人看到，从而资助并收购了他们，让项目延续至今，成为AI领域做开源Demo最重要的开源项目之一，也基于它诞生了StableDiffusion
WebUI、LLaMa Factory、GPT Academic等众多知名项目。

——我非常喜欢这个故事，小而美的项目遇到了热爱开源的伯乐，真的很棒。

使用gradio，只需在原有的代码中增加几行，就能自动化生成交互式web页面，并支持多种输入输出格式，比如图像分类中的图>>标签，超分辨率中的图>>图等。

同时还支持生成能外部网络访问的链接，能够迅速让你的朋友，同事体验你的算法。

总结起来，它的优势有：

• 自动生成页面且可交互

• 改动几行代码就能完成

• 支持自定义多种输入输出

• 支持生成可外部访问的链接进行分享

快速开始

0.安装Gradio

首先你需要安装Python，之后用pip安装Gradio

pip install gradio

1.Hello World

先来个开胃菜，输入一个文本，在他的前面加一句“Hello World”：

import gradio as gr
​
def print_text(text):
    return "Hello World, " + text
​
interface = gr.Interface(fn=print_text, inputs="text", outputs="text")
interface.launch()

gradio的核心是它的gr.Interface，用来构建可视化界面，其中的参数：

• fn：放你用来处理的函数

• inputs：写你的输入类型，输入的是文本，所以是"text"

• outputs：写你的输出类型，输出的也是文本，所以也是"text"

最后我们用interface.lauch()把页面一发布，一个本地静态交互页面就完成了！

运行这个py脚本，在浏览器输入http://127.0.0.1:7860/,查收你的页面：

2.图像处理：写个简单的RGB转灰度

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()

这里用到了opencv，需要先pip install opencv-python一下。

同样的逻辑：

• fn：放你用来处理的函数

• inputs：写你的输入类型，这里输入的是图像，所以是"image"

• outputs：写你的输出类型，这里输出的是图像，所以是"image"

运行代码：

上传一张图片，点击「SUBMIT」，大功告成。

对于任何图像处理类的ML（机器学习）代码来说，只要定义好一个图像输入>>模型推理>>返回图片的函数（逻辑和RGB转灰度图本质上没区别），放到fn中，就完事了。

3.增加案例example

我们可以在页面下方添加供用户选择的测试样例。

在gr.Interface里的examples中放入图片路径，格式为[[路径1],[路径2],…]。

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",
                        examples=[["test.png"]])
interface.launch()

增加example不仅能让你的UI界面更美观，逻辑更完善，也有一些其他意义：

• 增加Demo体验：比如你做了个文生图的Demo，但是让用户自己想prompt（提示词）的摩擦是很大的，你提供的Example能让用户更快、更轻松体验到你的Demo效果。

3.创建一个外部访问链接

创建外部访问链接非常简单，只需要launch(share=True)即可，在打印信息中会看到你的外部访问链接。

interface.launch(share=True)

免费的链接可以使用24小时，想要长期的话，可以去huggingface创建一个Space，2核16G的CPU Demo是完全免费的，GPU的Demo需要按配置和时长付费。

也可以选择国内的Gradio托管平台：ModelScope 魔搭社区、SwanHub - 创新的AI开源社区

4.升个级:图像分类pytorch+resnet18

前置需要安装torch和torchvision，这个demo推理应该cpu也能跑：

pip install torch torchvision

# 2024.5.1 更新了代码
import gradio as gr
import torch
from torchvision import transforms
import requests
from PIL import Image

model = torch.hub.load('pytorch/vision:v0.6.0', 'resnet18', pretrained=True).eval()

# Download human-readable labels for ImageNet.
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")

def predict(inp):
  inp = Image.fromarray(inp.astype('uint8'), 'RGB')
  inp = inp.resize((224, 224))
  inp = transforms.ToTensor()(inp).unsqueeze(0)
  with torch.no_grad():
    prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)
  return {labels[i]: float(prediction[i]) for i in range(1000)}

inputs = gr.Image()
outputs = gr.Label(num_top_classes=3)
gr.Interface(fn=predict, inputs=inputs, outputs=outputs).launch()

图像分类任务是机器学习经典任务。上面我们在outputs中设置了gr.Label(num_top_classes=3)，这是Gradio中专为图像分类展示类标定制的函数。

修改inputs和outputs的组合，总能找到适合你的算法的那一个。

如果想要更自由的组合，可以使用gr.Block，文档：Gradio Blocks Docs

5. 更多技巧

5.1 设置标题和描述

gr.Interface(..., title="Hello_World", description="一个入门Demo")

5.2 设置ip和端口号

gr.launch(server_name="0.0.0.0", server_port=8080)

• server_name：设置网页服务的ip地址，如果你想要部署在自己的服务器上的话，最好设置为"0.0.0.0"，方便外部访问。

• server_port：设置网页服务的端口号

6. 总结

Gradio的最大的价值我认为是缩短了算法与应用的距离，人人都能迅速分享与体验项目成果，不论是分享开源成果，项目汇报，同行交流，甚至是快速做一个产品。

你还在发愁怎么分享你的AI算法吗？不如试试Gradio。

类似产品：StreamLit

了解更多

Gradio官网：https://www.gradio.app/

开源平台SwanHub-在线体验GradioDemo：SwanHub AI

问题

为什么我用Gradio生成的排版都是乱的。

gradio 依賴一些 google 上面的 css 和字體，沒辦法離線運行。確認上網環境

torchrun --nproc_per_node 2 web.py 这样就相当于启动了两个web.py，那gradio就有问题了，不知怎么解决

在代码中判断，仅local_rank为0的启动gradio可以吗？

gradio 默认的端口号7860，如何修改默认的端口呀

launch方法里面设置参数 server_port=9999

定制化就有点难了，为了防止以后有定制化的需求 是不是还得用前后端那套。。但是语言模型那种聊天的，还要服务器推送 怎么整呀yeild ws。。[大哭]

像chatgpt都是心跳访问，每次发送个残缺的数据包，最后补完数据

这东西也有很多问题比如ssl版本冲突，其实后面也是导入了一大堆的lib，可以用，但不能太依赖，真正上线生产环境，还是要打包镜像比较好。

感觉有点玩具了呢。我选了dash，比flask简单，但貌似更灵活

为什么点submit右边输出框显示error

A：需要看看报错噢，可能因为开了科技上网。

Q：科技关了似乎还是error

Q：但我也不知道报错内容在哪

Q：原来有个show_error参数，我挨个试试先

Q：将show_error 置为True 依旧没有任何

A：在github.com/gradio-app/g中找到了这个留言：

I had the same error, but I downgraded the pydantic version from 2.2.1
to 1.10.7 and it worked fine. I changed the gradio version a lot, but
it wasn’t a version issue. I got it working fine with gradio==3.34.0.

在gradio版本3.34.0不变的条件下，将环境里的pydantic包版本下调为1.10.7即可，亲测能行

Q：可以！

A：打开了Quickstart说“Prerequisite: Gradio requires Python 3.8 or higher”，切换到3.8的环境，重新安装，ok。

---

林泽毅

Gradio：轻松实现AI算法可视化部署