【YOLO5 项目实战】（9）将 YOLO5 部署到 Web 端
欢迎关注『youcans动手学模型』系列
本专栏内容和资源同步到 GitHub/youcans
【YOLO5 项目实战】（9）将 YOLO5 部署到 Web 端
- 1. Flask 框架的安装与使用
- 1.1 Flask 框架的安装与使用
- 1.2 Flask 框架例程
- 1.3 Flask 路由访问
- 2. Flask 部署 OpenCV DNN 模型的 Web 应用程序
- 2.1 从指定的 url 地址读取图像
- 2.2 OpenCV 级联分类器类 cv::CascadeClassifier
- 2.3 cvFlask03 项目的构建步骤
- 3. Flask 部署 YOLOv5 模型的 Web 应用程序
- 3.1 Flask 框架的处理流程
- 3.2 Yolo5Flask01 项目的构建步骤
- 3.3 Yolo5Flask03 的主程序
- 3.4 运行 Yolo5Flask03 项目
- 4. YOLOv5 官方 Flask REST API 的使用
- 4.1 Flask REST API 例程
- 4.2 YOLOv5s 模型部署的步骤
- 5. 基于图片文件的 Flask REST API
- 6. 返回检测结果图片
本节详细讲解使用 Flask 框架构建 YOLOv5 模型的 Web 应用程序，将 YOLOv5 模型部署到Web端，实现基于 Web 的图像处理和目标检测系统。
限于篇幅，本节只介绍上传图片进行目标检测。关于视频流的处理，将在后文介绍。
1. Flask 框架的安装与使用
Flask 是一个Python 编写的Web微框架，让我们可以用Python语言快速实现Web服务。只提供Web服务器支持，不提供全栈开发支持。Flask 非常轻量、学习简单，适合小微原型系统的开发。
1.1 Flask 框架的安装与使用
为了使用 Flask 构建计算机视觉 Web 应用程序，首先进行安装：
$ pip3 install flask
安装完成后，通过控制台命令cmd或 Anaconda Prompt (miniconda)进入命令行进行测试。
$ python >>> import flask >>> print(flask.__version__) 2.3.1
1.2 Flask 框架例程
使用Flask框架编写一个显示“Hello Flask!”的web程序，介绍如何配置、调试Flask框架。
（1）新建一个Flask项目，项目的文件树如下。
---项目文件名\ |---static\ |---templates\ |--- server.py项目默认配置建立static和templates目录，static目录用来存放静态资源，例如图片、js、css文件等，templates目录存放模板文件。网站逻辑保存在Python程序文件server.py中。
# server.py from flask import Flask # 导入 Flask 包 app = Flask(__name__) # 用当前脚本名称实例化Flask对象 @app.route('/') # 将函数绑定到指定URL def hello(): return 'Hello Flask!' if __name__ == '__main__': app.run() # 启动一个本地开发服务器，激活该网页例程首先创建 Flask 类的实例，作为Web服务器的网关接口（Web Server Gateway Interface, WSGI）。然后，route()装饰器用于指定URL的触发函数，将触发函数绑定到指定URL。最后，函数返回在浏览器中显示的内容。
（2）运行Python程序。
运行程序server.py，在控制台显示如下的消息，表明Web服务器已启动。
$ python server.py * Serving Flask app 'server' * Debug mode: off WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
（3）在浏览器中访问http://127.0.0.1:5000/。
这将对服务器发送GET请求，该请求将返回相应的消息：
127.0.0.1 - - [26/Apr/2023 21:42:13] “GET / HTTP/1.1” 200 -
127.0.0.1 - - [26/Apr/2023 21:42:13] “GET /favicon.ico HTTP/1.1” 404 -
1.3 Flask 路由访问
Web框架使用路由技术直接访问所需的页面，而无需从主页导航。
Flask中使用route()装饰器将应用程序的URL绑定到函数，可以实现路由访问。例如：@app.route('/hello')将URL/hello规则绑定到hello_world()函数。
@app.route('/hello') def hello_world(): return 'hello world'用户访问 http://localhost:5000/hello，将在浏览器中显示hello_world()函数的输出。
application对 象的add_url_rule()函数也可用于将URL与函数绑定，如上例所示，使用route()装饰器的目的也由以下表示：
def hello_world(): return 'hello world' app.add_url_rule('/', 'hello', hello_world)通过向规则参数添加变量部分，可以动态构建URL。此变量部分标记为。它作为关键字参数传递给与规则相关联的函数。
例如，在下面的例程中，route()装饰器的规则参数包含附加到URL’/hello’的。
from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello world!' @app.route('/user') def hello_user(): return 'Hello user!' @app.route('/hello/') def hello_name(name): return 'Hello %s!' % name if __name__ == '__main__': app.run(host='0.0.0.0')如果在浏览器中输入http://localhost:5000/hello/youcans作为URL，则’youcans’ 将作为参数提供给 hello_name()函数。该请求将返回相应的消息：
* Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:80 * Running on http://192.168.3.249:80 Press CTRL+C to quit 127.0.0.1 - - [27/Apr/2023 09:06:27] "GET /hello/youcans HTTP/1.1" 200 - 127.0.0.1 - - [27/Apr/2023 09:06:27] "GET /favicon.ico HTTP/1.1" 404 -
2. Flask 部署 OpenCV DNN 模型的 Web 应用程序
本节介绍上传本地图片，对图片进行处理（使用OpenCV级联检测器检测上传图像中的人脸和人眼），返回处理图片并在网页上进行格式化显示。关心 YOLO5模型部署的读者，可以跳过本节阅读本文第3部分。
2.1 从指定的 url 地址读取图像
（1）首先从指定的 url 地址读取图像。
Flask中使用route()装饰器将应用程序的URL绑定到函数，可以接受URL参数实现路由访问。
@app.route('/enhance', methods=['GET']) def detail_enhance(): # 从指定的 url 地址读取图像 with urllib.request.urlopen(request.args.get('url')) as url: image_array = np.asarray(bytearray(url.read()), np.uint8) # 从指定的内存缓存中读取数据，并把数据转换成图像格式 imgCV = cv2.imdecode(image_array, -1) # 转换为 OpenCV 图像使用函数request.args.get(‘url’)来获取URL参数，构建一个变量URL。当我们访问/user/时，就可以接收到URL地址，然后从URL地址读取图片。
注意不能使用函数cv.imread()读取图像，而要使用函数cv.imdecode()从指定的内存缓存中读取数据，并将传输数据转换为OpenCV图像。
（2）图像处理。
使用 OpenCV 级联分类器进行图像处理。
（3）将图像编码到内存缓冲区。
使用函数cv.imencode()将图像编码为流数据，存储到内存缓存中，方便网络传输。
（4）生成返回页面响应。
使用函数make_response()将缓存中的图像编码封装为响应对象，将页面响应返回到客户端。
2.2 OpenCV 级联分类器类 cv::CascadeClassifier
OpenCV 中定义了级联分类器类 cv::CascadeClassifier。在 Python 语言中，使用接口函数 cv.CascadeClassifier() 从文件加载级联分类器模型，成员函数 cv.CascadeClassifier.detectMultiScale() 对图像进行目标检测。
cv.CascadeClassifier(filename) cv.CascadeClassifier.detectMultiScale(image[, scaleFactor=1.1, minNeighbors=3, flags=0, minSize=Size(), maxSize=Size()]) → objects
OpenCV 提供了 Haar 级联检测器的预训练模型如下，可以从 OpenCV 安装包 \data\haarcascades中提取，或者从【GitHub】opencv/data下载。
使用 Haar 级联检测器检测图片中的人脸的步骤如下：
（1）创建一个 CascadeClassifier 级联分类器对象，使用 load() 方法从 .xml 文件加载级联分类器模型。
（2）读取待检测的图片。
（3）使用detectMultiScale()函数检测图片，返回检测到的边界矩形。
（4）将检测到的边界矩形绘制到检测图片上。
2.3 cvFlask03 项目的构建步骤
项目cvFlask03的文件树如下。
---项目文件名\ |---static\ |---templates\ | |---processed.html | |---upload.html |--- cvFlask03.pycvFlask03.py中图像处理子程序的代码如下。
# cvFlask03.py def imageProcessing(filepath): # 图片处理子程序：人脸检测+人眼检测 imgCV = cv2.imread(filepath) # 从 filepath 路径读取图片 gray = cv2.cvtColor(imgCV, cv2.COLOR_BGR2GRAY) # 加载 Haar 级联分类器 预训练模型 model_path = "../data/haarcascade_frontalface_alt2.xml" face_detector = cv2.CascadeClassifier(model_path) # eye_path = "../data/haarcascade_eye.xml" # 人眼检测器 eye_detector = cv2.CascadeClassifier(eye_path) # # 使用级联分类器检测人脸 faces = face_detector.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=1, minSize=(40, 40), maxSize=(300, 300)) # 绘制人脸检测框 for x, y, w, h in faces: cv2.rectangle(imgCV, (x,y), (x+w,y+h), (0, 0, 255), 3) # 在人脸区域内检测人眼 roi = gray[y:y+h, x:x+w] # 提取人脸 # 检测人眼 eyes = eye_detector.detectMultiScale(roi, scaleFactor=1.1, minNeighbors=1, minSize=(15, 15), maxSize=(80, 80)) # 绘制人眼 for ex, ey, ew, eh in eyes: cv2.rectangle(imgCV, (x+ex,y+ey), (x+ex+ew,y+ey+eh), (255,0,0),2) return imgCVcvFlask03的脚本运行过程的具体步骤如下。
（1）进入cvFlask03项目的根目录，运行程序cvFlask03.py，启动流媒体服务器。
（2）在浏览器输入URL（http://192.168.3.249:5000/upload），打开upload.html网页。在浏览器点击页面上的选择按钮，选择本地的图片上传，上传的图片保存到static\images目录。
（3）程序cvFlask03.py对上传的图片进行人脸检测和人眼检测，在图片上以红色和蓝色方框标记检测到的人脸和人眼。然后激活processed.html网页，显示原始图像和处理后的图像。
（4）手机连接到局域网，按照控制台显示的内容在浏览器输入IP地址（http://192.168.3.249:5000/upload），也可以上传手机中的图片进行处理，结果如图所示。
3. Flask 部署 YOLOv5 模型的 Web 应用程序
上传本地图片，使用YOLOv5 模型对图片进行处理，返回处理图片并在网页上进行格式化显示。
本例程与上节 OpenCV + Flask 例程类似，只是将检测器换成 YOLOv5 模型。
3.1 Flask 框架的处理流程
（1）首先从指定的 url 地址读取图像。
Flask中使用route()装饰器将应用程序的URL绑定到函数，可以接受URL参数实现路由访问。
（2）图像处理。
使用YOLOv5 模型对图片进行处理。
（3）将图像编码到内存缓冲区。
使用函数cv.imencode()将图像编码为流数据，存储到内存缓存中，方便网络传输。
（4）生成返回页面响应。
使用函数make_response()将缓存中的图像编码封装为响应对象，将页面响应返回到客户端。
3.2 Yolo5Flask01 项目的构建步骤
（1）项目 Yolo5Flask01 的文件树如下。
---项目文件名\ |---templates\ | |---index3process.html | |---index3upload.html |---models\ |---static\ |---utils\ |---weights\ |---Yolo5Flask03.py（2）编写index3upload.html文档，用于上传本地图片，保存在templates目录。
OpenCV+Flask 上传图片OpenCV+Flask 例程：上传本地图片处理
Developed by youcans@xupt，2023
选择按钮：
选中文件：
上传按钮：（3）编写index3processed.html文档，用于显示上传图片和处理图片，保存在templates目录。
OpenCV+Flask 上传图片OpenCV+Flask 例程：上传本地图片进行处理
Developed by youcans@xupt, 2023
选中文件： https://blog.csdn.net/youcans/article/details/{userinput}} style="margin-top:10px;"/图片处理结果
原始图片 处理结果
