chili3d笔记11 连接yolo python http.server 跨域请求 flask

python 复制代码

from ultralytics import YOLO
from flask import Flask, request, jsonify
from flask_cors import CORS
import base64
from io import BytesIO
from PIL import Image
import json

# 加载模型
model = YOLO('./yolo_detect/best.pt')

app = Flask(__name__)
CORS(app)  # 启用跨域支持

def predict(img_data):
    image_data = base64.b64decode(img_data)
    image = Image.open(BytesIO(image_data))
    results = model.predict(source=image)

    predictions = []
    for result in results:
        boxes = result.boxes
        for box in boxes:
            predictions.append({
                "Confidence": box.conf.item(),
                "Object": model.names[int(box.cls.item())],
                "BoxCoordinate": box.xyxy.cpu().numpy().tolist()
            })
    return predictions

@app.route('/', methods=['POST'])
def handle_post():
    payload = request.get_json()
    img_data = payload.get("image_data")

    if not img_data:
        return jsonify({"error": "Missing image data"}), 400

    try:
        result = predict(img_data)
        return jsonify(result)
    except Exception as e:
        return jsonify({"error": str(e)}), 500

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

TypeScript 复制代码

 const fileInput = document.createElement("input");
        fileInput.type = "file";
        fileInput.accept = "image/*";
        fileInput.style.display = "none"; // 隐藏输入框

        // 处理文件选择事件
        fileInput.addEventListener("change", async (event) => {
            const target = event.target as HTMLInputElement;
            this.resultLabel.textContent = "正在上传并检测图像...";
            if (target.files && target.files.length > 0) {
                const file = target.files[0];
                Logger.info(`Selected file: ${file.name}`);

                try {
                    const reader = new FileReader();
                    reader.onload = async () => {
                        try {
                            const base64Data = reader.result?.toString().split(",")[1];
                            const response = await fetch("http://localhost:8737", {
                                method: "POST",
                                headers: { "Content-Type": "application/json" },
                                body: JSON.stringify({ image_data: base64Data }),
                            });

                            if (!response.ok) throw new Error("Network response was not ok");

                            const data = await response.json();

                            const formattedResult = data
                                .map((item: any, index: number) => {
                                    const objType = item.Object;
                                    const confidence = (item.Confidence * 100).toFixed(2);
                                    const [x1, y1, x2, y2] = item.BoxCoordinate[0];
                                    return `目标 ${index + 1}: ${objType}, 置信度 ${confidence}%, 坐标 [${x1.toFixed(1)}, ${y1.toFixed(1)}, ${x2.toFixed(1)}, ${y2.toFixed(1)}]`;
                                })
                                .join("\n");

                            this.resultLabel.textContent = `检测到 ${data.length} 个物体:\n${formattedResult}`;
                            Logger.info("YOLO 检测结果:", data);
                        } catch (error) {
                            Logger.error("请求失败:", error);
                        }
                    };
                    reader.readAsDataURL(file);
                } catch (err) {
                    Logger.error(`处理文件时出错: ${err}`);
                }
            }
        });

2025-05-05 20-32-07 网页端打开图片进行yolo识别，立方体圆柱体