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

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

一、Gradio简介与安装

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

简单易用：Gradio 提供了简洁直观的 API，使得用户能够轻松地创建交互式界面。
多样化的输入和输出：Gradio 支持多种类型的输入和输出，包括文本、图像、视频、音频和数据框。这使得您可以将各种类型的模型部署为交互式应用程序，例如图像分类、文本生成、对象检测等。
自定义界面：Gradio 允许用户自定义界面的布局和样式，以满足特定的需求。您可以轻松地调整输入和输出部件的大小、排列方式和样式。
实时更新：Gradio 提供了实时更新的功能，使得应用程序能够在用户与模型进行交互的同时实时更新输出结果。
多模型集成：Gradio 支持将多个模型集成到同一个应用程序中，使用户能够比较不同模型的性能和结果。
部署和共享：Gradio 允许用户将创建的应用程序部署到云端或本地服务器，并生成一个分享链接，方便用户与他人共享应用程序。

Pycharm终端进入虚拟环境，pip安装：

pip install gradio

二、gradio_demo搭建Web GUI

1、简单界面

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、充实界面

现在界面太单一，下面完善代码：

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()

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

.....
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参数做调整：

....
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：

...
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，这样其他人也可通过链接进行使用：

.....
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设计方法，如果有更多复杂需求可以使用其他工具！