Brand the demo like webAI and add the TwIL Intelligence Lab system prompt

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+brand/webai-cube-256.webp filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+*.pyc
+.gradio/

app.py

@@ -1,6 +1,7 @@
 import os
 import re
 from collections.abc import Iterator
+from pathlib import Path
 from threading import Thread
 
 import spaces
@@ -10,6 +11,10 @@ from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStream
 
 MODEL_ID = "webAI-Official/TwIL-LM3"
 MAX_INPUT_TOKEN_LENGTH = int(os.getenv("MAX_INPUT_TOKEN_LENGTH", "8192"))
+ASSETS = Path(__file__).resolve().parent / "brand"
+ICON = ASSETS / "AppiCon.svg"
+CUBE = ASSETS / "webai-cube-256.webp"
+AVATAR = ASSETS / "avatar.svg"
 
 # Reasoning delimiters are non-special tokens (ids 128002 / 128003), so they
 # survive skip_special_tokens=True and Gradio can render them as a collapsible
@@ -22,38 +27,237 @@ _THINK_RE = re.compile(
     re.DOTALL,
 )
 
-TITLE = "# TwIL-LM3"
-DESCRIPTION = f"""
-Official demo of **[TwIL-LM3](https://huggingface.co/{MODEL_ID})**, webAI's 3B
-reasoning model for formal logic — FOL translation, entailment, semantic
-parsing, Lean formalisation and critique.
-
-Built from [SmolLM3-3B](https://huggingface.co/HuggingFaceTB/SmolLM3-3B) via
-LoRA SFT, checkpoint fusion, WiSE-FT, and entropy-weighted GRPO. It writes a
-collapsible `{THINK_OPEN}` reasoning trace before the answer.
-
-**Temperature = 0** (greedy) reproduces the published numbers. Keep max new
-tokens at **2048+** so the thinking block is not cut off.
-"""
+SYSTEM_PROMPT = (
+    "You are TwIL, a formal-logic reasoning model created by webAI Intelligence Lab. "
+    "You specialise in entailment, first-order logic, semantic parsing, Lean, and proof critique. "
+    f"Work through the problem in a {THINK_OPEN} block, then give a concise, precise answer."
+)
 
-FOOTER = f"""
----
-Official Space for [{MODEL_ID}](https://huggingface.co/{MODEL_ID}) ·
-License: [webAI Non-Commercial License ver. 1.0](https://huggingface.co/{MODEL_ID})
+HEADER = """
+<div class="twil-header">
+  <img class="twil-mark" src="/gradio_api/file=brand/AppiCon.svg" alt="webAI" />
+  <div class="twil-header-copy">
+    <div class="twil-wordmark">webAI</div>
+    <div class="twil-product">TwIL-LM3 · Intelligence Lab</div>
+  </div>
+</div>
 """
 
 PLACEHOLDER = """
-<div style="padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center;">
-  <h1 style="font-size: 28px; margin-bottom: 2px; opacity: 0.55;">TwIL-LM3</h1>
-  <p style="font-size: 18px; margin-bottom: 2px; opacity: 0.65;">Ask a formal-logic question…</p>
+<div class="twil-empty">
+  <img class="twil-cube" src="/gradio_api/file=brand/webai-cube-256.webp" alt="" />
+  <h1>What should we work on?</h1>
+  <p>TwIL-LM3 is webAI's formal-logic model — entailment, FOL, Lean, rule induction.</p>
 </div>
 """
 
+FOOTER = """
+<p class="twil-disclaimer">This is AI and it can make mistakes</p>
+"""
+
 CSS = """
-#col-container { max-width: 1100px; margin: 0 auto; }
-.dark .gradio-container { color: var(--body-text-color); }
+:root {
+  --weba-bg: #ffffff;
+  --weba-subtle: #f4f4f4;
+  --weba-canvas: #f4f4f4;
+  --weba-fg: #161616;
+  --weba-muted: #737373;
+  --weba-secondary: #e8e8e8;
+  --weba-border: #e8e8e8;
+  --weba-composer: #ffffff;
+  --weba-primary: #232323;
+  --weba-primary-fg: #fafafa;
+  --weba-link: #2563eb;
+  --weba-radius: 12px;
+}
+.dark {
+  --weba-bg: #161616;
+  --weba-subtle: #232323;
+  --weba-canvas: #232323;
+  --weba-fg: #fafafa;
+  --weba-muted: #a8a8a8;
+  --weba-secondary: #323232;
+  --weba-border: rgba(255, 255, 255, 0.1);
+  --weba-composer: #161616;
+  --weba-primary: #e8e8e8;
+  --weba-primary-fg: #232323;
+  --weba-link: #3b82f6;
+}
+html, body, .gradio-container, .gradio-container .main,
+.gradio-container .contain, .fillable, .gradio-container .column {
+  background: var(--weba-canvas) !important;
+  color: var(--weba-fg) !important;
+}
+.gradio-container {
+  max-width: 768px !important;
+  margin: 0 auto !important;
+  padding: 12px 16px 24px !important;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
+}
+.dark .gradio-container { color: var(--weba-fg); }
+footer, .footer, .built-with, .settings-bar { display: none !important; }
+a { color: var(--weba-link) !important; }
+
+.twil-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 4px 18px;
+}
+.twil-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+}
+.twil-wordmark {
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.twil-product {
+  font-size: 12px;
+  color: var(--weba-muted);
+  line-height: 1.3;
+}
+.twil-empty {
+  padding: 48px 24px 32px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.twil-cube {
+  width: 96px;
+  height: 96px;
+  margin-bottom: 28px;
+}
+.twil-empty h1 {
+  font-size: 28px;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  margin: 0 0 10px;
+  color: var(--weba-fg);
+}
+.twil-empty p {
+  margin: 0;
+  max-width: 28rem;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--weba-muted);
+}
+.twil-disclaimer {
+  margin: 10px 0 0;
+  text-align: center;
+  font-size: 11px;
+  color: var(--weba-muted);
+  opacity: 0.85;
+}
+
+#twil-chat {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+#twil-chat .wrapper, #twil-chat .bubble-wrap, #twil-chat .message-wrap {
+  background: transparent !important;
+}
+#twil-chat .user, #twil-chat .message.user, #twil-chat .user-row .message,
+#twil-chat .bubble.user, #twil-chat [data-testid="user"] {
+  background: var(--weba-secondary) !important;
+  color: var(--weba-fg) !important;
+  border: none !important;
+  border-radius: 12px !important;
+}
+#twil-chat .bot, #twil-chat .message.bot, #twil-chat .bot-row .message,
+#twil-chat .bubble.bot {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+#twil-input textarea, #twil-input input, .input-container textarea {
+  background: var(--weba-composer) !important;
+  color: var(--weba-fg) !important;
+  border: 1px solid var(--weba-border) !important;
+  border-radius: 999px !important;
+  padding: 14px 18px !important;
+  font-size: 16px !important;
+  box-shadow: none !important;
+}
+.input-container, #twil-input {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+button.primary, .primary {
+  background: var(--weba-primary) !important;
+  color: var(--weba-primary-fg) !important;
+  border: none !important;
+  border-radius: 999px !important;
+}
+button.secondary, .secondary {
+  background: var(--weba-secondary) !important;
+  color: var(--weba-fg) !important;
+  border: 1px solid var(--weba-border) !important;
+  border-radius: 999px !important;
+}
+
+.examples, .samples {
+  gap: 8px !important;
+}
+.examples button, .sample {
+  background: var(--weba-bg) !important;
+  color: var(--weba-fg) !important;
+  border: 1px solid var(--weba-border) !important;
+  border-radius: 999px !important;
+  font-size: 13px !important;
+}
+.accordion, .label-wrap {
+  background: transparent !important;
+  border-color: var(--weba-border) !important;
+  color: var(--weba-muted) !important;
+}
 """
 
+THEME = gr.themes.Base(
+    primary_hue="zinc",
+    secondary_hue="zinc",
+    neutral_hue="zinc",
+    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font_mono=["ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+    radius_size=gr.themes.sizes.radius_lg,
+).set(
+    body_background_fill="#f4f4f4",
+    body_background_fill_dark="#232323",
+    body_text_color="#161616",
+    body_text_color_dark="#fafafa",
+    background_fill_primary="#ffffff",
+    background_fill_primary_dark="#161616",
+    background_fill_secondary="#e8e8e8",
+    background_fill_secondary_dark="#323232",
+    border_color_primary="#e8e8e8",
+    border_color_primary_dark="rgba(255,255,255,0.1)",
+    block_background_fill="transparent",
+    block_background_fill_dark="transparent",
+    block_border_width="0px",
+    block_shadow="none",
+    block_shadow_dark="none",
+    button_primary_background_fill="#232323",
+    button_primary_background_fill_dark="#e8e8e8",
+    button_primary_text_color="#fafafa",
+    button_primary_text_color_dark="#232323",
+    button_secondary_background_fill="#e8e8e8",
+    button_secondary_background_fill_dark="#323232",
+    button_secondary_text_color="#161616",
+    button_secondary_text_color_dark="#fafafa",
+    input_background_fill="#ffffff",
+    input_background_fill_dark="#161616",
+    input_border_color="#e8e8e8",
+    input_border_color_dark="rgba(255,255,255,0.1)",
+)
+
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForCausalLM.from_pretrained(
     MODEL_ID,
@@ -96,10 +300,12 @@ def chat_twil_lm3(
     top_p: float,
     enable_thinking: bool,
 ) -> Iterator[str]:
-    conversation = []
+    conversation = [{"role": "system", "content": SYSTEM_PROMPT}]
     for msg in history or []:
         role = msg.get("role", "user")
         content = msg.get("content", "")
+        if role == "system":
+            continue
         if isinstance(content, list):
             content = ""
         if role == "assistant":
@@ -155,20 +361,29 @@ def chat_twil_lm3(
 
 
 chatbot = gr.Chatbot(
-    height=450,
+    height=520,
     placeholder=PLACEHOLDER,
-    label="TwIL-LM3",
+    label="",
+    show_label=False,
     allow_tags=["think"],
     line_breaks=False,
+    layout="bubble",
+    avatar_images=(None, str(AVATAR) if AVATAR.exists() else None),
+    elem_id="twil-chat",
 )
 
-with gr.Blocks(theme=gr.themes.Soft(), css=CSS, fill_height=True) as demo:
+with gr.Blocks(fill_height=True) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(TITLE)
-        gr.Markdown(DESCRIPTION)
+        gr.HTML(HEADER)
         gr.ChatInterface(
             fn=chat_twil_lm3,
             chatbot=chatbot,
+            textbox=gr.Textbox(
+                placeholder="Ask webAI anything…",
+                show_label=False,
+                container=False,
+                elem_id="twil-input",
+            ),
             fill_height=True,
             concurrency_limit=1,
             additional_inputs_accordion=gr.Accordion(
@@ -217,9 +432,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, fill_height=True) as demo:
                 [
                     "Translate into first-order logic: Every student who studies hard passes at least one exam."
                 ],
-                [
-                    "Formalize in Lean 4: If n is even, then n^2 is even."
-                ],
+                ["Formalize in Lean 4: If n is even, then n^2 is even."],
                 [
                     "Is 'All birds fly. Tweety is a bird. Therefore Tweety flies.' logically valid? Explain."
                 ],
@@ -229,7 +442,11 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, fill_height=True) as demo:
             ],
             cache_examples=False,
         )
-        gr.Markdown(FOOTER)
+        gr.HTML(FOOTER)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        theme=THEME,
+        css=CSS,
+        allowed_paths=[str(ASSETS), str(ASSETS.parent)],
+    )