refactor index.html for improved layout, styling, and user interaction

index.html

@@ -14,8 +14,10 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            height: 100vh;
+            min-height: 100vh;
             margin: 0;
+            padding: 20px;
+            box-sizing: border-box;
         }
         .container {
             background-color: #16213e;
@@ -23,260 +25,492 @@
             border-radius: 15px;
             text-align: center;
             box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            max-width: 620px;
+            width: 100%;
         }
         h1 { color: #fff; margin-bottom: 5px; }
-        p { color: #a2a2bd; margin-bottom: 30px; }
-        
+        .subtitle { color: #a2a2bd; margin-bottom: 20px; }
+
         #bpm-display {
             font-size: 80px;
             font-weight: bold;
-            margin: 20px 0;
+            margin: 15px 0;
             text-shadow: 0 0 15px #e94560;
             transition: color 0.3s ease;
         }
 
-        @keyframes pulse { 
-            0% { transform: scale(1); opacity: 1; } 
-            50% { transform: scale(1.05); opacity: 0.8; } 
-            100% { transform: scale(1); opacity: 1; } 
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.05); opacity: 0.8; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+
+        /* ---- TABS ---- */
+        .tab-group {
+            display: flex;
+            justify-content: center;
+            gap: 0;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid #0f3460;
         }
+        .tab-btn {
+            flex: 1;
+            background: #0f3460;
+            color: #a2a2bd;
+            border: none;
+            padding: 10px 16px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: 0.2s;
+            font-weight: bold;
+        }
+        .tab-btn.active { background: #4ecca3; color: #1a1a2e; }
+        .tab-btn:hover:not(.active) { background: #1a3a6e; color: #fff; }
+
+        .tab-panel { display: none; }
+        .tab-panel.active { display: block; }
 
+        /* ---- MANUAL INPUT ---- */
+        .manual-group {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            margin: 10px 0 16px;
+        }
+        #manual-bpm-input {
+            background: #0f3460;
+            border: 1px solid #4ecca3;
+            border-radius: 8px;
+            color: #fff;
+            font-size: 28px;
+            font-weight: bold;
+            width: 110px;
+            text-align: center;
+            padding: 8px;
+        }
+        #manual-bpm-input:focus { outline: 2px solid #4ecca3; }
+        #btn-manual-set {
+            background: #4ecca3;
+            color: #1a1a2e;
+            border: none;
+            padding: 10px 18px;
+            font-size: 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: 0.2s;
+        }
+        #btn-manual-set:hover { background: #38b499; }
+
+        /* ---- BUTTONS ---- */
         .button-group {
             display: flex;
             justify-content: center;
             flex-wrap: wrap;
-            gap: 15px;
-            max-width: 600px;
+            gap: 12px;
+            margin-top: 10px;
         }
-
         button {
             background-color: #0f3460;
             color: white;
             border: none;
-            padding: 15px 25px;
-            font-size: 16px;
+            padding: 13px 22px;
+            font-size: 15px;
             border-radius: 8px;
             cursor: pointer;
             transition: 0.3s;
             font-weight: bold;
         }
         button:hover { background-color: #4ecca3; color: #1a1a2e; }
-        button:disabled { background-color: #333; cursor: not-allowed; color: #777; }
-        
-        /* CSS riêng cho nút Dừng nhạc */
+        button:disabled { background-color: #2a2a3e; cursor: not-allowed; color: #555; }
+
         #btn-stop { background-color: #8b0000; }
         #btn-stop:hover { background-color: #ff4d4d; color: white; }
-        #btn-stop:disabled { background-color: #333; }
+        #btn-stop:disabled { background-color: #2a2a3e; }
+
+        /* ---- STATUS ---- */
+        #status {
+            margin-top: 18px;
+            font-size: 13px;
+            font-style: italic;
+            min-height: 20px;
+        }
+        .status-ok { color: #4ecca3; }
+        .status-err { color: #ff4d4d; }
+        .status-info { color: #a2a2bd; }
+
+        /* ---- DEBUG LOG ---- */
+        .debug-section {
+            margin-top: 20px;
+            text-align: left;
+        }
+        .debug-toggle {
+            background: none;
+            border: none;
+            color: #555;
+            font-size: 12px;
+            cursor: pointer;
+            padding: 4px 0;
+            font-style: italic;
+        }
+        .debug-toggle:hover { color: #a2a2bd; background: none; }
+        #debug-log {
+            display: none;
+            background: #0a0a1a;
+            border-radius: 6px;
+            padding: 10px;
+            font-size: 11px;
+            color: #4ecca3;
+            font-family: monospace;
+            max-height: 160px;
+            overflow-y: auto;
+            margin-top: 6px;
+            text-align: left;
+        }
 
-        #status { margin-top: 20px; color: #4ecca3; font-style: italic; font-size: 14px;}
+        /* ---- NOTICE ---- */
+        .notice {
+            background: #0f2040;
+            border-left: 3px solid #e94560;
+            border-radius: 0 6px 6px 0;
+            padding: 10px 14px;
+            margin-bottom: 14px;
+            font-size: 13px;
+            color: #a2a2bd;
+            text-align: left;
+        }
+        .notice strong { color: #e94560; }
     </style>
 </head>
 <body>
+<div class="container">
+    <h1>Bio-Vibe 🎧</h1>
+    <p class="subtitle">Âm nhạc trị liệu AI theo Nhịp tim</p>
+
+    <div id="bpm-display">-- BPM</div>
 
-    <div class="container">
-        <h1>Bio-Vibe 🎧</h1>
-        <p>Âm nhạc trị liệu AI theo Nhịp tim</p>
+    <!-- TABS -->
+    <div class="tab-group">
+        <button class="tab-btn active" onclick="switchTab('ble')">📡 Kết nối BLE</button>
+        <button class="tab-btn" onclick="switchTab('manual')">✏️ Nhập thủ công</button>
+    </div>
 
-        <div id="bpm-display">-- BPM</div>
-        
+    <!-- TAB: BLE -->
+    <div id="tab-ble" class="tab-panel active">
+        <div class="notice">
+            <strong>Lưu ý Xiaomi / Samsung:</strong> Đồng hồ thông minh dùng giao thức riêng, 
+            không truyền nhịp tim qua BLE chuẩn. Thử kết nối — nếu không ra BPM, 
+            hãy dùng tab <em>Nhập thủ công</em> hoặc một chest-strap HR monitor (Polar, Garmin…).
+        </div>
         <div class="button-group">
-            <button id="btn-connect">1. Bắt tay Đồng hồ</button>
-            <button id="btn-generate">2. Sinh nhạc AI</button>
-            <button id="btn-stop" disabled>3. Dừng nhạc</button> 
+            <button id="btn-connect">1. Kết nối đồng hồ</button>
+        </div>
+    </div>
+
+    <!-- TAB: MANUAL -->
+    <div id="tab-manual" class="tab-panel">
+        <p style="color:#a2a2bd; font-size:14px; margin-bottom:10px;">
+            Nhập BPM từ app đồng hồ (Mi Fitness, Samsung Health…) rồi nhấn Set.
+        </p>
+        <div class="manual-group">
+            <input type="number" id="manual-bpm-input" min="30" max="220" value="75" />
+            <button id="btn-manual-set" onclick="setManualBpm()">Set BPM</button>
         </div>
+    </div>
 
-        <div id="status">Chưa kết nối...</div>
+    <!-- PLAYBACK CONTROLS -->
+    <div class="button-group" style="margin-top:18px;">
+        <button id="btn-generate">2. Sinh nhạc AI</button>
+        <button id="btn-stop" disabled>3. Dừng nhạc</button>
     </div>
 
+    <div id="status" class="status-info">Chưa có BPM...</div>
+
+    <!-- DEBUG -->
+    <div class="debug-section">
+        <button class="debug-toggle" onclick="toggleDebug()">▶ Xem log BLE debug</button>
+        <div id="debug-log"></div>
+    </div>
+</div>
+
 <script>
+    // ===============================
+    // STATE
+    // ===============================
     let currentBpm = 0;
-    let detectedCharUUID = null;
     let bpmHistory = [];
     let currentAudio = null;
+    let debugVisible = false;
 
-    // DOM
-    const bpmDisplay = document.getElementById('bpm-display');
-    const statusText = document.getElementById('status');
-    const btnConnect = document.getElementById('btn-connect');
+    const bpmDisplay  = document.getElementById('bpm-display');
+    const statusEl    = document.getElementById('status');
+    const btnConnect  = document.getElementById('btn-connect');
     const btnGenerate = document.getElementById('btn-generate');
-    const btnStop = document.getElementById('btn-stop');
-
-    // ================================
-    // SMOOTH BPM
-    // ================================
-    function smoothBpm(newVal) {
-        bpmHistory.push(newVal);
-        if (bpmHistory.length > 5) bpmHistory.shift();
-
-        return Math.round(
-            bpmHistory.reduce((a, b) => a + b, 0) / bpmHistory.length
-        );
+    const btnStop     = document.getElementById('btn-stop');
+    const debugLog    = document.getElementById('debug-log');
+
+    // ===============================
+    // UI HELPERS
+    // ===============================
+    function setStatus(msg, type = 'info') {
+        statusEl.textContent = msg;
+        statusEl.className   = 'status-' + type;
     }
 
-    // ================================
-    // AUTO DETECT DATA
-    // ================================
-    // ================================
-    // ĐỌC DỮ LIỆU NHỊP TIM CHUẨN BLE
-    // ================================
-    function handleAutoData(event, uuid) {
-        const value = event.target.value;
-
-        let raw = [];
-        for (let i = 0; i < value.byteLength; i++) {
-            raw.push(value.getUint8(i));
-        }
+    function log(msg) {
+        const line = document.createElement('div');
+        line.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
+        debugLog.appendChild(line);
+        debugLog.scrollTop = debugLog.scrollHeight;
+        console.log(msg);
+    }
 
-        console.log("📡 UUID:", uuid, "DATA:", raw);
+    function toggleDebug() {
+        debugVisible = !debugVisible;
+        debugLog.style.display = debugVisible ? 'block' : 'none';
+    }
 
-        for (let i = 0; i < raw.length; i++) {
-            let v = raw[i];
+    function switchTab(name) {
+        document.querySelectorAll('.tab-btn').forEach((b, i) => {
+            b.classList.toggle('active', (i === 0 && name === 'ble') || (i === 1 && name === 'manual'));
+        });
+        document.getElementById('tab-ble').classList.toggle('active', name === 'ble');
+        document.getElementById('tab-manual').classList.toggle('active', name === 'manual');
+    }
 
-            if (v >= 40 && v <= 180) {
+    // ===============================
+    // BPM SMOOTHING
+    // ===============================
+    function smoothBpm(val) {
+        bpmHistory.push(val);
+        if (bpmHistory.length > 5) bpmHistory.shift();
+        return Math.round(bpmHistory.reduce((a, b) => a + b, 0) / bpmHistory.length);
+    }
 
-                let newBpm = smoothBpm(v);
+    function applyBpm(raw, source) {
+        if (raw < 30 || raw > 220) return false;
+        if (currentBpm !== 0 && Math.abs(raw - currentBpm) > 40) return false;
 
-                if (currentBpm !== 0 && Math.abs(newBpm - currentBpm) > 40) {
-                    continue;
-                }
+        const smoothed    = smoothBpm(raw);
+        currentBpm        = smoothed;
+        bpmDisplay.textContent = currentBpm + ' BPM';
+        bpmDisplay.style.color = '#e94560';
+        setStatus('BPM nhận từ: ' + source, 'ok');
+        return true;
+    }
 
-                currentBpm = newBpm;
+    // ===============================
+    // MANUAL BPM
+    // ===============================
+    function setManualBpm() {
+        const val = parseInt(document.getElementById('manual-bpm-input').value, 10);
+        if (isNaN(val) || val < 30 || val > 220) {
+            setStatus('Giá trị BPM không hợp lệ (30–220)', 'err');
+            return;
+        }
+        bpmHistory = [];
+        applyBpm(val, 'Nhập thủ công');
+    }
 
-                bpmDisplay.innerText = `${currentBpm} BPM`;
-                bpmDisplay.style.color = "#e94560";
+    // ===============================
+    // PARSE CHUẨN BLE Heart Rate (0x2A37)
+    // ===============================
+    function parseHeartRateMeasurement(dataView) {
+        /*
+         * Byte 0: Flags
+         *   bit 0 = 0 → Heart Rate Value là UINT8 (byte 1)
+         *   bit 0 = 1 → Heart Rate Value là UINT16 (bytes 1-2, little-endian)
+         */
+        const flags   = dataView.getUint8(0);
+        const is16bit = (flags & 0x01) !== 0;
+        return is16bit
+            ? dataView.getUint16(1, true)
+            : dataView.getUint8(1);
+    }
 
-                statusText.innerText = `Đã detect BPM (${uuid})`;
-                statusText.style.color = "#4ecca3";
+    // ===============================
+    // HANDLE INCOMING CHARACTERISTIC DATA
+    // ===============================
+    function handleCharData(event, uuid, serviceUuid) {
+        const dv  = event.target.value;
+        const raw = [];
+        for (let i = 0; i < dv.byteLength; i++) raw.push(dv.getUint8(i));
+        log(`UUID ${uuid.substring(0,8)}… DATA: [${raw.join(', ')}]`);
+
+        const HR_MEASUREMENT_UUID = '00002a37-0000-1000-8000-00805f9b34fb';
+
+        // 1. Nếu đúng UUID chuẩn Heart Rate Measurement → parse theo spec
+        if (uuid === HR_MEASUREMENT_UUID) {
+            if (dv.byteLength >= 2) {
+                const bpm = parseHeartRateMeasurement(dv);
+                log(`Standard HR parse → ${bpm} BPM`);
+                applyBpm(bpm, 'HR chuẩn BLE');
+            }
+            return;
+        }
 
-                detectedCharUUID = uuid;
+        // 2. Fallback heuristic cho proprietary chars
+        //    Duyệt từng byte, lấy byte đầu tiên nằm trong [40, 180]
+        for (let i = 0; i < raw.length; i++) {
+            const v = raw[i];
+            if (v >= 40 && v <= 180) {
+                log(`Heuristic byte[${i}] = ${v} BPM`);
+                applyBpm(v, `Heuristic (${uuid.substring(0,8)}…)`);
                 break;
             }
         }
     }
 
-    // ================================
-    // AUTO SCAN BLE
-    // ================================
+    // ===============================
+    // BLE CONNECT — auto scan tất cả services
+    // ===============================
     btnConnect.addEventListener('click', async () => {
+        if (!navigator.bluetooth) {
+            setStatus('Trình duyệt không hỗ trợ Web Bluetooth!', 'err');
+            return;
+        }
+
         try {
-            statusText.innerText = "Đang scan BLE...";
+            setStatus('Đang mở hộp thoại BLE…', 'info');
+            log('Bắt đầu scan BLE...');
 
             const device = await navigator.bluetooth.requestDevice({
                 acceptAllDevices: true,
                 optionalServices: [
+                    // Chuẩn BLE
+                    'heart_rate',
                     'battery_service',
                     'device_information',
-                    'heart_rate'
+                    'generic_access',
+                    // Xiaomi Mi Band 4/5/6/7 — proprietary
+                    '0000fee0-0000-1000-8000-00805f9b34fb',
+                    '0000fee1-0000-1000-8000-00805f9b34fb',
+                    // Xiaomi Mi Band 7 / Amazfit
+                    '0000181d-0000-1000-8000-00805f9b34fb',
+                    // Samsung Galaxy Watch — proprietary health
+                    '0000fd00-0000-1000-8000-00805f9b34fb',
+                    // Generic HR secondary
+                    '0000180d-0000-1000-8000-00805f9b34fb',
                 ]
             });
 
-            const server = await device.gatt.connect();
+            log(`Device: ${device.name || '(no name)'} id=${device.id}`);
+            setStatus('Đang kết nối GATT…', 'info');
+
+            const server   = await device.gatt.connect();
             const services = await server.getPrimaryServices();
+            log(`Tìm thấy ${services.length} service(s)`);
 
-            for (const service of services) {
-                console.log("🔵 Service:", service.uuid);
+            let subscribed = 0;
 
-                const characteristics = await service.getCharacteristics();
+            for (const svc of services) {
+                log(`Service: ${svc.uuid}`);
+                let chars;
+                try {
+                    chars = await svc.getCharacteristics();
+                } catch (e) {
+                    log(`  Không đọc được characteristics: ${e.message}`);
+                    continue;
+                }
 
-                for (const char of characteristics) {
-                    console.log("⚪ Char:", char.uuid, char.properties);
+                for (const char of chars) {
+                    const props = char.properties;
+                    log(`  Char: ${char.uuid} [notify=${props.notify} indicate=${props.indicate} read=${props.read}]`);
 
-                    if (char.properties.notify || char.properties.indicate) {
+                    if (props.notify || props.indicate) {
                         try {
                             await char.startNotifications();
-
-                            char.addEventListener(
-                                'characteristicvaluechanged',
-                                (event) => handleAutoData(event, char.uuid)
-                            );
-
-                            console.log("✅ Subscribed:", char.uuid);
-                        } catch (err) {
-                            console.log("❌ Cannot subscribe:", char.uuid);
+                            char.addEventListener('characteristicvaluechanged',
+                                (ev) => handleCharData(ev, char.uuid, svc.uuid));
+                            log(`  ✅ Subscribed: ${char.uuid}`);
+                            subscribed++;
+                        } catch (e) {
+                            log(`  ❌ Subscribe failed: ${e.message}`);
                         }
                     }
                 }
             }
 
-            statusText.innerText = "Đã kết nối! Đang chờ BPM...";
-            btnConnect.innerText = "✓ BLE Connected";
+            btnConnect.textContent = '✓ BLE Connected';
+            btnConnect.disabled    = true;
 
-        } catch (error) {
-            console.error(error);
-            statusText.innerText = "Lỗi BLE!";
-            statusText.style.color = "#ff4d4d";
+            if (subscribed === 0) {
+                setStatus('Kết nối OK nhưng không có characteristic nào để subscribe. Thử tab Nhập thủ công.', 'err');
+            } else {
+                setStatus(`Đã subscribe ${subscribed} characteristic(s), đang chờ BPM…`, 'ok');
+            }
+
+        } catch (err) {
+            log(`Lỗi: ${err.message}`);
+            setStatus('Lỗi BLE: ' + err.message, 'err');
         }
     });
 
-    // ================================
-    // GENERATE MUSIC (GIỮ NGUYÊN LOGIC)
-    // ================================
+    // ===============================
+    // GENERATE MUSIC
+    // ===============================
     btnGenerate.addEventListener('click', async () => {
         if (currentBpm === 0) {
-            alert("Chưa có BPM!");
+            alert('Chưa có BPM! Kết nối đồng hồ hoặc nhập thủ công.');
             return;
         }
 
-        // stop audio cũ
         if (currentAudio) {
             currentAudio.pause();
             currentAudio.currentTime = 0;
-            bpmDisplay.style.animation = "none";
+            bpmDisplay.style.animation = 'none';
         }
 
-        statusText.innerText = `Đang gửi ${currentBpm} BPM cho AI...`;
-        btnGenerate.innerText = "AI đang sáng tác...";
-        btnGenerate.disabled = true;
-        btnStop.disabled = true;
+        setStatus(`Đang gửi ${currentBpm} BPM cho AI…`, 'info');
+        btnGenerate.textContent  = 'AI đang sáng tác…';
+        btnGenerate.disabled     = true;
+        btnStop.disabled         = true;
 
         try {
-            const response = await fetch('/generate-vibe', {
-                method: 'POST',
+            const res  = await fetch('/generate-vibe', {
+                method:  'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ bpm: currentBpm })
+                body:    JSON.stringify({ bpm: currentBpm })
             });
+            const data = await res.json();
 
-            const data = await response.json();
-
-            if (data.status === "success") {
+            if (data.status === 'success') {
                 currentAudio = new Audio(data.audio_url);
                 currentAudio.play();
-
-                bpmDisplay.style.animation = "pulse 1s infinite";
-
-                statusText.innerText = "🎵 Đang phát nhạc...";
+                bpmDisplay.style.animation = 'pulse 1s infinite';
+                setStatus('🎵 Đang phát nhạc…', 'ok');
                 btnStop.disabled = false;
 
                 currentAudio.onended = () => {
-                    bpmDisplay.style.animation = "none";
+                    bpmDisplay.style.animation = 'none';
                     btnStop.disabled = true;
-                    statusText.innerText = "Nhạc đã kết thúc.";
+                    setStatus('Nhạc đã kết thúc.', 'info');
                 };
-
             } else {
-                statusText.innerText = "Lỗi AI!";
+                setStatus('Lỗi AI: ' + (data.message || 'unknown'), 'err');
             }
-
-        } catch (error) {
-            console.error(error);
-            statusText.innerText = "Mất kết nối server!";
+        } catch (err) {
+            log('Generate error: ' + err.message);
+            setStatus('Mất kết nối server!', 'err');
         } finally {
-            btnGenerate.innerText = "2. Sinh nhạc AI";
-            btnGenerate.disabled = false;
+            btnGenerate.textContent = '2. Sinh nhạc AI';
+            btnGenerate.disabled    = false;
         }
     });
 
-    // ================================
+    // ===============================
     // STOP MUSIC
-    // ================================
+    // ===============================
     btnStop.addEventListener('click', () => {
         if (currentAudio) {
             currentAudio.pause();
-            currentAudio.currentTime = 0;
-
-            bpmDisplay.style.animation = "none";
-            statusText.innerText = "Đã dừng nhạc.";
-            btnStop.disabled = true;
+            currentAudio.currentTime   = 0;
+            bpmDisplay.style.animation = 'none';
+            btnStop.disabled           = true;
+            setStatus('Đã dừng nhạc.', 'info');
         }
     });
 </script>