YOLOv5部署到web端詳細過程(flask+js簡單易懂)

更新時間：2023年04月26日 09:07:56 作者：帥帥帥.

YOLOv5是一個目標檢測模型,Flask是一個Python的Web框架,下面這篇文章主要給大家介紹了關于YOLOv5部署到web端(flask+js簡單易懂)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

最近，老板讓寫一個程序把yolov5檢測模型部署到web端，在網(wǎng)頁直接進行目標檢測。經(jīng)過1個星期的努力，終于實現(xiàn)基本功能??（累暈了）。網(wǎng)上查閱了很多資料，發(fā)現(xiàn)很多的技術比較復雜，當然他們的頁面都比較漂亮，然后我打算自己寫一篇簡單記錄一下哈哈。進入正題，該項目完全由Python的輕量級web框架flask完成，其實有一點js代碼，簡單易懂??

最終實現(xiàn)效果圖

先看項目的效果圖吧哈哈，比較辣雞，但是功能實現(xiàn)了?。ê罄m(xù)會優(yōu)化頁面）

檢測結果顯示：

哈哈可以看到檢測結果還是可以的??

后端實現(xiàn)

首先，寫了三個路由函數(shù)，分別是主界面、檢測函數(shù)、檢測結果顯示。如下所示

主界面

# 定義路由
@app.route('/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # 從表單中獲取上傳的文件
        f = request.files['file']
        global filename
        filename = f.filename
        global file_path 
        
        # 將文件保存到服務器本地
        file_path = os.path.join(os.getcwd(), filename)

        print(file_path)
        f.save(file_path)
        # 返回文件路徑
        # return file_path
    return render_template('index1.html')

檢測函數(shù)

#檢測函數(shù)
@app.route('/det', methods=['GET','POST'])
def my_flask_function():
    #print('測試一下！')
    opt = parse_opt()
    main(opt)
    
    # return jsonify({'message': 'Hello from Flask!'})
    return render_template('123.html')

檢測結果顯示

@app.route('/sh', methods=['GET', 'POST'])
def hello_world():
    img_path = 'runs\\detect\\exp\\' + str(filename)
    img_stream = return_img_stream(img_path)
    return render_template('showimage.html', img_stream=img_stream)
#獲取圖片并展現(xiàn)到前端頁面
def return_img_stream(img_local_path):
    """
    工具函數(shù):
    獲取本地圖片流
    :param img_local_path:文件單張圖片的本地絕對路徑
    :return: 圖片流
    """
    import base64
    img_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

最后，我把detect文件中的函數(shù)，parse_out函數(shù)直接放到app.py文件中了，因為這樣傳遞圖片路徑比較方便。其中的main函數(shù)直接是調(diào)用的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

到這里，后端實現(xiàn)就基本寫完了。接下來，看看前端頁面很簡單，我都不好意思寫??

前端實現(xiàn)

主要就兩個頁面，分別是主頁面index1.html和showimage.html。

主界面(index1.html）

index1.html就是主界面，顯示的一些操作按鈕。代碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>簡單實現(xiàn)</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>選擇圖片上傳檢測</h2>
    <br />
    <br />
    <img id="imageDisplay" width="500" height="500" />
    <br />
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file">
        <input 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 Detect() {
    $.ajax({
        type: 'POST',
        url: '/det',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
  }
      function Show() {
              var img = document.getElementById('img');
              img.src = '/sh';
          }

    </script>
      <button id="my-button" onclick="Detect()">檢測</button>
      <a >
          <button id="my-button1" onclick="Show()">顯示圖片</button>
      </a>
  </body>
</html>

顯示圖片界面（showimage.html）

然后就是 showiamge.html，該頁面是在點擊顯示圖片按鈕之后，進行跳轉，然后顯示檢測結果的圖片。代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>檢測結果顯示</title>
</head>
<body>
     <img style="width:500px " src="data:;base64,{{ img_stream }}">
</body>
</html>