§ case
AI Learning Lab
Aug 2026 — present
AI · Education · Full Stack · Engineer · Designer
- —A gamified, browser-based course that teaches how language models work by making you operate one — real embeddings, attention weights, and gradients computed live via transformers.js and WebLLM, manipulated directly rather than described. No chatbot anywhere in the learning path.
- —30 chapters across 8 worlds (91 levels), architected as pure JSON-driven game logic decoupled from rendering: every level's parameters and pass criteria live in schema-validated JSON, and framework-agnostic TypeScript engines carry zero React/DOM dependency.
- —1,128 engine tests run fully offline in 6.3 seconds with no model downloads, exercising the identical code path the browser uses for real inference — game logic and production logic are never two different implementations.
- —Worlds 1–5 work with zero network after first load — model weights cached in browser Cache Storage, progress in IndexedDB, and activity synced back on reconnect.
- —The capstone runs Llama 3.2 1B via WebLLM on WebGPU, streaming per-token logprobs, with an optional Ollama Cloud escalation proxied through a Docker container on a GCP instance so the API key never reaches the browser.
- —Worlds 7–8 are applied-AI labs on a local model — RAG, structured outputs, tool calling, an agent loop, quantization, context-window limits, calibration and red-teaming — each scored on real outputs.
Next.js 15TypeScripttransformers.jsWebLLMZustandIndexedDBVitestTailwind CSS 4MongoDBOllama CloudDockerGoogle Cloud Platform (GCP)
◼ Challenges
- →Every 'real model output' shown must be computed live — never faked or hardcoded to look real — which is the entire value proposition
- →Game logic must be testable offline with no model downloads while the app injects real models into the exact same code path
- →Full browser-tier learning (Worlds 1–5) must work with zero internet after first load, including progress persistence and activity sync
◼ Solutions
- →Engines are pure TypeScript (no React/DOM); models injected via `prepare(config, deps)` — 1,128 tests run fully offline in 6.3s while the app injects real transformers.js/WebLLM wrappers
- →JSON-driven game logic: every level's parameters, pass criteria, and star bands live in schema-validated JSON under /data/games — components are renderers, not rule owners
- →Model weights cached in browser Cache Storage, Zustand progress in IndexedDB, activity queue local-first and synced on reconnect via a dual-signal sync manager (navigator.onLine + real HEAD request)