以下是一个使用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>