YOLOv5部署到web端（flask+js简单易懂）

以下是一个使用Flask和JavaScript实现的简单的YOLOv5模型部署到web端的示例。

首先，确保你已经安装了Flask和相关的依赖库。




# app.py
from flask import Flask, request, render_template, Response
import numpy as np
import cv2
import time
 
app = Flask(__name__)
 
# 加载YOLOv5模型
def load_model(model_path):
    # 这里应该是你加载模型的代码
    pass
 
# 模型推理函数
def infer(model, image):
    # 这里应该是你模型推理的代码
    pass
 
# 初始化模型
model = load_model('path_to_your_yolov5_model')
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/predict', methods=['POST'])
def predict():
    # 获取图像
    file = request.files['image']
    img = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)
 
    # 模型推理
    start_time = time.time()
    predictions = infer(model, img)
    elapsed = time.time() - start_time
 
    # 返回结果
    return Response(str(predictions), mimetype='application/json')
 
if __name__ == '__main__':
    app.run(debug=True)

然后，创建一个HTML文件用于前端展示：




<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>YOLOv5 Detection</title>
</head>
<body>
    <h1>YOLOv5 Object Detection</h1>
    <input type="file" id="image-selector" />
    <img id="image-preview" src=""/>
    <button id="predict-button">Predict</button>
    
    <script>
        const inputImage = document.getElementById('image-selector');
        const previewImage = document.getElementById('image-preview');
        const predictButton = document.getElementById('predict-button');
 
        inputImage.addEventListener('change', function() {
            const file = inputImage.files[0];
            const reader = new FileReader();
 
            reader.onload = function(event) {
                previewImage.src = event.target.result;
            }
 
            reader.readAsDataURL(file);
        });
 
        predictButton.addEventListener('click', function() {
            const formData = new FormData();
            formData.append('image', previewImage.src);
 
            fetch('/predict', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                // 处理模型的预测结果
            })
            .catch(error => console.error('Prediction error:', error));
        });
    </script>
</body>
</html>

YOLOv5部署到web端（flask+js简单易懂）

评论已关闭

推荐阅读