YOLOv5部署到web端（flask+js简单易懂）
文章目录
- 前言
- 最终实现效果图
- 后端实现
-
- 主界面
- 检测函数+检测结果显示
- 前端实现
-
- 主界面(index.html）+显示图片界面
- 总结
前言
最近，老板让写一个程序把yolov5检测模型部署到web端，在网页直接进行目标检测。经过1个星期的努力，终于实现基本功能??（累晕了）。网上查阅了很多资料，发现很多的技术比较复杂，当然他们的页面都比较漂亮，然后我打算自己写一篇简单记录一下哈哈。进入正题，该项目完全由Python的轻量级web框架flask完成，其实有一点js代码，简单易懂??
最终实现效果图
先看项目的效果图吧哈哈，比较辣鸡，但是功能实现了！
检测结果显示：
哈哈 可以看到检测结果还是可以的??
后端实现
首先，写了二个路由函数，分别是主界面、检测函数结果显示。如下所示
主界面
# 定义路由
@app.route('/', methods=['GET', 'POST'])
def upload():if request.method == 'POST': #post是一种请求方式# 从表单中获取上传的文件f = request.files['file'] #request.files 函数作用就是获取前端名为 'file'的文件信息global filename # 定义全局变量，方便其他地方调用filename，如果不定义全局变量，其他地方无法调用filename = f.filename # 获取前端上传图片名字global file_path #同理，定义全局变量# 将文件保存到服务器本地file_path = os.path.join(os.getcwd(), filename) #本地路径+图片名字= 文件路径（file-path)print(file_path) # 当时只是为了测试程序f.save(file_path) # 保存上传的图片到本地目录下，方便后续推理，直接找到图片# 返回文件路径# return file_path#进行检测opt = parse_opt() main(opt)return render_template('index.html')
检测函数+检测结果显示
# 检测结果显示
def return_img_stream(img_local_path):"""工具函数:获取本地图片流:param img_local_path:文件单张图片的本地绝对路径:return: 图片流"""import base64img_stream = ''with open(img_local_path, 'rb') as img_f:img_stream = img_f.read()img_stream = base64.b64encode(img_stream).decode()return img_stream@app.route('/sh', methods=['GET', 'POST']) #定义新路由，显示图片
def hello_world():#图片路径，推理完之后，默认保存的就是runs\detect\exp，这里加上filename，是变成完整的图片路径，然后才能获取显示img_path = 'runs\detect\exp\' + str(filename) img_stream = return_img_stream(img_path) #获取图片流return render_template('index.html', img_stream=img_stream)
最后，我把detect文件中的函数，parse_out函数直接放到app.py文件中了，因为这样传递图片路径比较方便。其中的main函数直接是调用的detect文件，如下所示：
# 检测图片的def parse_opt():parser = argparse.ArgumentParser()parser.add_argument('--weights', nargs='+', type=str, default= 'yolov5s.pt', help='model path or triton URL')#parser.add_argument('--source', type=str, default=0, help='file/dir/URL/glob/screen/0(webcam)')parser.add_argument('--source', type=str, default= file_path, help='file/dir/URL/glob/screen/0(webcam)')parser.add_argument('--data', type=str, default= 'models/yolov5s.yaml', help='(optional) dataset.yaml path')parser.add_argument('--imgsz', '--img', '--img-size', nargs='+', type=int, default=[640], help='inference size h,w')parser.add_argument('--conf-thres', type=float, default=0.25, help='confidence threshold')parser.add_argument('--iou-thres', type=float, default=0.45, help='NMS IoU threshold')parser.add_argument('--max-det', type=int, default=1000, help='maximum detections per image')parser.add_argument('--device', default='', help='cuda device, i.e. 0 or 0,1,2,3 or cpu')parser.add_argument('--project', default= 'runs/detect', help='save results to project/name')parser.add_argument('--name', default='exp', help='save results to project/name')parser.add_argument('--exist-ok', action='store_true', help='existing project/name ok, do not increment')parser.add_argument('--vid-stride', type=int, default=1, help='video frame-rate stride')opt = parser.parse_args()opt.imgsz *= 2 if len(opt.imgsz) == 1 else 1 # expand#print_args(vars(opt))args = parser.parse_args(args=[])print(args)return opt
到这里，后端实现就基本写完了。接下来，看看前端页面 很简单，我都不好意思写??
前端实现
主要就两个页面，分别是主页面index1.html和showimage.html。
主界面(index.html）+显示图片界面
index1.html就是主界面，显示的一些操作按钮。代码如下：
<!DOCTYPE html>
<html lang="en"><head><title>目标检测系统</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><!-- <link rel="stylesheet" href="D:WEBstaticstyle.css"> --></head><body><h2 id="title">目标检测系统</h2><br /><br /><img id="imageDisplay" width="500" height="500" /><img id="result_show" src="data:;base64,{{ img_stream }}"><br /><form method="POST" enctype="multipart/form-data"><br /><input type="file" id="imageFile" onchange="displayImage()" <input type="file" name="file"><br /><input id=button_detect type="submit" value="开始检测"></form><br /><div id="imagePath"></div><script>function displayImage() {var fileInput = document.getElementById("imageFile");var imagePath = document.getElementById("imagePath");var imageDisplay = document.getElementById("imageDisplay");var file = fileInput.files[0];var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {//imagePath.innerHTML = "Image Path: " + fileInput.value;imageDisplay.src = e.target.result;};}function Show() {var img = document.getElementById('img');img.src = '/sh';}</script><!-- <button id="my-button" οnclick="Detect()">检测</button> --><a href="http://127.0.0.1:5000/sh"><button id="button_show" onclick="Show()">显示图片</button></a></body><style>#title{text-align: center; color: black;font-size: xx-large;background-color: cadetblue;
}#imageDisplay{margin-left: 350px;position: relative;}#button_detect{width: 100px;height: 40px;background-color: skyblue;font-size: larger;margin-left: 900px;margin-top: auto;}#button_show{width: 100px;height: 40px;background-color: skyblue;font-size: larger;margin-left:900px;margin-top: auto;}#imageFile{width: 300px;height: 40px;background-color:white;font-size: larger;margin-left:900px;margin-top: auto;}#result_show{height: 500px;width: 500px;margin-left: 200px;}</style>
</html>
总结
写的比较潦草，代码的功能不难理解，相对比较基础。有什么问题可以在评论直接问。然后就是代码基本上都放上来了，可以直接复制然后用。
5.22 更新了一下代码
- 更加简洁了，没有那么多繁琐的步骤
- 加了一点点样式，增加了一些代码注释（不少人私信问我一些代码问题，之前忘记写了，不好意思）
- 然后大家可以根据自己的需要进行改进
·······························
如果觉得有用，就点点赞哈哈??
我看代码需要的同学比较多，我直接把代码上传到github了，就不一个个私发你们了。
大家帮我点点赞或关注哈哈哈??，然后自己下载吧??
源码链接：https://github.com/Jss666/yolo_web
最新更新
- 免费版的有些bug，现在解决了。需要的可以添加主页qq，也有v7、v8。
相关文章：
YOLOv5部署到web端（flask+js简单易懂）
文章目录 前言最终实现效果图后端实现 主界面检测函数检测结果显示 前端实现 主界面(index.html）显示图片界面 总结 前言 最近，老板让写一个程序把yolov5检测模型部署到web端，在网页直接进行目标检测。经过1个星期的努力，终于实…...
【机器学习】深度学习（DNN）
文章目录 1. 神经网络结构2. 训练步骤3. 反向传播4. 为什么深，而不是宽（模块化）5. 初始化参数能否全为0？ 1. 神经网络结构 输入层隐藏层：用于特征转换输出层：用于分类技巧：将网络中的参数写成矩…...
12.30-1-5学习周报
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 文章链接摘要Abstract一、方法介绍1.HAT-CIR2.Horde3.DWGRNet 二、实验总结 文章链接 https://arxiv.org/pdf/2405.04101 摘要 本博客介绍了论文《Continual lea…...
【MySQL】数据操作
数据操作 一、INSERT1、介绍2、语法3、语法介绍4、注意事项5、示例 二、插入否则更新1、介绍2、语法3、语法介绍4、示例 三、ROW_COUNT1、介绍2、示例 四、REPLACE1、介绍2、语法3、示例 五、UPDATE1、介绍2、语法3、示例 六、DELETE1、介绍2、语法3、语法介绍 七、TRUNCATE1、…...
python数据分析：使用pandas库读取和编辑Excel表
使用 Pandas，我们可以轻松地读取和写入Excel 文件，之前文章我们介绍了其他多种方法。 使用前确保已经安装pandas和 openpyxl库（默认使用该库处理Excel文件）。没有安装的可以使用pip命令安装： pip install pandas ope…...
开源轻量级文件分享服务Go File本地Docker部署与远程访问
???欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老…...
异步背后的奥秘：事件循环
异步背后的奥秘：事件循环 复习环节 JavaScript运行时 我们都知道，JavaScript本身是一个单线程的，那JavaScript是如何处理同时发生的多个任务的呢？ 首先JavaScript引擎运行在一个容器中，这个容器可能是浏览器或者nod…...
Springboot使用RabbitMQ实现关闭超时订单的一个简单示例
1.maven中引入rabbitmq的依赖： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> 2.application.yml中进行rabbitmq相关配置： # rabbit…...
小程序基础 —— 07 创建小程序项目
创建小程序项目 打开微信开发者工具，左侧选择小程序，点击 号即可新建项目： 在弹出的新页面，填写项目信息（后端服务选择不使用云服务，开发模式为小程序，模板选择为不使用模板）&…...
【Golang 面试题】每日 3 题（十五）
✍个人博客：Pandaconda-CSDN博客 📣专栏地址：http://t.csdnimg.cn/UWz06 📚专栏简介：在这个专栏中，我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话，欢迎点赞👍收藏…...
Docker命令（用法说明详解）
一、常见Docker容器命令 #根据image创建一个新容器并运行（即使该image已经存在容器，也会再创建一个新容器） docker run IMAGE_NAME #根据image创建一个新容器并运行。 #选项-d：指定容器为后台运行，--name自定义该容器…...
leetcode 热题100（131. 分割回文串）c++
链接：131. 分割回文串 - 力扣（LeetCode） 给你一个字符串 s，请你将 s 分割成一些子串，使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1： 输入：s "aab" 输出ÿ…...
vs2022编译opencv 4.10.0
参考：Windosw下Visual Studio2022编译OpenCV与参考区别在于，没有用cmake GUI，也没有创建build目录，直接用vs2022打开了C:\code\opencv目录，即CMakeLists.txt所在根目录。没有修改默认下载地址，采用手动下载…...
Bash 中的 2＞1 | tee 命令详解
Bash 中的 2>&1 | tee 命令详解 在 Linux 和 Unix 系统中，命令行提供了强大的输出控制功能，能够灵活地处理标准输入（stdin）、标准输出（stdout）和标准错误（stderr）。本文将详…...
MySQL数据库的日志
一、概论 日志（log）是一种记录系统运行时各种状态和事件的文件。 它通常用于系统监控、故障排查、安全审计和性能分析。日志文件可以记录用户操作、系统错误、应用程序行为等信息。日志文件通常包含时间戳、事件类型、事件描述等关键信息，以…...
DataCap 2024.4.1 版本发布：MongoDB 驱动支持、工作流引擎升级
尊敬的 DataCap 用户： DataCap 2024.4.1 版本现已正式发布。本次更新包含多项重要功能升级和性能优化，现将主要更新内容公布如下： 核心功能升级 数据库功能增强 (实现功能) 新增数据库管理功能：支持创建、删除和切换数据库完善表…...
二十三种设计模式-单例模式
单例模式（Singleton）：确保一个类只有一个实例，并提供一个全局访问点。 单例模式两种实现方法：懒汉式和饿汉式。 懒汉式（Lazy Initialization） 懒汉式单例模式在第一次被使用时才创建实例&…...
【微服务】SpringBoot 国际化适配方案使用详解
目录 一、前言 二、国际化概述 2.1 微服务中的国际化是什么 2.1.1 国际化概念 2.1.2 为什么需要国际化 2.2 微服务中常用的国际化方法 2.2.1 资源文件分离 2.2.2 使用国际化框架 2.2.3 使用动态模板 2.2.4 使用数据库存储 2.2.5 API设计结合配置中心 三、SpringBoot…...
太阳能电池板缺陷识别数据集，使用yolo，coco json，pasical voc xml格式标注，可识别旁路二极管,电池故障,热点,2234张原始图片
太阳能电池板缺陷识别数据集，使用yolo，coco json，pasical voc xml格式标注，可识别旁路二极管,电池故障,热点,2234张原始图片 以下是该项目的一些用例： 太阳能发电厂监控：该模型可用于自动化检查和识别大型…...
客户案例：基于慧集通平台集成打通小满CRM+金蝶云星空+钉钉
一、引言 本案例原型公司是一家生物科技公司，公司自开创以来专注于体外诊断生物活性原材料的研究、生产、销售和服务，致力于为全球体外诊断试剂生产企业提供领先且具有竞争力的核心原料和相关辅助产品服务。公司以卓越的产品和优质的服务赢得了客户的广…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...