AI Learning Lab

Jun 2025 — 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.
—22 chapters across 6 worlds, 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.
—732 engine tests run fully offline in ~1 second 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.
—World 6 adds a WebLLM capstone with an optional Ollama Cloud escalation, proxied through a Docker container on a GCP instance so the API key never reaches the browser.

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)` — 732 tests run fully offline in ~1s 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)