yolov5监测结果做成web端
时间: 2025-06-06 13:04:55 浏览: 16
### 将YOLOv5检测结果集成到Web端展示
要将YOLOv5的检测结果显示在Web端,可以采用Flask作为后端框架来处理模型推理请求,并返回检测结果给前端。以下是具体方法:
#### 后端配置
使用Flask构建API接口,接收来自前端的图片或视频数据并调用YOLOv5模型进行预测[^1]。
```python
from flask import Flask, request, jsonify
import torch
app = Flask(__name__)
@app.route('/predict', methods=['POST'])
def predict():
if 'file' not in request.files:
return jsonify({'error': 'No file part'}), 400
file = request.files['file']
if file.filename == '':
return jsonify({'error': 'No selected file'}), 400
# 加载YOLOv5模型
model = torch.hub.load('ultralytics/yolov5', 'custom', path='yolov5s.pt', source='local')
# 进行推理
results = model(file.stream)
# 提取检测结果
detections = results.pandas().xyxy[0].to_json(orient="records")
return jsonify(detections)
```
上述代码片段展示了如何设置一个`/predict`路由,该路由接受文件上传请求,加载YOLOv5模型并对输入图像执行目标检测[^4]。
#### 前端设计
对于前端部分,可以选择Vue.js或其他JavaScript库来创建用户界面。通过AJAX请求向Flask API发送图片数据,并显示返回的结果[^2]。
以下是一个简单的HTML+JS示例,演示如何提交图片以及渲染检测框[^3]:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YOLOv5 Detection</title>
</head>
<body>
<h1>Upload an Image for Object Detection</h1>
<input type="file" id="imageInput"/>
<button onclick="uploadImage()">Detect Objects</button>
<div id="result"></div>
<script>
function uploadImage() {
const formData = new FormData();
formData.append('file', document.getElementById('imageInput').files[0]);
fetch('http://localhost:5000/predict', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
let resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
data.forEach(item => {
let p = document.createElement('p');
p.textContent = `Label: ${item.name}, Confidence: ${item.confidence}`;
resultDiv.appendChild(p);
});
});
}
</script>
</body>
</html>
```
此脚本允许用户选择一张图片并通过点击按钮触发对象检测过程[^5]。
#### 部署注意事项
确保服务器环境已安装必要的依赖项,比如PyTorch和YOLOv5所需的组件。另外还需注意跨域资源共享(CORS)策略可能会影响前后端交互效果。
---
阅读全文
相关推荐
















