目录

后端

前端微信小程序

完整代码

---

后端

利用Flask，调用目标检测模型，后端代码如下。

# flask_yolo.py 
from flask import Flask, request, jsonify
from ultralytics import YOLO
from PIL import Image

app = Flask(__name__)
model_path = 'best.pt'
model = YOLO(model_path)  # 加载模型


@app.route("/predict", methods=["POST"])
def predict():
    file = request.files["image"]
    image = Image.open(file.stream)
    results = model(image)
    boxes = []
    for box in results[0].boxes:
        xyxy = [int(x) for x in box.xyxy[0].tolist()]
        conf = round(float(box.conf[0]), 3)
        cls = int(box.cls[0])
        name = results[0].names[cls]
        boxes.append({
            'coor': xyxy,
            'conf': conf,
            'class': name
        })
    # print(boxes)
    return jsonify(boxes)


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5005)

启动后端服务：

$ python flask_yolo.py 
 * Serving Flask app 'flask_yolo'
 * Debug mode: off
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5005
 * Running on http://x.x.x.x:5005
Press CTRL+C to quit

前端微信小程序

调用服务的js关键代码：

  // 上传图片到后端调用服务
  uploadImage(filePath) {
    this.setData({ loading: true });
    wx.uploadFile({
      url: 'http://****/predict',  //your flask api
      filePath: filePath,
      name: 'image',
      success: (res) => {
        const detectionResult = JSON.parse(res.data);
        
        this.setData({
          detectionResult,
          loading: false
        });

        // 计算检测框位置
        if (this.data.imageInfo && this.data.originalImageSize) {
          this.updateDetectionBoxes();
        }
      },
      fail: (error) => {
        console.error('上传失败：', error);
        wx.showToast({
          title: '上传失败',
          icon: 'error'
        });
        this.setData({ loading: false });
      }
    });
  }

效果

       

完整代码

https://github.com/crystal0913/miniprogram_yolo

如需在手机上预览，需在小程序项目根目录下的project.config.json中填上你的appid。