Commit 3fdbaf6
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
0 commit comments