【YOLO】轻量级 YOLO 模型电子围栏应用-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻量级 YOLO 模型电子围栏应用</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 TensorFlow.js 和 COCO-SSD 模型库 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.13.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.1/dist/coco-ssd.min.js"></script>
    <style>
        /* 使用 Inter 字体并确保 Canvas 居中 */
        body {
     
      font-family: 'Inter', sans-serif; }
        .canvas-container {
     
     
            position: relative;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
        }
        #video, #canvas {
     
     
            display: block;
            width: 100%;
            height: auto;
            max-width: 800px;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        #video {
     
     
            /* 隐藏视频，只显示 Canvas */
            position: absolute;
            opacity: 0;
        }
        #canvas {
     
     
            z-index: 10;
            position: relative;
        }
        /* 警报闪烁动画 */
        .alert-flash {
     
     
            animation: flash 0.5s infinite alternate;
        }
        @keyframes flash {
     
     
            from {
     
      background-color: #f87171; } /* red-400 */
            to {
     
      background-color: #dc2626; } /* red-700 */
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen p-4 md:p-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">宝宝看护电子围栏</h1>
        <p id="status-message" class="text-lg text-center mb-4 text-gray-600">
            <span class="font-semibold text-blue-600">状态: 模型等待加载...</span>
        </p>

        <div class="flex flex-col md:flex-row justify-center items-center gap-4 mb-6">
            <button id="startButton" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-150 ease-in-out disabled:bg-indigo-400">
                启动摄像头
            </button>
            <div id="loadingIndicator" class="hidden text-indigo-600 font-medium">
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-indigo-600 inline-block" xmlns=