| <!DOCTYPE html>
|
| <html lang="vi">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Bio-Vibe Web</title>
|
| <link rel="icon" href="data:,">
|
| <style>
|
| body {
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| background-color: #1a1a2e;
|
| color: #e94560;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| height: 100vh;
|
| margin: 0;
|
| }
|
| .container {
|
| background-color: #16213e;
|
| padding: 40px;
|
| border-radius: 15px;
|
| text-align: center;
|
| box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
| }
|
| h1 { color: #fff; margin-bottom: 5px; }
|
| p { color: #a2a2bd; margin-bottom: 30px; }
|
|
|
| #bpm-display {
|
| font-size: 80px;
|
| font-weight: bold;
|
| margin: 20px 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; }
|
| }
|
|
|
| .button-group {
|
| display: flex;
|
| justify-content: center;
|
| flex-wrap: wrap;
|
| gap: 15px;
|
| max-width: 600px;
|
| }
|
|
|
| button {
|
| background-color: #0f3460;
|
| color: white;
|
| border: none;
|
| padding: 15px 25px;
|
| font-size: 16px;
|
| 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; }
|
|
|
|
|
| #btn-stop { background-color: #8b0000; }
|
| #btn-stop:hover { background-color: #ff4d4d; color: white; }
|
| #btn-stop:disabled { background-color: #333; }
|
|
|
| #status { margin-top: 20px; color: #4ecca3; font-style: italic; font-size: 14px;}
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <div class="container">
|
| <h1>Bio-Vibe 🎧</h1>
|
| <p>Âm nhạc trị liệu AI theo Nhịp tim</p>
|
|
|
| <div id="bpm-display">-- BPM</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>
|
| </div>
|
|
|
| <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 currentAudio = null;
|
|
|
| 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');
|
|
|
|
|
|
|
|
|
| btnConnect.addEventListener('click', async () => {
|
| try {
|
| statusText.innerText = "Đang mở máy quét Bluetooth...";
|
| const device = await navigator.bluetooth.requestDevice({
|
| acceptAllDevices: true,
|
| optionalServices: ['heart_rate']
|
| });
|
|
|
| statusText.innerText = `Đã chọn: ${device.name}. Đang kết nối...`;
|
| const server = await device.gatt.connect();
|
| const service = await server.getPrimaryService('heart_rate');
|
| const characteristic = await service.getCharacteristic('heart_rate_measurement');
|
|
|
| await characteristic.startNotifications();
|
| characteristic.addEventListener('characteristicvaluechanged', handleHeartRateData);
|
|
|
| statusText.innerText = "Kết nối thành công! Đang đợi nhịp tim truyền lên...";
|
| btnConnect.innerText = "✓ Đã kết nối Bluetooth";
|
| btnConnect.style.backgroundColor = "#4ecca3";
|
| btnConnect.style.color = "#1a1a2e";
|
| } catch (error) {
|
| console.error("Bluetooth Error:", error);
|
| statusText.innerText = "Hủy kết nối hoặc lỗi thiết bị!";
|
| statusText.style.color = "#ff4d4d";
|
| }
|
| });
|
|
|
| function handleHeartRateData(event) {
|
| const value = event.target.value;
|
| const flags = value.getUint8(0);
|
|
|
| if ((flags & 0x01) === 0) {
|
| currentBpm = value.getUint8(1);
|
| } else {
|
| currentBpm = value.getUint16(1, true);
|
| }
|
|
|
| bpmDisplay.innerText = `${currentBpm} BPM`;
|
| bpmDisplay.style.color = "#e94560";
|
| statusText.innerText = "Đang đọc nhịp tim thành công. Sẵn sàng tạo nhạc!";
|
| statusText.style.color = "#4ecca3";
|
| }
|
|
|
|
|
|
|
|
|
| btnGenerate.addEventListener('click', async () => {
|
| if (currentBpm === 0) {
|
| alert("Bạn chưa kết nối Bluetooth hoặc chưa gửi số nhịp tim từ nRF Connect!");
|
| return;
|
| }
|
|
|
|
|
| if (currentAudio) {
|
| currentAudio.pause();
|
| currentAudio.currentTime = 0;
|
| bpmDisplay.style.animation = "none";
|
| }
|
|
|
| statusText.innerText = `Đang gửi ${currentBpm} BPM cho bộ não AI xử lý...`;
|
| btnGenerate.innerText = "AI đang sáng tác...";
|
| btnGenerate.disabled = true;
|
| btnStop.disabled = true;
|
|
|
| try {
|
| const response = await fetch('/generate-vibe', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ bpm: currentBpm })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (data.status === "success") {
|
| statusText.innerText = "Sáng tác xong! Đang phát nhạc 🎵";
|
|
|
|
|
| currentAudio = new Audio(data.audio_url);
|
| currentAudio.play();
|
|
|
| bpmDisplay.style.animation = "pulse 1s infinite";
|
| btnStop.disabled = false;
|
|
|
|
|
| currentAudio.onended = () => {
|
| bpmDisplay.style.animation = "none";
|
| statusText.innerText = "Bản nhạc đã kết thúc. Sẵn sàng tạo trải nghiệm mới!";
|
| btnStop.disabled = true;
|
| };
|
| } else {
|
| statusText.innerText = `Lỗi từ Server: ${data.message}`;
|
| }
|
| } catch (error) {
|
| console.error("API Error:", error);
|
| statusText.innerText = "Mất kết nối với máy chủ AI!";
|
| } finally {
|
| btnGenerate.innerText = "2. Sinh nhạc AI";
|
| btnGenerate.disabled = false;
|
| }
|
| });
|
|
|
|
|
|
|
|
|
| btnStop.addEventListener('click', () => {
|
| if (currentAudio) {
|
| currentAudio.pause();
|
| currentAudio.currentTime = 0;
|
| bpmDisplay.style.animation = "none";
|
| statusText.innerText = "Đã dừng phát nhạc.";
|
| btnStop.disabled = true;
|
| }
|
| });
|
| </script>
|
| </body>
|
| </html> |
