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+金蝶云星空+钉钉
一、引言 本案例原型公司是一家生物科技公司，公司自开创以来专注于体外诊断生物活性原材料的研究、生产、销售和服务，致力于为全球体外诊断试剂生产企业提供领先且具有竞争力的核心原料和相关辅助产品服务。公司以卓越的产品和优质的服务赢得了客户的广…...
观成科技：隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...
在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤： 第一步： 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为： // 改为 v…...