chili3d笔记11 连接yolo python http.server 跨域请求 flask
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.boxesfor 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"}), 400try:result = predict(img_data)return jsonify(result)except Exception as e:return jsonify({"error": str(e)}), 500if __name__ == "__main__":app.run(host='0.0.0.0', port=8737)----------------------------------------------------
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识别，立方体圆柱体