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识别,立方体圆柱体

相关推荐
_Kayo_24 分钟前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
使二颗心免于哀伤3 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意3 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
格林威4 小时前
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现沙滩小人检测识别(C#代码UI界面版)
人工智能·深度学习·数码相机·yolo·计算机视觉
岩中竹4 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
Olrookie4 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql
lxmyzzs4 小时前
【打怪升级 - 03】YOLO11/YOLO12/YOLOv10/YOLOv8 完全指南:从理论到代码实战,新手入门必看教程
人工智能·神经网络·yolo·目标检测·计算机视觉
rannn_1115 小时前
Java学习|黑马笔记|Day23】网络编程、反射、动态代理
java·笔记·后端·学习
UQWRJ5 小时前
菜鸟教程 R语言基础运算 注释 和数据类型
笔记
格林威7 小时前
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现轮船检测识别(C#代码UI界面版)
人工智能·深度学习·数码相机·yolo·视觉检测