python小知识-Gradio:快速构建你的webApp

简介: Gradio定位是快速构建一个针对人工智能的python的webApp库,在Hugging Face等提供各种模型推理展示的平台广告使用,阿里的魔塔展示也是基于此。

Gradio:快速构建你的webApp

1. 什么是Gradio

如果你了解web开发,一定会知道开发一款webApp需要涉及很多技术栈:

  • 前端:HTML + CSS + JS (可能会涉及不同的CSS框架和JS框架如jquery VUE react等)
  • 后端语言:如python/java
  • web容器:如flask/tomcat

如果你只会python,又不想重头学习上述技术,你要怎么办?

据我所知,有两种解决方案:

streamlit之前我有介绍过,今天要分享的是Gradio, 提供的功能和streamlit类似,你只要会python就可以快速构建一个webApp。
md-2022-12-29-17-41-32.png

从上图可知,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()`

md-2022-12-29-17-59-06.png

上面的代码就是简单一个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组件,如文本框,图像,视频,下拉框,单选框,复选框等等。

我们再来看一个在机器视觉推理比较常见的展示:输入一个图片,输出一个图片,并提供下载。

md-2022-12-29-18-29-52.png


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/
目录
相关文章
|
2月前
|
人工智能 JavaScript API
零基础构建MCP服务器:TypeScript/Python双语言实战指南
作为一名深耕技术领域多年的博主摘星,我深刻感受到了MCP(Model Context Protocol)协议在AI生态系统中的革命性意义。MCP作为Anthropic推出的开放标准,正在重新定义AI应用与外部系统的交互方式,它不仅解决了传统API集成的复杂性问题,更为开发者提供了一个统一、安全、高效的连接框架。在过去几个月的实践中,我发现许多开发者对MCP的概念理解透彻,但在实际动手构建MCP服务器时却遇到了各种技术壁垒。从环境配置的细节问题到SDK API的深度理解,从第一个Hello World程序的调试到生产环境的部署优化,每一个环节都可能成为初学者的绊脚石。因此,我决定撰写这篇全面的实
392 67
零基础构建MCP服务器:TypeScript/Python双语言实战指南
|
2月前
|
机器学习/深度学习 算法 量子技术
GQNN框架:让Python开发者轻松构建量子神经网络
为降低量子神经网络的研发门槛并提升其实用性,本文介绍一个名为GQNN(Generalized Quantum Neural Network)的Python开发框架。
48 4
GQNN框架:让Python开发者轻松构建量子神经网络
|
11天前
|
人工智能 自然语言处理 安全
Python构建MCP服务器:从工具封装到AI集成的全流程实践
MCP协议为AI提供标准化工具调用接口,助力模型高效操作现实世界。
146 0
|
3月前
|
数据采集 数据可视化 JavaScript
用Python采集CBC新闻:如何借助海外代理IP构建稳定采集方案
本文介绍了如何利用Python技术栈结合海外代理IP采集加拿大CBC新闻数据。内容涵盖使用海外代理IP的必要性、青果代理IP的优势、实战爬取流程、数据清洗与可视化分析方法,以及高效构建大规模新闻采集方案的建议。适用于需要获取国际政治经济动态信息的商业决策、市场预测及学术研究场景。
|
3月前
|
数据采集 Web App开发 自然语言处理
利用Python构建今日头条搜索结果的可视化图表
利用Python构建今日头条搜索结果的可视化图表
|
6月前
|
机器学习/深度学习 设计模式 API
Python 高级编程与实战:构建 RESTful API
本文深入探讨了使用 Python 构建 RESTful API 的方法,涵盖 Flask、Django REST Framework 和 FastAPI 三个主流框架。通过实战项目示例,详细讲解了如何处理 GET、POST 请求,并返回相应数据。学习这些技术将帮助你掌握构建高效、可靠的 Web API。
|
6月前
|
机器学习/深度学习 设计模式 测试技术
Python 高级编程与实战:构建自动化测试框架
本文深入探讨了Python中的自动化测试框架,包括unittest、pytest和nose2,并通过实战项目帮助读者掌握这些技术。文中详细介绍了各框架的基本用法和示例代码,助力开发者快速验证代码正确性,减少手动测试工作量。学习资源推荐包括Python官方文档及Real Python等网站。
|
6月前
|
机器学习/深度学习 设计模式 API
Python 高级编程与实战:构建微服务架构
本文深入探讨了 Python 中的微服务架构,介绍了 Flask、FastAPI 和 Nameko 三个常用框架,并通过实战项目帮助读者掌握这些技术。每个框架都提供了构建微服务的示例代码,包括简单的 API 接口实现。通过学习本文,读者将能够使用 Python 构建高效、独立的微服务。
|
6月前
|
消息中间件 分布式计算 并行计算
Python 高级编程与实战:构建分布式系统
本文深入探讨了 Python 中的分布式系统,介绍了 ZeroMQ、Celery 和 Dask 等工具的使用方法,并通过实战项目帮助读者掌握这些技术。ZeroMQ 是高性能异步消息库,支持多种通信模式;Celery 是分布式任务队列,支持异步任务执行;Dask 是并行计算库,适用于大规模数据处理。文章结合具体代码示例,帮助读者理解如何使用这些工具构建分布式系统。

热门文章

最新文章

推荐镜像

更多