Upload folder using huggingface_hub

app.py

@@ -202,5 +202,6 @@ if __name__ == "__main__":
         theme=THEME,
         js=JS,
         i18n=I18N,
+        footer_links=[],
         allowed_paths=["."],
     )

ui.py

@@ -20,6 +20,9 @@ UX notes for ADHD users:
 
 from __future__ import annotations
 
+import base64
+from pathlib import Path
+
 import gradio as gr
 
 MOODS = ["Calm", "Tired", "Anxious", "Focused"]
@@ -27,7 +30,7 @@ MOODS = ["Calm", "Tired", "Anxious", "Focused"]
 THEME = gr.themes.Soft(primary_hue="teal", neutral_hue="slate")
 
 TITLE = ""
-LOGO_PATH = "neurobait-logo.jpg"
+MARK_PATH = Path(__file__).with_name("neurobait-mark.png")
 
 DESCRIPTION = (
     "A warm space and a gentle boost for your everyday. "
@@ -47,6 +50,27 @@ I18N = gr.I18n(
     id=I18N_FOOTER,
 )
 
+MARK_SRC = f"data:image/png;base64,{base64.b64encode(MARK_PATH.read_bytes()).decode('ascii')}"
+HEADER_HTML = f"""
+<header class="nb-header">
+  <img src="{MARK_SRC}" alt="" class="nb-mark" />
+  <div>
+    <div class="nb-wordmark">NeuroBait</div>
+    <div class="nb-kicker">task initiation companion</div>
+  </div>
+</header>
+"""
+
+FOOTER_HTML = """
+<div class="nb-footer-links">
+  <a href="/?view=api">Use via API</a>
+  <span>·</span>
+  <a href="https://gradio.app" target="_blank" rel="noreferrer">Built with Gradio</a>
+  <span>·</span>
+  <span>Settings</span>
+</div>
+"""
+
 PLACEHOLDER = "What's on your mind? No need to be tidy."
 
 EXAMPLES = [
@@ -99,26 +123,29 @@ h1 { letter-spacing: -0.5px; font-weight: 800; }
 
 .nb-header {
   display: flex;
-  justify-content: center;
-  padding: 1.5rem 0 0.75rem;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 1rem 0 0.4rem;
 }
-.nb-logo,
-#neurobait-logo {
-  display: block;
-  width: min(360px, 76vw);
-  max-width: 360px;
-  height: auto;
-  margin: 0 auto;
-  border-radius: 0;
+.nb-mark {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+  flex: 0 0 auto;
 }
-#neurobait-logo,
-#neurobait-logo > div {
-  background: transparent !important;
-  border: 0 !important;
-  box-shadow: none !important;
+.nb-wordmark {
+  font-size: 1.24rem;
+  line-height: 1.05;
+  font-weight: 780;
+  letter-spacing: 0;
+  color: var(--charcoal);
 }
-#neurobait-logo img {
-  object-fit: contain !important;
+.nb-kicker {
+  margin-top: 3px;
+  color: var(--stone);
+  font-size: 0.78rem;
+  line-height: 1.2;
 }
 
 /* user bubble gets the brand accent, assistant stays flat/quiet */
@@ -204,6 +231,23 @@ button.primary, .submit-button, [variant="primary"] {
   margin-top: 1rem;
   border-top: 1px solid var(--sand);
 }
+.nb-footer-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  color: var(--stone);
+  font-size: 0.8rem;
+  margin: 1.75rem 0 0.25rem;
+}
+.nb-footer-links a,
+.nb-footer-links span {
+  color: var(--stone) !important;
+  text-decoration: none !important;
+}
+.nb-footer-links a:hover {
+  color: var(--charcoal) !important;
+}
 """
 
 JS = """
@@ -275,15 +319,7 @@ def build_demo(respond_fn):
     respond_fn(message: str, history: list[dict], mood: str) -> str | generator[str]
     """
     with gr.Blocks(fill_height=True) as demo:
-        with gr.Row(elem_classes=["nb-header"]):
-            gr.Image(
-                value=LOGO_PATH,
-                show_label=False,
-                interactive=False,
-                container=False,
-                height=148,
-                elem_id="neurobait-logo",
-            )
+        gr.HTML(HEADER_HTML)
         mood = gr.Radio(
             MOODS,
             value="Calm",
@@ -311,4 +347,5 @@ def build_demo(respond_fn):
             fill_height=True,
             autoscroll=True,
         )
+        gr.HTML(FOOTER_HTML)
     return demo