Web demo polish: token visualization + portfolio explanations

[scheuclu]

Visual + content refresh of the static `web/` demo. Single commit (`ecec836`), two files touched.

Three threads

Visual redesign

• Larger heading with accent on "GPT"; tightened typography with -0.025em letter-spacing.
• Card-based prompt+controls panel with subtle elevated shadow and rounded corners.
• Primary-styled generate button with proper hover and press states.
• Output area is its own card mirroring the prompt card aesthetic.
• Light/dark mode polished — warmer backgrounds, calibrated borders, brighter accent in dark mode.
• Empty-state hint: "Generated text will appear here." in italic when the output is empty.
• Subtle focus rings on inputs.

Token visualization

• Six soft pastel CSS variables `--tok-c0` through `--tok-c5` applied via `.tok-N` classes. ~16-22% alpha so they read clearly but stay quiet.
• Each token in both the live prompt preview (under the input) and the generated output gets a colored background that cycles. Token boundaries become visible at a glance.
• User-typed tokens get an additional accent-color underline (`.primer-tok`) so the boundary between human-supplied prompt and model continuation is unmistakable.
• The color cycle continues seamlessly across the primer/generated boundary so neighbors always get distinguishable colors.
• `main.js` gains a `renderPromptPreview()` helper wired to the prompt input's `input` event for live updates.

Portfolio "How it works" section

• Below the demo, sections cover: the model architecture (~12M params, 6 layers, 6 heads, 384d, 1024 ctx, Project Gutenberg corpus), what tokens are with explicit reference to the colored boxes above, browser-side inference via ONNX Runtime Web + WebGPU/WASM, lookahead sampling, the plateau LR schedule, and the tech stack.
• Links to source on GitHub and Karpathy's original repo.

Loading UX

• The initial prompt-preview render now fires before the ~10s ONNX model fetch, so users see the colored tokens immediately rather than `(empty)` while waiting.

Test plan

• Local preview via `python -m http.server -d web 8000` renders correctly in light + dark mode
• Prompt input shows colored tokens live as you type
• Generated text continues the color cycle seamlessly past the underlined primer
• About section reads cleanly at the 68ch max-width
• GitHub Pages deploy succeeds after merge

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added token visualization with color-coded display for prompt and generated output
  • Implemented live preview updates as you type

• Style

  • Redesigned page layout with updated typography and color theme
  • Enhanced card-based UI with improved visual hierarchy
  • Improved token-by-token formatting presentation

Walkthrough

The lukasGPT demo receives a comprehensive redesign with a new card-based UI theme and refactored token rendering. Tokens throughout the interface now display as individually colored inline spans instead of plain text, with consistent color cycling across primer tokens and generated output. The prompt input is wired to live-update its tokenized preview on each keystroke.

Changes

Token Visualization and UI Redesign

Layer / File(s)	Summary
Theme and UI Layout web/index.html	CSS styling is overhauled with light/dark theme variables, component styling for header/card/controls/output, and new token color classes (.tok, .tok-0….tok-5). HTML markup is reorganized into a header + card layout with a new #prompt-preview container for tokenized visualization and expanded "How it works" content.
Token Rendering Utilities web/main.js	Helper functions are introduced to append tokens as colored <span> elements with optional primer underlines and to re-render the tokenized prompt preview by encoding the current input text. A color-cycling constant maintains consistent token sequencing.
Colored Token Generation web/main.js	Primer and generated tokens are rendered using the new span-based helpers with a shared cycle counter. generateSingleStep and generateLookahead now accept a cycle parameter, generated tokens append as colored spans, and the primer rendering in generate() uses per-token colored spans with underlines.
Initialization and Live Preview Updates web/main.js	The tokenized prompt preview is rendered immediately after vocab loads. An input event listener wires the prompt input to re-render the preview live as the user types.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Colors cascade through the tokens bright,
Each character glows in rainbow light,
The primer yields with underline grace,
While lookahead tokens keep the pace.
A preview lives in the input's dance,
As lukasGPT takes a styled stance!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 71.43% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main changes: visual polish with token visualization and expanded portfolio explanations for the web demo.
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, covering visual redesign, token visualization, portfolio section updates, and loading UX improvements.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/web-demo-polish

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}