Gradient Descent Classroom Demo
A gradient descent classroom you can play with right in the browser: draw, guess against the model, then watch the weights learn step by step.
This little demo teaches gradient descent to beginners: nothing to install, just open the page and play. First you draw a cat, dog or rabbit on an 8x8 grid, then see who guesses better, you or the model, and finally watch how the model learns step by step — with the real maths laid out: what each pixel value is, what the error is, how the gradient is just error times pixel, and how the new weight is worked out. It is different from the usual animated demo: most demos just show a ball rolling down a curve, and if you turn the learning rate up the ball flies off the screen — fun, but you learn nothing. Here a real linear model is actually training: one weight grid per class, drawn as a heatmap, where a darker square means that square votes more strongly for that class. Train a few more rounds and the shapes of the cat, dog and rabbit emerge from the grids on their own. Adding rabbits as a third class also makes a neat point: with two classes one grid is enough to split them, but with more classes each class needs its own grid. All three steps need no code: first draw and tell the model what it is, then guess yourself before seeing the model's guess, then watch it update its weights using your answer. The page also has a human-versus-model scoreboard, so you can see at any time how many each of you got right. Two things to keep in mind: first, this is a deliberately tiny teaching model — real models have thousands upon thousands of weights and do not look like this. Second, the demo has not done the softmax step yet: it only covers each class scoring on its own and taking the highest score, with probabilities left for a next step by the author.
@Alba Rivera