refactor music generation logic in index.html to improve BPM handling and enhance user feedback

index.html

@@ -88,130 +88,194 @@
         <div id="status">Chưa kết nối... Mở nRF Connect trên điện thoại để chuẩn bị!</div>
     </div>
 
-   <script>
-        let currentBpm = 0;
-        let detectedCharUUID = null;
-        let bpmHistory = [];
-
-        const bpmDisplay = document.getElementById('bpm-display');
-        const statusText = document.getElementById('status');
-        const btnConnect = document.getElementById('btn-connect');
-
-        // ================================
-        // HELPER: 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
-            );
+<script>
+    let currentBpm = 0;
+    let detectedCharUUID = null;
+    let bpmHistory = [];
+    let currentAudio = null;
+
+    // DOM
+    const bpmDisplay = document.getElementById('bpm-display');
+    const statusText = 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
+        );
+    }
+
+    // ================================
+    // AUTO DETECT DATA
+    // ================================
+    function handleAutoData(event, uuid) {
+        const value = event.target.value;
+
+        let raw = [];
+        for (let i = 0; i < value.byteLength; i++) {
+            raw.push(value.getUint8(i));
         }
 
-        // ================================
-        // HELPER: PARSE DATA
-        // ================================
-        function handleAutoData(event, uuid) {
-            const value = event.target.value;
+        console.log("📡 UUID:", uuid, "DATA:", raw);
 
-            let raw = [];
-            for (let i = 0; i < value.byteLength; i++) {
-                raw.push(value.getUint8(i));
-            }
-
-            console.log("📡 UUID:", uuid, "DATA:", raw);
-
-            // ===== AUTO DETECT BPM =====
-            for (let i = 0; i < raw.length; i++) {
-                let v = raw[i];
+        for (let i = 0; i < raw.length; i++) {
+            let v = raw[i];
 
-                // heuristic: BPM range
-                if (v >= 40 && v <= 180) {
+            if (v >= 40 && v <= 180) {
 
-                    let newBpm = smoothBpm(v);
+                let newBpm = smoothBpm(v);
 
-                    // filter noise (tránh nhảy lung tung)
-                    if (currentBpm !== 0 && Math.abs(newBpm - currentBpm) > 40) {
-                        continue;
-                    }
-
-                    currentBpm = newBpm;
+                if (currentBpm !== 0 && Math.abs(newBpm - currentBpm) > 40) {
+                    continue;
+                }
 
-                    bpmDisplay.innerText = `${currentBpm} BPM`;
-                    bpmDisplay.style.color = "#e94560";
+                currentBpm = newBpm;
 
-                    statusText.innerText = `Đã detect BPM từ UUID: ${uuid}`;
-                    statusText.style.color = "#4ecca3";
+                bpmDisplay.innerText = `${currentBpm} BPM`;
+                bpmDisplay.style.color = "#e94560";
 
-                    detectedCharUUID = uuid;
+                statusText.innerText = `Đã detect BPM (${uuid})`;
+                statusText.style.color = "#4ecca3";
 
-                    break;
-                }
+                detectedCharUUID = uuid;
+                break;
             }
         }
+    }
+
+    // ================================
+    // AUTO SCAN BLE
+    // ================================
+    btnConnect.addEventListener('click', async () => {
+        try {
+            statusText.innerText = "Đang scan BLE...";
+
+            const device = await navigator.bluetooth.requestDevice({
+                acceptAllDevices: true,
+                optionalServices: [
+                    'battery_service',
+                    'device_information',
+                    'heart_rate'
+                ]
+            });
+
+            const server = await device.gatt.connect();
+            const services = await server.getPrimaryServices();
+
+            for (const service of services) {
+                console.log("🔵 Service:", service.uuid);
+
+                const characteristics = await service.getCharacteristics();
+
+                for (const char of characteristics) {
+                    console.log("⚪ Char:", char.uuid, char.properties);
+
+                    if (char.properties.notify || char.properties.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);
+                        }
+                    }
+                }
+            }
 
-        // ================================
-        // MAIN: AUTO SCAN BLE
-        // ================================
-        btnConnect.addEventListener('click', async () => {
-            try {
-                statusText.innerText = "Đang mở BLE scanner (auto)...";
-
-                const device = await navigator.bluetooth.requestDevice({
-                    acceptAllDevices: true,
-                    optionalServices: [
-                        'battery_service',
-                        'device_information',
-                        'heart_rate'
-                    ]
-                });
-
-                statusText.innerText = `Đã chọn: ${device.name || "Unknown"} → đang connect...`;
-
-                const server = await device.gatt.connect();
+            statusText.innerText = "Đã kết nối! Đang chờ BPM...";
+            btnConnect.innerText = "✓ BLE Connected";
 
-                const services = await server.getPrimaryServices();
+        } catch (error) {
+            console.error(error);
+            statusText.innerText = "Lỗi BLE!";
+            statusText.style.color = "#ff4d4d";
+        }
+    });
+
+    // ================================
+    // GENERATE MUSIC (GIỮ NGUYÊN LOGIC)
+    // ================================
+    btnGenerate.addEventListener('click', async () => {
+        if (currentBpm === 0) {
+            alert("Chưa có BPM!");
+            return;
+        }
 
-                statusText.innerText = "Đang scan toàn bộ services... (check console)";
+        // stop audio cũ
+        if (currentAudio) {
+            currentAudio.pause();
+            currentAudio.currentTime = 0;
+            bpmDisplay.style.animation = "none";
+        }
 
-                for (const service of services) {
-                    console.log("🔵 Service:", service.uuid);
+        statusText.innerText = `Đang gửi ${currentBpm} BPM cho AI...`;
+        btnGenerate.innerText = "AI đang sáng tác...";
+        btnGenerate.disabled = true;
+        btnStop.disabled = true;
 
-                    const characteristics = await service.getCharacteristics();
+        try {
+            const response = await fetch('/generate-vibe', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ bpm: currentBpm })
+            });
 
-                    for (const char of characteristics) {
-                        console.log("   ⚪ Char:", char.uuid, char.properties);
+            const data = await response.json();
 
-                        // chỉ lấy char có notify / indicate
-                        if (char.properties.notify || char.properties.indicate) {
-                            try {
-                                await char.startNotifications();
+            if (data.status === "success") {
+                currentAudio = new Audio(data.audio_url);
+                currentAudio.play();
 
-                                char.addEventListener(
-                                    'characteristicvaluechanged',
-                                    (event) => handleAutoData(event, char.uuid)
-                                );
+                bpmDisplay.style.animation = "pulse 1s infinite";
 
-                                console.log("   ✅ Subscribed:", char.uuid);
-                            } catch (err) {
-                                console.log("   ❌ Cannot subscribe:", char.uuid);
-                            }
-                        }
-                    }
-                }
+                statusText.innerText = "🎵 Đang phát nhạc...";
+                btnStop.disabled = false;
 
-                statusText.innerText = "Đã subscribe toàn bộ notify characteristics. Đang chờ BPM...";
-                btnConnect.innerText = "✓ BLE Connected (Auto Mode)";
-                btnConnect.style.backgroundColor = "#4ecca3";
-                btnConnect.style.color = "#1a1a2e";
+                currentAudio.onended = () => {
+                    bpmDisplay.style.animation = "none";
+                    btnStop.disabled = true;
+                    statusText.innerText = "Nhạc đã kết thúc.";
+                };
 
-            } catch (error) {
-                console.error("❌ BLE ERROR:", error);
-                statusText.innerText = "Lỗi BLE hoặc user cancel!";
-                statusText.style.color = "#ff4d4d";
+            } else {
+                statusText.innerText = "Lỗi AI!";
             }
-        });
+
+        } catch (error) {
+            console.error(error);
+            statusText.innerText = "Mất kết nối server!";
+        } finally {
+            btnGenerate.innerText = "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;
+        }
+    });
 </script>
 </body>
 </html>