【AI模型部署】基于gradio和python的网页交互界面(web-ui)——简易使用方法

在这里插入图片描述
使用gradio,只需在原有的代码中增加几行,快速部署机器学习模型,就能自动化生成交互式web页面,并支持多种输入输出格式,比如图像分类中的图>>标签,超分辨率中的图>>图等。
同时还支持生成能外部网络访问的链接,能够迅速让你的朋友,同事体验你的算法。

参考

  1. https://gradio.app/demos/
  2. https://www.machinelearningnuggets.com/gradio-tutorial/
  3. https://gradio.app/quickstart/

文章目录

  • 参考
  • 安装
  • 一、简单的欢迎界面分析——(输入文字UI+ 函数处理+输出文字)
    • UI操作效果
    • 分析
    • 使用控件函数设置控件的参数
    • 多UI控件输入、输出
  • 二、简单界面控件组合
    • 2.1 多个tags界面,(不同输入输出功能)
      • 多tags代码
    • 2.2 进度条显示函数处理时间(process)
      • 2.2 进度条代码
  • 三、`图像`相关操作、`模型部署`
    • 3.1 对上传图片,直接处理
    • 3.2 分类模型UI部署 (需要安装pytorch环境)
      • 下载模型界面(可手动)
      • 代码
  • 附录
    • 端口被占用 [Errno 10048] error while attempting to bind on address
      • 解决方法1 (指定打开的端口)
      • 解决方法2
        • 找到占用端口+杀死

安装

注意,不要把python文件与

pip install gradio

一、简单的欢迎界面分析——(输入文字UI+ 函数处理+输出文字)

逻辑:输入UI中的参数,提交后自动传入绑定的函数,
其中 “text” 表示输入输出UI控件是文本框。

import gradio as grdef greet(name):return "Hello " + name + "!"demo = gr.Interface(fn=greet,inputs="text", outputs="text")
demo.launch()

UI操作效果

默认启动 ,如果7860已经占用,自动变为7861,如果端口无法启动 。。 端口被占用时,可指定端口
demo.launch(server_port=30001)

http://127.0.0.1:7860/

动效
在这里插入图片描述

分析

在上面的例子中,我们看到一个简单的基于文本的函数
gr.InterfaceInterface 核心类使用三个必需参数进行初始化:Interface
fn:将 UI 包裹起来的函数,该函数可以是任何功能,从音乐生成器到税收计算器,再到预训练机器学习模型的预测函数
inputs:用于输入的组件(例如,或"text",“image”,“audio”)
outputs:用于输出的组件(例如,或"text",“image”,“label”)

使用控件函数设置控件的参数

设置2行文本宽度,文本框的内的提示词

import gradio as grdef greet(name):return "Hello " + name + "!"demo = gr.Interface(fn=greet,inputs=gr.Textbox(lines=2, placeholder="这里是提示文本框输入的内容..."),outputs="text",
)
demo.launch()

UI界面
在这里插入图片描述

多UI控件输入、输出

3个UI控件作为输入,2个输出,
输入名字,是否是早晨,今天的温度,
自动输入问候以及华氏温度与摄氏温度的转换
在这里插入图片描述

import gradio as grdef greet(name, is_morning, temperature):# salutation表示致意、问候salutation = "Good morning" if is_morning else "Good evening"greeting = f"{salutation} {name}. It is {temperature} degrees today"# 摄氏温度 = (华氏温度 – 32) ÷ 1.8celsius = (temperature - 32) * 5 / 9return greeting, round(celsius, 2)demo = gr.Interface(fn=greet,inputs=["text", "checkbox", gr.Slider(0, 100,label="华氏温度")],outputs=["text", "number"],
)
demo.launch(server_port=30001)

二、简单界面控件组合

在这里插入图片描述

2.1 多个tags界面,(不同输入输出功能)

每个tags的功能、输入输出控件科技不同、且独立
在这里插入图片描述

多tags代码


import gradio as gr#app 1
def user_greeting(name):return "Hi! " + name + " Welcome !!😎"#app 2
def user_help(value):return f"you pick {value} "def tags3(img):return img# tags1的输入、输出,以及对应处理函数
app1 =  gr.Interface(fn = user_greeting, inputs="text", outputs="text")
# tags1的输入、输出,以及对应处理函数
app2 =  gr.Interface(fn = user_help, inputs="slider", outputs="text")
# tags1的输入、输出,以及对应处理函数
app3 =  gr.Interface(fn = tags3, inputs="image", outputs="image")demo = gr.TabbedInterface([app1, app2,app3],tab_names=["第一个界面", "第二个界面","tags3_图像"],title="多选项卡demo")
demo.launch()

2.2 进度条显示函数处理时间(process)

进度条可以反映某些变量的值
在这里插入图片描述

2.2 进度条代码

import gradio as gr
import time
# from https://gradio.app/docs/#progress
def my_function(x=10, progress_demo=gr.Progress()):x=int(x)progress_demo(0, desc="Starting...")time.sleep(1)for i in progress_demo.tqdm(range(x)):time.sleep(0.1)res=f'run {x} steps'return res
gr.Interface(my_function,gr.Number(),gr.Textbox()).queue().launch()

三、图像相关操作、模型部署

3.1 对上传图片,直接处理

上传一张图片,输入为灰度图像,其中处理函数可以修改为自己的。
在这里插入图片描述### 完整代码

import numpy as np
import gradio as gr
from PIL import Imagedef gray(input_img):# 灰度值 = 0.2989 * R + 0.5870 * G + 0.1140 * B# image[..., :3]表示提取图像的前三个通道(即R、G、B通道)# 省略号可以在索引中表示对应维度的完整范围。gray = np.dot(input_img[..., :3], [0.2989, 0.5870, 0.1140])gray = gray.astype(np.uint8)  # 将灰度图像转换为无符号整型 ,如果不加一般会报错# pil_image = Image.fromarray(gray)  # 将灰度图像数组转换为PIL图像对象return graydemo = gr.Interface(gray, gr.inputs.Image(), outputs="image")
demo.launch(server_port=7862)

3.2 分类模型UI部署 (需要安装pytorch环境)

在这里插入图片描述

下载模型界面(可手动)

Downloading: “https://github.com/pytorch/vision/zipball/v0.6.0” to C:\Users\admin/.cache\torch\hub\v0.6.0.zip
Downloading: “https://download.pytorch.org/models/resnet18-f37072fd.pth” to C:\Users\admin/.cache\torch\hub\checkpoints\resnet18-f37072fd.pth

代码

import gradio as gr
import torch
import requests
from torchvision import transformsmodel = torch.hub.load('pytorch/vision:v0.6.0', 'resnet18', pretrained=True).eval()
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")
print('labels',labels)def predict(inp):inp = transforms.ToTensor()(inp).unsqueeze(0)with torch.no_grad():prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)confidences = {labels[i]: float(prediction[i]) for i in range(1000)}return confidencesdemo = gr.Interface(fn=predict,inputs=gr.inputs.Image(type="pil"),outputs=gr.outputs.Label(num_top_classes=3),# examples=[["cheetah.jpg"]],)demo.launch(server_port=7865)

附录

端口被占用 [Errno 10048] error while attempting to bind on address

ERROR: [Errno 10048] error while attempting to bind on address (‘127.0.0.1’, 7860): 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。

解决方法1 (指定打开的端口)

server_port=xxx

...........
demo.launch(server_port=30001)

解决方法2

打开命令端
在这里插入图片描述

找到占用端口+杀死

netstat -ano|findstr "7860"
taskkill  -F -PID your_id

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/2309.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode】17.电话号码的字母组合

一、题目 1、题目描述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。 示例1: 输入:digits = "23" 输出:["ad","ae",…

C高级重点

1、请简要描述一下Linux文件系统的层级结构,包括不同目录的作用和功能。 Linux的文件系统结构是一个倒插树结构,所有的文件都从根目录出发。 2、find指令的用途 find 查找的路径 -name 文件名 ----->在指定路径下,以文件名为条件查找文…

M1 macbook上安装docker 编译内核 并使用qemu启动内核。

1、在M1上安装docker这个就不用提供步骤了,网上自行搜索。 2、在M1上pull一个ubuntu的容器。docker pull ubuntu:18.04 docker images REPOSITORY TAG IMAGE ID CREATED SIZE ubuntu 18.04 d1a528908992 …

SpringBoot(实用开发篇)

SpringBoot实用开发篇 第三方属性bean绑定 ConfigurationProperties 使用ConfigurationProperties为第三方bean绑定属性 配置文件 datasource:driverClassName: com.mysql.jdbc.Driver servers:ipAddress: 192.168.0.1port: 80timeout: -1ServerConfig类: Dat…

前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

起因: 前端开发是一个工程化的流程。 包括持续集成、持续部署。 我认为集成 的第一方面就是开发,在前端项目开发中,需要保证代码格式规范的统一、代码质量、提交的规划。而这些要求需要通过各种插件来保证规范化和流程化开发。 如何配置这…

Vue中如何进行数据导入与Excel导入

Vue中如何进行数据导入与Excel导入 Vue是一款非常流行的JavaScript框架,它提供了一套用于构建用户界面的工具和库。在Vue中,我们可以使用多种方式来导入数据,包括从服务器获取数据、从本地存储获取数据、从文件中读取数据等等。其中&#xf…

Linux进程信号【信号处理】

✨个人主页: 北 海 🎉所属专栏: Linux学习之旅 🎃操作环境: CentOS 7.6 阿里云远程服务器 文章目录 🌇前言🏙️正文1、信号的处理时机1.1、处理情况1.2、"合适" 的时机 2、用户态与内…

【Redis】不卡壳的 Redis 学习之路:事务

本文是Redis系列第三篇,前两篇欢迎移步 【Redis】不卡壳的 Redis 学习之路:从十大数据类型开始入手_AQin1012的博客-CSDN博客关于Redis的数据类型,各个文章总有些小不同,我们这里讨论的是Redis 7.0,为确保准确&#x…

MFC加载3ds模型初步

网上下一个资源,名为 OpenGL三维场景绘制.rar; 看一下它是用MFC和opengl,自己绘制三维场景; 运行一下,有一个exe可以运行; 有一个较新版本的不能运行;这应是缺少VC运行库; 下面单独…

K8S集群搭建

K8S集群搭建 1. 基础环境 IP节点名称域名规格10.1.2.111k8s-master-1master01.k8s.io4核8G,50G10.1.2.112k8s-master-2master02.k8s.io4核8G,50G10.1.2.113k8s-cluster-endpoint,没有具体节点,只vipmaster.k8s.io10.1.2.180k8s-…

基于深度学习的高精度足球检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要:基于深度学习的高精度足球检测识别系统可用于日常生活中或野外来检测与定位足球目标,利用深度学习算法可实现图片、视频、摄像头等方式的足球目标检测识别,另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型…