Update app.py

app.py

@@ -1,14 +1,3 @@
-# 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()
-
-# demo = build_ui()
-
-# if __name__ == "__main__":
-#     demo.launch()
 import gradio as gr
 import os, uuid, librosa, threading, time, tempfile, wave, io, csv
 import numpy as np
@@ -169,19 +158,19 @@ CSS = """
 *, *::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;
+    --bg:        #f4f6fb;
+    --surface:   #ffffff;
+    --surface2:  #eef1f8;
+    --border:    #dde2ef;
+    --border2:   #c8d0e4;
+    --accent:    #3b7ef4;
+    --accent2:   #1a5fe0;
+    --success:   #16a34a;
+    --danger:    #dc2626;
+    --warn:      #d97706;
+    --text:      #1a2236;
+    --text2:     #4a5778;
+    --text3:     #8a96b0;
     --mono:      'DM Mono', monospace;
 }
 
@@ -206,6 +195,11 @@ body, .gradio-container {
     display: flex;
     align-items: center;
     gap: 16px;
+    background: linear-gradient(135deg, #eef3ff 0%, #f4f6fb 100%);
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 24px;
+    border: 1px solid var(--border);
 }
 
 .lumi-icon-wrap {
@@ -222,7 +216,7 @@ body, .gradio-container {
 .lumi-icon-wrap::before {
     content: '';
     position: absolute; inset: 0;
-    background: radial-gradient(circle at 30% 30%, rgba(79,142,247,0.15), transparent 70%);
+    background: radial-gradient(circle at 30% 30%, rgba(59,126,244,0.12), transparent 70%);
 }
 
 .lumi-header-text h1 {
@@ -311,16 +305,16 @@ body, .gradio-container {
     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);
+    background: rgba(59,126,244,0.08);
+    border: 1px solid rgba(59,126,244,0.2);
     border-radius: 4px;
     padding: 1px 5px;
     flex-shrink: 0;
 }
 .lumi-keyword {
-    color: var(--text);
+    color: var(--accent2);
     font-weight: 600;
-    background: rgba(255,255,255,0.05);
+    background: rgba(59,126,244,0.08);
     border-radius: 4px;
     padding: 0 4px;
 }
@@ -363,12 +357,12 @@ body, .gradio-container {
     transition: all 0.3s ease;
 }
 #lumi-mic-btn:hover {
-    background: #182030;
+    background: #e8effc;
     border-color: var(--accent);
     transform: scale(1.04);
 }
 #lumi-mic-btn:hover::after {
-    border-color: rgba(79,142,247,0.3);
+    border-color: rgba(59,126,244,0.25);
     inset: -5px;
 }
 #lumi-mic-btn.recording {
@@ -506,7 +500,7 @@ button.lb-check {
     border: 1px solid var(--border2) !important;
 }
 button.lb-check:hover:not(:disabled) {
-    background: #1a2338 !important;
+    background: #dce8ff !important;
     border-color: var(--accent) !important;
     color: var(--accent2) !important;
 }
@@ -529,9 +523,9 @@ button.lb-send {
     letter-spacing: -0.1px !important;
 }
 button.lb-send:hover:not(:disabled) {
-    background: #6aa0f8 !important;
+    background: var(--accent2) !important;
     transform: translateY(-1px) !important;
-    box-shadow: 0 4px 16px rgba(79,142,247,0.35) !important;
+    box-shadow: 0 4px 16px rgba(59,126,244,0.3) !important;
 }
 button.lb-send:disabled {
     background: var(--surface2) !important;
@@ -687,7 +681,7 @@ RECORDER_HTML = """
         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(0, `rgba(59,126,244,${0.06 * intensity})`);
             grd.addColorStop(1, 'transparent');
             ctx2d.fillStyle = grd;
             ctx2d.fillRect(0, 0, W, H);
@@ -695,17 +689,17 @@ RECORDER_HTML = """
 
         /* 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)');
+        grad.addColorStop(0,    'rgba(59,126,244,0)');
+        grad.addColorStop(0.15, `rgba(59,126,244,${0.5 + intensity * 0.5})`);
+        grad.addColorStop(0.5,  `rgba(26,95,224,${0.7 + intensity * 0.3})`);
+        grad.addColorStop(0.85, `rgba(59,126,244,${0.5 + intensity * 0.5})`);
+        grad.addColorStop(1,    'rgba(59,126,244,0)');
 
         ctx2d.beginPath();
-        ctx2d.lineWidth   = 1.5;
+        ctx2d.lineWidth   = 2;
         ctx2d.strokeStyle = grad;
-        ctx2d.shadowColor = '#4f8ef7';
-        ctx2d.shadowBlur  = 6 * intensity;
+        ctx2d.shadowColor = '#3b7ef4';
+        ctx2d.shadowBlur  = 4 * intensity;
 
         const sw = W / buf;
         for (let i = 0; i < buf; i++) {
@@ -721,7 +715,7 @@ RECORDER_HTML = """
         ctx2d.beginPath();
         ctx2d.moveTo(0, canvas.height/2);
         ctx2d.lineTo(canvas.width, canvas.height/2);
-        ctx2d.strokeStyle = 'rgba(29,37,53,0.8)';
+        ctx2d.strokeStyle = 'rgba(180,192,220,0.6)';
         ctx2d.lineWidth   = 1;
         ctx2d.stroke();
     }
@@ -829,4 +823,825 @@ with gr.Blocks(theme=gr.themes.Base(), css=CSS, title="Lumi Voice Collector") as
     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()
+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()