LLM Explorer: UI overhaul, remove Generator tab, add purple theme

- Remove Generator tab (Probability Explorer with show-steps-off covers it)
- Add Top-K sampling slider to Probability Explorer
- Temperature slider to 0 (greedy argmax at temp=0)
- Token display: remove quotes, trim whitespace, show symbol for spaces
- Step highlighting: only bold latest token, not all generated text
- Apply course palette (#63348d / #ded9f4), Merriweather headings
- Create justfile with push, push-hf, setup-hf targets
- Update CLAUDE.md files with session decisions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -1,13 +1,13 @@
-"""LLM Explorer — Interactive tools for understanding how LLMs work.
+"""LLM Explorer -- Interactive tools for understanding how LLMs work.
 
-Gradio app with three tabs:
-  1. Step-by-Step Probability Explorer
-  2. Interactive Generator
-  3. Tokenizer
+Gradio app with two tabs:
+  1. Probability Explorer (step-by-step or bulk generation)
+  2. Tokenizer
 
 Plus a password-protected Admin panel for runtime configuration.
 """
 
+import json
 import os
 
 import gradio as gr
@@ -15,10 +15,36 @@ import gradio as gr
 from models import AVAILABLE_MODELS, manager
 
 # ---------------------------------------------------------------------------
-# Admin password — set via env var on HF Spaces, or fall back to config/default
+# Admin password -- set via env var on HF Spaces, or fall back to default
 # ---------------------------------------------------------------------------
 ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "admin")
 
+# ---------------------------------------------------------------------------
+# Custom CSS
+# ---------------------------------------------------------------------------
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');
+
+.gradio-container {
+    max-width: 960px !important;
+}
+
+h1, h2, h3 {
+    font-family: 'Merriweather', serif !important;
+    color: #63348d !important;
+}
+
+.primary.svelte-1ee7cit, button.primary {
+    background: #63348d !important;
+    border-color: #63348d !important;
+}
+
+.primary.svelte-1ee7cit:hover, button.primary:hover {
+    background: #4e2870 !important;
+    border-color: #4e2870 !important;
+}
+"""
+
 # ---------------------------------------------------------------------------
 # HTML rendering helpers
 # ---------------------------------------------------------------------------
@@ -34,20 +60,37 @@ TOKEN_COLORS = [
 ]
 
 
-def _render_step_html(step_data: dict, prompt: str) -> str:
-    """Render one generation step as styled HTML."""
+def _esc(text: str) -> str:
+    """Escape HTML special characters."""
+    return text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+
+
+def _token_label(token_str: str) -> str:
+    """Format a token for display in probability table (no quotes, trimmed)."""
+    display = _esc(token_str).strip()
+    if not display:
+        return "\u2423"  # visible space symbol
+    return display
+
+
+def _render_step_html(step_data: dict, prompt: str, prev_generated: str) -> str:
+    """Render one generation step as styled HTML.
+
+    prev_generated is the text generated in all prior steps (between prompt
+    and the latest token), so only the newest token gets highlighted.
+    """
     s = step_data
-    generated = s["text"][len(prompt):]
+    latest_token = s["token"]
 
     # Build probability bar chart
     rows_html = ""
     for token_str, prob, tid in s["top_tokens"]:
         bar_width = max(1, int(prob * 300))
         is_selected = tid == s["token_id"]
-        bg = "#2563eb" if is_selected else "#94a3b8"
+        bg = "#63348d" if is_selected else "#c4b5d4"
         label_style = "font-weight:700;" if is_selected else ""
         arrow = " \u2190" if is_selected else ""
-        token_display = repr(token_str)
+        token_display = _token_label(token_str)
         rows_html += f"""
         <div style="display:flex;align-items:center;gap:8px;margin:2px 0;font-family:monospace;font-size:13px;">
           <span style="width:140px;text-align:right;color:#1e293b;{label_style}">{token_display}</span>
@@ -58,23 +101,23 @@ def _render_step_html(step_data: dict, prompt: str) -> str:
     return f"""
     <div style="border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin:8px 0;background:#fff;">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
-        <span style="font-weight:600;color:#1e293b;">Step {s['step']}</span>
+        <span style="font-family:'Merriweather',serif;font-weight:600;color:#63348d;">Step {s['step']}</span>
         <span style="color:#64748b;font-size:12px;">Entropy: {s['entropy']:.2f} bits</span>
       </div>
       <div style="font-family:monospace;font-size:14px;padding:8px;background:#f8fafc;border-radius:4px;margin-bottom:8px;word-wrap:break-word;">
-        <span style="color:#64748b;">{prompt}</span><span style="color:#1e293b;font-weight:600;">{generated}</span>
+        <span style="color:#94a3b8;">{_esc(prompt)}</span><span style="color:#1e293b;">{_esc(prev_generated)}</span><span style="background:#ded9f4;color:#63348d;font-weight:700;padding:1px 4px;border-radius:3px;">{_esc(latest_token)}</span>
       </div>
       {rows_html}
     </div>"""
 
 
 def _render_final_text_html(prompt: str, generated_text: str) -> str:
-    """Render just the final generated text."""
+    """Render just the final generated text (show-steps OFF mode)."""
     generated = generated_text[len(prompt):]
     return f"""
     <div style="border:1px solid #e2e8f0;border-radius:8px;padding:16px;background:#fff;">
       <div style="font-family:monospace;font-size:16px;line-height:1.6;word-wrap:break-word;">
-        <span style="color:#94a3b8;">{prompt}</span><span style="color:#1e293b;font-weight:600;">{generated}</span>
+        <span style="color:#94a3b8;">{_esc(prompt)}</span><span style="color:#1e293b;font-weight:600;">{_esc(generated)}</span>
       </div>
     </div>"""
 
@@ -84,8 +127,7 @@ def _render_tokens_html(tokens: list[tuple[str, int]]) -> str:
     chips = ""
     for i, (token_str, tid) in enumerate(tokens):
         bg, fg = TOKEN_COLORS[i % len(TOKEN_COLORS)]
-        # Escape HTML
-        display = token_str.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+        display = _esc(token_str)
         # Show spaces explicitly
         if display.strip() == "":
             display = repr(token_str).strip("'")
@@ -111,10 +153,10 @@ def _render_tokens_html(tokens: list[tuple[str, int]]) -> str:
 
 
 # ---------------------------------------------------------------------------
-# Tab 1: Step-by-Step Probability Explorer
+# Tab 1: Probability Explorer
 # ---------------------------------------------------------------------------
 
-def explore_probabilities(prompt, temperature, top_n, steps, show_steps, seed):
+def explore_probabilities(prompt, temperature, top_n, top_k, steps, show_steps, seed):
     """Generate tokens step by step and return formatted HTML."""
     if not manager.is_ready():
         return f"<p style='color:red;'>{manager.status_message()}</p>"
@@ -125,6 +167,7 @@ def explore_probabilities(prompt, temperature, top_n, steps, show_steps, seed):
         steps=int(steps),
         temperature=temperature,
         top_n=int(top_n),
+        top_k=int(top_k),
         seed=seed,
         show_steps=show_steps,
     )
@@ -133,7 +176,10 @@ def explore_probabilities(prompt, temperature, top_n, steps, show_steps, seed):
         return "<p>No results generated.</p>"
 
     if show_steps:
-        html_parts = [_render_step_html(r, prompt) for r in results]
+        html_parts = []
+        for i, r in enumerate(results):
+            prev_generated = results[i - 1]["text"][len(prompt):] if i > 0 else ""
+            html_parts.append(_render_step_html(r, prompt, prev_generated))
         return "\n".join(html_parts)
     else:
         final_text = results[-1]["text"]
@@ -147,27 +193,7 @@ def on_show_steps_change(show_steps):
 
 
 # ---------------------------------------------------------------------------
-# Tab 2: Interactive Generator
-# ---------------------------------------------------------------------------
-
-def generate_interactive(prompt, num_tokens, temperature, top_k, seed):
-    """Generate text and return it."""
-    if not manager.is_ready():
-        return f"*{manager.status_message()}*"
-
-    seed = int(seed)
-    text = manager.generate_text(
-        prompt=prompt,
-        num_tokens=int(num_tokens),
-        temperature=temperature,
-        top_k=int(top_k),
-        seed=seed,
-    )
-    return text
-
-
-# ---------------------------------------------------------------------------
-# Tab 3: Tokenizer
+# Tab 2: Tokenizer
 # ---------------------------------------------------------------------------
 
 def tokenize_text(text):
@@ -209,9 +235,6 @@ def admin_save_defaults(prompt, temperature, top_n, steps, seed):
     return "Defaults saved."
 
 
-import json
-
-
 # ---------------------------------------------------------------------------
 # Build the Gradio app
 # ---------------------------------------------------------------------------
@@ -219,9 +242,29 @@ import json
 def create_app():
     cfg = manager.get_config()
 
+    theme = gr.themes.Soft(
+        primary_hue=gr.themes.Color(
+            c50="#faf8fc",
+            c100="#f3f0f7",
+            c200="#ded9f4",
+            c300="#c4b5e0",
+            c400="#a78bcc",
+            c500="#8b5fb8",
+            c600="#7c3aad",
+            c700="#63348d",
+            c800="#52296f",
+            c900="#421f59",
+            c950="#2a1339",
+        ),
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+        font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
+    )
+
     with gr.Blocks(
         title="LLM Explorer",
-        theme=gr.themes.Soft(),
+        theme=theme,
+        css=CUSTOM_CSS,
     ) as demo:
         gr.Markdown("# LLM Explorer\n*Interactive tools for understanding how LLMs work*")
 
@@ -254,14 +297,20 @@ def create_app():
             with gr.Row():
                 t1_temperature = gr.Slider(
                     label="Temperature",
-                    minimum=0.1, maximum=2.5, step=0.1,
+                    minimum=0, maximum=2.5, step=0.1,
                     value=cfg.get("default_temperature", 0.8),
                 )
                 t1_top_n = gr.Slider(
-                    label="Top-N tokens",
+                    label="Top-N display",
                     minimum=5, maximum=30, step=1,
                     value=cfg.get("default_top_n", 10),
                 )
+                t1_top_k = gr.Slider(
+                    label="Top-K sampling",
+                    minimum=0, maximum=100, step=1,
+                    value=0,
+                    info="0 = sample from full vocabulary",
+                )
                 t1_steps = gr.Slider(
                     label="Steps",
                     minimum=1, maximum=20, step=1,
@@ -287,79 +336,12 @@ def create_app():
 
             t1_generate_btn.click(
                 fn=explore_probabilities,
-                inputs=[t1_prompt, t1_temperature, t1_top_n, t1_steps, t1_show_steps, t1_seed],
+                inputs=[t1_prompt, t1_temperature, t1_top_n, t1_top_k, t1_steps, t1_show_steps, t1_seed],
                 outputs=[t1_output],
             )
 
         # ==================================================================
-        # Tab 2: Interactive Generator
-        # ==================================================================
-        with gr.Tab("Generator"):
-            gr.Markdown("### Interactive Text Generator")
-            gr.Markdown(
-                "Generate text from a prompt. Adjust temperature and top-k, "
-                "then release the slider to regenerate with the same seed."
-            )
-
-            t2_prompt = gr.Textbox(
-                label="Prompt",
-                value=cfg.get("default_prompt", "The best thing about Huston-Tillotson University is"),
-                lines=2,
-            )
-
-            with gr.Row():
-                t2_num_tokens = gr.Slider(
-                    label="Tokens to generate",
-                    minimum=5, maximum=100, step=1,
-                    value=30,
-                )
-                t2_temperature = gr.Slider(
-                    label="Temperature",
-                    minimum=0.1, maximum=2.5, step=0.1,
-                    value=cfg.get("default_temperature", 0.8),
-                )
-                t2_top_k = gr.Slider(
-                    label="Top-K",
-                    minimum=1, maximum=100, step=1,
-                    value=40,
-                )
-
-            with gr.Accordion(f"Seed: {cfg.get('default_seed', 42)}", open=False):
-                t2_seed = gr.Number(
-                    label="Random seed",
-                    value=cfg.get("default_seed", 42),
-                    precision=0,
-                )
-
-            t2_generate_btn = gr.Button("Generate", variant="primary")
-            t2_output = gr.Textbox(
-                label="Generated text",
-                lines=8,
-                interactive=False,
-            )
-
-            gen_inputs = [t2_prompt, t2_num_tokens, t2_temperature, t2_top_k, t2_seed]
-
-            t2_generate_btn.click(
-                fn=generate_interactive,
-                inputs=gen_inputs,
-                outputs=[t2_output],
-            )
-
-            # Slider release events trigger regeneration
-            t2_temperature.release(
-                fn=generate_interactive,
-                inputs=gen_inputs,
-                outputs=[t2_output],
-            )
-            t2_top_k.release(
-                fn=generate_interactive,
-                inputs=gen_inputs,
-                outputs=[t2_output],
-            )
-
-        # ==================================================================
-        # Tab 3: Tokenizer
+        # Tab 2: Tokenizer
         # ==================================================================
         with gr.Tab("Tokenizer"):
             gr.Markdown("### Token Visualization")

models.py

@@ -6,7 +6,6 @@ Provides inference methods for next-token probabilities and step-by-step generat
 
 import gc
 import json
-import math
 import os
 import threading
 from pathlib import Path
@@ -243,6 +242,7 @@ class ModelManager:
         steps: int = 8,
         temperature: float = 0.8,
         top_n: int = 10,
+        top_k: int = 0,
         seed: int = 42,
         show_steps: bool = True,
     ) -> list[dict]:
@@ -265,13 +265,25 @@ class ModelManager:
 
         for i in range(steps):
             logits = self._get_logits(text)
+
+            # Apply top-k filtering before temperature
+            if top_k > 0:
+                top_k_vals, top_k_idxs = torch.topk(logits, k=min(top_k, logits.shape[0]))
+                mask = torch.full_like(logits, float("-inf"))
+                mask.scatter_(0, top_k_idxs, top_k_vals)
+                logits = mask
+
             probs = self.apply_temperature(logits, temperature)
             entropy = self.entropy_bits(probs)
             top_tokens = self.top_k_table(probs, k=top_n) if show_steps else []
 
-            # Sample with deterministic seed per step
-            rng.manual_seed(seed + i)
-            idx = torch.multinomial(probs.cpu(), num_samples=1, generator=rng).item()
+            # Temperature 0 = greedy (always pick highest probability)
+            if temperature == 0:
+                idx = torch.argmax(probs).item()
+            else:
+                rng.manual_seed(seed + i)
+                idx = torch.multinomial(probs.cpu(), num_samples=1, generator=rng).item()
+
             token_str = self.tokenizer.decode([idx])
             text += token_str
 
@@ -286,40 +298,6 @@ class ModelManager:
 
         return results
 
-    def generate_text(
-        self,
-        prompt: str,
-        num_tokens: int = 30,
-        temperature: float = 0.8,
-        top_k: int = 40,
-        seed: int = 42,
-    ) -> str:
-        """Generate text with top-k sampling. Returns prompt + generated text."""
-        if not self.is_ready():
-            return prompt
-
-        text = prompt
-        rng = torch.Generator()
-
-        for i in range(num_tokens):
-            logits = self._get_logits(text)
-
-            # Apply top-k filtering
-            if top_k > 0:
-                top_k_vals, top_k_idxs = torch.topk(logits, k=min(top_k, logits.shape[0]))
-                mask = torch.full_like(logits, float("-inf"))
-                mask.scatter_(0, top_k_idxs, top_k_vals)
-                logits = mask
-
-            probs = self.apply_temperature(logits, temperature)
-
-            rng.manual_seed(seed + i)
-            idx = torch.multinomial(probs.cpu(), num_samples=1, generator=rng).item()
-            token_str = self.tokenizer.decode([idx])
-            text += token_str
-
-        return text
-
     def tokenize(self, text: str) -> list[tuple[str, int]]:
         """Tokenize text and return list of (token_str, token_id)."""
         if self.tokenizer is None: