Update index.html

index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>複合認識システム</title>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
@@ -16,62 +16,60 @@
             margin: 0;
             padding: 20px;
             background-color: #f5f5f5;
-            transition: background-color 0.5s;
         }
-        .alarm-active {
-            background-color: rgba(255, 0, 0, 0.3);
-            animation: blink 1s infinite;
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
         }
-        @keyframes blink {
-            0% { background-color: rgba(255, 0, 0, 0.3); }
-            50% { background-color: rgba(255, 0, 0, 0.1); }
-            100% { background-color: rgba(255, 0, 0, 0.3); }
-        }
-        .camera-container {
+        .header {
             display: flex;
-            flex-direction: column;
+            justify-content: space-between;
             align-items: center;
             margin-bottom: 20px;
         }
-        .detection-info {
+        .camera-container {
+            position: relative;
+            margin-bottom: 20px;
+            border: 2px solid #333;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .camera-info {
             display: flex;
-            justify-content: space-around;
-            width: 100%;
-            margin-top: 10px;
+            justify-content: space-between;
+            background-color: #333;
+            color: white;
             padding: 10px;
-            background-color: #fff;
-            border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
-        .info-box {
+        .detection-strength {
             display: flex;
-            flex-direction: column;
-            align-items: center;
+            gap: 20px;
         }
-        .bar-chart {
-            display: flex;
-            height: 100px;
-            align-items: flex-end;
-            margin-top: 10px;
+        .strength-bar {
+            height: 20px;
+            width: 100px;
+            background-color: #ddd;
+            border-radius: 4px;
+            overflow: hidden;
         }
-        .bar {
-            width: 30px;
-            margin: 0 5px;
+        .strength-fill {
+            height: 100%;
             background-color: #4CAF50;
-            transition: height 0.3s;
+            width: 0%;
         }
         .tile-container {
             display: flex;
             flex-wrap: wrap;
-            gap: 15px;
-            margin-top: 20px;
+            gap: 20px;
+            margin-bottom: 20px;
         }
         .tile {
             background-color: white;
             border-radius: 8px;
             padding: 15px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            width: 300px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            width: calc(33% - 20px);
+            position: relative;
         }
         .tile-header {
             display: flex;
@@ -81,242 +79,318 @@
         }
         .tile-title {
             font-weight: bold;
-            font-size: 16px;
         }
         .delete-btn {
             background-color: #ff4444;
             color: white;
             border: none;
             border-radius: 4px;
-            padding: 5px 10px;
+            padding: 2px 8px;
             cursor: pointer;
         }
+        .chart-container {
+            height: 150px;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: flex-end;
+            gap: 5px;
+        }
+        .chart-bar {
+            flex-grow: 1;
+            background-color: #4CAF50;
+            transition: height 0.3s;
+        }
         .add-tile {
             display: flex;
-            flex-direction: column;
-            align-items: center;
             justify-content: center;
+            align-items: center;
+            background-color: #ddd;
             cursor: pointer;
-            background-color: #e9e9e9;
-        }
-        .add-btn {
             font-size: 24px;
-            margin-bottom: 10px;
         }
-        .url-input {
+        .add-tile:hover {
+            background-color: #ccc;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
-            padding: 8px;
-            margin-bottom: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
         }
-        .alert-options {
-            margin-top: 10px;
+        .modal-content {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            width: 400px;
         }
-        .alert-option {
-            margin-bottom: 8px;
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
         }
-        canvas {
-            border-radius: 8px;
+        .close-btn {
+            font-size: 24px;
+            cursor: pointer;
         }
-        select, button {
-            padding: 8px 12px;
-            border-radius: 4px;
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        input, select {
+            width: 100%;
+            padding: 8px;
             border: 1px solid #ddd;
+            border-radius: 4px;
         }
-        button {
-            background-color: #4285F4;
+        .submit-btn {
+            background-color: #4CAF50;
             color: white;
             border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
             cursor: pointer;
         }
+        .alarm {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255,0,0,0.3);
+            z-index: 999;
+            display: none;
+        }
         .eye-status {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        .eye-status-label {
             font-weight: bold;
-            margin-top: 5px;
         }
-        .open-eye { color: #4CAF50; }
-        .closed-eye { color: #F44336; }
     </style>
 </head>
 <body>
-    <div class="camera-container">
-        <div style="display: flex; gap: 20px;">
-            <canvas id="pose-canvas" width="200" height="200"></canvas>
-            <canvas id="image-canvas" width="200" height="200"></canvas>
-            <canvas id="face-canvas" width="200" height="200"></canvas>
+    <div class="container">
+        <div class="header">
+            <h1>複合認識システム</h1>
         </div>
-        <div class="detection-info">
-            <div class="info-box">
-                <div>ポーズ認識</div>
-                <div class="bar-chart" id="pose-bars"></div>
-                <div id="pose-strength">強度: 0%</div>
+        
+        <div class="camera-container">
+            <video id="webcam" width="640" height="480" autoplay playsinline></video>
+            <canvas id="output" width="640" height="480"></canvas>
+            <div class="camera-info">
+                <div class="eye-status">
+                    <span class="eye-status-label">目の状態:</span>
+                    <span id="eye-status-text">検出中...</span>
+                </div>
+                <div class="detection-strength">
+                    <div>
+                        <div>認識強度</div>
+                        <div class="strength-bar">
+                            <div class="strength-fill" id="strength-fill"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="info-box">
-                <div>画像認識</div>
-                <div class="bar-chart" id="image-bars"></div>
-                <div id="image-strength">強度: 0%</div>
+        </div>
+        
+        <h2>認識モデル設定</h2>
+        <div class="tile-container" id="tile-container">
+            <!-- タイルはここに動的に追加されます -->
+        </div>
+        
+        <div class="tile add-tile" id="add-tile">
+            ＋
+        </div>
+    </div>
+    
+    <div class="alarm" id="alarm"></div>
+    
+    <div class="modal" id="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>新しいモデルを追加</h3>
+                <span class="close-btn" id="close-modal">&times;</span>
             </div>
-            <div class="info-box">
-                <div>目つぶり検出</div>
-                <div id="eye-status" class="eye-status">検出なし</div>
-                <div id="eye-ear">EAR: 0.00</div>
-                <select id="eye-alert-mode">
-                    <option value="none">検出しない</option>
-                    <option value="open">目を開いている場合</option>
-                    <option value="closed">目をつぶっている場合</option>
+            <div class="form-group">
+                <label for="model-type">モデルタイプ</label>
+                <select id="model-type">
+                    <option value="image">画像認識</option>
+                    <option value="pose">ポーズ認識</option>
                 </select>
             </div>
+            <div class="form-group">
+                <label for="model-id">モデルID (TeachableMachineのURLの最後の部分)</label>
+                <input type="text" id="model-id" placeholder="例: E7pp4SoMG">
+            </div>
+            <div class="form-group">
+                <label for="alarm-class">警報を鳴らすクラス名 (カンマ区切り)</label>
+                <input type="text" id="alarm-class" placeholder="例: 危険,警告">
+            </div>
+            <button class="submit-btn" id="submit-model">追加</button>
         </div>
     </div>
-
-    <div class="tile-container" id="tile-container">
-        <div class="tile add-tile" id="add-tile">
-            <div class="add-btn">+</div>
-            <div>新しいモデルを追加</div>
-        </div>
-    </div>
-
-    <audio id="alarm-sound" loop>
-        <source src="https://assets.mixkit.co/active_storage/sfx/2593/2593-preview.mp3" type="audio/mpeg">
-    </audio>
-
+    
+    <audio id="alarm-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3" preload="auto"></audio>
+    
     <script>
         // グローバル変数
-        let poseModel, imageModel, poseWebcam, imageWebcam, faceWebcam;
-        let poseCtx, imageCtx, faceCtx;
-        let poseMaxPredictions, imageMaxPredictions;
         let faceMesh = null;
-        let alarmSound = document.getElementById('alarm-sound');
-        let alarmActive = false;
-        let eyeAlertMode = 'none';
-        let eyeEAR = 0;
-        let eyeStatus = 'none';
-        let poseDetectionCount = 0;
-        let imageDetectionCount = 0;
+        let eyeStatus = "検出しない";
         let eyeDetectionCount = 0;
-        let poseAlarmConditions = [];
-        let imageAlarmConditions = [];
-        let eyeAlarmCondition = false;
-        let poseAlarmTriggered = false;
-        let imageAlarmTriggered = false;
-        let eyeAlarmTriggered = false;
-        let poseAlarmCount = 0;
-        let imageAlarmCount = 0;
-        let eyeAlarmCount = 0;
-        let noPoseAlarmCount = 0;
-        let noImageAlarmCount = 0;
-        let noEyeAlarmCount = 0;
-        const DETECTION_THRESHOLD = 40; // 50回中40回以上
-        const RESET_THRESHOLD = 30; // リセット閾値
-
-        // 目つぶり検出用の定数
-        const EYE_CLOSED_THRESHOLD = 0.2;
-        const EYE_OPEN_THRESHOLD = 0.3;
-        const LEFT_EYE_TOP = 159;
-        const LEFT_EYE_BOTTOM = 145;
-        const LEFT_EYE_LEFT = 33;
-        const LEFT_EYE_RIGHT = 133;
-        const RIGHT_EYE_TOP = 386;
-        const RIGHT_EYE_BOTTOM = 374;
-        const RIGHT_EYE_LEFT = 362;
-        const RIGHT_EYE_RIGHT = 263;
-
-        // 初期化関数
-        async function init() {
-            // 目つぶり検出モードの変更を監視
-            document.getElementById('eye-alert-mode').addEventListener('change', function() {
-                eyeAlertMode = this.value;
-                resetEyeAlarm();
-            });
-
-            // タイル追加ボタン
-            document.getElementById('add-tile').addEventListener('click', addNewTile);
-
-            // Face Meshの初期化
-            initFaceMesh();
-        }
-
-        // Face Meshの初期化
-        function initFaceMesh() {
+        let eyeClosedCount = 0;
+        let eyeOpenCount = 0;
+        let alarmSound = document.getElementById("alarm-sound");
+        let alarmElement = document.getElementById("alarm");
+        let modelTiles = [];
+        let activeModels = [];
+        let detectionHistory = [];
+        const HISTORY_SIZE = 50;
+        const ALARM_THRESHOLD = 40;
+        
+        // 目の状態を更新する関数
+        function updateEyeStatus(newStatus) {
+            const eyeStatusText = document.getElementById("eye-status-text");
+            
+            if (newStatus !== eyeStatus) {
+                eyeStatus = newStatus;
+                eyeStatusText.textContent = eyeStatus;
+                
+                // 警報条件チェック
+                checkEyeAlarmCondition();
+            }
+        }
+        
+        // 目の警報条件チェック
+        function checkEyeAlarmCondition() {
+            if (eyeStatus === "検出しない") {
+                // 警報を止める
+                stopAlarm();
+                return;
+            }
+            
+            // 50回の検出で40回以上条件を満たしたら警報を鳴らす
+            if (eyeDetectionCount >= HISTORY_SIZE) {
+                if (eyeStatus === "目をつぶっている場合" && eyeClosedCount >= ALARM_THRESHOLD) {
+                    startAlarm();
+                } else if (eyeStatus === "目を開けている場合" && eyeOpenCount >= ALARM_THRESHOLD) {
+                    startAlarm();
+                } else {
+                    stopAlarm();
+                }
+            }
+        }
+        
+        // 警報を開始
+        function startAlarm() {
+            alarmElement.style.display = "block";
+            alarmSound.currentTime = 0;
+            alarmSound.play().catch(e => console.log("Audio play failed:", e));
+        }
+        
+        // 警報を停止
+        function stopAlarm() {
+            alarmElement.style.display = "none";
+            alarmSound.pause();
+        }
+        
+        // 目の検出を初期化
+        async function initEyeDetection() {
+            const videoElement = document.getElementById('webcam');
+            const canvasElement = document.getElementById('output');
+            const canvasCtx = canvasElement.getContext('2d');
+            
             faceMesh = new FaceMesh({
                 locateFile: (file) => {
                     return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
                 }
             });
-
+            
             faceMesh.setOptions({
                 maxNumFaces: 1,
                 refineLandmarks: true,
                 minDetectionConfidence: 0.5,
                 minTrackingConfidence: 0.5
             });
-
-            faceMesh.onResults(onFaceResults);
-
-            faceWebcam = new Camera(document.getElementById('face-canvas'), {
-                onFrame: async () => {
-                    await faceMesh.send({image: faceWebcam.video});
-                },
-                width: 200,
-                height: 200
-            });
-            faceWebcam.start();
-        }
-
-        // Face Meshの結果処理
-        function onFaceResults(results) {
-            faceCtx = document.getElementById('face-canvas').getContext('2d');
-            faceCtx.clearRect(0, 0, faceWebcam.video.width, faceWebcam.video.height);
-            faceCtx.save();
-            faceCtx.drawImage(results.image, 0, 0, faceWebcam.video.width, faceWebcam.video.height);
             
-            if (results.multiFaceLandmarks) {
-                for (const landmarks of results.multiFaceLandmarks) {
-                    drawConnectors(faceCtx, landmarks, FACEMESH_TESSELATION, {color: '#C0C0C070', lineWidth: 1});
-                    drawConnectors(faceCtx, landmarks, FACEMESH_RIGHT_EYE, {color: '#FF3030'});
-                    drawConnectors(faceCtx, landmarks, FACEMESH_RIGHT_EYEBROW, {color: '#FF3030'});
-                    drawConnectors(faceCtx, landmarks, FACEMESH_LEFT_EYE, {color: '#30FF30'});
-                    drawConnectors(faceCtx, landmarks, FACEMESH_LEFT_EYEBROW, {color: '#30FF30'});
-                    drawConnectors(faceCtx, landmarks, FACEMESH_FACE_OVAL, {color: '#E0E0E0'});
-                    drawConnectors(faceCtx, landmarks, FACEMESH_LIPS, {color: '#E0E0E0'});
-
-                    // 目つぶり検出
-                    const leftEAR = getEAR(
-                        landmarks, 
-                        LEFT_EYE_TOP, LEFT_EYE_BOTTOM, 
-                        LEFT_EYE_LEFT, LEFT_EYE_RIGHT
-                    );
-                    
-                    const rightEAR = getEAR(
-                        landmarks, 
-                        RIGHT_EYE_TOP, RIGHT_EYE_BOTTOM, 
-                        RIGHT_EYE_LEFT, RIGHT_EYE_RIGHT
-                    );
-                    
-                    eyeEAR = ((leftEAR + rightEAR) / 2).toFixed(2);
-                    document.getElementById('eye-ear').textContent = `EAR: ${eyeEAR}`;
-                    
-                    let newEyeStatus = 'none';
-                    if (eyeEAR < EYE_CLOSED_THRESHOLD) {
-                        newEyeStatus = 'closed';
-                    } else if (eyeEAR > EYE_OPEN_THRESHOLD) {
-                        newEyeStatus = 'open';
-                    }
-                    
-                    if (newEyeStatus !== eyeStatus) {
-                        eyeStatus = newEyeStatus;
-                        updateEyeStatusDisplay();
+            faceMesh.onResults((results) => {
+                canvasCtx.save();
+                canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+                canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
+                
+                if (results.multiFaceLandmarks) {
+                    for (const landmarks of results.multiFaceLandmarks) {
+                        // 左目のEAR (Eye Aspect Ratio) を計算
+                        const leftEAR = getEAR(
+                            landmarks,
+                            159, 145, 133, 33  // 左目のlandmarkインデックス
+                        );
+                        
+                        // 右目のEARを計算
+                        const rightEAR = getEAR(
+                            landmarks,
+                            386, 374, 362, 263  // 右目のlandmarkインデックス
+                        );
+                        
+                        // 両目の平均EAR
+                        const ear = (leftEAR + rightEAR) / 2;
+                        
+                        // EARに基づいて目の状��を判定
+                        const EAR_THRESHOLD = 0.25;
+                        const isBlinking = ear < EAR_THRESHOLD;
+                        
+                        // 検出強度を更新
+                        updateDetectionStrength(ear);
+                        
+                        // 目の状態を更新
+                        if (eyeStatus !== "検出しない") {
+                            eyeDetectionCount = (eyeDetectionCount + 1) % HISTORY_SIZE;
+                            
+                            if (isBlinking) {
+                                eyeClosedCount = Math.min(eyeClosedCount + 1, HISTORY_SIZE);
+                                if (eyeOpenCount > 0) eyeOpenCount--;
+                                
+                                if (eyeStatus === "目をつぶっている場合") {
+                                    updateEyeStatus("目をつぶっている場合");
+                                }
+                            } else {
+                                eyeOpenCount = Math.min(eyeOpenCount + 1, HISTORY_SIZE);
+                                if (eyeClosedCount > 0) eyeClosedCount--;
+                                
+                                if (eyeStatus === "目を開けている場合") {
+                                    updateEyeStatus("目を開けている場合");
+                                }
+                            }
+                        }
                     }
-                    
-                    // 目つぶり警報のチェック
-                    checkEyeAlarm();
                 }
-            }
+                
+                canvasCtx.restore();
+            });
             
-            faceCtx.restore();
+            const camera = new Camera(videoElement, {
+                onFrame: async () => {
+                    await faceMesh.send({image: videoElement});
+                },
+                width: 640,
+                height: 480
+            });
+            
+            camera.start();
         }
-
-        // EAR (Eye Aspect Ratio) 計算
+        
+        // EAR (Eye Aspect Ratio) を計算する関数
         function getEAR(landmarks, topIdx, bottomIdx, leftIdx, rightIdx) {
             const vertical = Math.hypot(
                 landmarks[topIdx].x - landmarks[bottomIdx].x,
@@ -328,533 +402,295 @@
             );
             return vertical / horizontal;
         }
-
-        // 目の状態表示を更新
-        function updateEyeStatusDisplay() {
-            const eyeStatusElement = document.getElementById('eye-status');
-            eyeStatusElement.textContent = eyeStatus === 'closed' ? '目をつぶっています' : 
-                                         eyeStatus === 'open' ? '目を開いています' : '検出なし';
-            
-            eyeStatusElement.className = 'eye-status ' + 
-                (eyeStatus === 'closed' ? 'closed-eye' : 
-                 eyeStatus === 'open' ? 'open-eye' : '');
-        }
-
-        // 目つぶり警報をチェック
-        function checkEyeAlarm() {
-            if (eyeAlertMode === 'none') {
-                eyeDetectionCount = 0;
-                eyeAlarmCount = 0;
-                noEyeAlarmCount = 0;
-                return;
-            }
-            
-            eyeDetectionCount++;
-            
-            const shouldAlarm = 
-                (eyeAlertMode === 'closed' && eyeStatus === 'closed') ||
-                (eyeAlertMode === 'open' && eyeStatus === 'open');
-            
-            if (shouldAlarm) {
-                eyeAlarmCount++;
-                noEyeAlarmCount = 0;
+        
+        // 検出強度を更新
+        function updateDetectionStrength(ear) {
+            const strengthFill = document.getElementById("strength-fill");
+            // EARが0.15-0.45の範囲で0-100%にマッピング
+            const strength = Math.min(Math.max((ear - 0.15) / (0.45 - 0.15) * 100, 0), 100);
+            strengthFill.style.width = `${strength}%`;
+            
+            // 色を変更 (緑→黄→赤)
+            if (strength > 50) {
+                strengthFill.style.backgroundColor = "#4CAF50"; // 緑
+            } else if (strength > 20) {
+                strengthFill.style.backgroundColor = "#FFC107"; // 黄
             } else {
-                noEyeAlarmCount++;
-            }
-            
-            // 警報をトリガーするかチェック
-            if (eyeAlarmCount >= DETECTION_THRESHOLD && !eyeAlarmTriggered) {
-                eyeAlarmTriggered = true;
-                triggerAlarm('eye');
-            } 
-            // 警報を停止するかチェック
-            else if (noEyeAlarmCount >= RESET_THRESHOLD && eyeAlarmTriggered) {
-                resetEyeAlarm();
-            }
-        }
-
-        // 目つぶり警報をリセット
-        function resetEyeAlarm() {
-            eyeAlarmTriggered = false;
-            eyeAlarmCount = 0;
-            noEyeAlarmCount = 0;
-            eyeDetectionCount = 0;
-            checkOverallAlarm();
-        }
-
-        // ポーズモデルの初期化
-        async function initPoseModel(modelURL, metadataURL) {
-            poseModel = await tmPose.load(modelURL, metadataURL);
-            poseMaxPredictions = poseModel.getTotalClasses();
-            
-            poseWebcam = new tmPose.Webcam(200, 200, true);
-            await poseWebcam.setup();
-            await poseWebcam.play();
-            
-            poseCtx = document.getElementById('pose-canvas').getContext('2d');
-            window.requestAnimationFrame(poseLoop);
-        }
-
-        // ポーズ認識ループ
-        async function poseLoop() {
-            poseWebcam.update();
-            await predictPose();
-            window.requestAnimationFrame(poseLoop);
-        }
-
-        // ポーズ予測
-        async function predictPose() {
-            const { pose, posenetOutput } = await poseModel.estimatePose(poseWebcam.canvas);
-            const prediction = await poseModel.predict(posenetOutput);
-            
-            // バーチャートの更新
-            updateBarChart('pose-bars', prediction);
-            
-            // 警報条件のチェック
-            checkPoseAlarmConditions(prediction);
-            
-            // ポーズを描画
-            drawPose(pose);
-        }
-
-        // ポーズを描画
-        function drawPose(pose) {
-            if (poseWebcam.canvas) {
-                poseCtx.drawImage(poseWebcam.canvas, 0, 0);
-                if (pose) {
-                    const minPartConfidence = 0.5;
-                    tmPose.drawKeypoints(pose.keypoints, minPartConfidence, poseCtx);
-                    tmPose.drawSkeleton(pose.keypoints, minPartConfidence, poseCtx);
-                }
+                strengthFill.style.backgroundColor = "#F44336"; // 赤
             }
         }
-
-        // 画像モデルの初期化
-        async function initImageModel(modelURL, metadataURL) {
-            imageModel = await tmImage.load(modelURL, metadataURL);
-            imageMaxPredictions = imageModel.getTotalClasses();
-            
-            imageWebcam = new tmImage.Webcam(200, 200, true);
-            await imageWebcam.setup();
-            await imageWebcam.play();
-            
-            imageCtx = document.getElementById('image-canvas').getContext('2d');
-            window.requestAnimationFrame(imageLoop);
-        }
-
-        // 画像認識ループ
-        async function imageLoop() {
-            imageWebcam.update();
-            await predictImage();
-            window.requestAnimationFrame(imageLoop);
-        }
-
-        // 画像予測
-        async function predictImage() {
-            const prediction = await imageModel.predict(imageWebcam.canvas);
-            
-            // バーチャートの更新
-            updateBarChart('image-bars', prediction);
-            
-            // 警報条件のチェック
-            checkImageAlarmConditions(prediction);
-        }
-
-        // バーチャートを更新
-        function updateBarChart(chartId, predictions) {
-            const chart = document.getElementById(chartId);
-            chart.innerHTML = '';
+        
+        // モデルをロードしてタイルに追加
+        async function addModelTile(modelType, modelId, alarmClasses) {
+            const tileContainer = document.getElementById("tile-container");
+            
+            // タイル要素を作成
+            const tile = document.createElement("div");
+            tile.className = "tile";
+            tile.dataset.modelType = modelType;
+            tile.dataset.modelId = modelId;
+            tile.dataset.alarmClasses = alarmClasses;
+            
+            // タイルヘッダー
+            const tileHeader = document.createElement("div");
+            tileHeader.className = "tile-header";
+            
+            const tileTitle = document.createElement("div");
+            tileTitle.className = "tile-title";
+            tileTitle.textContent = `${modelType === 'image' ? '画像認識' : 'ポーズ認識'}: ${modelId}`;
+            
+            const deleteBtn = document.createElement("button");
+            deleteBtn.className = "delete-btn";
+            deleteBtn.textContent = "×";
+            deleteBtn.onclick = () => {
+                tileContainer.removeChild(tile);
+                modelTiles = modelTiles.filter(t => t !== tile);
+                activeModels = activeModels.filter(m => m.tile !== tile);
+            };
+            
+            tileHeader.appendChild(tileTitle);
+            tileHeader.appendChild(deleteBtn);
+            tile.appendChild(tileHeader);
+            
+            // チャートコンテナ
+            const chartContainer = document.createElement("div");
+            chartContainer.className = "chart-container";
+            tile.appendChild(chartContainer);
+            
+            // モデル情報
+            const modelInfo = document.createElement("div");
+            modelInfo.textContent = `警報クラス: ${alarmClasses}`;
+            tile.appendChild(modelInfo);
+            
+            // タイルを追加
+            tileContainer.appendChild(tile);
+            modelTiles.push(tile);
+            
+            // モデルをロード
+            const modelUrl = `https://storage.googleapis.com/tm-model/${modelId}/`;
             
-            let maxProbability = 0;
-            predictions.forEach(pred => {
-                if (pred.probability > maxProbability) {
-                    maxProbability = pred.probability;
-                }
+            try {
+                let model;
+                let maxPredictions;
                 
-                const bar = document.createElement('div');
-                bar.className = 'bar';
-                bar.style.height = `${pred.probability * 100}%`;
-                bar.title = `${pred.className}: ${(pred.probability * 100).toFixed(1)}%`;
-                chart.appendChild(bar);
-            });
-            
-            // 強度表示を更新
-            if (chartId === 'pose-bars') {
-                document.getElementById('pose-strength').textContent = `強度: ${(maxProbability * 100).toFixed(0)}%`;
-            } else {
-                document.getElementById('image-strength').textContent = `強度: ${(maxProbability * 100).toFixed(0)}%`;
-            }
-        }
-
-        // ポーズ警報条件をチェック
-        function checkPoseAlarmConditions(predictions) {
-            if (poseAlarmConditions.length === 0) return;
-            
-            poseDetectionCount++;
-            
-            let shouldAlarm = false;
-            poseAlarmConditions.forEach(condition => {
-                predictions.forEach(pred => {
-                    if (pred.className === condition.className && pred.probability >= condition.threshold) {
-                        shouldAlarm = true;
+                if (modelType === 'image') {
+                    model = await tmImage.load(`${modelUrl}model.json`, `${modelUrl}metadata.json`);
+                    maxPredictions = model.getTotalClasses();
+                    
+                    // チャート用のバーを作成
+                    for (let i = 0; i < maxPredictions; i++) {
+                        const bar = document.createElement("div");
+                        bar.className = "chart-bar";
+                        bar.dataset.classIndex = i;
+                        chartContainer.appendChild(bar);
                     }
-                });
-            });
-            
-            if (shouldAlarm) {
-                poseAlarmCount++;
-                noPoseAlarmCount = 0;
-            } else {
-                noPoseAlarmCount++;
-            }
-            
-            // 警報をトリガーするかチェック
-            if (poseAlarmCount >= DETECTION_THRESHOLD && !poseAlarmTriggered) {
-                poseAlarmTriggered = true;
-                triggerAlarm('pose');
-            } 
-            // 警報を停止するかチェック
-            else if (noPoseAlarmCount >= RESET_THRESHOLD && poseAlarmTriggered) {
-                resetPoseAlarm();
-            }
-        }
-
-        // 画像警報条件をチェック
-        function checkImageAlarmConditions(predictions) {
-            if (imageAlarmConditions.length === 0) return;
-            
-            imageDetectionCount++;
-            
-            let shouldAlarm = false;
-            imageAlarmConditions.forEach(condition => {
-                predictions.forEach(pred => {
-                    if (pred.className === condition.className && pred.probability >= condition.threshold) {
-                        shouldAlarm = true;
+                    
+                    // Webcamをセットアップ
+                    const webcam = new tmImage.Webcam(200, 200, true);
+                    await webcam.setup();
+                    await webcam.play();
+                    
+                    // 予測ループ
+                    const predictLoop = async () => {
+                        const prediction = await model.predict(webcam.canvas);
+                        
+                        // 警報条件チェック
+                        let shouldAlarm = false;
+                        
+                        // チャートを更新
+                        for (let i = 0; i < maxPredictions; i++) {
+                            const probability = prediction[i].probability;
+                            const className = prediction[i].className;
+                            
+                            // バーの高さを更新
+                            const bars = chartContainer.querySelectorAll(".chart-bar");
+                            if (bars[i]) {
+                                bars[i].style.height = `${probability * 100}%`;
+                                
+                                // 警報クラスの場合は色を赤に
+                                if (alarmClasses.split(',').includes(className)) {
+                                    bars[i].style.backgroundColor = probability > 0.5 ? "#F44336" : "#4CAF50";
+                                    
+                                    if (probability > 0.5) {
+                                        shouldAlarm = true;
+                                    }
+                                } else {
+                                    bars[i].style.backgroundColor = "#4CAF50";
+                                }
+                            }
+                        }
+                        
+                        // 警報条件を履歴に追加
+                        detectionHistory.push(shouldAlarm);
+                        if (detectionHistory.length > HISTORY_SIZE) {
+                            detectionHistory.shift();
+                        }
+                        
+                        // 警報条件チェック
+                        if (detectionHistory.length === HISTORY_SIZE) {
+                            const alarmCount = detectionHistory.filter(Boolean).length;
+                            if (alarmCount >= ALARM_THRESHOLD) {
+                                startAlarm();
+                            } else {
+                                stopAlarm();
+                            }
+                        }
+                        
+                        requestAnimationFrame(predictLoop);
+                    };
+                    
+                    predictLoop();
+                    
+                    activeModels.push({
+                        tile,
+                        model,
+                        webcam,
+                        predictLoop
+                    });
+                    
+                } else if (modelType === 'pose') {
+                    model = await tmPose.load(`${modelUrl}model.json`, `${modelUrl}metadata.json`);
+                    maxPredictions = model.getTotalClasses();
+                    
+                    // チャート用のバーを作成
+                    for (let i = 0; i < maxPredictions; i++) {
+                        const bar = document.createElement("div");
+                        bar.className = "chart-bar";
+                        bar.dataset.classIndex = i;
+                        chartContainer.appendChild(bar);
                     }
-                });
-            });
-            
-            if (shouldAlarm) {
-                imageAlarmCount++;
-                noImageAlarmCount = 0;
-            } else {
-                noImageAlarmCount++;
-            }
-            
-            // 警報をトリガーするかチェック
-            if (imageAlarmCount >= DETECTION_THRESHOLD && !imageAlarmTriggered) {
-                imageAlarmTriggered = true;
-                triggerAlarm('image');
-            } 
-            // 警報を停止するかチェック
-            else if (noImageAlarmCount >= RESET_THRESHOLD && imageAlarmTriggered) {
-                resetImageAlarm();
-            }
-        }
-
-        // ポーズ警報をリセット
-        function resetPoseAlarm() {
-            poseAlarmTriggered = false;
-            poseAlarmCount = 0;
-            noPoseAlarmCount = 0;
-            poseDetectionCount = 0;
-            checkOverallAlarm();
-        }
-
-        // 画像警報をリセット
-        function resetImageAlarm() {
-            imageAlarmTriggered = false;
-            imageAlarmCount = 0;
-            noImageAlarmCount = 0;
-            imageDetectionCount = 0;
-            checkOverallAlarm();
-        }
-
-        // 警報をトリガー
-        function triggerAlarm(source) {
-            if (!alarmActive) {
-                alarmActive = true;
-                alarmSound.play();
-                document.body.classList.add('alarm-active');
-                console.log(`警報が鳴っています (${source})`);
-            }
-        }
-
-        // 全体の警報状態をチェック
-        function checkOverallAlarm() {
-            if (!poseAlarmTriggered && !imageAlarmTriggered && !eyeAlarmTriggered) {
-                if (alarmActive) {
-                    alarmActive = false;
-                    alarmSound.pause();
-                    alarmSound.currentTime = 0;
-                    document.body.classList.remove('alarm-active');
-                    console.log('警報が停止しました');
-                }
-            }
-        }
-
-        // 新しいタイルを追加
-        function addNewTile() {
-            const tileContainer = document.getElementById('tile-container');
-            const tileId = 'tile-' + Date.now();
-            
-            const tile = document.createElement('div');
-            tile.className = 'tile';
-            tile.id = tileId;
-            
-            tile.innerHTML = `
-                <div class="tile-header">
-                    <div class="tile-title">新しいモデル</div>
-                    <button class="delete-btn" data-tile="${tileId}">削除</button>
-                </div>
-                <input type="text" class="url-input" placeholder="モデルURL (model.json)" data-tile="${tileId}">
-                <input type="text" class="url-input" placeholder="メタデータURL (metadata.json)" data-tile="${tileId}">
-                <button class="load-btn" data-tile="${tileId}">モデルを読み込む</button>
-                <div class="bar-chart" id="${tileId}-bars" style="height: 100px; margin-top: 10px;"></div>
-                <div class="alert-options" id="${tileId}-options"></div>
-            `;
-            
-            // 追加ボタンの前に挿入
-            tileContainer.insertBefore(tile, document.getElementById('add-tile'));
-            
-            // イベントリスナーを追加
-            document.querySelector(`.load-btn[data-tile="${tileId}"]`).addEventListener('click', function() {
-                loadModelForTile(tileId);
-            });
-            
-            document.querySelector(`.delete-btn[data-tile="${tileId}"]`).addEventListener('click', function() {
-                tileContainer.removeChild(document.getElementById(tileId));
-            });
-        }
-
-        // タイル用のモデルを読み込み
-        async function loadModelForTile(tileId) {
-            const modelURL = document.querySelector(`.url-input[data-tile="${tileId}"]:first-of-type`).value;
-            const metadataURL = document.querySelector(`.url-input[data-tile="${tileId}"]:last-of-type`).value;
-            
-            if (!modelURL || !metadataURL) {
-                alert('モデルURLとメタデータURLを入力してください');
-                return;
-            }
-            
-            try {
-                // モデルタイプを判別 (URLに'/pose/'が含まれているかで判断)
-                const isPoseModel = modelURL.includes('/pose/');
-                
-                if (isPoseModel) {
-                    await loadPoseModelForTile(tileId, modelURL, metadataURL);
-                } else {
-                    await loadImageModelForTile(tileId, modelURL, metadataURL);
+                    
+                    // Webcamをセットアップ
+                    const webcam = new tmPose.Webcam(200, 200, true);
+                    await webcam.setup();
+                    await webcam.play();
+                    
+                    // 予測ループ
+                    const predictLoop = async () => {
+                        const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
+                        const prediction = await model.predict(posenetOutput);
+                        
+                        // 警報条件チェック
+                        let shouldAlarm = false;
+                        
+                        // チャートを更新
+                        for (let i = 0; i < maxPredictions; i++) {
+                            const probability = prediction[i].probability;
+                            const className = prediction[i].className;
+                            
+                            // バーの高さを更新
+                            const bars = chartContainer.querySelectorAll(".chart-bar");
+                            if (bars[i]) {
+                                bars[i].style.height = `${probability * 100}%`;
+                                
+                                // 警報クラスの場合は色を赤に
+                                if (alarmClasses.split(',').includes(className)) {
+                                    bars[i].style.backgroundColor = probability > 0.5 ? "#F44336" : "#4CAF50";
+                                    
+                                    if (probability > 0.5) {
+                                        shouldAlarm = true;
+                                    }
+                                } else {
+                                    bars[i].style.backgroundColor = "#4CAF50";
+                                }
+                            }
+                        }
+                        
+                        // 警報条件を履歴に追加
+                        detectionHistory.push(shouldAlarm);
+                        if (detectionHistory.length > HISTORY_SIZE) {
+                            detectionHistory.shift();
+                        }
+                        
+                        // 警報条件チェック
+                        if (detectionHistory.length === HISTORY_SIZE) {
+                            const alarmCount = detectionHistory.filter(Boolean).length;
+                            if (alarmCount >= ALARM_THRESHOLD) {
+                                startAlarm();
+                            } else {
+                                stopAlarm();
+                            }
+                        }
+                        
+                        requestAnimationFrame(predictLoop);
+                    };
+                    
+                    predictLoop();
+                    
+                    activeModels.push({
+                        tile,
+                        model,
+                        webcam,
+                        predictLoop
+                    });
                 }
             } catch (error) {
-                console.error('モデルの読み込みに失敗しました:', error);
-                alert('モデルの読み込みに失敗しました: ' + error.message);
+                console.error("モデルのロードに失敗しました:", error);
+                tileTitle.textContent += " (ロード失敗)";
             }
         }
-
-        // ポーズモデルをタイル用に読み込み
-        async function loadPoseModelForTile(tileId, modelURL, metadataURL) {
-            const model = await tmPose.load(modelURL, metadataURL);
-            const maxPredictions = model.getTotalClasses();
-            
-            // 警報オプションを追加
-            const optionsContainer = document.getElementById(`${tileId}-options`);
-            optionsContainer.innerHTML = '';
-            
-            // タイトルを更新
-            document.querySelector(`#${tileId} .tile-title`).textContent = 'ポーズ認識モデル';
-            
-            // クラスごとに警報オプションを追加
-            for (let i = 0; i < maxPredictions; i++) {
-                const className = model.getClassLabels()[i];
-                
-                const optionDiv = document.createElement('div');
-                optionDiv.className = 'alert-option';
-                optionDiv.innerHTML = `
-                    <label>
-                        <input type="checkbox" data-class="${className}" data-tile="${tileId}">
-                        ${className} で警報
-                    </label>
-                    <select data-class="${className}" data-tile="${tileId}">
-                        <option value="0.7">70%以上</option>
-                        <option value="0.8">80%以上</option>
-                        <option value="0.9">90%以上</option>
-                    </select>
-                `;
-                
-                optionsContainer.appendChild(optionDiv);
-                
-                // チェックボックスの変更を監視
-                optionDiv.querySelector('input').addEventListener('change', function() {
-                    updatePoseAlarmConditions(tileId);
-                });
-                
-                // セレクトボックスの変更を監視
-                optionDiv.querySelector('select').addEventListener('change', function() {
-                    updatePoseAlarmConditions(tileId);
-                });
-            }
-            
-            // 予測ループを開始
-            startPosePredictionForTile(tileId, model);
-        }
-
-        // 画像モデルをタイル用に読み込み
-        async function loadImageModelForTile(tileId, modelURL, metadataURL) {
-            const model = await tmImage.load(modelURL, metadataURL);
-            const maxPredictions = model.getTotalClasses();
-            
-            // 警報オプションを追加
-            const optionsContainer = document.getElementById(`${tileId}-options`);
-            optionsContainer.innerHTML = '';
-            
-            // タイトルを更新
-            document.querySelector(`#${tileId} .tile-title`).textContent = '画像認識モデル';
-            
-            // クラスごとに警報オプションを追加
-            for (let i = 0; i < maxPredictions; i++) {
-                const className = model.getClassLabels()[i];
+        
+        // モーダルを開く
+        document.getElementById("add-tile").addEventListener("click", () => {
+            document.getElementById("modal").style.display = "flex";
+        });
+        
+        // モーダルを閉じる
+        document.getElementById("close-modal").addEventListener("click", () => {
+            document.getElementById("modal").style.display = "none";
+        });
+        
+        // モデルを追加
+        document.getElementById("submit-model").addEventListener("click", () => {
+            const modelType = document.getElementById("model-type").value;
+            const modelId = document.getElementById("model-id").value.trim();
+            const alarmClasses = document.getElementById("alarm-class").value.trim();
+            
+            if (modelId && alarmClasses) {
+                addModelTile(modelType, modelId, alarmClasses);
+                document.getElementById("modal").style.display = "none";
                 
-                const optionDiv = document.createElement('div');
-                optionDiv.className = 'alert-option';
-                optionDiv.innerHTML = `
-                    <label>
-                        <input type="checkbox" data-class="${className}" data-tile="${tileId}">
-                        ${className} で警報
-                    </label>
-                    <select data-class="${className}" data-tile="${tileId}">
-                        <option value="0.7">70%以上</option>
-                        <option value="0.8">80%以上</option>
-                        <option value="0.9">90%以上</option>
-                    </select>
-                `;
-                
-                optionsContainer.appendChild(optionDiv);
-                
-                // チェックボックスの変更を監視
-                optionDiv.querySelector('input').addEventListener('change', function() {
-                    updateImageAlarmConditions(tileId);
-                });
-                
-                // セレクトボックスの変更を監視
-                optionDiv.querySelector('select').addEventListener('change', function() {
-                    updateImageAlarmConditions(tileId);
-                });
+                // フォームをリセット
+                document.getElementById("model-id").value = "";
+                document.getElementById("alarm-class").value = "";
+            } else {
+                alert("モデルIDと警報クラスを入力してください");
             }
-            
-            // 予測ループを開始
-            startImagePredictionForTile(tileId, model);
-        }
-
-        // ポーズ予測をタイル用に開始
-        async function startPosePredictionForTile(tileId, model) {
-            const canvas = document.createElement('canvas');
-            canvas.width = 200;
-            canvas.height = 200;
-            const ctx = canvas.getContext('2d');
-            
-            async function predict() {
-                const { pose, posenetOutput } = await model.estimatePose(poseWebcam.canvas);
-                const prediction = await model.predict(posenetOutput);
-                
-                // バーチャートを更新
-                updateTileBarChart(tileId, prediction);
+        });
+        
+        // 目の状態選択 (デモ用)
+        function setupEyeStatusSelector() {
+            const eyeStatusText = document.getElementById("eye-status-text");
+            
+            eyeStatusText.addEventListener("click", () => {
+                const currentStatus = eyeStatusText.textContent;
+                let newStatus;
                 
-                // ポーズを描画
-                if (poseWebcam.canvas) {
-                    ctx.drawImage(poseWebcam.canvas, 0, 0);
-                    if (pose) {
-                        const minPartConfidence = 0.5;
-                        tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
-                        tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
-                    }
+                if (currentStatus === "検出しない") {
+                    newStatus = "目をつぶっている場合";
+                } else if (currentStatus === "目をつぶっている場合") {
+                    newStatus = "目を開けている場合";
+                } else {
+                    newStatus = "検出しない";
                 }
                 
-                requestAnimationFrame(predict);
-            }
-            
-            predict();
-        }
-
-        // 画像予測をタイル用に開始
-        async function startImagePredictionForTile(tileId, model) {
-            const canvas = document.createElement('canvas');
-            canvas.width = 200;
-            canvas.height = 200;
-            const ctx = canvas.getContext('2d');
-            
-            async function predict() {
-                ctx.drawImage(imageWebcam.canvas, 0, 0);
-                const prediction = await model.predict(imageWebcam.canvas);
-                
-                // バーチャートを更新
-                updateTileBarChart(tileId, prediction);
-                
-                requestAnimationFrame(predict);
-            }
-            
-            predict();
-        }
-
-        // タイルのバーチャートを更新
-        function updateTileBarChart(tileId, predictions) {
-            const chart = document.getElementById(`${tileId}-bars`);
-            chart.innerHTML = '';
-            
-            predictions.forEach(pred => {
-                const bar = document.createElement('div');
-                bar.className = 'bar';
-                bar.style.height = `${pred.probability * 100}%`;
-                bar.title = `${pred.className}: ${(pred.probability * 100).toFixed(1)}%`;
-                chart.appendChild(bar);
+                updateEyeStatus(newStatus);
+                eyeDetectionCount = 0;
+                eyeClosedCount = 0;
+                eyeOpenCount = 0;
             });
         }
-
-        // ポーズ警報条件を更新
-        function updatePoseAlarmConditions(tileId) {
-            // 既存の条件を削除 (同じタイルからの条件)
-            poseAlarmConditions = poseAlarmConditions.filter(cond => !cond.tileId === tileId);
-            
-            // 新しい条件を追加
-            const checkboxes = document.querySelectorAll(`input[type="checkbox"][data-tile="${tileId}"]:checked`);
-            checkboxes.forEach(checkbox => {
-                const className = checkbox.dataset.class;
-                const threshold = parseFloat(document.querySelector(`select[data-class="${className}"][data-tile="${tileId}"]`).value);
-                
-                poseAlarmConditions.push({
-                    tileId,
-                    className,
-                    threshold
-                });
-            });
-            
-            // 警報状態をリセット
-            resetPoseAlarm();
-        }
-
-        // 画像警報条件を更新
-        function updateImageAlarmConditions(tileId) {
-            // 既存の条件を削除 (同じタイルからの条件)
-            imageAlarmConditions = imageAlarmConditions.filter(cond => !cond.tileId === tileId);
-            
-            // 新しい条件を追加
-            const checkboxes = document.querySelectorAll(`input[type="checkbox"][data-tile="${tileId}"]:checked`);
-            checkboxes.forEach(checkbox => {
-                const className = checkbox.dataset.class;
-                const threshold = parseFloat(document.querySelector(`select[data-class="${className}"][data-tile="${tileId}"]`).value);
-                
-                imageAlarmConditions.push({
-                    tileId,
-                    className,
-                    threshold
-                });
-            });
+        
+        // 初期化
+        async function init() {
+            await initEyeDetection();
+            setupEyeStatusSelector();
             
-            // 警報状態をリセット
-            resetImageAlarm();
+            // デフォルトで目の状態を「検出しない」に設定
+            updateEyeStatus("検出しない");
         }
-
-        // 初期化を開始
+        
+        // ページ読み込み時に初期化
         window.onload = init;
     </script>
 </body>