ninetyhe-90/training-explore

What it does

Training Explorer turns Transformer and LLM training concepts into a workspace you can control: pick a lesson, play or step through computation events, and inspect real numbers, tensor shapes, and the matching math, code, and experiments. It is aimed at learners who already meet the formulas but want to see how shapes, attention masks, residual paths, and losses actually move from token to logits.

The Transformer sample is a deliberately small configuration (batch 1, 4 tokens, model dimension 4, 2 heads, FFN hidden dimension 8, vocabulary 6) whose matrices and attention probabilities are computed from fixed inputs rather than random heatmaps. The workspace tracks values from [B,T] to [B,T,V], with event tables linking each animation frame to an operation and tensor size Transformer numerical experiment.

Getting started

You need Node.js 18 or newer. Clone the repository, install dependencies, and start the Vite dev server:

git clone <repository-url>
cd training-explore
npm install
npm run dev

Open the local address printed by Vite, usually http://localhost:5173 quick start. To check a production build locally, run npm run build followed by npm run preview build and preview. The app needs no database, API key, or cloud service no backend needed.

Once open, use Play, Step, Reset, the event table or timeline to jump between events, and the lesson sidebar to jump to a chapter's first event. The deeper panel shows derivations, numerical examples, Python/PyTorch code, and experiments for the current chapter, and the language/theme buttons switch Chinese/English and light/dark controls.

Content and scope

The app currently ships 14 interactive lessons across the training loop, tokenization, full Transformer forward pass, backpropagation, optimizers, distributed training, mixed precision and memory, inference and KV cache, AI infra roofline analysis, fine-tuning and alignment methods (SFT, DPO, RLHF, GRPO), debugging, a minimal agent loop, agent harness engineering, and evaluation/observability course list. Each lesson points to primary papers, official docs, or source material rather than only secondary summaries.

Only the Transformer sample currently uses the deterministic numeric scene; the README's roadmap lists upgrading more lessons to verifiable numeric state animations, adding per-operator backpropagation demos, and automating Python example execution roadmap.

Constraints

The interface is built with TypeScript, Vite, and native SVG without a frontend framework implementation. The deterministic scene recomputes forward state from fixed inputs at each event index, so playback, stepping backward, jumping, and theme changes do not depend on leftover DOM state event mapping.

The displayed time in event tables represents teaching order, not real model latency, and the small dimensions are simplified teaching assumptions, not production-scale parameters or performance. Roofline and scale formulas are estimation methods that still require measurement on the target hardware teaching boundaries. The Python/PyTorch examples are companion material; per-example automated execution and result snapshots are still planned rather than implemented validation status. Course, language, theme, and completion state are stored in browser local storage, with no account needed local progress.

The repository does not declare a license, which matters if you intend to reuse or redistribute the content.

HotRepo's take

Training Explorer appears on HotRepo's new-project list for TypeScript with 105 stars and 12 forks as of 2026-11-07, adding 5 stars and 1 fork over roughly 1.5 hours of the recorded new-project window. With only that single short snapshot and no GitHub daily rank recorded, the data shows early interest but cannot support a trend or quality claim. The distinguishing technical fact is the deliberate separation of real computed values, teaching assumptions, and performance measurements, with a deterministic event-to-snapshot mapping — the part worth checking first if you care whether the animation reflects actual math.