Upload folder using huggingface_hub

app.py

@@ -15,7 +15,7 @@ from threading import Lock, Thread
 import spaces
 import torch
 
-from ui import CSS, THEME, build_demo, message_text
+from ui import CSS, I18N, THEME, build_demo, message_text
 
 
 BASE_MODEL = os.environ.get("BASE_MODEL", "unsloth/gemma-3-12b-it")
@@ -196,4 +196,4 @@ demo = build_demo(respond)
 
 
 if __name__ == "__main__":
-    demo.launch(show_error=True, css=CSS, theme=THEME)
+    demo.launch(show_error=True, css=CSS, theme=THEME, i18n=I18N)

ui.py

@@ -10,6 +10,12 @@ Dark-only, earthy, calm sage-teal accent (gentler / more sensory-safe for ADHD
 than vivid green). The palette is set straight on ``:root`` and mapped onto
 Gradio's core CSS vars unconditionally, so the app is dark with no dependence on
 JS or HF's ``?__theme``.
+
+UX notes for ADHD users:
+- Fewer decisions: mood is 4 choices, examples are single-click starting points.
+- No shame framing: copy is warm, safety scope is visible, no streaks/deadlines.
+- Consistent language: the Gradio footer is forced to English so the whole app
+  feels like one voice, regardless of browser locale.
 """
 
 from __future__ import annotations
@@ -23,21 +29,26 @@ THEME = gr.themes.Soft(primary_hue="teal", neutral_hue="slate")
 TITLE = "🧠 NeuroBait"
 
 DESCRIPTION = (
-    "A warm space and a gentle boost for your everyday — NeuroBait works *with* "
-    "your dopamine, not against your willpower. Your brain isn't broken; it's "
-    "wired for a different kind of focus."
+    "A warm space and a gentle boost for your everyday. "
+    "No red pen · no urgency · no streaks."
 )
 
-PLACEHOLDER = (
-    "### 🧠 NeuroBait\n"
-    "Tell me what's on your mind — no need to be tidy, just honest.\n\n"
-    "*No red pen · no urgency · no streaks.*"
+# Force the Gradio shell footer to English so it does not clash with the app's
+# English copy when the viewer's browser locale is Indonesian.
+I18N = gr.I18n(
+    en={
+        "use_via_api": "Use via API",
+        "built_with_gradio": "Built with Gradio",
+        "settings": "Settings",
+    }
 )
 
+PLACEHOLDER = "What's on your mind? No need to be tidy."
+
 EXAMPLES = [
-    ["There's something I've been meaning to get to, and it keeps slipping by.", "Calm"],
-    ["My space feels a bit cluttered today.", "Tired"],
-    ["My mind feels a little foggy right now.", "Anxious"],
+    ["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."],
 ]
 
 CSS = """
@@ -98,6 +109,73 @@ textarea, input[type="text"] {
 button.primary, .submit-button, [variant="primary"] {
   background: var(--brand-grad) !important; border: none !important; color: #fff !important;
 }
+
+/* ADHD-friendly examples: render as calm chips instead of a data table */
+.examples table,
+[data-testid="examples"] table,
+.examples-wrap table {
+  display: block !important;
+  width: 100% !important;
+}
+.examples table thead,
+[data-testid="examples"] table thead,
+.examples-wrap table thead {
+  display: none !important;
+}
+.examples table tbody,
+[data-testid="examples"] table tbody,
+.examples-wrap table tbody {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 8px !important;
+}
+.examples table tr,
+[data-testid="examples"] table tr,
+.examples-wrap table tr {
+  display: inline-flex !important;
+}
+.examples table td,
+[data-testid="examples"] table td,
+.examples-wrap table td {
+  background: var(--cream) !important;
+  border: 1px solid var(--sand) !important;
+  border-radius: 999px !important;
+  padding: 8px 14px !important;
+  color: var(--charcoal) !important;
+  cursor: pointer !important;
+  font-size: 0.9rem !important;
+  line-height: 1.4 !important;
+  transition: background 0.15s ease, border-color 0.15s ease !important;
+}
+.examples table td:hover,
+[data-testid="examples"] table td:hover,
+.examples-wrap table td:hover {
+  background: var(--mint) !important;
+  border-color: var(--forest) !important;
+}
+
+/* Make the empty-state placeholder feel centered and readable */
+.chatbot .placeholder,
+[data-testid="chatbot"] .placeholder {
+  text-align: center !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 100% !important;
+  opacity: 0.9 !important;
+}
+
+/* Safety scope footer at the bottom of the app */
+.gradio-container::after {
+  content: "Not a medical device · not a therapist · just a gentle nudge";
+  display: block;
+  text-align: center;
+  color: var(--stone);
+  font-size: 0.75rem;
+  padding: 1.5rem 0 1rem;
+  margin-top: 1rem;
+  border-top: 1px solid var(--sand);
+}
 """
 
 
@@ -120,7 +198,12 @@ def build_demo(respond_fn):
 
     respond_fn(message: str, history: list[dict], mood: str) -> str | generator[str]
     """
-    mood = gr.Radio(MOODS, value="Calm", label="🌳 How are you feeling?")
+    mood = gr.Radio(
+        MOODS,
+        value="Calm",
+        label="🌳 How are you feeling?",
+        info="Pick the one that feels closest right now.",
+    )
     chatbot = gr.Chatbot(
         height=560,
         show_label=False,