yolov8-flask-vue-deploy: 实时物体检测的高效部署解决方案

这是一个使用YOLOv8进行实时物体检测，并通过Flask作为后端服务器，与Vue.js构建的前端界面进行交互，最终实现物体检测的有效部署解决方案。

以下是部分核心代码实例：

后端Flask服务器代码（app.py ）:

from flask import Flask, request, jsonify
from yolov8 import YOLOv8
 
app = Flask(__name__)
model = YOLOv8()
 
@app.route('/predict', methods=['POST'])
def predict():
    if request.method == 'POST':
        file = request.files.get('image')
        image = Image.open(file.stream)
        prediction = model.predict(image)
        return jsonify(prediction)
 
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

前端Vue.js代码（src/components/ImageUpload.vue ）:

<template>
  <div>
    <input type="file" @change="uploadImage" />
    <button @click="predict">检测</button>
    <div v-if="prediction">
      <!-- 显示预测结果 -->
      <p>预测结果: {{ prediction }}</p>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      prediction: null,
    };
  },
  methods: {
    uploadImage(event) {
      const image = event.target.files[0];
      const formData = new FormData();
      formData.append('image', image);
 
      // 发送请求到Flask服务器进行预测
      axios.post('http://localhost:5000/predict', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        this.prediction = response.data;
      })
      .catch(error => {
        console.error(error);
      });
    },
    predict() {
      // 触发文件上传
      this.$el.querySelector('input[type="file"]').click();
    },
  },
};
</script>

以上代码展示了如何使用Flask和Vue.js构建一个简单的Web应用，用户可以通过Vue.js组件上传图片，并通过Flask服务器使用YOLOv8模型进行物体检测，然后将预测结果返回到Vue.js应用中。这个解决方案提供了一个实际的例子，展示了如何将深度学习模型有效地部署为Web服务。