### Vue 和 Flask 在深度学习项目中的应用 #### 使用场景概述 在构建基于深度学习的应用程序时，前端和后端的分离有助于提高项目的可维护性和扩展性。Flask 是一种轻量级 Python Web 框架，适合用于搭建 API 接口来处理来自客户端的数据请求并返回预测结果；而 Vue.js 则是一个渐进式 JavaScript 框架，专注于视图层，能够高效地管理用户界面交互。 对于深度学习项目而言，可以利用 Flask 来部署训练好的模型作为服务，并通过 RESTful API 提供对外接口[^1]。与此同时，在前端部分采用 Vue 构建响应式的单页面应用程序 (SPA)，从而实现良好的用户体验。 #### 后端：Flask 部署 YOLOv5 模型 为了使 Flask 能够调用预训练的 YOLOv5 模型来进行目标检测或其他计算机视觉任务，需先确保所使用的模型架构与服务器上加载的一致。下面展示了一个简单的例子： ```python from flask import Flask, request, jsonify import torch app = Flask(__name__) # 加载YOLOv5模型 model = torch.hub.load('ultralytics/yolov5', 'yolov5s') @app.route('/predict', methods=['POST']) def predict(): img_file = request.files['image'] results = model(img_file.stream.read()) return jsonify(results.pandas().xyxy[0].to_dict(orient="records")) if __name__ == '__main__': app.run(debug=True) ``` 这段代码展示了如何创建一个 POST 请求处理器 `/predict` ，它接收上传图片文件并通过已加载的 YOLOv5 进行推理操作，最后将识别到的对象信息以 JSON 形式返回给客户端。 #### 前端：Vue 实现图像上传功能并与 Flask 通信 为了让用户能够在浏览器界面上轻松提交待测图片至上述 Flask API 并查看结果，可以在 Vue 中集成 HTML 文件输入控件以及 Axios 库发起 HTTP 请求。以下是简化版组件示例： ```html <template> <div id="upload-section"> <input type="file" @change="onFileChange"/> <button v-if="selectedImage" @click="submitImage">Submit</button> <p>{{ message }}</p> </div> </template> <script> import axios from "axios"; export default { data() { return { selectedImage: null, message: "" }; }, methods: { onFileChange(event) { this.selectedImage = event.target.files[0]; }, async submitImage() { const formData = new FormData(); formData.append("image", this.selectedImage); try { let response = await axios.post("/api/predict", formData); console.log(response.data); // 处理API反馈数据 this.message = `Prediction successful!`; } catch (error) { this.message = error.toString(); } } } }; </script> ``` 此模板定义了一组基本 UI 组件允许用户选择本地图片文件并向后台发送预测请求。当接收到服务器回应之后会更新页面上的提示文字告知用户状态变化情况。