创建AI摄像头完整过程

于 2025-05-06 10:21:52 发布
阅读量533 收藏 5
点赞数 17
文章标签： 人工智能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzx991013/article/details/147728976
版权 
import os

def create_project_structure(base_dir="yolov10_flask"):
    """创建YOLOv10 Flask项目目录结构"""

    # 定义目录结构
    dirs = [
        os.path.join(base_dir, "utils"),
        os.path.join(base_dir, "static", "uploads"),
        os.path.join(base_dir, "static", "results"),
        os.path.join(base_dir, "templates"),
        os.path.join(base_dir, "weights"),
    ]

    # 定义文件及其内容
    files = {
        os.path.join(base_dir, "../app.py"): """import os
import cv2
import numpy as np
from flask import Flask, request, render_template, send_from_directory
from PIL import Image
from torch.hub import load

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['RESULT_FOLDER'] = 'static/results'

model = None
def load_model():
    global model
    model = load('ultralytics/yolov5', 'custom', path='weights/yolov10n.pt', device='cpu')
    model.conf = 0.5

def preprocess_image(image):
    img = np.array(image)
    if img.shape[-1] == 4:
        img = cv2.cvtColor(img, cv2.COLOR_RGBA2RGB)
    else:
        img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
    return img

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/detect', methods=['POST'])
def detect():
    if 'file' not in request.files:
        return 'No file uploaded', 400

    file = request.files['file']
    if file.filename == '':
        return 'No selected file', 400

    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
    upload_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
    file.save(upload_path)

    img = Image.open(file.stream)
    img = preprocess_image(img)
    results = model([img], size=640)

    os.makedirs(app.config['RESULT_FOLDER'], exist_ok=True)
    output_path = os.path.join(app.config['RESULT_FOLDER'], file.filename)
    results.render()
    cv2.imwrite(output_path, cv2.cvtColor(results.imgs[0], cv2.COLOR_RGB2BGR))

    return render_template('result.html', 
                         original=upload_path,
                         result=output_path)

if __name__ == '__main__':
    load_model()
    app.run(host='0.0.0.0', port=5000, debug=True)
""",

        os.path.join(base_dir, "utils", "helpers.py"): "# 辅助函数（后续扩展用）\npass",

        os.path.join(base_dir, "templates", "index.html"): """<!DOCTYPE html>
<html>
<head>
    <title>YOLOv10检测</title>
</head>
<body>
    <h1>上传图片进行检测</h1>
    <form action="/detect" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*">
        <input type="submit" value="开始检测">
    </form>
</body>
</html>""",

        os.path.join(base_dir, "templates", "result.html"): """<!DOCTYPE html>
<html>
<head>
    <title>检测结果</title>
</head>
<body>
    <h2>原始图片</h2>
    <img src="{{ original }}" width="600">
    <h2>检测结果</h2>
    <img src="{{ result }}" width="600">
    <p><a href="/">返回首页</a></p>
</body>
</html>""",

        os.path.join(base_dir, "weights", ".gitkeep"): "# 权重文件占位符"
    }

    # 创建目录
    for d in dirs:
        os.makedirs(d, exist_ok=True)
        print(f"创建目录: {d}")

    # 创建文件
    for file_path, content in files.items():
        with open(file_path, "w", encoding="utf-8") as f:
            f.write(content)
        print(f"创建文件: {file_path}")

    print("\n项目结构创建完成！请手动执行以下操作：")
    print("1. 从官方仓库下载 yolov10n.pt 到 weights/ 目录")
    print("2. 安装依赖：pip install flask torch torchvision opencv-python-headless Pillow")
    print("3. 运行应用：python app.py")


if __name__ == "__main__":
    create_project_structure()

app.py

import os
import cv2
import numpy as np
from flask import Flask, request, render_template, url_for
from PIL import Image
from ultralytics import YOLO  # 改用官方推荐的导入方式

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['RESULT_FOLDER'] = 'static/results/predicts'
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB限制

# 确保权重文件存在
WEIGHTS_PATH = 'yolov10s.pt'
if not os.path.exists(WEIGHTS_PATH):
    raise FileNotFoundError(f"权重文件 {WEIGHTS_PATH} 不存在")

# 初始化模型
try:
    model = YOLO(WEIGHTS_PATH)
    print("模型加载成功！")
except Exception as e:
    print(f"模型加载失败: {e}")
    model = None

@app.route('/')
def index():
    return render_template('index.html')


@app.route('/detect', methods=['POST'])
def detect():
    if model is None:
        return "模型未正确加载，请检查服务器日志", 500

    if 'file' not in request.files:
        return '没有上传文件', 400

    file = request.files['file']
    if file.filename == '':
        return '未选择文件', 400

    # 确保上传目录存在
    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
    upload_path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
    file.save(upload_path)

    try:
        # 使用PIL打开图片
        img = Image.open(upload_path)

        # 执行检测
        results = model.predict(
            source=img,
            save=True,
            project=app.config['RESULT_FOLDER'],
            exist_ok=True
        )

        # 获取结果路径
        result_path = os.path.join(app.config['RESULT_FOLDER'], file.filename)
        return render_template('result.html',
                               original=url_for('static', filename=f'uploads/{file.filename}'),
                               result=url_for('static', filename=f'results/predict/{file.filename}'))

    except Exception as e:
        return f"检测过程中出错: {str(e)}", 500

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

前端HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能视觉检测系统 | YOLOv10</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --dark-color: #1a1a2e;
            --light-color: #f8f9fa;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: #f5f7ff;
            color: var(--dark-color);
        }

        .hero-section {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 10px 30px rgba(67, 97, 238, 0.3);
        }

        .upload-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .upload-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }

        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            transition: all 0.3s;
        }

        .upload-area.active {
            border-color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.05);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 10px 24px;
            font-weight: 500;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
            color: white;
            font-size: 24px;
            border-radius: 12px;
        }

        .footer {
            background-color: var(--dark-color);
            color: white;
        }

        #previewImage {
            max-height: 300px;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: var(--dark-color);">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <i class="fas fa-robot me-2"></i>
                <span class="fw-bold">VisionAI</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">产品功能</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">应用场景</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">价格方案</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                </ul>
                <a href="#" class="btn btn-outline-light ms-3">
                    <i class="fas fa-sign-in-alt me-1"></i> 登录
                </a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section py-5">
        <div class="container text-center py-4">
            <h1 class="display-4 fw-bold mb-3">YOLOv10 智能视觉检测系统</h1>
            <p class="lead mb-4">基于最先进的实时目标检测算法，提供工业级精度与性能</p>
            <div class="d-flex justify-content-center gap-3">
                <a href="#demo" class="btn btn-light btn-lg px-4">
                    <i class="fas fa-play me-2"></i> 立即体验
                </a>
                <a href="#" class="btn btn-outline-light btn-lg px-4">
                    <i class="fas fa-book me-2"></i> 技术文档
                </a>
            </div>
        </div>
    </section>

    <!-- 主功能区域 -->
    <section class="container my-5" id="demo">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="upload-container p-4 p-md-5">
                    <h2 class="text-center mb-4 fw-bold">上传图片进行检测</h2>

                    <form id="uploadForm" action="/detect" method="post" enctype="multipart/form-data">
                        <div class="upload-area p-5 text-center mb-4" id="dropArea">
                            <i class="fas fa-cloud-upload-alt fa-3x mb-3 text-muted"></i>
                            <h5 class="mb-2">拖放图片到此处或点击上传</h5>
                            <p class="text-muted small mb-0">支持 JPG, PNG 格式，最大 10MB</p>
                            <input type="file" id="fileInput" name="file" accept="image/*" class="d-none" required>
                        </div>

                        <div class="text-center mb-4" id="previewContainer" style="display: none;">
                            <img id="previewImage" class="img-fluid rounded shadow" src="#" alt="预览图">
                            <button type="button" class="btn btn-sm btn-outline-danger mt-2" οnclick="clearImage()">
                                <i class="fas fa-times me-1"></i> 清除图片
                            </button>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg" id="detectBtn" disabled>
                                <i class="fas fa-search me-2"></i> 开始检测
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 特性展示 -->
    <section class="container my-5 py-4">
        <h2 class="text-center mb-5 fw-bold">核心技术优势</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon d-inline-flex align-items-center justify-content-center mb-4">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h4 class="mb-3">实时检测</h4>
                    <p class="text-muted">毫秒级响应速度，支持30FPS实时视频流分析</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon d-inline-flex align-items-center justify-content-center mb-4">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h4 class="mb-3">高精度</h4>
                    <p class="text-muted">AP指标提升15%，小目标检测能力行业领先</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="feature-icon d-inline-flex align-items-center justify-content-center mb-4">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h4 class="mb-3">多场景适配</h4>
                    <p class="text-muted">工业质检、安防监控、自动驾驶等全场景支持</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer py-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <h5 class="mb-4">VisionAI</h5>
                    <p class="small text-muted">基于YOLOv10的下一代计算机视觉解决方案提供商</p>
                    <div class="mt-4">
                        <a href="#" class="text-white me-3"><i class="fab fa-twitter fa-lg"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-linkedin fa-lg"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-github fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
                    <h6 class="text-uppercase mb-4">产品</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">核心功能</a></li>
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">API接口</a></li>
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">SDK下载</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
                    <h6 class="text-uppercase mb-4">解决方案</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">工业制造</a></li>
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">智慧城市</a></li>
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">零售分析</a></li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <h6 class="text-uppercase mb-4">联系我们</h6>
                    <p class="small text-muted mb-2"><i class="fas fa-map-marker-alt me-2"></i> 上海市浦东新区张江高科技园区</p>
                    <p class="small text-muted mb-2"><i class="fas fa-phone me-2"></i> 400-888-8888</p>
                    <p class="small text-muted"><i class="fas fa-envelope me-2"></i> contact@visionai.com</p>
                </div>
            </div>
            <hr class="my-4 bg-secondary">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <p class="small text-muted mb-0">© 2025 VisionAI. 保留所有权利。</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <a href="#" class="text-white text-decoration-none small me-3">隐私政策</a>
                    <a href="#" class="text-white text-decoration-none small me-3">服务条款</a>
                    <a href="#" class="text-white text-decoration-none small">法律声明</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 拖放上传功能
        const dropArea = document.getElementById('dropArea');
        const fileInput = document.getElementById('fileInput');
        const previewContainer = document.getElementById('previewContainer');
        const previewImage = document.getElementById('previewImage');
        const detectBtn = document.getElementById('detectBtn');

        // 点击触发文件选择
        dropArea.addEventListener('click', () => fileInput.click());

        // 文件选择处理
        fileInput.addEventListener('change', function(e) {
            handleFiles(this.files);
        });

        // 拖放处理
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            dropArea.classList.add('active');
        }

        function unhighlight() {
            dropArea.classList.remove('active');
        }

        dropArea.addEventListener('drop', function(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            handleFiles(files);
        });

        function handleFiles(files) {
            if (files.length > 0) {
                const file = files[0];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        previewContainer.style.display = 'block';
                        detectBtn.disabled = false;
                        dropArea.style.display = 'none';
                    };

                    reader.readAsDataURL(file);
                    fileInput.files = files;
                } else {
                    alert('请选择有效的图片文件！');
                }
            }
        }

        function clearImage() {
            previewImage.src = '#';
            previewContainer.style.display = 'none';
            detectBtn.disabled = true;
            dropArea.style.display = 'block';
            fileInput.value = '';
        }

        // 表单提交动画
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            const btn = document.getElementById('detectBtn');
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>检测中...';
            btn.disabled = true;
        });
    </script>
</body>
</html>


result.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检测结果 | VisionAI</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --dark-color: #1a1a2e;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: #f8f9fa;
        }

        .result-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
        }

        .image-container {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }

        .image-container img {
            transition: transform 0.3s;
        }

        .image-container:hover img {
            transform: scale(1.03);
        }

        .badge-custom {
            background-color: var(--primary-color);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .back-btn {
            background-color: var(--dark-color);
            color: white;
            padding: 10px 24px;
            font-weight: 500;
        }

        .back-btn:hover {
            background-color: #2a2a3c;
            color: white;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: var(--dark-color);">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <i class="fas fa-robot me-2"></i>
                <span class="fw-bold">VisionAI</span>
            </a>
        </div>
    </nav>

    <!-- 结果主体 -->
    <section class="container my-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="result-card p-4 p-md-5 mb-5">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="mb-0 fw-bold">
                            <i class="fas fa-search me-2"></i>检测结果
                        </h2>
                        <span class="badge badge-custom rounded-pill px-3 py-2">
                            YOLOv10 引擎
                        </span>
                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <div class="image-container h-100">
                                <img src="{{ original }}" class="img-fluid w-100 h-100 object-fit-cover" alt="原始图片">
                                <div class="position-absolute bottom-0 start-0 p-3 w-100 bg-dark bg-opacity-50 text-white">
                                    原始图像
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="image-container h-100">
                                <img src="{{ result }}" class="img-fluid w-100 h-100 object-fit-cover" alt="检测结果">
                                <div class="position-absolute bottom-0 start-0 p-3 w-100 bg-primary bg-opacity-80 text-white">
                                    检测结果 (置信度 ≥ 0.5)
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 模拟检测统计 -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <div class="stat-card p-3 text-center">
                                <h5 class="text-muted mb-2">检测目标</h5>
                                <h3 class="text-primary">8</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card p-3 text-center">
                                <h5 class="text-muted mb-2">平均置信度</h5>
                                <h3 class="text-primary">0.78</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card p-3 text-center">
                                <h5 class="text-muted mb-2">处理时间</h5>
                                <h3 class="text-primary">42ms</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card p-3 text-center">
                                <h5 class="text-muted mb-2">图像尺寸</h5>
                                <h3 class="text-primary">1280×720</h3>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="/" class="btn back-btn">
                            <i class="fas fa-arrow-left me-2"></i>返回首页
                        </a>
                        <div>
                            <button class="btn btn-outline-primary me-2">
                                <i class="fas fa-download me-2"></i>下载结果
                            </button>
                            <button class="btn btn-primary">
                                <i class="fas fa-redo me-2"></i>重新检测
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 分析报告 -->
                <div class="result-card p-4 p-md-5">
                    <h4 class="fw-bold mb-4">
                        <i class="fas fa-chart-bar me-2"></i>检测分析报告
                    </h4>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <h5 class="mb-3">目标类别分布</h5>
                            <img src="https://via.placeholder.com/600x300?text=类别分布图表" class="img-fluid rounded" alt="类别分布">
                        </div>
                        <div class="col-md-6 mb-4">
                            <h5 class="mb-3">置信度分布</h5>
                            <img src="https://via.placeholder.com/600x300?text=置信度分布图表" class="img-fluid rounded" alt="置信度分布">
                        </div>
                    </div>

                    <div class="mt-3">
                        <h5 class="mb-3">检测详情</h5>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>类别</th>
                                        <th>置信度</th>
                                        <th>位置(XYWH)</th>
                                        <th>像素面积</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td><span class="badge bg-primary">person</span></td>
                                        <td>0.89</td>
                                        <td>[256, 189, 120, 320]</td>
                                        <td>38,400</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td><span class="badge bg-success">car</span></td>
                                        <td>0.78</td>
                                        <td>[620, 210, 240, 150]</td>
                                        <td>36,000</td>
                                    </tr>
                                    <!-- 更多行... -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container text-center">
            <p class="mb-0 small">© 2025 VisionAI 智能视觉检测系统 | 沪ICP备12345678号</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 这里可以添加结果页面的交互逻辑
        document.querySelector('.btn-primary').addEventListener('click', function() {
            window.location.href = '/';
        });
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万能小贤哥

感谢大捞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值