{"slug": "i-didn-t-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with", "title": "I didn't trust I understood gradient descent, so I vibe coded a demo to play with it", "summary": "A developer who struggled to grasp gradient descent built a browser-based teaching demo using AI-generated code. The app lets users train a linear pixel model on 8x8 cat, dog, and rabbit silhouettes, visualizing weight grids as heatmaps and supporting one-vs-rest classification. The developer found that directing an AI to build the tool solidified their understanding more than rereading tutorials.", "body_md": "I'd just spent a few sessions in fast.ai's `04_mnist_basics.ipynb`\n\nfinally pinning down what a gradient actually means: not \"3's gradient,\" but the slope of the loss curve at the exact point where the weight currently sits. Small distinction, but it's the one that had stayed fuzzy since high school calculus. Calculus itself still sounds like a foreign language to me 🥲.\n\nUnderstanding it in a chat window is one thing. Explaining it well enough for someone else to follow using the Feynman Method, felt like a different bar entirely. So the best way to learn it was to build something around it.\n\nThe obvious demo already exists in the fast.ai material: a ball rolling downhill on `y = x² − 4x + 7`\n\n, a learning rate slider, watch it converge or fly off the curve. It's a fine five minute demo (crank the learning rate too high and the ball leaves the screen, which is memorable). I played with it in Colab and had Claude explain it to me, repeatedly, until it stuck. But it's still one number moving on one curve. Real models don't have one weight, they have thousands, and there's no curve you can draw for that.\n\nThe fast.ai chapter already had the answer, I just hadn't noticed it. Train a simple linear model on raw pixel values and the weights come out the same shape as the image. Draw the weights as a picture and you can watch them sharpen into something recognizable as training progresses.\n\nSo I had Claude produce a javascript app around that idea. It took a few short tries to get right, but the core of it is: 8x8 pixel cat, dog, and rabbit silhouettes added later, a weight grid per class rendered as a heatmap, and three things students can do instead of just watch.\n\nToggling in a third class turned into a useful accident. With two classes, one weight grid can decide cat-or-not by itself. Add a third and that stops working: now each class needs its own weight grid, the model scores all three, and picks whichever comes back highest. That's the beginner version of what's called one-vs-rest classification. The next step up, softmax, does the same job but turns those scores into probabilities that add up to 100 percent, so instead of just picking a winner you get something like 70 percent cat, 20 percent dog, 10 percent rabbit. I didn't build that part, but watching three weight grids compete made the idea click in a way the term itself never did.\n\nClaude wrote all the code. I didn't need to worry about the code at all. I described what I wanted, looked at what came back, and pushed it in a different direction when it wasn't right. A few rounds of that.\n\nThe value wasn't in writing JavaScript. It was in being forced to specify, precisely enough for another system to build it, what a correct demo of gradient descent for a linear pixel model actually looks like. The fast.ai notebook taught me the concept. Directing Claude through \"no, the weight grid has to update after every single image, not after each epoch\" is what actually pinned it down. Reading forces you to follow someone else's precision. Building, even by proxy, forces you to produce your own.\n\nRuns entirely in the browser. No install, no backend. Draw something, guess, train it, watch the weight grid learn.\n\nThe bet this demo makes is that watching numbers change on a screen isn't the same as understanding why they change, and that the fastest way to close that gap is to make something that explains it to someone else, even if an AI writes the code for you. Directing that build was harder than reading the notebook a third time would have been. That's probably the point.\n\nIf you've used an AI agent to build a teaching tool for something you were still shaky on yourself, I'd like to hear what part of the build finally made it click.\n\nPart of the same AI-tools learning log as [I built two AI tools, the second one told me how I should be learning AI](https://dev.to/mediblacksand_f0ea36c53fb/i-built-two-ai-tools-the-second-one-told-me-how-i-should-be-learning-ai-5el0).\n\nFind me on GitHub: [github.com/mediblacksand](https://github.com/mediblacksand)", "url": "https://wpnews.pro/news/i-didn-t-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with", "canonical_source": "https://dev.to/mediblacksand_f0ea36c53fb/i-didnt-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with-it-2cde", "published_at": "2026-08-12 00:44:33+00:00", "updated_at": "2026-08-12 01:15:27.069878+00:00", "lang": "en", "topics": ["machine-learning", "ai-tools", "developer-tools"], "entities": ["fast.ai", "Claude", "Colab"], "alternates": {"html": "https://wpnews.pro/news/i-didn-t-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with", "markdown": "https://wpnews.pro/news/i-didn-t-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with.md", "text": "https://wpnews.pro/news/i-didn-t-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with.txt", "jsonld": "https://wpnews.pro/news/i-didn-t-trust-i-understood-gradient-descent-so-i-vibe-coded-a-demo-to-play-with.jsonld"}}