当前位置: 首页 > article >正文

基于yolo11+flask打造一个精美登录界面和检测系统

这个是使用flask实现好看登录界面和友好的检测界面实现yolov11推理和展示,代码仅仅有2个html文件和一个python文件,真正做到了用最简洁的代码实现复杂功能。

测试通过环境:

windows x64

anaconda3+python3.8

ultralytics==8.3.81

flask==1.1.2

torch==2.3.0

运行步骤: 安装好环境执行python main.py

后端实现代码:

from flask import Flask, render_template, request, redirect, url_for, session, flash, Response, jsonify
import os
from functools import wraps
from ultralytics import YOLO
import cv2
import numpy as np
import base64
import json

app = Flask(__name__)
app.secret_key = 'your_secret_key'  # 设置密钥用于session

# 初始化YOLO11模型
model = YOLO('yolo11n.pt')  # 或使用其他版本如 yolo11s.pt, yolo11m.pt
#热启动
model(np.zeros((300, 300, 3), np.uint8))

# 登录验证装饰器
def login_required(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        if 'logged_in' not in session:
            return redirect(url_for('login'))
        return f(*args, **kwargs)
    return decorated_function

# 登录路由
@app.route('/', methods=['GET', 'POST'])
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        
        if username == 'admin' and password == 'admin':
            session['logged_in'] = True
            return redirect(url_for('detection'))
        else:
            flash('Invalid username or password!')
            
    return render_template('login.html')

# 目标检测路由
@app.route('/detection')
@login_required
def detection():
    return render_template('detection.html')

@app.route('/detect', methods=['POST'])
@login_required
def detect():
    try:
        data = request.json
        image_data = data['image'].split(',')[1]
        confidence = float(data['confidence'])
        iou = float(data['iou'])
        
        # 解码base64图像
        image_bytes = base64.b64decode(image_data)
        nparr = np.frombuffer(image_bytes, np.uint8)
        image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
        
        # 运行检测
        results = model(image, conf=confidence, iou=iou)[0]
        
        # 在图像上绘制检测结果
        for box in results.boxes:
            x1, y1, x2, y2 = map(int, box.xyxy[0])
            conf = float(box.conf[0])
            cls = int(box.cls[0])
            label = f'{results.names[cls]} {conf:.2f}'
            
            cv2.rectangle(image, (x1, y1), (x2, y2), (0, 255, 0), 2)
            cv2.putText(image, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2)
        
        # 将结果图像转换为base64
        _, buffer = cv2.imencode('.jpg', image)
        image_base64 = base64.b64encode(buffer).decode('utf-8')
        
        return jsonify({
            'success': True,
            'image': f'data:image/jpeg;base64,{image_base64}'
        })
        
    except Exception as e:
        return jsonify({
            'success': False,
            'error': str(e)
        })

@app.route('/detect_video_frame', methods=['POST'])
@login_required
def detect_video_frame():
    # 类似于detect路由,但专门处理视频帧
    # ... implementation similar to detect route ...
    pass

if __name__ == '__main__':
    app.run(debug=True)

登录界面:

目标检测界面:

 


http://www.kler.cn/a/587535.html

相关文章:

  • WPF Prism事件聚合器EventAggregator
  • 代码随想录二刷|图论11
  • SpringMVC (一)基础
  • 三种算法对比!改进麻雀、麻雀、粒子群算法求解微电网优化调度|Matlab
  • Flutter Dart 面向对象编程全面解析
  • matlab 八自由度汽车垂向动力学参数优化带座椅
  • 2.5 python接口编程
  • Vue3全局化配置(ConfigProvider)
  • 设计模式学习笔记——命令模式
  • 如何设计可扩展、高可靠的移动端系统架构?
  • 前置机跟服务器的关系
  • 大模型推理后JSON数据后处理
  • 【股票数据API接口24】如何获取最近10天资金流入趋势数据之Python、Java等多种主流语言实例代码演示通过股票数据接口获取数据
  • HOT100——栈篇Leetcode739. 每日温度
  • WPF 转换器集成资源字典
  • 用 DeepSeek 构建 Vue.js 底层架构:高效协作与问题解决实践
  • 基于Uniapp开发tab选项卡/标签栏前端组件
  • STM32驱动代码规范化编写指南(嵌入式C语言方向)
  • 【解决】XCode不支持旧版本的iOS设备
  • Node.js 的模块作用域和 module 对象详细介绍