Gradio:快速构建你的webApp

原创

aiweker 2024-01-11 21:07:09 ©著作权

文章标签 python gradio AI 文章分类 数据可视化人工智能 私藏项目实操分享

©著作权归作者所有：来自51CTO博客作者aiweker的原创作品，如需转载，请与作者联系，否则将追究法律责任

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:快速构建你的webApp_gradio

从上图可知，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元素

Gradio:快速构建你的webApp_AI_02

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参数，进行展示渲染，这是非常有用的，用来展示模型的最佳效果图。

Gradio:快速构建你的webApp_AI_03