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+金蝶云星空+钉钉
一、引言 本案例原型公司是一家生物科技公司，公司自开创以来专注于体外诊断生物活性原材料的研究、生产、销售和服务，致力于为全球体外诊断试剂生产企业提供领先且具有竞争力的核心原料和相关辅助产品服务。公司以卓越的产品和优质的服务赢得了客户的广…...
ubuntu 如何使用vrf
在Ubuntu或其他Linux系统中，您使用ip命令和sysctl命令配置的网络和内核参数通常是临时的，这意味着在系统重启后这些配置会丢失。为了将这些配置持久化，您需要采取一些额外的步骤。 对于ip命令配置的网络接口和路由，您可以将这些配…...
Debian-linux运维-ssh配置（兼容Jenkins插件的ssh连接公钥类型）
系统版本：Debian 12.5、11.1 1 生成密钥对 可以用云服务商控制台生成的密钥对，也可以自己在客户端或者服务器上生成， 已经有密钥对就可以跳过这步 用户默认密钥文件路径为 ~/.ssh/id_rsa，可以在交互中指定路径，也可…...
K8S详解(5万字详细教程)
目录 编辑 一、集群管理命令 二、命名空间 1. 获取命名空间列表 2. 创建命名空间 3. 删除命名空间 4. 查看命名空间详情 三、Pod 1. Pod概述 2. Pod相位状态 3. 管理命令 3.1 获取命名空间下容器(pod)列表 3.2 查看pod的详细信息 3.3 创建 && 运行 3.4 …...
Redis6为什么引入了多线程？
大家好，我是锋哥。今天分享关于【Redis6为什么引入了多线程？】面试题。希望对大家有帮助； Redis6为什么引入了多线程？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 6 引入了多线程的主要目的是提高性能&#…...
KMP 2024 年总结，Kotlin 崛起的一年
2024 Google I/O 上正式官宣了 KMP（Kotlin Multiplatform）项目，它是 Google Workspace 团队的一项长期「投资」项目，由 JetBrains 开发维护和开源的项目，简单来说，JetBrains 主导，Google Worksp…...
leecode188.买卖股票的最佳时机IV
这道题目我在买卖股票III就已经得出规律了，具体可看买卖股票的最佳时机||| class Solution { public:int maxProfit(int k, vector<int>& prices) {int nprices.size();vector<vector<int>> dp(n,vector<int>(2*k1,0));for(int j1;j&l…...
分布式消息队列RocketMQ
一、RocketMQ概述 1.1 MQ 概述 MQ，Message Queue，是一种提供消息队列服务的中间件，也成为消息中间件，是一套提供了消息生产、存储、消费全过程API的软件系统。消息即数据 1.2 MQ 用途 MQ的用途总结起来可分为以下三点 限流削峰…...
诗韵--代码之外的生活：2025 元旦歌
2025 元旦歌 1 说明2 正文3 简评 1 说明 又是一年元旦，在公司抽个空，写首诗纪念一下。 本系列博客：诗韵–代码之外的生活 2 正文 2025 元旦歌 一年又一年， 又到新元旦。 恍若零五年， 已是二五年。 工作忙连连&#x…...
SpringBoot项目启动的时候，指定jvm内存大小的3种方式
1. 通过命令行固定参数 在命令行中运行 Spring Boot 应用程序时，可以使用 -Xms 和 -Xmx 选项指定初始和最大堆内存大小。例如： java -Xms512m -Xmx1024m -jar mySpringBootApp.jar 优点： 简单明了 缺点： 是写死的，…...
学习vue3的笔记
一、vue和react的对比 1、基础介绍 vue：https://cn.vuejs.org/ vue3是2020年创建的 react：https://react.dev/ react是一个2013年开源的JavaScript库，严格意义上来说不是一个框架 2、diff算法 两个框架采用的都是同级对比策略 两节点对…...