Skip to content

Commit 3fdbaf6

Browse files
unamedkrclaude
andauthored
ux(wasm): polished demo — two-phase UI, progress bar, mobile-ready (#31)
Complete UX overhaul of the WASM browser demo: UI Architecture: - Two-phase layout: onboarding screen → chat screen (clean transition) - Onboarding hidden after model load, chat area takes full viewport - 100dvh layout with overflow: hidden — no scroll bounce on mobile - Model name + size shown in header bar after load Input: - Replaced <input> with auto-resizing <textarea> (Shift+Enter for newline) - Stop button appears during generation (Send/Stop toggle) Progress: - Visual progress bar with fill animation during download - Percentage + MB counter overlay - "Cached — instant load" badge auto-detected on page load Chat: - Chat bubbles with directional radius (user right-aligned, assistant left) - Max-width 85% for readability - Removed redundant system messages (Runtime ready, Model loaded) - Model info moved to header bar and stats bar Stats: - Model name + token count + tok/s in compact footer - "prefill..." shown during prompt processing Mobile: - Responsive card layout (stacks vertically on <600px) - viewport maximum-scale=1.0 prevents zoom on input focus - Compact padding and font sizes Bug fixes: - Removed double-set of generating=false - Cache detection uses stable cardId/metaId instead of text matching - Model cards properly disabled during download Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent a2149ef commit 3fdbaf6

1 file changed

Lines changed: 310 additions & 328 deletions

File tree

0 commit comments

Comments
 (0)