I Built a Browser LLM Lab. The Hard Part Was Refusing to Fake It.

What it actually takes to make "watch a neural network learn" honest instead of a canned animation

Illustration for I Built a Browser LLM Lab. The Hard Part Was Refusing to Fake It.
watch-it-learn-honestly The build story of LLM Lab (logicalart.us): real gradient descent in a browser tab, training machinery honest enough to fail in public, and a diploma that tells the truth. llm lab, browser neural network, train llm in browser, overfitting demo, interactive machine learning, character level language model, transformers.js, webgpu

My quiz answers leaked so badly that picking the longest option scored 90% without reading a question. That was the tenth honesty bug in a "watch a neural network learn" page, and every one taught the same lesson: real is harder than staged.

TL;DR

Train the tiny model at logicalart.us until the amber validation line climbs - then you have seen overfitting happen to a model you own.

The project is LLM Lab: a free page where you train a real character-level language model in your browser tab, watch every number change as it learns, and graduate with a graded diploma. No installs, no accounts, no server doing the work behind the curtain. The whole model is a few thousand floating-point weights living in your tab's memory, and every one of them moves because gradient descent moved it.

This is the build story. Not the feature list - the part where "make it honest" kept colliding with "make it feel good," and honesty had to win.

At a glance

  • What it is: a browser lesson at logicalart.us - train a tiny LLM, inspect every layer, quiz out, earn a diploma.
  • The model: character-level MLP, ~2,400 parameters at default settings, written in plain JavaScript. Same math as the big ones: embeddings, hidden layer, softmax, cross-entropy, backprop.
  • The comparison: SmolLM2 and Qwen3 running fully in-browser via transformers.js, WebGPU when you have it, WASM when you don't.
  • The claim being tested: that a lay adult can leave actually understanding how LLMs work - the algorithm, not the metaphor.

The Canned-Animation Problem

Interactive ML education mostly splits into two camps. One camp shows you a pre-rendered animation of a loss curve going down. It always goes down. It goes down the same way every time, because it is a video. The other camp - the good camp, TensorFlow Playground and Bycroft's GPT visualizer and the Transformer Explainer - runs real computation but on problems curated to behave.

The staging is not laziness - I understand why demos do it. A first-time visitor who watches a loss curve refuse to fall closes the tab, and a canned curve never refuses. Curated problems are how TensorFlow Playground stays delightful. The cost is invisible: neither camp lets training embarrass itself in front of you. And the embarrassments are the curriculum. Overfitting is not a sidebar warning; it is the thing that actually happens when you lean on the epochs slider. A validation score that gets worse while training loss improves is the single most important chart in applied machine learning, and almost nobody has ever watched it happen to a model they own.

So the design bar became: every number on the page is live, every failure is reachable, and nothing gets smoothed for the demo's dignity. If you crank the learning rate to 0.5, you deserve the bouncing loss curve you are about to get, and the page should help you read it.

Making Training Real in a Tab Without Making It Miserable

Honest raw SGD in a browser produces honest raw garbage. My first hundred-epoch run on a Shakespeare corpus ended with training loss 1.80, validation loss 3.25, and a confetti animation congratulating the user on a model that had memorized its homework. Honest, technically. Also a terrible lesson delivered with a party horn.

Closing the gap between "real" and "good" took the same machinery real training pipelines use, shrunk to fit a tab:

Four pieces of real-pipeline machinery, tab-sized

Cosine learning-rate decay. The slider sets your starting stride; it decays to a tenth of that by the final epoch. This one change moved every dataset's final loss meaningfully, and it let the page's copy about warmup-and-decay schedules describe what the demo actually does instead of what real labs do somewhere else.

Early stopping with best-checkpoint restore. When validation stops improving, the run stops, and you keep the weights from the best epoch - with a message explaining that the remaining epochs would only have memorized. Getting this right took three calibration rounds, because the naive version was a disaster: on tiny corpora the validation curve is noise that bottoms out at epoch two, and restoring "best validation" rolled a names model from 65% accuracy back to 20%. The restore now has to buy a real validation gain without gutting training accuracy, which is exactly the judgment call a human practitioner makes when picking a checkpoint.

Scattered validation blocks. Holding out the last 10% of a curated dataset is standard tutorial practice and quietly wrong: the tail of a curated file is systematically unlike the middle, and on one dataset the held-out score came back worse than random guessing purely from distribution shift. The holdout is now five blocks scattered through the corpus. Boring fix, honest number.

Real data. The names datasets are slices of the actual makemore names corpus - the canonical dataset for exactly this architecture. That choice pays off at the finish. After training, the page samples your model and shows the names it invented - checked against the training data, so you can verify they are new. My favorite run produced "rabelle," "pailey," and "marlottella." Nobody wrote those. A few thousand numbers wrote those, and the visitor just watched the numbers get written.

Overfitting is not a sidebar warning. It is the most important chart in applied machine learning, and almost nobody has ever watched it happen to a model they own.

The Overfitting You Can Watch

The loss chart plots training loss and validation loss together - the jade line and the amber line. You can drag a slider to change the train/validation split and retrain. Drop it to 50% and the validation curve steadies while training starves; push it to 95% and training feasts while the validation score turns to noise. That trade is usually a paragraph in a textbook. Here it is a slider, and the two curves argue about it in front of you.

When the amber line starts climbing while the jade line keeps falling, the page does not celebrate. The completion message tells you the model memorized instead of learned, what the gap means, and what to change. The accuracy stat gets the same honesty treatment in the other direction: 42% sounds like a failing grade until the page shows you that blind guessing scores 1.7% and that a perfect score is impossible because language is genuinely uncertain. Judging models against chance instead of against 100 is half of ML literacy in one reframe.

Grading Like a Course, Not a Carnival

The pedagogy went through the same honesty wringer as the training loop. The research on retrieval practice is unambiguous - a few low-stakes questions per section beat one big test - so the page has Quick Checks that gate each section, a ten-question final, and thirty-two extra-credit questions. Fifty in total, every one answerable from content that appears before it.

Writing fifty questions taught me a humbling lesson from our own trivia platform's playbook: my correct answers were reliably the longest, most detailed option. A test-taker who always picked the longest answer scored 90% on my first draft of the quiz without reading a single question. Every distractor got rewritten to the same length and specificity as the answer, and an automated check now fails the build if the length tell ever comes back.

The diploma is weighted like a course - checkpoints 20 points, final 80, extra credit up to 10 bonus - and it prints the truth about how you got it. Skip ahead with the unlock-everything button and your certificate says "Participation," with the upgrade path printed on it. Do the work and it says "Completion." A credential that cannot distinguish those two is not a credential; it is audit theater, and I have written enough about that genre to refuse to ship it.

What the Browser Taught Me

Running real models in a tab stopped being exotic the day transformers.js shipped WebGPU support. The comparison section streams SmolLM2 or Qwen3 token by token, and the streaming is itself a lesson: each visible chunk is one forward pass finishing on your hardware, at your machine's actual tokens-per-second. The same section is honest about what scale buys - my 2,400-parameter model writes character soup where the 135-million-parameter model writes sentences, and the page says plainly that the recipe is identical and only the scale differs. That claim tends to surprise people more than any other, which says something about how mythologized these systems have become.

The engineering surprise was how much of the work was verification. The page ships with 137 automated checks that run on three browser engines, because the first Firefox run ever attempted crashed on load - a timing accident Chromium had been silently forgiving. The checks caught my quiz answers leaking their lengths. They caught a scroll hijack that skipped real users past half the training section - a tester found it before I did. They caught the confetti congratulating memorization. Every user complaint became a check, and the checks became the spec.

Whether all this lands is measurable in one question: does a curious adult finish the page able to explain what ChatGPT does at a dinner table? Fifty questions, a weighted grade, and a diploma with their name on it say yes more convincingly than my opinion does. Go earn one at logicalart.us - the lab is free, the model is yours, and the fan, for once, stays quiet.

The Bottom Line

Bottom line: "Watch it learn" is easy to fake and hard to mean. Meaning it required real gradient descent in the tab, training machinery honest enough to fail in public, questions that survive test-taking tricks, and a diploma that tells the truth about how it was earned. The result is live at logicalart.us.

"Overfitting is not a sidebar warning. It is the most important chart in applied machine learning, and almost nobody has ever watched it happen to a model they own."

AI Strategy Review

Don't let your AI pilot become a statistic. Get honest assessment from someone who's shipped voice AI to the Coast Guard.

Book a Call

Disagree? Have a War Story?

I read every reply. If you've seen this pattern play out differently, or have a counter-example that breaks my argument, I want to hear it.

Send a Reply →