【YOLOV5 入门】——Gradio搭建Web GUI

引入:上节搭建的UI可视化界面只能以运行程序弹出窗口的形式运行,不能在网页Web中使用,本次代码将会非常少!


一、Gradio简介与安装

Gradio 是一个用于构建机器学习模型演示界面和Web应用的开源库。提供了简单易用的界面,使您可以快速地将机器学习模型部署为交互式应用程序,而无需编写大量的前端代码。下面是一些关于 Gradio 的主要特点和功能:

  • 简单易用:Gradio 提供了简洁直观的 API,使得用户能够轻松地创建交互式界面。

  • 多样化的输入和输出:Gradio 支持多种类型的输入和输出,包括文本、图像、视频、音频和数据框。这使得您可以将各种类型的模型部署为交互式应用程序,例如图像分类、文本生成、对象检测等。

  • 自定义界面:Gradio 允许用户自定义界面的布局和样式,以满足特定的需求。您可以轻松地调整输入和输出部件的大小、排列方式和样式。

  • 实时更新:Gradio 提供了实时更新的功能,使得应用程序能够在用户与模型进行交互的同时实时更新输出结果。

  • 多模型集成:Gradio 支持将多个模型集成到同一个应用程序中,使用户能够比较不同模型的性能和结果。

  • 部署和共享:Gradio 允许用户将创建的应用程序部署到云端或本地服务器,并生成一个分享链接,方便用户与他人共享应用程序。

Pycharm终端进入虚拟环境,pip安装:

python 复制代码
pip install gradio

二、gradio_demo搭建Web GUI

1、简单界面

python 复制代码
import torch
import gradio as gr

model = torch.hub.load("./", "custom", "runs/train/exp9/weights/best", source="local")
gr.Interface(inputs=["image"], outputs=["image"], fn=lambda img:model(img).render()[0]).launch()
"""
用 Gradio 创建了一个界面,该界面接受一个图像作为输入,并输出一个图像:
gradio.Interface: 这是 Gradio 中用于创建交互式界面的主要类。您可以使用它来定义输入和输出以及应用程序的行为。
inputs=["image"]: 这表示输入部分只有一个元素,类型为图像。在这个界面中,用户将能够上传一张图像作为输入。
        实际用的inputs=[gr.Image]类,这里由于不需要变更直接使用字符串映射实例化
outputs=["image"]: 这表示输出部分也只有一个元素,同样是图像类型。这意味着用户将得到一张图像作为输出。
fn=lambda img:model(img).render()[0]: 这是定义了应用程序行为的部分。在这里,fn 参数接受一个函数,该函数将输入图像作为参数,然后返回一个图像作为输出。
        在这个函数中,model(img) 调用了一个模型,该模型接受图像作为输入并返回一个结果。.render()[0] 则表示从模型返回的结果中取出第一个元素,这可能是处理后的图像。
launch(): 这是用于启动 Gradio 应用程序的方法。一旦调用了 launch(),Gradio 将根据之前定义的输入、输出和行为创建一个界面,并在默认浏览器中打开该界面,以便用户与之交互。
"""

上面是一个最基本的代码demo,运行上面代码:

ctrl+左击链接可跳转web:


2、充实界面

现在界面太单一,下面完善代码:

python 复制代码
import torch
import gradio as gr

model = torch.hub.load("./", "custom", "runs/train/exp9/weights/best", source="local")

title = "基于Gradio搭建YOLOv5检测Web GUI"
desc = "这种方式搭建的UI界面代码量很少,不要太方便!!!"

base_conf,base_iou = 0.35, 0.55  #定义一个基准的conf和iou参数,刚打开会设置为这个,点击web界面"clear"按钮也可返回默认值

def det_image(img, conf_thresh, iou_thresh):
    model.conf = conf_thresh  #将滑动条对应的conf和iou参数给model
    model.iou = iou_thresh
    return model(img).render()[0]

gr.Interface(inputs=["image",gr.Slider(minimum=0,maximum=1, value=base_conf),gr.Slider(minimum=0,maximum=1,value=base_iou)], #inputs=["image","slider", "slider"]slider为调整conf和iou参数的滑动条,默认时0-100,需要调整所以没用这种写法
             outputs=["image"],
             fn=det_image,
             title=title,
             description=desc).launch()

如果还想添加功能可继续完善下面函数,比如可以添加几张可供选择的示例图片:

python 复制代码
.....
gr.Interface(inputs=["image",gr.Slider(minimum=0,maximum=1, value=base_conf),gr.Slider(minimum=0,maximum=1,value=base_iou)], #inputs=["image","slider", "slider"]slider为调整conf和iou参数的滑动条,默认时0-100,需要调整所以没用这种写法
             outputs=["image"],
             fn=det_image,
             title=title,
             description=desc,
             examples = [["./datasets/images/train/y.png", base_conf, base_iou],["./datasets/images/train/l.png", base_conf, base_iou]]).launch()

如果说想调用摄像头检测,可把input参数做调整:

python 复制代码
....
gr.Interface(inputs=[gr.Webcam(),gr.Slider(minimum=0,maximum=1, value=base_conf),gr.Slider(minimum=0,maximum=1,value=base_iou)], #inputs=["image","slider", "slider"]slider为调整conf和iou参数的滑动条,默认时0-100,需要调整所以没用这种写法
             outputs=["image"],
             fn=det_image,
             title=title,
             description=desc,
             examples = [["./datasets/images/train/y.png", base_conf, base_iou],["./datasets/images/train/l.png", base_conf, base_iou]]).launch()

如果不想要每次点击submit提交,可以加一个参数live =True:

python 复制代码
...
gr.Interface(inputs=["image",gr.Slider(minimum=0,maximum=1, value=base_conf),gr.Slider(minimum=0,maximum=1,value=base_iou)], #inputs=["image","slider", "slider"]slider为调整conf和iou参数的滑动条,默认时0-100,需要调整所以没用这种写法
             outputs=["image"],
             fn=det_image,
             title=title,
             description=desc,
             live= True,
             examples = [["./datasets/images/train/y.png", base_conf, base_iou],["./datasets/images/train/l.png", base_conf, base_iou]]).launch()

如果想将其生成一个地址,在公网的任何地方点击都可运行,可指定launch的参数share=True,这样其他人也可通过链接进行使用:

python 复制代码
.....
gr.Interface(inputs=["image",gr.Slider(minimum=0,maximum=1, value=base_conf),gr.Slider(minimum=0,maximum=1,value=base_iou)], #inputs=["image","slider", "slider"]slider为调整conf和iou参数的滑动条,默认时0-100,需要调整所以没用这种写法
             outputs=["image"],
             fn=det_image,
             title=title,
             description=desc,
             live= True,
             examples = [["./datasets/images/train/y.png", base_conf, base_iou],["./datasets/images/train/l.png", base_conf, base_iou]]).launch(share=True)

由于服务器在国外,链接什么的加载较慢,可自行试验!

这种是最基础的Web GUI设计方法,如果有更多复杂需求可以使用其他工具!


往期精彩

STM32专栏(9.9)http://t.csdnimg.cn/A3BJ2

OpenCV-Python专栏(9.9)http://t.csdnimg.cn/jFJWe

AI底层逻辑专栏(9.9)http://t.csdnimg.cn/6BVhM

机器学习专栏(免费)http://t.csdnimg.cn/ALlLlSimulink专栏(免费)http://t.csdnimg.cn/csDO4电机控制专栏(免费)http://t.csdnimg.cn/FNWM7

相关推荐
weixin_515202498 分钟前
第R3周:RNN-心脏病预测
人工智能·rnn·深度学习
汪洪墩38 分钟前
【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换
开发语言·javascript·python·ecmascript·webgl·cesium
KeepThinking!1 小时前
YOLO-World:Real-Time Open-Vocabulary Object Detection
人工智能·yolo·目标检测·多模态
吕小明么2 小时前
OpenAI o3 “震撼” 发布后回归技术本身的审视与进一步思考
人工智能·深度学习·算法·aigc·agi
程序员shen1616112 小时前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法
人人人人一样一样2 小时前
作业Python
python
CSBLOG2 小时前
深度学习试题及答案解析(一)
人工智能·深度学习
四口鲸鱼爱吃盐2 小时前
Pytorch | 利用VMI-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
人工智能·pytorch·python
四口鲸鱼爱吃盐3 小时前
Pytorch | 利用PI-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
人工智能·pytorch·python