Capture decisions: 5 LLM Explorer bug fixes

- Dark mode button text synced on page load via demo.load() JS
- Dark mode heading colors: setProperty with !important beats stylesheet
- Entropy NaN fix: filter probs > 0 instead of p + eps
- Merged Top-N + Top-K into single Top-K slider (5-100)
- Show-steps-off highlight: strip leading whitespace before span

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

app.py

@@ -76,6 +76,8 @@ h1, h2, h3,
     color: #63348d !important;
 }
 body.dark h1, body.dark h2, body.dark h3,
+body.dark .gradio-container h1, body.dark .gradio-container h2, body.dark .gradio-container h3,
+.dark h1, .dark h2, .dark h3,
 .dark .gradio-container h1, .dark .gradio-container h2, .dark .gradio-container h3 {
     color: #ded9f4 !important;
 }
@@ -146,13 +148,30 @@ body.dark, .dark {
 }
 """
 
-# Dark mode toggle JS — toggles class and swaps button text
+# Dark mode toggle JS — toggles class and swaps button text + heading colors
 DARK_MODE_JS = """
 () => {
     document.body.classList.toggle('dark');
     const isDark = document.body.classList.contains('dark');
     const el = document.getElementById('dark-mode-btn');
     if (el) el.innerText = isDark ? 'Light mode' : 'Dark mode';
+    document.querySelectorAll('h1, h2, h3').forEach(h => {
+        h.style.setProperty('color', isDark ? '#ded9f4' : '#63348d', 'important');
+    });
+}
+"""
+
+# Dark mode init JS — sync button text and heading colors on page load
+DARK_MODE_INIT_JS = """
+() => {
+    const isDark = document.body.classList.contains('dark');
+    const el = document.getElementById('dark-mode-btn');
+    if (el) el.innerText = isDark ? 'Light mode' : 'Dark mode';
+    if (isDark) {
+        document.querySelectorAll('h1, h2, h3').forEach(h => {
+            h.style.setProperty('color', '#ded9f4', 'important');
+        });
+    }
 }
 """
 
@@ -250,11 +269,14 @@ def _render_step_html(step_data: dict, prompt: str, prev_generated: str) -> str:
 def _render_final_text_html(prompt: str, generated_text: str) -> str:
     """Render final text with all generated text highlighted (show-steps OFF mode)."""
     generated = generated_text[len(prompt):]
+    escaped = _esc(generated)
+    stripped = escaped.lstrip()
+    leading = escaped[:len(escaped) - len(stripped)]
 
     return f"""
     <div style="border:1px solid var(--llm-card-border);border-radius:8px;padding:16px;background:var(--llm-card-bg);">
       <div style="font-family:monospace;font-size:16px;line-height:1.6;word-wrap:break-word;">
-        <span style="color:var(--llm-prompt-color);">{_esc(prompt)}</span><span style="background:var(--llm-highlight-bg);color:var(--llm-highlight-color);font-weight:600;padding:2px 6px;border-radius:4px;">{_esc(generated)}</span>
+        <span style="color:var(--llm-prompt-color);">{_esc(prompt)}</span>{leading}<span style="background:var(--llm-highlight-bg);color:var(--llm-highlight-color);font-weight:600;padding:2px 6px;border-radius:4px;">{stripped}</span>
       </div>
     </div>"""
 
@@ -286,7 +308,7 @@ def _render_tokens_html(tokens: list[tuple[str, int]]) -> str:
 # Tab 1: Probability Explorer
 # ---------------------------------------------------------------------------
 
-def explore_probabilities(prompt, temperature, top_n, top_k, steps, show_steps, seed):
+def explore_probabilities(prompt, temperature, 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>"
@@ -296,7 +318,6 @@ def explore_probabilities(prompt, temperature, top_n, top_k, steps, show_steps,
         prompt=prompt,
         steps=int(steps),
         temperature=temperature,
-        top_n=int(top_n),
         top_k=int(top_k),
         seed=seed,
         show_steps=show_steps,
@@ -353,12 +374,12 @@ def admin_load_model(model_name):
     return status, json.dumps(cfg, indent=2)
 
 
-def admin_save_defaults(prompt, temperature, top_n, steps, seed):
+def admin_save_defaults(prompt, temperature, top_k, steps, seed):
     """Save default settings."""
     manager.update_config(
         default_prompt=prompt,
         default_temperature=temperature,
-        default_top_n=int(top_n),
+        default_top_k=int(top_k),
         default_steps=int(steps),
         default_seed=int(seed),
     )
@@ -416,27 +437,14 @@ def create_app():
                 elem_classes=["param-help"],
             )
 
-            t1_top_n = gr.Slider(
-                label="Top-N display",
-                minimum=5, maximum=30, step=1,
-                value=cfg.get("default_top_n", 10),
-            )
-            gr.Markdown(
-                "How many candidate tokens to show in the probability table. "
-                "Only affects the display, not which token gets selected.",
-                elem_classes=["param-help"],
-            )
-
             t1_top_k = gr.Slider(
-                label="Top-K sampling",
-                minimum=0, maximum=100, step=1,
-                value=0,
+                label="Top-K",
+                minimum=5, maximum=100, step=1,
+                value=cfg.get("default_top_k", 10),
             )
             gr.Markdown(
-                "Limits which tokens the model can pick from. "
-                "At 0, the full vocabulary is available. "
-                "At 40, only the 40 most likely tokens are considered "
-                "and everything else is ignored.",
+                "Limits which tokens the model considers and how many "
+                "appear in the probability table.",
                 elem_classes=["param-help"],
             )
 
@@ -486,7 +494,7 @@ def create_app():
 
             t1_generate_btn.click(
                 fn=explore_probabilities,
-                inputs=[t1_prompt, t1_temperature, t1_top_n, t1_top_k, t1_steps, t1_show_steps, t1_seed],
+                inputs=[t1_prompt, t1_temperature, t1_top_k, t1_steps, t1_show_steps, t1_seed],
                 outputs=[t1_output],
             )
 
@@ -553,9 +561,9 @@ def create_app():
                         label="Default temperature",
                         value=cfg.get("default_temperature", 0.8),
                     )
-                    admin_top_n = gr.Number(
-                        label="Default top-n",
-                        value=cfg.get("default_top_n", 10),
+                    admin_top_k_admin = gr.Number(
+                        label="Default top-k",
+                        value=cfg.get("default_top_k", 10),
                         precision=0,
                     )
                     admin_steps = gr.Number(
@@ -596,10 +604,13 @@ def create_app():
             # Save defaults
             admin_save_btn.click(
                 fn=admin_save_defaults,
-                inputs=[admin_prompt, admin_temp, admin_top_n, admin_steps, admin_seed],
+                inputs=[admin_prompt, admin_temp, admin_top_k_admin, admin_steps, admin_seed],
                 outputs=[admin_save_msg],
             )
 
+        # Sync dark mode button text on page load
+        demo.load(fn=None, js=DARK_MODE_INIT_JS)
+
     return demo
 
 

config.json

@@ -1,8 +1,8 @@
 {
-  "model": "GPT-OSS-20B",
+  "model": "Qwen2.5-3B",
   "default_prompt": "The best thing about Huston-Tillotson University is",
   "default_temperature": 0.8,
-  "default_top_n": 10,
+  "default_top_k": 10,
   "default_steps": 8,
   "default_seed": 42
 }

models.py

@@ -73,7 +73,7 @@ def _load_config() -> dict:
         "model": DEFAULT_MODEL,
         "default_prompt": "The best thing about Huston-Tillotson University is",
         "default_temperature": 0.8,
-        "default_top_n": 10,
+        "default_top_k": 10,
         "default_steps": 8,
         "default_seed": 42,
     }
@@ -223,8 +223,7 @@ class ModelManager:
     @staticmethod
     def entropy_bits(probs: torch.Tensor) -> float:
         """Shannon entropy in bits."""
-        eps = 1e-20
-        p = probs + eps
+        p = probs[probs > 0]
         return float(-torch.sum(p * torch.log2(p)))
 
     def top_k_table(
@@ -247,13 +246,15 @@ class ModelManager:
         prompt: str,
         steps: int = 8,
         temperature: float = 0.8,
-        top_n: int = 10,
-        top_k: int = 0,
+        top_k: int = 10,
         seed: int = 42,
         show_steps: bool = True,
     ) -> list[dict]:
         """Generate tokens one at a time, returning per-step data.
 
+        top_k controls both sampling (only top-k tokens considered) and
+        how many tokens appear in the probability table.
+
         Each step dict contains:
             - step: int (1-based)
             - text: accumulated text so far
@@ -273,15 +274,14 @@ class ModelManager:
             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
+            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 []
+            top_tokens = self.top_k_table(probs, k=top_k) if show_steps else []
 
             # Temperature 0 = greedy (always pick highest probability)
             if temperature == 0: