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

yolov5 web端部署进行图片和视频检测_yolov5 flask web 部署

作者：很楠不爱3 | 2024-02-15 09:33:20

赞

踩

yolov5 flask web 部署

目录

1、思路

2、代码结构

3、代码运行

4、api接口代码

5、web ui界面

6、参考资料

7、代码分享 

1、思路

通过搭建flask微型服务器后端，以后通过vue搭建网页前端。flask是第一个第三方库。与其他模块一样，安装时可以直接使用python的pip命令实现。flask是web开发框架，简单易学，因此用flask来搭建web服务也非常简单。

在pycharm新建一个项目，命名为web2020，然后新建一个python文件，命名为main.py。在代码中输入如下代码：

  1. from flask import  Flask    #导入Flask类
  2. app=Flask(__name__)         #实例化并命名为app实例
  3. if __name__=="__main__":
  4.     app.run(port=2020,host="127.0.0.1",debug=True)   #调用run方法，设定端口号，启动服务

路由定义：

  1. from flask import  Flask
  2. app=Flask(__name__)
  3.  
  4. @app.route('/')
  5. def index():
  6.     return 'welcome to my webpage!'
  7.  
  8. if __name__=="__main__":
  9.     app.run(port=2020,host="127.0.0.1",debug=True)

通过这种方式，实现python调用模型，然后通过web服务器进行数据输入输出，最后通过浏览器web页面进行展示。

2、代码结构

前端代码结构

后端代码结构

3、代码运行

4、api接口代码

  1. import datetime
  2. import logging as rel_log
  3. import os
  4. import shutil
  5. from datetime import timedelta
  6. from flask import *
  7. from flask import Flask, render_template, Response
  8. from processor.AIDetector_pytorch import Detector
  9.  
  10. import core.main
  11.  
  12. # import camera driver
  13. if os.environ.get('CAMERA'):
  14.     Camera = import_module('camera_' + os.environ['CAMERA']).Camera
  15. else:
  16.     from camera import Camera
  17.  
  18.  
  19. UPLOAD_FOLDER = r'./uploads'
  20.  
  21. ALLOWED_EXTENSIONS = set(['png', 'jpg'])
  22. app = Flask(__name__)
  23. app.secret_key = 'secret!'
  24. app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
  25.  
  26. werkzeug_logger = rel_log.getLogger('werkzeug')
  27. werkzeug_logger.setLevel(rel_log.ERROR)
  28.  
  29. # 解决缓存刷新问题
  30. app.config['SEND_FILE_MAX_AGE_DEFAULT'] = timedelta(seconds=1)
  31.  
  32.  
  33. # 添加header解决跨域
  34. @app.after_request
  35. def after_request(response):
  36.     response.headers['Access-Control-Allow-Origin'] = '*'
  37.     response.headers['Access-Control-Allow-Credentials'] = 'true'
  38.     response.headers['Access-Control-Allow-Methods'] = 'POST'
  39.     response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'
  40.     return response
  41.  
  42. #图片检测接口
  43. def allowed_file(filename):
  44.     return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
  45.  
  46.  
  47. #@app.route('/')
  48. #def hello_world():
  49. #    return redirect(url_for('static', filename='./index.html'))
  50. @app.route('/')
  51. def index():
  52.     """Video streaming home page."""
  53.     return render_template('index.html')
  54.     
  55.  
  56.  
  57. @app.route('/upload', methods=['GET', 'POST'])
  58. def upload_file():
  59.     file = request.files['file']
  60.     print(datetime.datetime.now(), file.filename)
  61.     #if file and allowed_file(file.filename):
  62.     src_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
  63.     file.save(src_path)
  64.     shutil.copy(src_path, './tmp/ct')
  65.     image_path = os.path.join('./tmp/ct', file.filename)
  66.     pid, image_info = core.main.c_main(
  67.         image_path, current_app.model, file.filename.rsplit('.', 1)[1])
  68.     return jsonify({'status': 1,
  69.                         'image_url': 'http://127.0.0.1:5003/tmp/ct/' + pid,
  70.                         'draw_url': 'http://127.0.0.1:5003/tmp/draw/' + pid,
  71.                         'image_info': image_info})
  72.  
  73.     #return jsonify({'status': 0})
  74.  
  75.  
  76. @app.route("/download", methods=['GET'])
  77. def download_file():
  78.     # 需要知道2个参数, 第1个参数是本地目录的path, 第2个参数是文件名(带扩展名)
  79.     return send_from_directory('data', 'testfile.zip', as_attachment=True)
  80.  
  81.  
  82. # show photo
  83. @app.route('/tmp/<path:file>', methods=['GET'])
  84. def show_photo(file):
  85.     if request.method == 'GET':
  86.         if not file is None:
  87.             image_data = open(f'tmp/{file}', "rb").read()
  88.             response = make_response(image_data)
  89.             response.headers['Content-Type'] = 'image/png'
  90.             return response
  91.  
  92.  
  93. #视频检测接口
  94. def gen(camera):
  95.     """Video streaming generator function."""
  96.     while True:
  97.         frame = camera.get_frame()
  98.         yield (b'--frame\r\n'
  99.                b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
  100.  
  101.  
  102. @app.route('/video_start')
  103. def video_feed():
  104.     """Video streaming route. Put this in the src attribute of an img tag."""
  105.     return Response(gen(Camera()),
  106.                     mimetype='multipart/x-mixed-replace; boundary=frame')
  107.  
  108. #视频流检测接口
  109. #@app.route('/livestream_start')
  110.  
  111.  
  112. #程序启动入口
  113. if __name__=='__main__': 
  114.     files = [
  115.         'uploads', 'tmp/ct', 'tmp/draw',
  116.         'tmp/image', 'tmp/mask', 'tmp/uploads'
  117.     ]
  118.     for ff in files:
  119.         if not os.path.exists(ff):
  120.             os.makedirs(ff)
  121.     with app.app_context():
  122.         current_app.model = Detector()
  123.     app.run(host='127.0.0.1', port=5003, debug=True)

5、web ui界面

  1. <template>
  2.    <el-tabs stretch=true v-model="activeName" type="card" @tab-click="handleClick">
  3.     <el-tab-pane  label="图片检测" name="first">
  4.       <div id="Content">
  5.     <el-dialog
  6.       title="AI预测中"
  7.       :visible.sync="dialogTableVisible"
  8.       :show-close="false"
  9.       :close-on-press-escape="false"
  10.       :append-to-body="true"
  11.       :close-on-click-modal="false"
  12.       :center="true"
  13.     >
  14.       <el-progress :percentage="percentage"></el-progress>
  15.       <span slot="footer" class="dialog-footer">请耐心等待约3秒钟</span>
  16.     </el-dialog>
  17.  
  18.     <div id="CT">
  19.       <div id="CT_image">
  20.         <el-card
  21.           id="CT_image_1"
  22.           class="box-card"
  23.           style="
  24.             border-radius: 8px;
  25.             width: 800px;
  26.             height: 360px;
  27.             margin-bottom: -30px;
  28.           "
  29.         >
  30.           <div class="demo-image__preview1">
  31.             <div
  32.               v-loading="loading"
  33.               element-loading-text="上传图片中"
  34.               element-loading-spinner="el-icon-loading"
  35.             >
  36.               <el-image
  37.                 :src="url_1"
  38.                 class="image_1"
  39.                 :preview-src-list="srcList"
  40.                 style="border-radius: 3px 3px 0 0"
  41.               >
  42.                 <div slot="error">
  43.                   <div slot="placeholder" class="error">
  44.                     <el-button
  45.                       v-show="showbutton"
  46.                       type="primary"
  47.                       icon="el-icon-upload"
  48.                       class="download_bt"
  49.                       v-on:click="true_upload"
  50.                     >
  51.                       上传图像
  52.                       <input
  53.                         ref="upload"
  54.                         style="display: none"
  55.                         name="file"
  56.                         type="file"
  57.                         @change="update"
  58.                       />
  59.                     </el-button>
  60.                   </div>
  61.                 </div>
  62.               </el-image>
  63.             </div>
  64.             <div class="img_info_1" style="border-radius: 0 0 5px 5px">
  65.               <span style="color: white; letter-spacing: 6px">原始图像</span>
  66.             </div>
  67.           </div>
  68.           <div class="demo-image__preview2">
  69.             <div
  70.               v-loading="loading"
  71.               element-loading-text="处理中,请耐心等待"
  72.               element-loading-spinner="el-icon-loading"
  73.             >
  74.               <el-image
  75.                 :src="url_2"
  76.                 class="image_1"
  77.                 :preview-src-list="srcList1"
  78.                 style="border-radius: 3px 3px 0 0"
  79.               >
  80.                 <div slot="error">
  81.                   <div slot="placeholder" class="error">{{ wait_return }}</div>
  82.                 </div>
  83.               </el-image>
  84.             </div>
  85.             <div class="img_info_1" style="border-radius: 0 0 5px 5px">
  86.               <span style="color: white; letter-spacing: 4px">检测结果</span>
  87.             </div>
  88.           </div>
  89.         </el-card>
  90.       </div>
  91.       <div id="info_patient">
  92.         <!-- 卡片放置表格 -->
  93.         <el-card style="border-radius: 8px">
  94.           <div slot="header" class="clearfix">
  95.             <span>检测目标</span>
  96.             <el-button
  97.               style="margin-left: 35px"
  98.               v-show="!showbutton"
  99.               type="primary"
  100.               icon="el-icon-upload"
  101.               class="download_bt"
  102.               v-on:click="true_upload2"
  103.             >
  104.               重新选择图像
  105.               <input
  106.                 ref="upload2"
  107.                 style="display: none"
  108.                 name="file"
  109.                 type="file"
  110.                 @change="update"
  111.               />
  112.             </el-button>
  113.           </div>
  114.           <el-tabs v-model="activeName">
  115.             <el-tab-pane label="检测到的目标" name="first">
  116.               <!-- 表格存放特征值 -->
  117.               <el-table
  118.                 :data="feature_list"
  119.                 height="390"
  120.                 border
  121.                 style="width: 750px; text-align: center"
  122.                 v-loading="loading"
  123.                 element-loading-text="数据正在处理中，请耐心等待"
  124.                 element-loading-spinner="el-icon-loading"
  125.                 lazy
  126.               >
  127.                 <el-table-column label="目标类别" width="250px">
  128.                   <template slot-scope="scope">
  129.                     <span>{{ scope.row[2] }}</span>
  130.                   </template>
  131.                 </el-table-column>
  132.                 <el-table-column label="目标大小" width="250px">
  133.                   <template slot-scope="scope">
  134.                     <span>{{ scope.row[0] }}</span>
  135.                   </template>
  136.                 </el-table-column>
  137.                 <el-table-column label="置信度" width="250px">
  138.                   <template slot-scope="scope">
  139.                     <span>{{ scope.row[1] }}</span>
  140.                   </template>
  141.                 </el-table-column>
  142.               </el-table>
  143.             </el-tab-pane>
  144.           </el-tabs>
  145.         </el-card>
  146.       </div>
  147.     </div>
  148.   </div>
  149.     </el-tab-pane>
  150.     <el-tab-pane label="视频检测" name="second">
  151.       <h3>视频名称</h3>
  152.       <img :src="vidoedectetion"> 
  153.     </el-tab-pane>
  154.     <el-tab-pane label="视频流检测" name="third">
  155.       
  156.     </el-tab-pane>
  157.     <el-tab-pane label="多路视频流检测" name="fourth">
  158.       
  159.     </el-tab-pane>
  160.   </el-tabs>
  161.  
  162. </template>
  163.  
  164. <script>
  165. import axios from "axios";
  166.  
  167. export default {
  168.   name: "Content",
  169.   data() {
  170.     return {
  171.       vidoedectetion:"http://127.0.0.1:5003" + "/video_start",
  172.       server_url: "http://127.0.0.1:5003",
  173.       activeName: "first",
  174.       active: 0,
  175.       centerDialogVisible: true,
  176.       url_1: "",
  177.       url_2: "",
  178.       textarea: "",
  179.       srcList: [],
  180.       srcList1: [],
  181.       feature_list: [],
  182.       feature_list_1: [],
  183.       feat_list: [],
  184.       url: "",
  185.       visible: false,
  186.       wait_return: "等待上传",
  187.       wait_upload: "等待上传",
  188.       loading: false,
  189.       table: false,
  190.       isNav: false,
  191.       showbutton: true,
  192.       percentage: 0,
  193.       fullscreenLoading: false,
  194.       opacitys: {
  195.         opacity: 0,
  196.       },
  197.       dialogTableVisible: false,
  198.     };
  199.   },
  200.   created: function () {
  201.     document.title = "Yolov5安全帽检测web推理部署";
  202.   },
  203.   methods: {
  204.     true_upload() {
  205.       this.$refs.upload.click();
  206.     },
  207.     true_upload2() {
  208.       this.$refs.upload2.click();
  209.     },
  210.     next() {
  211.       this.active++;
  212.     },
  213.     // 获得目标文件
  214.     getObjectURL(file) {
  215.       var url = null;
  216.       if (window.createObjcectURL != undefined) {
  217.         url = window.createOjcectURL(file);
  218.       } else if (window.URL != undefined) {
  219.         url = window.URL.createObjectURL(file);
  220.       } else if (window.webkitURL != undefined) {
  221.         url = window.webkitURL.createObjectURL(file);
  222.       }
  223.       return url;
  224.     },
  225.     // 上传文件
  226.     update(e) {
  227.       this.percentage = 0;
  228.       this.dialogTableVisible = true;
  229.       this.url_1 = "";
  230.       this.url_2 = "";
  231.       this.srcList = [];
  232.       this.srcList1 = [];
  233.       this.wait_return = "";
  234.       this.wait_upload = "";
  235.       this.feature_list = [];
  236.       this.feat_list = [];
  237.       this.fullscreenLoading = true;
  238.       this.loading = true;
  239.       this.showbutton = false;
  240.       let file = e.target.files[0];
  241.       this.url_1 = this.$options.methods.getObjectURL(file);
  242.       let param = new FormData(); //创建form对象
  243.       param.append("file", file, file.name); //通过append向form对象添加数据
  244.       var timer = setInterval(() => {
  245.         this.myFunc();
  246.       }, 30);
  247.       let config = {
  248.         headers: { "Content-Type": "multipart/form-data" },
  249.       }; //添加请求头
  250.       axios
  251.         .post(this.server_url + "/upload", param, config)
  252.         .then((response) => {
  253.           this.percentage = 100;
  254.           clearInterval(timer);
  255.           this.url_1 = response.data.image_url;
  256.           this.srcList.push(this.url_1);
  257.           this.url_2 = response.data.draw_url;
  258.           this.srcList1.push(this.url_2);
  259.           this.fullscreenLoading = false;
  260.           this.loading = false;
  261.  
  262.           this.feat_list = Object.keys(response.data.image_info);
  263.  
  264.           for (var i = 0; i < this.feat_list.length; i++) {
  265.             response.data.image_info[this.feat_list[i]][2] = this.feat_list[i];
  266.             this.feature_list.push(response.data.image_info[this.feat_list[i]]);
  267.           }
  268.  
  269.           this.feature_list.push(response.data.image_info);
  270.           this.feature_list_1 = this.feature_list[0];
  271.           this.dialogTableVisible = false;
  272.           this.percentage = 0;
  273.           this.notice1();
  274.         });
  275.     },
  276.     myFunc() {
  277.       if (this.percentage + 33 < 99) {
  278.         this.percentage = this.percentage + 33;
  279.       } else {
  280.         this.percentage = 99;
  281.       }
  282.     },
  283.     drawChart() {},
  284.     notice1() {
  285.       this.$notify({
  286.         title: "预测成功",
  287.         message: "点击图片可以查看大图",
  288.         duration: 0,
  289.         type: "success",
  290.       });
  291.     },
  292.   },
  293.   mounted() {
  294.     this.drawChart();
  295.   },
  296. };
  297. </script>
  298.  
  299. <style>
  300. .el-button {
  301.   padding: 12px 20px !important;
  302. }
  303.  
  304. #hello p {
  305.   font-size: 15px !important;
  306.   /*line-height: 25px;*/
  307. }
  308.  
  309. .n1 .el-step__description {
  310.   padding-right: 20%;
  311.   font-size: 14px;
  312.   line-height: 20px;
  313.   /* font-weight: 400; */
  314. }
  315. </style>
  316.  
  317. <style scoped>
  318. * {
  319.   box-sizing: border-box;
  320.   margin: 0;
  321.   padding: 0;
  322. }
  323.  
  324. .dialog_info {
  325.   margin: 20px auto;
  326. }
  327.  
  328. .text {
  329.   font-size: 14px;
  330. }
  331.  
  332. .item {
  333.   margin-bottom: 18px;
  334. }
  335.  
  336. .clearfix:before,
  337. .clearfix:after {
  338.   display: table;
  339.   content: "";
  340. }
  341.  
  342. .clearfix:after {
  343.   clear: both;
  344. }
  345.  
  346. .box-card {
  347.   width: 680px;
  348.   height: 200px;
  349.   border-radius: 8px;
  350.   margin-top: -20px;
  351. }
  352.  
  353. .divider {
  354.   width: 50%;
  355. }
  356.  
  357. #CT {
  358.   display: flex;
  359.   height: 100%;
  360.   width: 100%;
  361.   flex-wrap: wrap;
  362.   justify-content: center;
  363.   margin: 0 auto;
  364.   margin-right: 0px;
  365.   max-width: 1800px;
  366. }
  367.  
  368. #CT_image_1 {
  369.   width: 90%;
  370.   height: 40%;
  371.   margin: 0px auto;
  372.   padding: 0px auto;
  373.   margin-right: 180px;
  374.   margin-bottom: 0px;
  375.   border-radius: 4px;
  376. }
  377.  
  378. #CT_image {
  379.   margin-bottom: 60px;
  380.   margin-left: 30px;
  381.   margin-top: 5px;
  382. }
  383.  
  384. .image_1 {
  385.   width: 275px;
  386.   height: 260px;
  387.   background: #ffffff;
  388.   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  389. }
  390.  
  391. .img_info_1 {
  392.   height: 30px;
  393.   width: 275px;
  394.   text-align: center;
  395.   background-color: #21b3b9;
  396.   line-height: 30px;
  397. }
  398.  
  399. .demo-image__preview1 {
  400.   width: 250px;
  401.   height: 290px;
  402.   margin: 20px 60px;
  403.   float: left;
  404. }
  405.  
  406. .demo-image__preview2 {
  407.   width: 250px;
  408.   height: 290px;
  409.  
  410.   margin: 20px 460px;
  411.   /* background-color: green; */
  412. }
  413.  
  414. .error {
  415.   margin: 100px auto;
  416.   width: 50%;
  417.   padding: 10px;
  418.   text-align: center;
  419. }
  420.  
  421. .block-sidebar {
  422.   position: fixed;
  423.   display: none;
  424.   left: 50%;
  425.   margin-left: 600px;
  426.   top: 350px;
  427.   width: 60px;
  428.   z-index: 99;
  429. }
  430.  
  431. .block-sidebar .block-sidebar-item {
  432.   font-size: 50px;
  433.   color: lightblue;
  434.   text-align: center;
  435.   line-height: 50px;
  436.   margin-bottom: 20px;
  437.   cursor: pointer;
  438.   display: block;
  439. }
  440.  
  441. div {
  442.   display: block;
  443. }
  444.  
  445. .block-sidebar .block-sidebar-item:hover {
  446.   color: #187aab;
  447. }
  448.  
  449. .download_bt {
  450.   padding: 10px 16px !important;
  451. }
  452.  
  453. #upfile {
  454.   width: 104px;
  455.   height: 45px;
  456.   background-color: #187aab;
  457.   color: #fff;
  458.   text-align: center;
  459.   line-height: 45px;
  460.   border-radius: 3px;
  461.   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  462.   color: #fff;
  463.   font-family: "Source Sans Pro", Verdana, sans-serif;
  464.   font-size: 0.875rem;
  465. }
  466.  
  467. .file {
  468.   width: 200px;
  469.   height: 130px;
  470.   position: absolute;
  471.   left: -20px;
  472.   top: 0;
  473.   z-index: 1;
  474.   -moz-opacity: 0;
  475.   -ms-opacity: 0;
  476.   -webkit-opacity: 0;
  477.   opacity: 0; /*css属性&mdash;&mdash;opcity不透明度，取值0-1*/
  478.   filter: alpha(opacity=0);
  479.   cursor: pointer;
  480. }
  481.  
  482. #upload {
  483.   position: relative;
  484.   margin: 0px 0px;
  485. }
  486.  
  487. #Content {
  488.   width: 85%;
  489.   height: 800px;
  490.   background-color: #ffffff;
  491.   margin: 15px auto;
  492.   display: flex;
  493.   min-width: 1200px;
  494. }
  495.  
  496. .divider {
  497.   background-color: #eaeaea !important;
  498.   height: 2px !important;
  499.   width: 100%;
  500.   margin-bottom: 50px;
  501. }
  502.  
  503. .divider_1 {
  504.   background-color: #ffffff;
  505.   height: 2px !important;
  506.   width: 100%;
  507.   margin-bottom: 20px;
  508.   margin: 20px auto;
  509. }
  510.  
  511. .steps {
  512.   font-family: "lucida grande", "lucida sans unicode", lucida, helvetica,
  513.     "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  514.   color: #21b3b9;
  515.   text-align: center;
  516.   margin: 15px auto;
  517.   font-size: 20px;
  518.   font-weight: bold;
  519.   text-align: center;
  520. }
  521.  
  522. .step_1 {
  523.   /*color: #303133 !important;*/
  524.   margin: 20px 26px;
  525. }
  526.  
  527. #info_patient {
  528.   margin-top: 10px;
  529.   margin-right: 160px;
  530. }
  531. </style>
  532.  
  533.

6、参考资料

yolov5-flask-web - 知乎 (zhihu.com)

Flask部署YOLOv5 - 知乎 (zhihu.com)

https://zhuanlan.zhihu.com/p/104273184

特别感谢作者

GitHub - Sharpiless/Yolov5-Flask-VUE: 基于Flask+VUE前后端，在阿里云公网WEB端部署YOLOv5目标检测模型

7、代码分享 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/83216
推荐阅读
相关标签

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

  

闽ICP备14008679号