Update app.py

app.py

@@ -1,11 +1,832 @@
-from core.model_loader import start_loading
-from ui.layout import build_ui
+# from core.model_loader import start_loading
+# from ui.layout import build_ui
 
-# Kick off model loading ngay khi app start
-# hoàn toàn non-blocking, chạy trong background thread
-start_loading()
+# # Kick off model loading ngay khi app start
+# # hoàn toàn non-blocking, chạy trong background thread
+# start_loading()
 
-demo = build_ui()
+# demo = build_ui()
 
-if __name__ == "__main__":
-    demo.launch()
+# if __name__ == "__main__":
+#     demo.launch()
+import gradio as gr
+import os, uuid, librosa, threading, time, tempfile, wave, io, csv
+import numpy as np
+from huggingface_hub import HfApi, CommitOperationAdd
+from openwakeword.model import Model
+
+# --- CẤU HÌNH ---
+DATASET_ID = "lumiwakeword/lumioiv1"
+HF_TOKEN = os.getenv("HF_TOKEN")
+MODEL_PATH = "loo_mee_oy_v2.onnx"
+
+api = HfApi()
+
+# --- KHỞI TẠO MODEL ---
+oww_model = None
+model_ready = threading.Event()
+
+def load_model():
+    global oww_model
+    try:
+        t_start = time.perf_counter()
+        dummy_wav = np.zeros(16000, dtype=np.float32)
+        with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as f:
+            tmp_path = f.name
+        with wave.open(tmp_path, "w") as wf:
+            wf.setnchannels(1); wf.setsampwidth(2); wf.setframerate(16000)
+            wf.writeframes((dummy_wav * 32767).astype(np.int16).tobytes())
+        librosa.load(tmp_path, sr=16000)
+        os.unlink(tmp_path)
+        print(f"  librosa warm-up: {(time.perf_counter()-t_start)*1000:.0f}ms")
+
+        t2 = time.perf_counter()
+        m = Model(wakeword_model_paths=[MODEL_PATH])
+        print(f"  Model load: {(time.perf_counter()-t2)*1000:.0f}ms")
+
+        stable_count = 0
+        for i in range(80):
+            t_iter = time.perf_counter()
+            m.predict(np.zeros(1280, dtype=np.int16))
+            elapsed_ms = (time.perf_counter() - t_iter) * 1000
+            if i < 3: continue
+            if elapsed_ms < 5.0:
+                stable_count += 1
+                if stable_count >= 5:
+                    print(f"  ONNX JIT stable sau {i+1} iters ({elapsed_ms:.1f}ms/iter)")
+                    break
+            else:
+                stable_count = 0
+
+        oww_model = m
+        print(f"✅ Fully ready — tổng boot: {(time.perf_counter()-t_start):.1f}s")
+    except Exception as e:
+        print(f"❌ Model Error: {e}")
+    finally:
+        model_ready.set()
+
+threading.Thread(target=load_model, daemon=True).start()
+
+
+# --- PYTHON LOGIC ---
+def verify_audio(audio_path):
+    if not model_ready.wait(timeout=30):
+        return "⏳ Model đang khởi động, thử lại sau vài giây...", gr.update(interactive=False), 0.0
+    if not audio_path:
+        return "⚠️ Hãy ghi âm trước khi kiểm tra!", gr.update(interactive=False), 0.0
+    if oww_model is None:
+        return "❌ Model lỗi, vui lòng reload trang.", gr.update(interactive=False), 0.0
+    try:
+        y, sr = librosa.load(audio_path, sr=16000)
+        audio_int16 = (y * 32767).astype(np.int16)
+        oww_model.reset()
+        max_score = 0.0
+        chunk_size = 1280
+        for i in range(0, len(audio_int16), chunk_size):
+            chunk = audio_int16[i: i + chunk_size]
+            if len(chunk) < chunk_size:
+                chunk = np.pad(chunk, (0, chunk_size - len(chunk)))
+            prediction = oww_model.predict(chunk)
+            score_val = list(prediction.values())[0]
+            current_score = float(score_val[0]) if isinstance(score_val, (np.ndarray, list)) else float(score_val)
+            if current_score > max_score:
+                max_score = current_score
+        for _ in range(7):
+            oww_model.predict(np.zeros(1280, dtype=np.int16))
+        if max_score >= 0.8:
+            return f"✅ Hợp lệ! Điểm: {max_score:.2f} — Nhấn GỬI để lưu mẫu", gr.update(interactive=True), max_score
+        else:
+            return f"❌ Chưa đạt (Điểm: {max_score:.2f}). Hãy nói rõ hơn và thử lại!", gr.update(interactive=False), max_score
+    except Exception as e:
+        return f"❌ Lỗi xử lý: {str(e)}", gr.update(interactive=False), 0.0
+
+
+def upload_final(audio_path, score):
+    if not audio_path:
+        return "❌ Không có file để gửi.", gr.update(interactive=False), None
+    try:
+        filename = f"lumi_{score:.2f}_{uuid.uuid4().hex[:4]}.wav"
+        audio_repo_path = f"audios/{filename}"
+
+        try:
+            existing = api.hf_hub_download(
+                repo_id=DATASET_ID,
+                filename="metadata.csv",
+                repo_type="dataset",
+                token=HF_TOKEN
+            )
+            with open(existing, "r", encoding="utf-8") as f:
+                rows = list(csv.reader(f))
+        except Exception:
+            rows = [["file_name"]]
+
+        rows.append([audio_repo_path])
+
+        buf = io.StringIO()
+        csv.writer(buf).writerows(rows)
+        csv_bytes = buf.getvalue().encode("utf-8")
+
+        operations = [
+            CommitOperationAdd(
+                path_in_repo=audio_repo_path,
+                path_or_fileobj=audio_path,
+            ),
+            CommitOperationAdd(
+                path_in_repo="metadata.csv",
+                path_or_fileobj=io.BytesIO(csv_bytes),
+            ),
+        ]
+
+        api.create_commit(
+            repo_id=DATASET_ID,
+            repo_type="dataset",
+            operations=operations,
+            commit_message=f"add {filename}",
+            token=HF_TOKEN,
+        )
+
+        return "🎉 Gửi thành công! Bạn có thể thu mẫu tiếp theo.", gr.update(interactive=False), None
+
+    except Exception as e:
+        return f"❌ Lỗi gửi: {e}", gr.update(interactive=True), audio_path
+
+
+def reset_ui():
+    return (
+        None,
+        'Sẵn sàng — Nhấn mic và đọc "Lumi ơi"',
+        gr.update(interactive=False),
+        0.0
+    )
+
+
+# ============================================================
+# CSS — Premium dark aesthetic, editorial feel
+# ============================================================
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+    --bg:        #080b10;
+    --surface:   #0e1219;
+    --surface2:  #141920;
+    --border:    #1d2535;
+    --border2:   #252f42;
+    --accent:    #4f8ef7;
+    --accent2:   #7eb8ff;
+    --success:   #34d399;
+    --danger:    #f87171;
+    --warn:      #fbbf24;
+    --text:      #e8edf5;
+    --text2:     #8896b0;
+    --text3:     #4a566e;
+    --mono:      'DM Mono', monospace;
+}
+
+body, .gradio-container {
+    background: var(--bg) !important;
+    font-family: 'DM Sans', sans-serif !important;
+    min-height: 100vh;
+    color: var(--text) !important;
+}
+
+.gradio-container {
+    max-width: 520px !important;
+    margin: 0 auto !important;
+    padding: 40px 20px 80px !important;
+}
+
+/* ── HEADER ── */
+.lumi-header {
+    margin-bottom: 36px;
+    padding-bottom: 28px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.lumi-icon-wrap {
+    width: 48px; height: 48px;
+    background: var(--surface2);
+    border: 1px solid var(--border2);
+    border-radius: 14px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 22px;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+}
+.lumi-icon-wrap::before {
+    content: '';
+    position: absolute; inset: 0;
+    background: radial-gradient(circle at 30% 30%, rgba(79,142,247,0.15), transparent 70%);
+}
+
+.lumi-header-text h1 {
+    font-size: 17px;
+    font-weight: 600;
+    color: var(--text);
+    letter-spacing: -0.2px;
+    line-height: 1.3;
+}
+.lumi-header-text p {
+    font-size: 12.5px;
+    color: var(--text3);
+    margin-top: 3px;
+    font-weight: 400;
+}
+
+/* ── PROGRESS STEPS ── */
+.lumi-progress {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    margin-bottom: 28px;
+}
+.lumi-prog-step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+}
+.lumi-prog-dot {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text3);
+    font-family: var(--mono);
+    flex-shrink: 0;
+}
+.lumi-prog-info { flex: 1; }
+.lumi-prog-title { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: 0.3px; }
+.lumi-prog-line { height: 1px; background: var(--border); width: 24px; flex-shrink: 0; margin: 0 4px; }
+
+/* ── INSTRUCTION BOX ── */
+.lumi-guide {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 16px 18px;
+    margin-bottom: 20px;
+    display: flex;
+    gap: 14px;
+    align-items: flex-start;
+}
+.lumi-guide-icon {
+    font-size: 16px;
+    margin-top: 1px;
+    flex-shrink: 0;
+    opacity: 0.8;
+}
+.lumi-guide-body { flex: 1; }
+.lumi-guide-title {
+    font-size: 10.5px;
+    font-weight: 600;
+    color: var(--text3);
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    margin-bottom: 8px;
+}
+.lumi-guide-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.lumi-guide-step {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--text2);
+    line-height: 1.5;
+}
+.lumi-guide-num {
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--accent);
+    background: rgba(79,142,247,0.1);
+    border: 1px solid rgba(79,142,247,0.2);
+    border-radius: 4px;
+    padding: 1px 5px;
+    flex-shrink: 0;
+}
+.lumi-keyword {
+    color: var(--text);
+    font-weight: 600;
+    background: rgba(255,255,255,0.05);
+    border-radius: 4px;
+    padding: 0 4px;
+}
+
+/* ── RECORDER CARD ── */
+.lumi-recorder-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 14px;
+}
+
+#lumi-recorder-ui {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 18px;
+}
+
+/* Mic button */
+#lumi-mic-btn {
+    width: 72px; height: 72px;
+    border-radius: 50%;
+    background: var(--surface2);
+    border: 1px solid var(--border2);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 26px;
+    outline: none;
+    transition: all 0.2s cubic-bezier(.4,0,.2,1);
+    position: relative;
+}
+#lumi-mic-btn::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+}
+#lumi-mic-btn:hover {
+    background: #182030;
+    border-color: var(--accent);
+    transform: scale(1.04);
+}
+#lumi-mic-btn:hover::after {
+    border-color: rgba(79,142,247,0.3);
+    inset: -5px;
+}
+#lumi-mic-btn.recording {
+    background: rgba(248,113,113,0.1);
+    border-color: var(--danger);
+    animation: rec-pulse 1.8s ease infinite;
+}
+@keyframes rec-pulse {
+    0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.3); }
+    50%      { box-shadow: 0 0 0 14px rgba(248,113,113,0); }
+}
+
+/* Rec label */
+#lumi-rec-label {
+    font-size: 12px;
+    color: var(--text3);
+    font-weight: 500;
+    letter-spacing: 0.2px;
+    text-align: center;
+}
+#lumi-rec-label.recording {
+    color: var(--danger);
+}
+
+/* Canvas */
+#lumi-canvas {
+    width: 100%;
+    height: 60px;
+    border-radius: 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    display: block;
+}
+
+/* Processing bar */
+#lumi-proc-bar {
+    display: none;
+    width: 100%;
+}
+#lumi-proc-bar .p-label {
+    font-size: 11px;
+    font-family: var(--mono);
+    color: var(--text3);
+    margin-bottom: 6px;
+    display: flex; align-items: center; gap: 6px;
+}
+#lumi-proc-bar .p-dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    animation: blink 1s ease infinite;
+}
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
+#lumi-proc-bar .p-track {
+    height: 2px;
+    background: var(--border);
+    border-radius: 99px;
+    overflow: hidden;
+}
+#lumi-proc-bar .p-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: 99px;
+    animation: slide 1.4s ease-in-out infinite;
+}
+@keyframes slide {
+    0%   { width:0%;   margin-left:0%; }
+    50%  { width:50%;  margin-left:25%; }
+    100% { width:0%;   margin-left:100%; }
+}
+
+/* Playback */
+#lumi-audio-playback {
+    width: 100%;
+    display: none;
+    flex-direction: column;
+    gap: 6px;
+}
+#lumi-audio-playback .play-label {
+    font-size: 11px;
+    font-family: var(--mono);
+    color: var(--text3);
+    letter-spacing: 0.3px;
+}
+#lumi-audio-playback audio {
+    width: 100%;
+    height: 32px;
+    border-radius: 6px;
+    outline: none;
+    accent-color: var(--accent);
+}
+
+/* ── STATUS ── */
+.lumi-status {
+    background: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 10px !important;
+    padding: 12px 16px !important;
+    color: var(--text2) !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    min-height: 46px !important;
+    font-family: var(--mono) !important;
+}
+.lumi-status .output-class {
+    font-size: 13px !important;
+    color: var(--text2) !important;
+    font-family: var(--mono) !important;
+}
+
+/* ── BUTTONS ── */
+.lumi-btn-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+button.lb-check, button.lb-reset, button.lb-send {
+    border-radius: 8px !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-weight: 500 !important;
+    font-size: 13px !important;
+    padding: 11px 16px !important;
+    border: none !important;
+    cursor: pointer !important;
+    transition: all 0.18s ease !important;
+    width: 100% !important;
+    letter-spacing: 0.1px !important;
+}
+
+button.lb-check {
+    background: var(--surface2) !important;
+    color: var(--text2) !important;
+    border: 1px solid var(--border2) !important;
+}
+button.lb-check:hover:not(:disabled) {
+    background: #1a2338 !important;
+    border-color: var(--accent) !important;
+    color: var(--accent2) !important;
+}
+
+button.lb-reset {
+    background: transparent !important;
+    color: var(--text3) !important;
+    border: 1px solid var(--border) !important;
+}
+button.lb-reset:hover:not(:disabled) {
+    color: var(--text2) !important;
+    border-color: var(--border2) !important;
+    background: var(--surface2) !important;
+}
+
+button.lb-send {
+    background: var(--accent) !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.1px !important;
+}
+button.lb-send:hover:not(:disabled) {
+    background: #6aa0f8 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 16px rgba(79,142,247,0.35) !important;
+}
+button.lb-send:disabled {
+    background: var(--surface2) !important;
+    color: var(--text3) !important;
+    box-shadow: none !important;
+    cursor: not-allowed !important;
+}
+
+/* ── HIDDEN AUDIO WRAP ── */
+.hidden-audio-wrap {
+    position: absolute;
+    width: 1px; height: 1px;
+    overflow: hidden; opacity: 0;
+    pointer-events: none;
+}
+
+/* ── DIVIDER ── */
+.lumi-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 20px 0;
+}
+
+footer { display: none !important; }
+.contain { background: transparent !important; }
+"""
+
+
+# ============================================================
+# RECORDER HTML
+# ============================================================
+RECORDER_HTML = """
+<div id="lumi-recorder-ui">
+    <button id="lumi-mic-btn" title="Nhấn để ghi âm">🎙</button>
+    <div id="lumi-rec-label">Nhấn để bắt đầu ghi âm</div>
+    <canvas id="lumi-canvas" width="520" height="60"></canvas>
+    <div id="lumi-proc-bar">
+        <div class="p-label"><span class="p-dot"></span>Đang xử lý...</div>
+        <div class="p-track"><div class="p-fill"></div></div>
+    </div>
+    <div id="lumi-audio-playback">
+        <div class="play-label">// PLAYBACK</div>
+        <audio id="lumi-audio-el" controls></audio>
+    </div>
+</div>
+
+<script>
+(function () {
+    const micBtn   = document.getElementById('lumi-mic-btn');
+    const recLabel = document.getElementById('lumi-rec-label');
+    const canvas   = document.getElementById('lumi-canvas');
+    const ctx2d    = canvas.getContext('2d');
+    const procBar  = document.getElementById('lumi-proc-bar');
+    const playWrap = document.getElementById('lumi-audio-playback');
+    const audioEl  = document.getElementById('lumi-audio-el');
+
+    let isRecording = false, mediaRecorder = null, audioChunks = [];
+    let audioCtx = null, analyser = null, micStream = null, animId = null;
+
+    micBtn.addEventListener('click', () => isRecording ? stopRecording() : startRecording());
+
+    async function startRecording() {
+        try {
+            micStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+        } catch (e) {
+            recLabel.textContent = '✕ Không có quyền truy cập micro';
+            return;
+        }
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 256;
+        audioCtx.createMediaStreamSource(micStream).connect(analyser);
+
+        audioChunks = [];
+        const mime = ['audio/webm;codecs=opus','audio/webm','audio/ogg']
+            .find(t => MediaRecorder.isTypeSupported(t)) || '';
+        mediaRecorder = new MediaRecorder(micStream, mime ? { mimeType: mime } : {});
+        mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
+        mediaRecorder.onstop = onDone;
+        mediaRecorder.start(100);
+
+        isRecording = true;
+        micBtn.classList.add('recording');
+        micBtn.textContent = '⏹';
+        recLabel.textContent = '● Đang ghi — nhấn để dừng';
+        recLabel.classList.add('recording');
+        playWrap.style.display = 'none';
+        procBar.style.display  = 'none';
+        drawWave();
+    }
+
+    function stopRecording() {
+        mediaRecorder && mediaRecorder.state !== 'inactive' && mediaRecorder.stop();
+        micStream && micStream.getTracks().forEach(t => t.stop());
+        audioCtx && audioCtx.close();
+        animId && cancelAnimationFrame(animId);
+        micStream = audioCtx = analyser = null;
+
+        isRecording = false;
+        micBtn.classList.remove('recording');
+        micBtn.textContent = '🎙';
+        recLabel.textContent = 'Nhấn để ghi lại';
+        recLabel.classList.remove('recording');
+        procBar.style.display = 'block';
+        drawFlatLine();
+    }
+
+    function onDone() {
+        const mime = audioChunks[0]?.type || 'audio/webm';
+        const blob = new Blob(audioChunks, { type: mime });
+        const url  = URL.createObjectURL(blob);
+        audioEl.src = url;
+        audioEl.oncanplay = () => {
+            procBar.style.display  = 'none';
+            playWrap.style.display = 'flex';
+        };
+        injectFile(blob, mime);
+    }
+
+    function injectFile(blob, mime) {
+        const ext  = mime.includes('ogg') ? 'ogg' : 'webm';
+        const file = new File([blob], 'recording.' + ext, { type: mime });
+        function attempt(tries) {
+            const inp = document.querySelector('.hidden-audio-wrap input[type="file"]');
+            if (inp) {
+                const dt = new DataTransfer();
+                dt.items.add(file);
+                inp.files = dt.files;
+                inp.dispatchEvent(new Event('change', { bubbles: true }));
+            } else if (tries > 0) {
+                setTimeout(() => attempt(tries - 1), 300);
+            }
+        }
+        attempt(10);
+    }
+
+    /* ── WAVEFORM ── */
+    function drawWave() {
+        if (!analyser) return;
+        animId = requestAnimationFrame(drawWave);
+
+        const buf  = analyser.frequencyBinCount;
+        const data = new Uint8Array(buf);
+        analyser.getByteTimeDomainData(data);
+
+        const W = canvas.width, H = canvas.height;
+        ctx2d.clearRect(0, 0, W, H);
+
+        const rms       = Math.sqrt(data.reduce((s,v) => s+(v-128)**2, 0) / buf);
+        const intensity = Math.min(rms / 28, 1);
+
+        /* subtle glow behind wave */
+        if (intensity > 0.05) {
+            const cx = W/2, cy = H/2;
+            const grd = ctx2d.createRadialGradient(cx, cy, 0, cx, cy, W/2);
+            grd.addColorStop(0, `rgba(79,142,247,${0.04 * intensity})`);
+            grd.addColorStop(1, 'transparent');
+            ctx2d.fillStyle = grd;
+            ctx2d.fillRect(0, 0, W, H);
+        }
+
+        /* waveform line */
+        const grad = ctx2d.createLinearGradient(0, 0, W, 0);
+        grad.addColorStop(0,   'rgba(79,142,247,0)');
+        grad.addColorStop(0.15, `rgba(79,142,247,${0.4 + intensity * 0.6})`);
+        grad.addColorStop(0.5,  `rgba(126,184,255,${0.6 + intensity * 0.4})`);
+        grad.addColorStop(0.85, `rgba(79,142,247,${0.4 + intensity * 0.6})`);
+        grad.addColorStop(1,   'rgba(79,142,247,0)');
+
+        ctx2d.beginPath();
+        ctx2d.lineWidth   = 1.5;
+        ctx2d.strokeStyle = grad;
+        ctx2d.shadowColor = '#4f8ef7';
+        ctx2d.shadowBlur  = 6 * intensity;
+
+        const sw = W / buf;
+        for (let i = 0; i < buf; i++) {
+            const y = ((data[i]/128)*H)/2;
+            i === 0 ? ctx2d.moveTo(0, y) : ctx2d.lineTo(i*sw, y);
+        }
+        ctx2d.stroke();
+        ctx2d.shadowBlur = 0;
+    }
+
+    function drawFlatLine() {
+        ctx2d.clearRect(0, 0, canvas.width, canvas.height);
+        ctx2d.beginPath();
+        ctx2d.moveTo(0, canvas.height/2);
+        ctx2d.lineTo(canvas.width, canvas.height/2);
+        ctx2d.strokeStyle = 'rgba(29,37,53,0.8)';
+        ctx2d.lineWidth   = 1;
+        ctx2d.stroke();
+    }
+
+    drawFlatLine();
+})();
+</script>
+"""
+
+
+# ============================================================
+# GRADIO BLOCKS
+# ============================================================
+with gr.Blocks(theme=gr.themes.Base(), css=CSS, title="Lumi Voice Collector") as demo:
+
+    gr.HTML("""
+    <div class="lumi-header">
+        <div class="lumi-icon-wrap">🎙</div>
+        <div class="lumi-header-text">
+            <h1>Lumi Wake Word Collector</h1>
+            <p>Thu thập giọng nói để huấn luyện trợ lý Lumi</p>
+        </div>
+    </div>
+    """)
+
+    gr.HTML("""
+    <div class="lumi-progress">
+        <div class="lumi-prog-step">
+            <div class="lumi-prog-dot">01</div>
+            <div class="lumi-prog-info">
+                <div class="lumi-prog-title">GHI ÂM</div>
+            </div>
+        </div>
+        <div class="lumi-prog-line"></div>
+        <div class="lumi-prog-step">
+            <div class="lumi-prog-dot">02</div>
+            <div class="lumi-prog-info">
+                <div class="lumi-prog-title">KIỂM TRA</div>
+            </div>
+        </div>
+        <div class="lumi-prog-line"></div>
+        <div class="lumi-prog-step">
+            <div class="lumi-prog-dot">03</div>
+            <div class="lumi-prog-info">
+                <div class="lumi-prog-title">GỬI LÊN</div>
+            </div>
+        </div>
+    </div>
+    """)
+
+    gr.HTML("""
+    <div class="lumi-guide">
+        <div class="lumi-guide-icon">📋</div>
+        <div class="lumi-guide-body">
+            <div class="lumi-guide-title">Hướng dẫn</div>
+            <div class="lumi-guide-steps">
+                <div class="lumi-guide-step">
+                    <span class="lumi-guide-num">01</span>
+                    Nhấn nút mic để bắt đầu ghi âm
+                </div>
+                <div class="lumi-guide-step">
+                    <span class="lumi-guide-num">02</span>
+                    Nói rõ <span class="lumi-keyword">Lumi ơi</span> vào micro
+                </div>
+                <div class="lumi-guide-step">
+                    <span class="lumi-guide-num">03</span>
+                    Nhấn lại để dừng — đợi xử lý xong
+                </div>
+                <div class="lumi-guide-step">
+                    <span class="lumi-guide-num">04</span>
+                    Kiểm tra → đạt ≥ 0.8 → Gửi lên
+                </div>
+            </div>
+        </div>
+    </div>
+    """)
+
+    with gr.Group(elem_classes="lumi-recorder-card"):
+        gr.HTML(RECORDER_HTML)
+
+    with gr.Group(elem_classes="hidden-audio-wrap"):
+        audio_inst = gr.Audio(sources=["upload"], type="filepath", label="hidden", visible=False)
+
+    status_txt = gr.Label(
+        value='Sẵn sàng — Nhấn mic và đọc "Lumi ơi"',
+        elem_classes="lumi-status",
+        show_label=False
+    )
+
+    with gr.Row(elem_classes="lumi-btn-row"):
+        btn_check = gr.Button("Kiểm tra mẫu", variant="secondary", elem_classes="lb-check")
+        btn_reset = gr.Button("Ghi lại",       variant="stop",      elem_classes="lb-reset")
+
+    btn_send = gr.Button(
+        "Gửi lên hệ thống →",
+        variant="primary",
+        interactive=False,
+        elem_classes="lb-send"
+    )
+
+    score_state = gr.State(0.0)
+
+    btn_check.click(fn=verify_audio,  inputs=audio_inst, outputs=[status_txt, btn_send, score_state])
+    btn_send.click( fn=upload_final,  inputs=[audio_inst, score_state], outputs=[status_txt, btn_send, audio_inst])
+    btn_reset.click(fn=reset_ui,      outputs=[audio_inst, status_txt, btn_send, score_state])
+    audio_inst.change(lambda: gr.update(interactive=False), None, btn_send)
+
+demo.launch()