Polish webAI UI and collapse Logic traces by default

app.py

@@ -4,22 +4,29 @@ from collections.abc import Iterator
 from pathlib import Path
 from threading import Thread
 
-import spaces
-import torch
+PREVIEW = os.getenv("TWIL_UI_PREVIEW") == "1"
+
+if not PREVIEW:
+    import spaces
+    import torch
+    from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+else:
+
+    class spaces:  # type: ignore[no-redef]
+        @staticmethod
+        def GPU(duration=None, **kwargs):
+            def decorator(fn):
+                return fn
+
+            return decorator
+
 import gradio as gr
-from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
 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
-# section via allow_tags=["think"]. Built with chr() so the literal tags are
-# not written into the source.
 THINK_OPEN = chr(60) + "think" + chr(62)
 THINK_CLOSE = chr(60) + chr(47) + "think" + chr(62)
 _THINK_RE = re.compile(
@@ -33,6 +40,21 @@ SYSTEM_PROMPT = (
     f"Work through the problem in a {THINK_OPEN} block, then give a concise, precise answer."
 )
 
+CHIPS = [
+    (
+        "Analyze an argument",
+        "Analyze this argument: identify the premises and the conclusion, say whether it is valid, and name any fallacy.\n\n",
+    ),
+    (
+        "Check an entailment",
+        "Do these premises entail the conclusion? Give a formal proof or a counterexample.\n\nPremise 1: \nPremise 2: \nConclusion: ",
+    ),
+    (
+        "Translate to FOL",
+        "Translate into first-order logic: Every student who studies hard passes at least one exam.",
+    ),
+]
+
 HEADER = """
 <div class="twil-header">
   <img class="twil-mark" src="/gradio_api/file=brand/AppiCon.svg" alt="webAI" />
@@ -51,28 +73,18 @@ PLACEHOLDER = """
 </div>
 """
 
-FOOTER = """
-<p class="twil-disclaimer">This is AI and it can make mistakes</p>
-"""
-
 CSS = """
 :root {
-  --weba-bg: #ffffff;
-  --weba-subtle: #f4f4f4;
   --weba-canvas: #f4f4f4;
   --weba-fg: #161616;
   --weba-muted: #737373;
   --weba-secondary: #e8e8e8;
-  --weba-border: #e8e8e8;
+  --weba-border: rgba(22, 22, 22, 0.1);
   --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;
@@ -81,143 +93,215 @@ CSS = """
   --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 {
+
+* { box-shadow: none !important; text-shadow: none !important; }
+html, body, #root, .gradio-container, .gradio-container > .main,
+.gradio-container .contain, .fillable, .gradio-container .wrap,
+.gradio-container .column, .gradio-container .row, .contain, .wrapper {
   background: var(--weba-canvas) !important;
-  color: var(--weba-fg) !important;
+  box-shadow: none !important;
+  filter: none !important;
+}
+html, body, .gradio-container, .gradio-container > .main, .fillable,
+.contain, .gradio-container .wrap, .app {
+  height: 100% !important;
+  min-height: 100vh !important;
+  max-height: 100vh !important;
+  max-width: none !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+}
+.gradio-container, .main.fillable, .contain {
+  display: flex !important;
+  flex-direction: column !important;
+  padding: 0 !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;
+  color: var(--weba-fg) !important;
+}
+footer, .footer, .built-with, .settings, .settings-bar, .show-api,
+.show-api-divider, .divider {
+  display: none !important;
+}
+
+#app-shell {
+  flex: 1 1 auto !important;
+  height: 100% !important;
+  max-height: 100% !important;
+  min-height: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  padding: 16px 24px 12px !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  background: var(--weba-canvas) !important;
+}
+#app-shell > .gap, #app-shell > div {
+  background: transparent !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;
+  padding: 4px 0 8px;
+  flex-shrink: 0;
 }
+.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; color: var(--weba-fg); }
+.twil-product { font-size: 12px; color: var(--weba-muted); line-height: 1.3; }
+
 .twil-empty {
-  padding: 48px 24px 32px;
-  text-align: center;
+  height: 100%;
+  min-height: 280px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 12px;
 }
-.twil-cube {
-  width: 96px;
-  height: 96px;
-  margin-bottom: 28px;
-}
+.twil-cube { width: 96px; height: 96px; margin-bottom: 24px; }
 .twil-empty h1 {
   font-size: 28px;
   font-weight: 500;
   letter-spacing: -0.03em;
-  margin: 0 0 10px;
+  margin: 0 0 8px;
   color: var(--weba-fg);
 }
 .twil-empty p {
   margin: 0;
   max-width: 28rem;
-  font-size: 16px;
+  font-size: 15px;
   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 {
+#twil-chat, #twil-chat > .wrapper, #twil-chat .bubble-wrap,
+#twil-chat .message-wrap, #twil-chat .placeholder-content {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
 }
-#twil-chat .wrapper, #twil-chat .bubble-wrap, #twil-chat .message-wrap {
-  background: transparent !important;
+#twil-chat {
+  max-width: 768px !important;
+  width: 100% !important;
+  margin: 0 auto !important;
 }
-#twil-chat .user, #twil-chat .message.user, #twil-chat .user-row .message,
-#twil-chat .bubble.user, #twil-chat [data-testid="user"] {
+#twil-chat .message.user, #twil-chat .user, #twil-chat .bubble.user {
   background: var(--weba-secondary) !important;
   color: var(--weba-fg) !important;
   border: none !important;
+  box-shadow: none !important;
   border-radius: 12px !important;
 }
-#twil-chat .bot, #twil-chat .message.bot, #twil-chat .bot-row .message,
-#twil-chat .bubble.bot {
+#twil-chat .message.bot, #twil-chat .bot, #twil-chat .bubble.bot {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
 }
+#twil-chat [aria-label="Delete"], #twil-chat [aria-label="Copy"],
+#twil-chat [aria-label="Share"], #twil-chat .message-buttons {
+  display: none !important;
+}
+#twil-chat details, #twil-chat .thought, #twil-chat .md.thought {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--weba-muted) !important;
+}
 
-#twil-input textarea, #twil-input input, .input-container textarea {
+#composer-row {
+  max-width: 768px !important;
+  width: 100% !important;
+  margin: 8px auto 0 !important;
+  flex-shrink: 0 !important;
+  background: transparent !important;
+}
+#chips-row {
+  max-width: 768px !important;
+  width: 100% !important;
+  margin: 0 auto !important;
+  display: flex !important;
+  flex-wrap: wrap !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  flex-shrink: 0 !important;
+  background: transparent !important;
+  padding: 4px 0 8px !important;
+}
+#chips-row button {
+  height: 32px !important;
+  padding: 0 14px !important;
+  border-radius: 999px !important;
+  border: 1px solid var(--weba-border) !important;
+  background: transparent !important;
+  color: var(--weba-muted) !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 400 !important;
+}
+#chips-row button:hover {
+  background: var(--weba-secondary) !important;
+  color: var(--weba-fg) !important;
+}
+
+#twil-input 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;
+  padding: 16px 18px !important;
   font-size: 16px !important;
   box-shadow: none !important;
+  resize: none !important;
 }
-.input-container, #twil-input {
+#twil-input, #twil-input > .wrap, #composer-row .form,
+#composer-row .block, #composer-row .padded {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
+  padding: 0 !important;
 }
 
-button.primary, .primary {
-  background: var(--weba-primary) !important;
-  color: var(--weba-primary-fg) !important;
-  border: none !important;
+#send-btn {
+  min-width: 40px !important;
+  width: 40px !important;
+  height: 40px !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;
+  border: none !important;
+  box-shadow: none !important;
+  align-self: center !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 {
+#params-box {
+  max-width: 768px !important;
+  margin: 4px auto 0 !important;
   background: transparent !important;
-  border-color: var(--weba-border) !important;
+  border: none !important;
+  box-shadow: none !important;
+  flex-shrink: 0 !important;
+}
+#params-box .label-wrap, #params-box .icon {
   color: var(--weba-muted) !important;
+  font-size: 12px !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+.twil-disclaimer {
+  margin: 8px 0 0;
+  text-align: center;
+  font-size: 11px;
+  color: var(--weba-muted);
+  flex-shrink: 0;
 }
 """
 
@@ -226,92 +310,108 @@ THEME = gr.themes.Base(
     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_primary="transparent",
+    background_fill_primary_dark="transparent",
     background_fill_secondary="#e8e8e8",
     background_fill_secondary_dark="#323232",
-    border_color_primary="#e8e8e8",
+    border_color_primary="rgba(22,22,22,0.1)",
     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",
+    shadow_drop="none",
+    shadow_drop_lg="none",
+    input_background_fill="#ffffff",
+    input_background_fill_dark="#161616",
+    input_border_color="rgba(22,22,22,0.1)",
+    input_border_color_dark="rgba(255,255,255,0.1)",
+    input_shadow="none",
     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)",
+    button_secondary_shadow="none",
 )
 
-tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
-model = AutoModelForCausalLM.from_pretrained(
-    MODEL_ID,
-    dtype=torch.bfloat16,
-    attn_implementation="sdpa",
-).to("cuda")
-model.eval()
-model.generation_config.use_cache = True
+tokenizer = None
+model = None
+EOS_TOKEN_ID = None
 
-EOS_TOKEN_ID = tokenizer.eos_token_id
+if not PREVIEW:
+    tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
+    model = AutoModelForCausalLM.from_pretrained(
+        MODEL_ID,
+        dtype=torch.bfloat16,
+        attn_implementation="sdpa",
+    ).to("cuda")
+    model.eval()
+    model.generation_config.use_cache = True
+    EOS_TOKEN_ID = tokenizer.eos_token_id
 
 
 def _strip_thinking(text: str) -> str:
-    """Drop the reasoning trace from a prior assistant turn before re-prompting."""
     if not isinstance(text, str):
         return ""
     return _THINK_RE.sub("", text).strip()
 
 
-def _gpu_seconds(
-    message,
-    history,
-    max_new_tokens=2048,
-    temperature=0,
-    top_p=0.95,
-    enable_thinking=True,
-    *args,
-    **kwargs,
-):
+def _parse_think(raw: str) -> tuple[str, str, bool]:
+    """Return (think, answer, think_open) from a possibly streaming reply."""
+    open_idx = raw.find(THINK_OPEN)
+    if open_idx == -1:
+        return "", raw, False
+    rest = raw[open_idx + len(THINK_OPEN) :]
+    close_idx = rest.find(THINK_CLOSE)
+    before = raw[:open_idx]
+    if close_idx == -1:
+        return rest.strip(), before.strip(), True
+    think = rest[:close_idx].strip()
+    answer = (before + rest[close_idx + len(THINK_CLOSE) :]).strip()
+    return think, answer, False
+
+
+def _gpu_seconds(message, history, max_new_tokens=2048, *args, **kwargs):
     tokens = int(max_new_tokens or 2048)
     return min(180, max(45, 25 + tokens // 18))
 
 
-@spaces.GPU(duration=_gpu_seconds)
-def chat_twil_lm3(
-    message: str,
-    history: list,
-    max_new_tokens: int,
-    temperature: float,
-    top_p: float,
-    enable_thinking: bool,
-) -> Iterator[str]:
+def _history_for_model(history: list) -> list[dict]:
     conversation = [{"role": "system", "content": SYSTEM_PROMPT}]
     for msg in history or []:
         role = msg.get("role", "user")
-        content = msg.get("content", "")
-        if role == "system":
+        if role == "system" or msg.get("metadata"):
             continue
+        content = msg.get("content", "")
         if isinstance(content, list):
             content = ""
         if role == "assistant":
             content = _strip_thinking(content)
-        conversation.append({"role": role, "content": content})
-    conversation.append({"role": "user", "content": message})
+        if content:
+            conversation.append({"role": role, "content": content})
+    return conversation
+
+
+def _stream_tokens(conversation: list[dict], max_new_tokens: int, temperature: float, top_p: float, enable_thinking: bool) -> Iterator[str]:
+    if PREVIEW:
+        demo = (
+            f"{THINK_OPEN}\n"
+            "Check the premises, then the conclusion. The argument is a classic Barbara syllogism.\n"
+            f"{THINK_CLOSE}\n\n"
+            "Answer: entailment."
+        )
+        acc = ""
+        for ch in demo:
+            acc += ch
+            yield acc
+        return
 
     encoded = tokenizer.apply_chat_template(
         conversation,
@@ -325,13 +425,10 @@ def chat_twil_lm3(
     if input_ids.shape[1] > MAX_INPUT_TOKEN_LENGTH:
         input_ids = input_ids[:, -MAX_INPUT_TOKEN_LENGTH:]
         attention_mask = attention_mask[:, -MAX_INPUT_TOKEN_LENGTH:]
-        gr.Warning(
-            f"Trimmed the conversation to the last {MAX_INPUT_TOKEN_LENGTH} tokens."
-        )
+        gr.Warning(f"Trimmed the conversation to the last {MAX_INPUT_TOKEN_LENGTH} tokens.")
 
     input_ids = input_ids.to(model.device)
     attention_mask = attention_mask.to(model.device)
-
     streamer = TextIteratorStreamer(
         tokenizer, timeout=30.0, skip_prompt=True, skip_special_tokens=True
     )
@@ -353,100 +450,123 @@ def chat_twil_lm3(
         generate_kwargs["top_p"] = float(top_p)
 
     Thread(target=model.generate, kwargs=generate_kwargs, daemon=True).start()
-
-    chunks: list[str] = []
+    acc = ""
     for text in streamer:
-        chunks.append(text)
-        yield "".join(chunks)
-
-
-chatbot = gr.Chatbot(
-    height=520,
-    placeholder=PLACEHOLDER,
-    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",
-)
+        acc += text
+        yield acc
+
+
+def _generate(message, history, max_new_tokens, temperature, top_p, enable_thinking):
+    history = [dict(m) if isinstance(m, dict) else m for m in (history or [])]
+    history.append({"role": "user", "content": message})
+    conversation = _history_for_model(history)
+
+    think_msg = {
+        "role": "assistant",
+        "content": "",
+        "metadata": {"title": "Logicizing…", "status": "pending"},
+    }
+    answer_msg = {"role": "assistant", "content": ""}
+    history.append(think_msg)
+    yield history
+
+    for raw in _stream_tokens(
+        conversation, max_new_tokens, temperature, top_p, enable_thinking
+    ):
+        think, answer, think_open = _parse_think(raw)
+        if think or think_open:
+            think_msg["content"] = think
+            think_msg["metadata"] = {
+                "title": "Logicizing…" if think_open else "Logic",
+                "status": "pending" if think_open else "done",
+            }
+        if answer:
+            answer_msg["content"] = answer
+            if not any(m is answer_msg for m in history):
+                history.append(answer_msg)
+        elif not think_open and not think and raw.strip():
+            answer_msg["content"] = raw.strip()
+            if not any(m is answer_msg for m in history):
+                history.append(answer_msg)
+        yield history
+
+    if think_msg["content"]:
+        think_msg["metadata"] = {"title": "Logic", "status": "done"}
+        yield history
+    elif think_msg in history:
+        history.remove(think_msg)
+        yield history
 
-with gr.Blocks(fill_height=True) as demo:
-    with gr.Column(elem_id="col-container"):
+
+@spaces.GPU(duration=_gpu_seconds)
+def submit(message, history, max_new_tokens, temperature, top_p, enable_thinking):
+    message = (message or "").strip()
+    if not message:
+        yield "", history, gr.skip()
+        return
+    first = True
+    for updated in _generate(
+        message, history, max_new_tokens, temperature, top_p, enable_thinking
+    ):
+        if first:
+            yield "", updated, gr.update(visible=False)
+            first = False
+        else:
+            yield gr.skip(), updated, gr.skip()
+
+
+with gr.Blocks(fill_height=True, fill_width=True, elem_id="app-root") as demo:
+    with gr.Column(elem_id="app-shell"):
         gr.HTML(HEADER)
-        gr.ChatInterface(
-            fn=chat_twil_lm3,
-            chatbot=chatbot,
-            textbox=gr.Textbox(
+        chatbot = gr.Chatbot(
+            value=[],
+            placeholder=PLACEHOLDER,
+            label="",
+            show_label=False,
+            layout="bubble",
+            avatar_images=(None, str(AVATAR) if AVATAR.exists() else None),
+            allow_tags=["think"],
+            reasoning_tags=[(THINK_OPEN, THINK_CLOSE)],
+            buttons=None,
+            editable=False,
+            line_breaks=False,
+            elem_id="twil-chat",
+            scale=1,
+            height="100%",
+        )
+        with gr.Row(elem_id="chips-row") as chips_row:
+            chip_btns = [
+                gr.Button(label, variant="secondary", size="sm", elem_classes=["twil-chip"])
+                for label, _ in CHIPS
+            ]
+        with gr.Row(elem_id="composer-row"):
+            prompt = gr.Textbox(
                 placeholder="Ask webAI anything…",
                 show_label=False,
                 container=False,
+                lines=1,
+                max_lines=6,
                 elem_id="twil-input",
-            ),
-            fill_height=True,
-            concurrency_limit=1,
-            additional_inputs_accordion=gr.Accordion(
-                label="Parameters", open=False, render=False
-            ),
-            additional_inputs=[
-                gr.Slider(
-                    minimum=256,
-                    maximum=4096,
-                    step=256,
-                    value=2048,
-                    label="Max new tokens",
-                    render=False,
-                    info="Keep this at 2048+ so the reasoning trace is not truncated.",
-                ),
-                gr.Slider(
-                    minimum=0,
-                    maximum=1.5,
-                    step=0.05,
-                    value=0,
-                    label="Temperature (0 = greedy)",
-                    render=False,
-                    info="Greedy (0) matches the published evaluation.",
-                ),
-                gr.Slider(
-                    minimum=0.1,
-                    maximum=1.0,
-                    step=0.05,
-                    value=0.95,
-                    label="Top-p",
-                    render=False,
-                    info="Used only when temperature > 0.",
-                ),
-                gr.Checkbox(
-                    value=True,
-                    label="Enable thinking (reasoning trace)",
-                    render=False,
-                    info="When on, the model reasons in a hidden block before answering.",
-                ),
-            ],
-            examples=[
-                [
-                    "Does 'All dogs are mammals. Rex is a dog.' entail 'Rex is a mammal'? "
-                    "Answer entailment, contradiction, or neutral."
-                ],
-                [
-                    "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."],
-                [
-                    "Is 'All birds fly. Tweety is a bird. Therefore Tweety flies.' logically valid? Explain."
-                ],
-                [
-                    "Formalize and evaluate: If it rains, the ground is wet. The ground is not wet. Therefore it did not rain."
-                ],
-            ],
-            cache_examples=False,
-        )
-        gr.HTML(FOOTER)
+                scale=8,
+            )
+            send = gr.Button("↑", elem_id="send-btn", scale=0)
+        with gr.Accordion("Parameters", open=False, elem_id="params-box"):
+            max_new_tokens = gr.Slider(256, 4096, value=2048, step=256, label="Max new tokens")
+            temperature = gr.Slider(0, 1.5, value=0, step=0.05, label="Temperature (0 = greedy)")
+            top_p = gr.Slider(0.1, 1.0, value=0.95, step=0.05, label="Top-p")
+            enable_thinking = gr.Checkbox(value=True, label="Enable thinking")
+        gr.HTML('<p class="twil-disclaimer">This is AI and it can make mistakes</p>')
+
+    inputs = [prompt, chatbot, max_new_tokens, temperature, top_p, enable_thinking]
+    send.click(submit, inputs, [prompt, chatbot, chips_row], concurrency_limit=1)
+    prompt.submit(submit, inputs, [prompt, chatbot, chips_row], concurrency_limit=1)
+    for btn, (_, template) in zip(chip_btns, CHIPS):
+        btn.click(lambda t=template: t, outputs=prompt)
 
 if __name__ == "__main__":
     demo.launch(
         theme=THEME,
         css=CSS,
         allowed_paths=[str(ASSETS), str(ASSETS.parent)],
+        ssr_mode=False,
     )