Upload folder using huggingface_hub

README.md

@@ -6,14 +6,13 @@ sdk: gradio
 app_file: app.py
 pinned: false
 license: apache-2.0
-short_description: Teman ADHD-friendly untuk satu langkah kecil berikutnya.
+short_description: An ADHD-friendly space and gentle boost for your everyday.
 ---
 
 # NeuroBait
 
-NeuroBait adalah asisten task-initiation yang ramah ADHD. Tujuannya membantu user
-menemukan satu langkah kecil berikutnya tanpa rasa malu, tekanan streak, atau
-ceramah produktivitas.
+NeuroBait is an ADHD-friendly companion: a warm space and a gentle boost for your
+everyday, without shame, streak pressure, or a productivity lecture.
 
 Target URL:
 
@@ -48,6 +47,6 @@ as a Space secret.
 
 ## UI
 
-The interface is Indonesian-first and follows the research-informed NeuroBait
-design language: earthy palette, anti-shame copy, mood check-in, and a persona
-theme picker (usia / zaman / budaya) that adapts colors and feel client-side.
+The interface is English and follows the research-informed NeuroBait design
+language: earthy palette, anti-shame copy, mood check-in, and a persona theme
+picker (age / era / culture) that adapts colors and feel client-side.

app.py

@@ -3,7 +3,7 @@
 Runtime loads the dense Gemma 3 12B base in 4-bit with the NeuroBait LoRA adapter
 through the standard transformers + peft stack. This deliberately avoids Unsloth
 at runtime and the Gemma-4 MoE (`Gemma4ClippableLinear`) path that PEFT could not
-inject into on ZeroGPU.
+inject into on ZeroGPU. The look and feel live in ``ui.py``.
 """
 
 from __future__ import annotations
@@ -12,10 +12,11 @@ import os
 import re
 from threading import Lock
 
-import gradio as gr
 import spaces
 import torch
 
+from ui import build_demo, message_text
+
 
 BASE_MODEL = os.environ.get("BASE_MODEL", "unsloth/gemma-3-12b-it")
 ADAPTER_ID = os.environ.get("ADAPTER_ID", os.environ.get("MODEL_ID", "build-small-hackathon/NeuroBait"))
@@ -34,10 +35,10 @@ Kalau konteks user belum cukup untuk membuat resep yang personal, ajukan tepat s
 Framing selalu menempatkan user sebagai pelaku aktif dengan agency penuh. Bukan guilt, bukan hutang — selalu agency. Kalimat pendek. Bahasa hidup. Hangat dan padat. Tidak pernah menghakimi. Tidak pernah ceramah. Membuat hal membosankan jadi tak tertahankan."""
 
 MOOD_NOTES = {
-    "Tenang": "Catatan suasana: user sedang tenang. Manfaatkan ketenangan ini untuk hook yang ringan dan menyenangkan.",
-    "Lelah": "Catatan suasana: user sedang lelah. Buat micro-action sangat kecil dan rendah energi.",
-    "Cemas": "Catatan suasana: user sedang cemas. Validasi ekstra hangat dulu, turunkan tekanan, micro-action menenangkan.",
-    "Fokus": "Catatan suasana: user sedang fokus. Boleh langsung ke hook dan satu micro-action yang memanfaatkan momentum.",
+    "Calm": "Mood note: the user feels calm. Use this ease for a light, playful hook.",
+    "Tired": "Mood note: the user feels tired. Keep the micro-action very small and low energy.",
+    "Anxious": "Mood note: the user feels anxious. Lead with extra warm validation, lower the pressure, keep the micro-action soothing.",
+    "Focused": "Mood note: the user feels focused. Go straight to a hook and one micro-action that rides the momentum.",
 }
 
 
@@ -46,20 +47,6 @@ _tokenizer = None
 _load_lock = Lock()
 
 
-def _message_text(content) -> str:
-    if isinstance(content, str):
-        return content.strip()
-    if isinstance(content, list):
-        parts = []
-        for item in content:
-            if isinstance(item, dict):
-                text = item.get("text")
-                if isinstance(text, str):
-                    parts.append(text)
-        return " ".join(part.strip() for part in parts if part.strip()).strip()
-    return ""
-
-
 def _prewarm() -> None:
     """Download weights to the Space cache on CPU so the GPU window stays short."""
     try:
@@ -123,7 +110,7 @@ def _history_to_messages(history: list) -> list[dict]:
     for item in history:
         if isinstance(item, dict):
             role = item.get("role")
-            content = _message_text(item.get("content"))
+            content = message_text(item.get("content"))
             if role in {"user", "assistant"} and content:
                 messages.append({"role": role, "content": content})
             continue
@@ -143,9 +130,15 @@ def _clean_response(text: str) -> str:
 
 
 @spaces.GPU(duration=120)
-def respond(message: str, history: list[dict], mood: str, temperature: float, top_p: float) -> str:
+def respond(
+    message: str,
+    history: list[dict],
+    mood: str,
+    temperature: float,
+    top_p: float,
+) -> str:
     model, tokenizer = _load_model()
-    message = _message_text(message)
+    message = message_text(message)
 
     system = SYSTEM_PROMPT
     note = MOOD_NOTES.get(mood)
@@ -183,276 +176,7 @@ if os.environ.get("PREWARM", "1").lower() not in {"0", "false", "no"}:
     _prewarm()
 
 
-CSS = """
-:root {
-  --forest: #5a7a5a;
-  --sage: #7a9a7a;
-  --moss: #8db88d;
-  --mint: #b8d4b8;
-  --cream: #f7f5f0;
-  --linen: #ede9e1;
-  --sand: #e2ddd4;
-  --stone: #a09888;
-  --charcoal: #3a3a3a;
-  --amber: #d4a060;
-  --radius: 20px;
-  --font-scale: 1;
-  --brand-grad: linear-gradient(135deg, var(--sage), var(--forest));
-}
-
-/* ===== Persona themes (toggled client-side via data-* on <body>) ===== */
-body[data-culture="pesisir"] {
-  --forest: #3f6d86; --sage: #5f8aa6; --moss: #8db4c8; --mint: #c2dbe8;
-  --cream: #f3f6f8; --linen: #e6edf1; --sand: #d6e0e6; --amber: #e0a85e;
-}
-body[data-culture="senja"] {
-  --forest: #9c5a3c; --sage: #c08457; --moss: #d6a878; --mint: #ecd6bf;
-  --cream: #faf4ee; --linen: #f0e6db; --sand: #e6d6c5; --amber: #cf7a3f;
-}
-body[data-age="muda"]   { --radius: 26px; --font-scale: 1.0; }
-body[data-age="dewasa"] { --radius: 18px; --font-scale: 1.0; }
-body[data-age="matang"] { --radius: 12px; --font-scale: 1.12; }
-body[data-era="retro"] {
-  --radius: 8px;
-  --brand-grad: linear-gradient(135deg, var(--amber), var(--forest));
-}
-body[data-era="retro"] .nb-shell,
-body[data-era="retro"] .gradio-container {
-  font-family: "Georgia", "Times New Roman", serif;
-}
-
-body, .gradio-container {
-  background: var(--linen) !important;
-  color: var(--charcoal);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  font-size: calc(15px * var(--font-scale));
-}
-.nb-shell { max-width: 1180px; margin: 0 auto; }
-
-.nb-header {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 16px; padding: 18px 22px; margin: 6px 0 14px;
-  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius);
-}
-.nb-brand { display: flex; align-items: center; gap: 14px; }
-.nb-icon {
-  width: 46px; height: 46px; border-radius: 14px; background: var(--brand-grad);
-  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
-  box-shadow: 0 4px 12px rgba(90,122,90,0.25);
-}
-.nb-brand h1 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--charcoal); }
-.nb-brand span { font-size: .8rem; color: var(--stone); font-weight: 500; }
-.nb-mode {
-  font-size: .76rem; color: var(--forest); background: var(--mint);
-  padding: 6px 14px; border-radius: 50px; font-weight: 600; white-space: nowrap;
-}
-
-/* persona picker */
-.nb-persona {
-  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
-  padding: 12px 18px; margin-bottom: 14px;
-  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius);
-  font-size: .8rem;
-}
-.nb-persona .nb-group { display: flex; align-items: center; gap: 8px; }
-.nb-persona .nb-label { color: var(--stone); font-weight: 600; }
-.nb-chip {
-  padding: 6px 14px; border-radius: 50px; border: 1.5px solid var(--sand);
-  background: transparent; color: var(--stone); font-size: .78rem; font-weight: 600;
-  cursor: pointer; transition: all .15s; font-family: inherit;
-}
-.nb-chip:hover { border-color: var(--sage); color: var(--forest); }
-.nb-chip.active { border-color: var(--sage); background: var(--mint); color: var(--forest); }
-
-.nb-card {
-  background: var(--cream); border: 1px solid var(--sand);
-  border-radius: var(--radius); padding: 20px;
-}
-.nb-card h2 { font-size: .95rem; margin: 0 0 10px; color: var(--charcoal); }
-.nb-card p { color: var(--stone); font-size: .85rem; line-height: 1.55; margin: 0; }
-.nb-card .nb-divider { height: 1px; background: var(--sand); margin: 16px 0; }
-
-/* chatbot */
-.nb-chatbot {
-  border: 1px solid var(--sand) !important;
-  border-radius: var(--radius) !important;
-  background: var(--cream) !important;
-  min-height: 520px;
-}
-.nb-chatbot .message.user, .nb-chatbot [data-testid="user"] {
-  background: var(--brand-grad) !important; color: #fff !important;
-  border: none !important; border-radius: 18px 18px 4px 18px !important;
-}
-.nb-chatbot .message.bot, .nb-chatbot [data-testid="bot"] {
-  background: linear-gradient(135deg, #f0f6f0, #e8f0e8) !important;
-  border: 1px solid var(--mint) !important; color: var(--charcoal) !important;
-  border-radius: 18px 18px 18px 4px !important;
-}
-.nb-input textarea {
-  border-radius: 16px !important; background: var(--cream) !important;
-  border: 1.5px solid var(--sand) !important;
-}
-.nb-examples button { border-radius: 14px !important; text-align: left; min-height: 40px; }
-button.primary, .nb-send {
-  background: var(--brand-grad) !important; border: none !important; color: #fff !important;
-}
-
-/* bottom bar */
-.nb-bottom {
-  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
-  gap: 12px; padding: 14px 20px; margin-top: 14px;
-  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius);
-}
-.nb-bottom .nb-safe { display: flex; gap: 8px; flex-wrap: wrap; }
-.nb-bottom .tag {
-  font-size: .72rem; padding: 5px 12px; border-radius: 50px;
-  background: var(--linen); color: var(--stone); font-weight: 500;
-}
-.nb-bottom .nb-comfort { font-size: .8rem; color: var(--stone); }
-.nb-bottom .nb-comfort strong { color: var(--forest); }
-
-@media (max-width: 900px) {
-  .nb-layout { grid-template-columns: 1fr !important; }
-}
-"""
-
-# Client-side persona switching: flip data-* attributes on <body>, no round-trip.
-JS = """
-() => {
-  window.nbSet = (group, val, el) => {
-    document.body.setAttribute('data-' + group, val);
-    if (el && el.parentElement) {
-      el.parentElement.querySelectorAll('.nb-chip').forEach(b => b.classList.remove('active'));
-      el.classList.add('active');
-    }
-  };
-  document.body.setAttribute('data-age', 'dewasa');
-  document.body.setAttribute('data-era', 'kini');
-  document.body.setAttribute('data-culture', 'nusantara');
-}
-"""
-
-PERSONA_HTML = """
-<div class="nb-persona nb-shell">
-  <div class="nb-group">
-    <span class="nb-label">🎂 Usia</span>
-    <button class="nb-chip" onclick="nbSet('age','muda',this)">Muda</button>
-    <button class="nb-chip active" onclick="nbSet('age','dewasa',this)">Dewasa</button>
-    <button class="nb-chip" onclick="nbSet('age','matang',this)">Matang</button>
-  </div>
-  <div class="nb-group">
-    <span class="nb-label">🕰️ Zaman</span>
-    <button class="nb-chip active" onclick="nbSet('era','kini',this)">Kini</button>
-    <button class="nb-chip" onclick="nbSet('era','retro',this)">Retro</button>
-  </div>
-  <div class="nb-group">
-    <span class="nb-label">🌏 Budaya</span>
-    <button class="nb-chip active" onclick="nbSet('culture','nusantara',this)">Nusantara</button>
-    <button class="nb-chip" onclick="nbSet('culture','pesisir',this)">Pesisir</button>
-    <button class="nb-chip" onclick="nbSet('culture','senja',this)">Senja</button>
-  </div>
-</div>
-"""
-
-HEADER_HTML = """
-<div class="nb-header nb-shell">
-  <div class="nb-brand">
-    <div class="nb-icon">🧠</div>
-    <div>
-      <h1>NeuroBait</h1>
-      <span>Teman untuk satu langkah kecil berikutnya</span>
-    </div>
-  </div>
-  <div class="nb-mode">🟢 Mode tanpa menghakimi aktif</div>
-</div>
-"""
-
-SIDE_HTML = """
-<div class="nb-card">
-  <h2>Cara kerja NeuroBait</h2>
-  <p>Tidak ada streak, rasa bersalah, atau teater produktivitas. NeuroBait mencari satu pemicu emosional, lalu mengubahnya jadi satu langkah super kecil yang bisa kamu mulai sekarang.</p>
-  <div class="nb-divider"></div>
-  <h2>Pilih tema sesuai dirimu</h2>
-  <p>Atur usia, zaman, dan budaya di bar atas. Warna dan nuansa menyesuaikan supaya terasa lebih kamu — tanpa mengubah cara NeuroBait menjagamu.</p>
-</div>
-"""
-
-BOTTOM_HTML = """
-<div class="nb-bottom nb-shell">
-  <div class="nb-comfort">Desain: <strong>Trauma-informed</strong> · <strong>Anti-shame</strong> · <strong>Sensory-safe</strong></div>
-  <div class="nb-safe">
-    <span class="tag">🚫 Tanpa tinta merah</span>
-    <span class="tag">🚫 Tanpa desakan</span>
-    <span class="tag">🚫 Tanpa streak</span>
-    <span class="tag">✅ Bisa disesuaikan</span>
-  </div>
-</div>
-"""
-
-
-with gr.Blocks(css=CSS, js=JS, theme=gr.themes.Soft(primary_hue="green", neutral_hue="stone")) as demo:
-    gr.HTML(HEADER_HTML)
-    gr.HTML(PERSONA_HTML)
-
-    with gr.Row(elem_classes=["nb-shell", "nb-layout"]):
-        with gr.Column(scale=3):
-            chatbot = gr.Chatbot(
-                type="messages",
-                height=520,
-                show_label=False,
-                elem_classes=["nb-chatbot"],
-                avatar_images=(None, None),
-            )
-            message = gr.Textbox(
-                placeholder="Ceritakan apa yang ada di kepalamu... (nggak perlu rapi, yang penting jujur)",
-                lines=2,
-                max_lines=6,
-                show_label=False,
-                elem_classes=["nb-input"],
-            )
-            with gr.Row():
-                submit = gr.Button("Kirim", variant="primary", elem_classes=["nb-send"])
-                clear = gr.Button("Mulai baru")
-            gr.Examples(
-                label="Mau mulai dari mana?",
-                examples=[
-                    "Aku harus revisi proposal malam ini tapi dari tadi cuma buka tutup dokumen.",
-                    "Kamarku berantakan banget dan aku malu sendiri lihatnya.",
-                    "Aku stuck banget, nggak tahu mulai dari mana.",
-                ],
-                inputs=message,
-                elem_id="nb-examples",
-            )
-        with gr.Column(scale=1, min_width=260):
-            mood = gr.Radio(
-                choices=["Tenang", "Lelah", "Cemas", "Fokus"],
-                value="Tenang",
-                label="🌈 Bagaimana perasaanmu?",
-            )
-            gr.HTML(SIDE_HTML)
-            with gr.Accordion("Pengaturan respons", open=False):
-                temperature = gr.Slider(0.2, 1.0, value=0.7, step=0.05, label="Temperature")
-                top_p = gr.Slider(0.6, 1.0, value=0.9, step=0.05, label="Top p")
-
-    gr.HTML(BOTTOM_HTML)
-
-    def user_turn(user_message: str, chat_history: list) -> tuple[str, list]:
-        if not user_message.strip():
-            return "", chat_history
-        return "", chat_history + [{"role": "user", "content": user_message.strip()}]
-
-    def bot_turn(chat_history: list, mood_value: str, temperature_value: float, top_p_value: float) -> list:
-        user_message = _message_text(chat_history[-1]["content"])
-        assistant_message = respond(user_message, chat_history[:-1], mood_value, temperature_value, top_p_value)
-        return chat_history + [{"role": "assistant", "content": assistant_message}]
-
-    submit.click(user_turn, [message, chatbot], [message, chatbot], queue=False).then(
-        bot_turn, [chatbot, mood, temperature, top_p], chatbot
-    )
-    message.submit(user_turn, [message, chatbot], [message, chatbot], queue=False).then(
-        bot_turn, [chatbot, mood, temperature, top_p], chatbot
-    )
-    clear.click(lambda: [], outputs=chatbot, queue=False)
+demo = build_demo(respond)
 
 
 if __name__ == "__main__":

requirements.txt

@@ -1,5 +1,5 @@
 spaces
-gradio
+gradio==6.17.3
 transformers==5.5.0
 peft==0.19.1
 accelerate

ui.py

@@ -0,0 +1,328 @@
+"""NeuroBait UI — gradio-only, no torch/spaces.
+
+This module owns the entire look and feel so the production Space app and the
+local sandbox share one source of truth. Pass a ``respond_fn`` into
+``build_demo`` to wire the chat to a real or stubbed inference backend.
+
+Design language: GitHub Primer-ish — system font stack, 6px shapes, flat
+borders, light/dark via a single toggle. Personalization is intentionally light
+(just a mood check-in) to keep cognitive load low.
+"""
+
+from __future__ import annotations
+
+import gradio as gr
+
+
+def message_text(content) -> str:
+    if isinstance(content, str):
+        return content.strip()
+    if isinstance(content, list):
+        parts = []
+        for item in content:
+            if isinstance(item, dict):
+                text = item.get("text")
+                if isinstance(text, str):
+                    parts.append(text)
+        return " ".join(part.strip() for part in parts if part.strip()).strip()
+    return ""
+
+
+CSS = """
+:root {
+  --forest: #2da44e;
+  --sage: #2c974b;
+  --mint: #dafbe1;
+  --cream: #ffffff;
+  --linen: #f6f8fa;
+  --sand: #d0d7de;
+  --stone: #57606a;
+  --charcoal: #1f2328;
+  --radius: 6px;
+  --brand-grad: linear-gradient(135deg, #2da44e, #2c974b);
+}
+body[data-dark="on"] {
+  --forest: #3fb950; --sage: #2ea043; --mint: #1b3327;
+  --cream: #161b22; --linen: #0d1117; --sand: #30363d;
+  --stone: #8b949e; --charcoal: #e6edf3;
+}
+
+body, .gradio-container {
+  background: var(--linen) !important;
+  color: var(--charcoal);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
+  font-size: 14px;
+}
+.nb-shell { max-width: 1012px; margin: 0 auto; }
+
+/* header */
+.nb-header {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 16px 20px; margin: 0 auto 14px;
+  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius);
+}
+.nb-brand { display: flex; align-items: center; gap: 14px; }
+.nb-icon {
+  width: 52px; height: 52px; border-radius: var(--radius); background: var(--brand-grad);
+  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
+}
+.nb-brand h1 { margin: 0; font-size: 1.95rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; color: var(--charcoal); }
+.nb-brand span { font-size: .82rem; color: var(--stone); }
+.nb-header-right { display: flex; align-items: center; gap: 10px; }
+.nb-mode {
+  font-size: .75rem; color: var(--forest); background: var(--mint);
+  padding: 4px 10px; border-radius: 2em; font-weight: 600; white-space: nowrap;
+}
+.nb-dark {
+  padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--sand);
+  background: var(--cream); color: var(--charcoal); font-size: .8rem; font-weight: 500;
+  cursor: pointer; transition: all .12s; font-family: inherit;
+}
+.nb-dark:hover { border-color: var(--stone); }
+
+/* rotating quote */
+.nb-quote {
+  padding: 14px 20px; margin: 0 auto 14px;
+  background: var(--brand-grad); color: #fff;
+  border-radius: var(--radius); text-align: center;
+}
+.nb-quote #nb-quote-text {
+  font-size: .92rem; line-height: 1.5; font-weight: 500; font-style: italic;
+  opacity: 1; transition: opacity .5s ease;
+}
+
+/* about */
+.nb-about { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 auto 14px; }
+.nb-about-col {
+  background: var(--cream); border: 1px solid var(--sand);
+  border-radius: var(--radius); padding: 16px 18px;
+}
+.nb-about-col h3 { margin: 0 0 6px; font-size: .9rem; color: var(--charcoal); }
+.nb-about-col p { margin: 0; color: var(--stone); font-size: .82rem; line-height: 1.5; }
+
+/* mood bar (Gradio radio styled as chips) */
+.nb-mood-bar {
+  align-items: center !important;
+  padding: 12px 18px; margin: 0 auto 14px;
+  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius);
+}
+.nb-radio { background: transparent !important; border: none !important; box-shadow: none !important; }
+.nb-radio fieldset { border: none !important; }
+.nb-radio span[data-testid="block-info"], .nb-radio .block-info {
+  color: var(--stone) !important; font-weight: 600; font-size: .82rem;
+}
+.nb-radio label {
+  border: 1px solid var(--sand) !important; border-radius: var(--radius) !important;
+  background: var(--cream) !important; color: var(--charcoal) !important;
+  padding: 5px 12px !important; font-size: .8rem !important; font-weight: 500 !important;
+  cursor: pointer; transition: all .12s;
+}
+.nb-radio label:hover { border-color: var(--stone) !important; }
+.nb-radio label.selected, .nb-radio input:checked + span {
+  border-color: var(--forest) !important; background: var(--mint) !important; color: var(--forest) !important;
+}
+.nb-radio input[type="radio"] { display: none !important; }
+
+/* chatbot */
+.nb-chatbot {
+  border: 1px solid var(--sand) !important;
+  border-radius: var(--radius) !important;
+  background: var(--cream) !important;
+  min-height: 460px;
+}
+.nb-chatbot .message.user, .nb-chatbot [data-testid="user"] {
+  background: var(--brand-grad) !important; color: #fff !important;
+  border: none !important; border-radius: 6px !important;
+}
+.nb-chatbot .message.bot, .nb-chatbot [data-testid="bot"] {
+  background: var(--linen) !important;
+  border: 1px solid var(--sand) !important; color: var(--charcoal) !important;
+  border-radius: 6px !important;
+}
+.nb-input textarea {
+  border-radius: var(--radius) !important; background: var(--cream) !important;
+  border: 1px solid var(--sand) !important; color: var(--charcoal) !important;
+}
+.nb-examples button { border-radius: var(--radius) !important; text-align: left; min-height: 38px; }
+button.primary, .nb-send {
+  background: var(--brand-grad) !important; border: none !important; color: #fff !important;
+}
+
+/* bottom bar */
+.nb-bottom {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
+  gap: 12px; padding: 12px 18px; margin: 14px auto 0;
+  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius);
+}
+.nb-bottom .nb-safe { display: flex; gap: 8px; flex-wrap: wrap; }
+.nb-bottom .tag {
+  font-size: .72rem; padding: 3px 10px; border-radius: 2em;
+  background: var(--linen); color: var(--stone); font-weight: 500; border: 1px solid var(--sand);
+}
+.nb-bottom .nb-comfort { font-size: .8rem; color: var(--stone); }
+.nb-bottom .nb-comfort strong { color: var(--forest); }
+
+@media (max-width: 820px) {
+  .nb-about { grid-template-columns: 1fr; }
+}
+"""
+
+# A single dark/default toggle plus a gentle ADHD-affirming quote rotation.
+JS = """
+() => {
+  window.nbDark = (el) => {
+    const on = document.body.getAttribute('data-dark') === 'on';
+    if (on) {
+      document.body.removeAttribute('data-dark');
+      el.textContent = '\\uD83C\\uDF19 Dark mode';
+    } else {
+      document.body.setAttribute('data-dark', 'on');
+      el.textContent = '\\u2600\\uFE0F Default mode';
+    }
+  };
+
+  const quotes = [
+    '\\u201CADHD is like having a Ferrari engine for a brain with bicycle brakes. Strengthen the brakes and you have a champion.\\u201D \\u2014 Dr. Edward M. Hallowell',
+    '\\u201CDifferent\\u2026 not less.\\u201D \\u2014 Dr. Temple Grandin',
+    'You don\\u2019t lack attention \\u2014 you pay attention to everything. That\\u2019s a different lens, not a deficit.',
+    'Your brain isn\\u2019t broken. It\\u2019s wired for a different kind of brilliance \\u2014 and that\\u2019s worth embracing.',
+  ];
+  let i = 0;
+  setInterval(() => {
+    const el = document.getElementById('nb-quote-text');
+    if (!el) return;
+    el.style.opacity = 0;
+    setTimeout(() => {
+      i = (i + 1) % quotes.length;
+      el.textContent = quotes[i];
+      el.style.opacity = 1;
+    }, 500);
+  }, 9000);
+}
+"""
+
+HEADER_HTML = """
+<div class="nb-header nb-shell">
+  <div class="nb-brand">
+    <div class="nb-icon">🧠</div>
+    <div>
+      <h1>NeuroBait</h1>
+      <span>A warm space and a gentle boost for your everyday</span>
+    </div>
+  </div>
+  <div class="nb-header-right">
+    <button class="nb-dark" onclick="nbDark(this)">🌙 Dark mode</button>
+    <div class="nb-mode">🟢 Non-judgmental mode on</div>
+  </div>
+</div>
+"""
+
+QUOTE_HTML = """
+<div class="nb-quote nb-shell">
+  <span id="nb-quote-text">“ADHD is like having a Ferrari engine for a brain with bicycle brakes. Strengthen the brakes and you have a champion.” — Dr. Edward M. Hallowell</span>
+</div>
+"""
+
+ABOUT_HTML = """
+<div class="nb-about nb-shell">
+  <div class="nb-about-col">
+    <h3>🧠 ADHD isn't a willpower problem</h3>
+    <p>An ADHD brain runs on interest, novelty, and emotion more than on pressure or to-do lists. It isn't broken or lazy — it's simply wired for a different kind of focus.</p>
+  </div>
+  <div class="nb-about-col">
+    <h3>✨ What makes NeuroBait different</h3>
+    <p>A general AI assistant tends to hand you longer task lists. NeuroBait is tuned for ADHD minds instead — warm, shame-free, and emotionally attuned, working with your dopamine rather than against your willpower.</p>
+  </div>
+</div>
+"""
+
+BOTTOM_HTML = """
+<div class="nb-bottom nb-shell">
+  <div class="nb-comfort">Design: <strong>Trauma-informed</strong> · <strong>Anti-shame</strong> · <strong>Sensory-safe</strong></div>
+  <div class="nb-safe">
+    <span class="tag">🚫 No red pen</span>
+    <span class="tag">🚫 No urgency</span>
+    <span class="tag">🚫 No streaks</span>
+  </div>
+</div>
+"""
+
+
+def build_demo(respond_fn):
+    """Build the NeuroBait Blocks UI. ``respond_fn`` signature:
+
+    respond_fn(message, history, mood, temperature, top_p) -> str
+    """
+    with gr.Blocks(css=CSS, js=JS, theme=gr.themes.Soft(primary_hue="green", neutral_hue="slate")) as demo:
+        gr.HTML(HEADER_HTML)
+        gr.HTML(QUOTE_HTML)
+        gr.HTML(ABOUT_HTML)
+
+        with gr.Row(elem_classes=["nb-shell", "nb-mood-bar"]):
+            mood = gr.Radio(
+                choices=["Calm", "Tired", "Anxious", "Focused"],
+                value="Calm",
+                label="🌈 How are you feeling?",
+                elem_classes=["nb-radio"],
+            )
+
+        with gr.Column(elem_classes=["nb-shell"]):
+            chatbot = gr.Chatbot(
+                height=460,
+                show_label=False,
+                elem_classes=["nb-chatbot"],
+                avatar_images=(None, None),
+            )
+            message = gr.Textbox(
+                placeholder="Tell me what's on your mind... (no need to be tidy, just honest)",
+                lines=2,
+                max_lines=6,
+                show_label=False,
+                elem_classes=["nb-input"],
+            )
+            with gr.Row():
+                submit = gr.Button("Send", variant="primary", elem_classes=["nb-send"])
+                clear = gr.Button("New start")
+            gr.Examples(
+                label="Want a gentle opener?",
+                examples=[
+                    "There's something I've been meaning to get to, and it keeps slipping by.",
+                    "My space feels a bit cluttered today.",
+                    "My mind feels a little foggy right now.",
+                ],
+                inputs=message,
+                elem_id="nb-examples",
+            )
+            with gr.Accordion("Response settings", open=False):
+                temperature = gr.Slider(0.2, 1.0, value=0.7, step=0.05, label="Temperature")
+                top_p = gr.Slider(0.6, 1.0, value=0.9, step=0.05, label="Top p")
+
+        gr.HTML(BOTTOM_HTML)
+
+        def user_turn(user_message: str, chat_history: list) -> tuple[str, list]:
+            if not user_message.strip():
+                return "", chat_history
+            return "", chat_history + [{"role": "user", "content": user_message.strip()}]
+
+        def bot_turn(
+            chat_history: list,
+            mood_value: str,
+            temperature_value: float,
+            top_p_value: float,
+        ) -> list:
+            user_message = message_text(chat_history[-1]["content"])
+            assistant_message = respond_fn(
+                user_message, chat_history[:-1], mood_value, temperature_value, top_p_value,
+            )
+            return chat_history + [{"role": "assistant", "content": assistant_message}]
+
+        bot_inputs = [chatbot, mood, temperature, top_p]
+        submit.click(user_turn, [message, chatbot], [message, chatbot], queue=False).then(
+            bot_turn, bot_inputs, chatbot
+        )
+        message.submit(user_turn, [message, chatbot], [message, chatbot], queue=False).then(
+            bot_turn, bot_inputs, chatbot
+        )
+        clear.click(lambda: [], outputs=chatbot, queue=False)
+
+    return demo