Gradio:快速构建你的webApp
1. 什么是Gradio
如果你了解web开发，一定会知道开发一款webApp需要涉及很多技术栈：
- 前端：HTML + CSS + JS (可能会涉及不同的CSS框架和JS框架如jquery VUE react等)
- 后端语言：如python/java
- web容器：如flask/tomcat
如果你只会python，又不想重头学习上述技术，你要怎么办？
据我所知，有两种解决方案：
- streamlit （https://streamlit.io/）
- Gradio （https://gradio.app/）
streamlit之前我有介绍过，今天要分享的是Gradio, 提供的功能和streamlit类似，你只要会python就可以快速构建一个webApp。
从上图可知，Gradio定位是快速构建一个针对人工智能的python的webApp库，在Hugging Face等提供各种模型推理展示的平台广告使用，阿里的魔塔展示也是基于此。
大家思考下，Gradio作为一款python库，底层逻辑是什么？
- 结果：Gradio展示的还是web元素
- 过程：所以Gradio是即懂python又懂web开发（css/js/html)的开发者，通过python对这些web技术做了封装
- pipline：python语言--> css/js/html
streamlit应该也是如此，之前介绍过的pyecharts也是如此（封装的是百度的可视化框架echarts。
开源牛人开发，方便你我，点赞！
2. 简单使用
我们来感受下Gradio的便捷之处。
安装
- 要求python>=3.7
pip install -U pip -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install gradio -i https://pypi.tuna.tsinghua.edu.cn/simple# app.py
import gradio as gr
def greet(name):
return "Hello " + name + "!"
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch(server_name="0.0.0.0")
# 启动
# python -u app.py
# Running on local URL: http://0.0.0.0:7860
# To create a public link, set `share=True` in `launch()`
上面的代码就是简单一个webApp，功能是输入一个文本，输出一个文本。代码中关键点：
- 导入包
import gradio as gr - gr.Interface 构建一个app， 确定输入inputs和输出outputs的类型，已经处理输入inputs的函数（这个函数返回一个outputs的类型）
- 提供一个app的功能模块函数
- launch 启动一个web容器，对外提供服务
梳理下web渲染流程
- 根据输入输出类型（如text）封装html组件（with css样式，布局等）
- 点击submit：通过js获取输入的值传递（ajax）给后台处理函数（greet），通过js回调函数接收函数的返回值，然后通过js赋值给html元素
3. 组件介绍
上面只是介绍了Gradio的简单的使用，Gradio提供了丰富的html组件，如文本框，图像，视频，下拉框，单选框，复选框等等。
我们再来看一个在机器视觉推理比较常见的展示：输入一个图片，输出一个图片，并提供下载。
import gradio as gr
from transformers import DPTFeatureExtractor, DPTForDepthEstimation
import torch
import numpy as np
from PIL import Image
import open3d as o3d
from pathlib import Path
import os
feature_extractor = DPTFeatureExtractor.from_pretrained("Intel/dpt-large")
model = DPTForDepthEstimation.from_pretrained("Intel/dpt-large")
def process_image(image_path):
image_path = Path(image_path)
image_raw = Image.open(image_path)
image = image_raw.resize(
(800, int(800 * image_raw.size[1] / image_raw.size[0])),
Image.Resampling.LANCZOS)
# prepare image for the model
encoding = feature_extractor(image, return_tensors="pt")
# forward pass
with torch.no_grad():
outputs = model(**encoding)
predicted_depth = outputs.predicted_depth
## ... 省略
return [img, gltf_path, gltf_path]
title = "Demo: zero-shot depth estimation with DPT + 3D Point Cloud"
description = "This demo is a variation from the original DPT Demo. It uses the DPT model to predict the depth of an image and then uses 3D Point Cloud to create a 3D object."
examples = [["examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg"]]
iface = gr.Interface(fn=process_image,
inputs=[gr.Image(
type="filepath", label="Input Image")],
outputs=[gr.Image(label="predicted depth", type="pil"),
gr.Model3D(label="3d mesh reconstruction", clear_color=[
1.0, 1.0, 1.0, 1.0]),
gr.File(label="3d gLTF")],
title=title,
description=description,
examples=examples,
allow_flagging="never",
cache_examples=False)
iface.launch(debug=True, enable_queue=False)
上面的代码忽略了一些模型推理的细节，主要关注渲染对应的结果就是inputs和outputs。可知，
- inputs和outputs都是可以多个，Gradio根据类型展示相应的组件
- 其中：inputs是gr.Image图像，对应的处理函数的参数为文件路径
type="filepath" - 其中：outputs有三个输出（分布是图片，一个3d图片，一个是文件），这里的三个输出要对应处理函数的三个放回。三个输出会对应三个展示渲染，两个图片和一个文件下载
- 另外一个从展示结果看，最下面的位置有一个内部案例的列表 通过
examples=examples参数，进行展示渲染，这是非常有用的，用来展示模型的最佳效果图。
更多的组件使用详见API
另外，可以通过.launch(share=True)来分享功能，这个功能可以生成一个域名，可以在外部直接访问。
4. 总结
本文简单分享了通过python库Gradio快速构建webApp的过程，总结如下：
- Gradio的本质是封装html+css+js等组件的python库
- Gradio最佳场景为：展示机器学习的推理效果（可交互）
- gr.Interface来渲染效果，注意inputs和outputs就是待渲染的内容
- 记住详细组件API：https://gradio.app/docs/
