devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AI项目七：WEB端部署YOLOv5_web部署yolov5

作者：花生_TL007 | 2024-02-15 09:34:19

赞

踩

web部署yolov5

若该文为原创文章，转载请注明原文出处。

一、介绍

最近接触网页大屏，所以就想把YOLOV5部署到WEB端，通过了解，知道了两个方法：

1、基于Flask部署YOLOv5目标检测模型。

2、基于Streamlit部署YOLOv5目标检测。

代码在github上，个人感觉两个比较好的，所以基于两份代码测试。

https://github.com/ngzhili/Yolov5-Real-Time-Object-Detection

GitHub - harshit-tech03/Fire_Detection: A fire detection web app using yolov5.

一、虚拟环境创建

1、创建虚拟环境

conda create -n yolov5_env python=3.8

2、激活环境

conda activate yolov5_env

3、下载yolov5

https://github.com/ultralytics/yolov5

4、安装yolov5

pip install -r requirements.txt

注意以下测试都是基于此环境测试

二、基于Flask部署YOLOv5目标检测模型。

1、安装环境

requirements.txt

  1. flask
  2. requests
  3. black
  4.  
  5. matplotlib>=3.2.2
  6. numpy>=1.18.5
  7. opencv-python>=4.1.2
  8. Pillow
  9. PyYAML>=5.3.1
  10. scipy>=1.4.1
  11. torch>=1.7.0
  12. torchvision>=0.8.1
  13. tqdm>=4.41.0
  14.  
  15. tensorboard>=2.4.1
  16.  
  17. seaborn>=0.11.0
  18. pandas
  19.  
  20. thop  # FLOPs computation

代码感觉相对简单，而且也挺详细的，所以直接上代码。

2、前端代码

index.html

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.     <title>YOLOV5 Real Time Inference</title>
  9.     <style>
  10.       .corner {
  11.         border-radius: 25px;
  12.         border: 5px solid #212aad;
  13.         padding: 0px;
  14.         width:60%;
  15.         height:auto;
  16.         text-align: center;
  17.       }
  18.  
  19.       .video-container {
  20.         justify-content: center;
  21.         text-align: center;
  22.         height:100%;
  23.         /*border: 1px solid black;*/
  24.       }
  25.       
  26.     </style>
  27.   </head>
  28.   
  29.   <body >
  30.       <div class="container">
  31.         <div class="row" style="text-align: center; width:100%;">
  32.           <img src="../static/pytorch.png" style="width:40px; position:relative; left: -10px; display:inline-block;">
  33.             <h1 style="text-align: center; display:inline-block;">Template for YOLOV5 Object Detection Model Real-Time Inference Using Web Cam</h1>
  34.           </img>
  35.           <h2 style="text-align: center;">Built by Zhili</h2>
  36.         </div>
  37.       </div>
  38.   
  39.       <div class="video-container">
  40.           <img src="{{ url_for('video') }}" class="corner"></img>
  41.           <!--<img src="../static/pytorch.png" class="corner"></img>-->
  42.           <!--<img src="{{ url_for('video') }}" width="50%"/>-->
  43.       </div>
  44.     </body>
  45. </html>

3、后端代码

app.py

  1. """
  2. Simple app to upload an image via a web form 
  3. and view the inference results on the image in the browser.
  4. """
  5. import argparse
  6. import io
  7. import os
  8. from PIL import Image
  9. import cv2
  10. import numpy as np
  11.  
  12. import torch
  13. from flask import Flask, render_template, request, redirect, Response
  14.  
  15. app = Flask(__name__)
  16.  
  17.  
  18. #'''
  19. # Load Pre-trained Model
  20. #model = torch.hub.load(
  21. #        "ultralytics/yolov5", "yolov5s", pretrained=True, force_reload=True
  22. #        )#.autoshape()  # force_reload = recache latest code
  23. #'''
  24. # Load Custom Model
  25. #model = torch.hub.load("ultralytics/yolov5", "custom", path = "./best_damage.pt", force_reload=True)
  26. model = torch.hub.load('./yolov5', 'custom', './yolov5s.pt',source='local')
  27. # Set Model Settings
  28. model.eval()
  29. model.conf = 0.6  # confidence threshold (0-1)
  30. model.iou = 0.45  # NMS IoU threshold (0-1) 
  31.  
  32. from io import BytesIO
  33.  
  34. def gen():
  35.     cap=cv2.VideoCapture(0)
  36.     # Read until video is completed
  37.     while(cap.isOpened()):
  38.         
  39.         # Capture frame-by-fram ## read the camera frame
  40.         success, frame = cap.read()
  41.         if success == True:
  42.  
  43.             ret,buffer=cv2.imencode('.jpg',frame)
  44.             frame=buffer.tobytes()
  45.             
  46.             #print(type(frame))
  47.  
  48.             img = Image.open(io.BytesIO(frame))
  49.             results = model(img, size=640)
  50.             #print(results)
  51.             #print(results.pandas().xyxy[0])
  52.             #results.render()  # updates results.imgs with boxes and labels
  53.             results.print()  # print results to screen
  54.             #results.show() 
  55.             #print(results.imgs)
  56.             #print(type(img))
  57.             #print(results)
  58.             #plt.imshow(np.squeeze(results.render()))
  59.             #print(type(img))
  60.             #print(img.mode)
  61.             
  62.             #convert remove single-dimensional entries from the shape of an array
  63.             img = np.squeeze(results.render()) #RGB
  64.             # read image as BGR
  65.             img_BGR = cv2.cvtColor(img, cv2.COLOR_RGB2BGR) #BGR
  66.  
  67.             #print(type(img))
  68.             #print(img.shape)
  69.             #frame = img
  70.             #ret,buffer=cv2.imencode('.jpg',img)
  71.             #frame=buffer.tobytes()
  72.             #print(type(frame))
  73.             #for img in results.imgs:
  74.                 #img = Image.fromarray(img)
  75.             #ret,img=cv2.imencode('.jpg',img)
  76.             #img=img.tobytes()
  77.  
  78.             #encode output image to bytes
  79.             #img = cv2.imencode('.jpg', img)[1].tobytes()
  80.             #print(type(img))
  81.         else:
  82.             break
  83.         #print(cv2.imencode('.jpg', img)[1])
  84.  
  85.         #print(b)
  86.         #frame = img_byte_arr
  87.  
  88.         # Encode BGR image to bytes so that cv2 will convert to RGB
  89.         frame = cv2.imencode('.jpg', img_BGR)[1].tobytes()
  90.         #print(frame)
  91.         
  92.         yield(b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
  93.  
  94.  
  95. @app.route('/')
  96. def index():
  97.     
  98.     return render_template('index.html')
  99.  
  100. @app.route('/video')
  101. def video():
  102.     """Video streaming route. Put this in the src attribute of an img tag."""
  103.  
  104.     return Response(gen(),
  105.                         mimetype='multipart/x-mixed-replace; boundary=frame')
  106. '''                        
  107. @app.route('/video')
  108. def video():
  109.     return Response(generate_frames(),mimetype='multipart/x-mixed-replace; boundary=frame')
  110. '''
  111. '''
  112. @app.route("/", methods=["GET", "POST"])
  113. def predict():
  114.     if request.method == "POST":
  115.         if "file" not in request.files:
  116.             return redirect(request.url)
  117.         file = request.files["file"]
  118.         if not file:
  119.             return
  121.         img_bytes = file.read()
  122.         img = Image.open(io.BytesIO(img_bytes))
  123.         results = model(img, size=640)
  125.         # for debugging
  126.         # data = results.pandas().xyxy[0].to_json(orient="records")
  127.         # return data
  129.         results.render()  # updates results.imgs with boxes and labels
  130.         for img in results.imgs:
  131.             img_base64 = Image.fromarray(img)
  132.             img_base64.save("static/image0.jpg", format="JPEG")
  133.         return redirect("static/image0.jpg")
  135.     return render_template("index.html")
  136. '''
  137.  
  138. if __name__ == "__main__":
  139.     parser = argparse.ArgumentParser(description="Flask app exposing yolov5 models")
  140.     parser.add_argument("--port", default=5000, type=int, help="port number")
  141.     args = parser.parse_args()
  142.     '''
  143.     model = torch.hub.load(
  144.         "ultralytics/yolov5", "yolov5s", pretrained=True, force_reload=True
  145.     ).autoshape()  # force_reload = recache latest code
  146.     model.eval()
  147.     '''
  148.     app.run(host="0.0.0.0", port=args.port)  # debug=True causes Restarting with stat
  149.  
  150. # Docker Shortcuts
  151. # docker build --tag yolov5 .
  152. # docker run --env="DISPLAY" --volume="/tmp/.X11-unix:/tmp/.X11-unix:rw" --device="/dev/video0:/dev/video0" yolov5

4、运行结果

执行python app.py

三、基于Streamlit部署YOLOv5目标检测。

1、什么是Streamlit

Streamlit 是一个用于数据科学和机器学习的开源 Python 框架。它提供了一种简单的方式来构建交互式应用程序，使数据科学家和机器学习工程师可以更轻松地将他们的模型展示给其他人。

以下是 Streamlit 常用的一些方法：

  • st.write()：打印文本、数据框、图表等。
  • st.title()：创建标题。
  • st.header()：创建大标题。
  • st.subheader()：创建小标题。
  • st.text()：打印文本。
  • st.markdown()：打印 Markdown 文本。
  • st.latex()：打印 LaTeX 公式。
  • st.dataframe()：显示数据框。
  • st.table()：显示表格。
  • st.line_chart()：创建线形图。
  • st.area_chart()：创建面积图。
  • st.bar_chart()：创建条形图。
  • st.map()：创建地图。
  • st.pyplot()：显示 Matplotlib 图表。
  • st.altair_chart()：显示 Altair 图表。
  • st.vega_lite_chart()：显示 Vega-Lite 图表。
  • st.bokeh_chart()：显示 Bokeh 图表。
  • st.plotly_chart()：显示 Plotly 图表。
  • st.image()：显示图像。
  • st.audio()：显示音频。
  • st.video()：显示视频。
  • st.file_uploader()：上传文件。
  • st.download_button()：下载文件。

以上是 Streamlit 的一些常用方法，可以根据需要选择使用。

只能説Streamlit比Flask更简单，更容易看懂。

在上面环境的基础上在安装一次环境

2、安装环境

requirements.txt

  1. yolov5
  2. opencv_python_headless
  3. streamlit
  4. numpy
  5. Pillow
  6. torch
  7. torchvision
  8. PyYAML
  9. tqdm
  10. matplotlib
  11. requests
  12. scipy
  13. tensorboard
  14. pandas
  15. seaborn
  16. streamlit-webrtc
  17. IPython

3、代码

代码不分前后端

Fire_Detection.py

  1. import streamlit as st
  2. import cv2
  3. import numpy as np
  4. import av
  5. import torch
  6. import tempfile
  7. from PIL import Image
  8.  
  9. @st.cache
  10. def load_model():
  11.     model = torch.hub.load('ultralytics/yolov5','custom',path="weights/last.pt",force_reload=True)
  12.     return model
  13.  
  14. demo_img = "fire.9.png"
  15. demo_video = "Fire_Video.mp4"
  16.  
  17. st.title('Fire Detection')
  18. st.sidebar.title('App Mode')
  19.  
  20.  
  21. app_mode = st.sidebar.selectbox('Choose the App Mode',
  22.                                 ['About App','Run on Image','Run on Video','Run on WebCam'])
  23.  
  24. if app_mode == 'About App':
  25.     st.subheader("About")
  26.     st.markdown("<h5>This is the Fire Detection App created with custom trained models using YoloV5</h5>",unsafe_allow_html=True)
  27.     
  28.     st.markdown("- <h5>Select the App Mode in the SideBar</h5>",unsafe_allow_html=True)
  29.     st.image("Images/first_1.png")
  30.     st.markdown("- <h5>Upload the Image and Detect the Fires in Images</h5>",unsafe_allow_html=True)
  31.     st.image("Images/second_2.png")
  32.     st.markdown("- <h5>Upload the Video and Detect the fires in Videos</h5>",unsafe_allow_html=True)
  33.     st.image("Images/third_3.png")
  34.     st.markdown("- <h5>Live Detection</h5>",unsafe_allow_html=True)
  35.     st.image("Images/fourth_4.png")
  36.     st.markdown("- <h5>Click Start to start the camera</h5>",unsafe_allow_html=True)
  37.     st.markdown("- <h5>Click Stop to stop the camera</h5>",unsafe_allow_html=True)
  38.     
  39.     st.markdown("""
  40.                 ## Features
  41. - Detect on Image
  42. - Detect on Videos
  43. - Live Detection
  44. ## Tech Stack
  45. - Python
  46. - PyTorch
  47. - Python CV
  48. - Streamlit
  49. - YoloV5
  50. ## 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/83225
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。