MLP Visualizer

MLP Visualizer

I finished a project I've been working on for awhile that is meant to visualize multi-layer perceptrons (MLPs) for educational purposes, found here. The project was mostly written by AI, with the original self contained html page being written in a chat interface and the deployed extension by Claude Code. Overall, this took a couple hours of actual work for me with the AI doing the vast majority of the actual work. It cost about $45 in full, having used Sonnet 4 as the main model. It's certainly not perfect, but I think it's good enough to be put into the wild.

The tech stack I specified was basically just a Nix flake to manage the project, npm for depsendencies, Vite to build, Svelte for the front end framework, and Bulma for themeing. Axe was also used later on for accessibility testing. Otherwise, I mostly have no idea how it works under the hood. I know it uses canvases to performantly draw the graphs and uses a decoupled simulate and draw loop, but other than that I don't know much. I'm not particularly keen on some of the architectural choices, with a lot of core login being in App.svelte instead of in Typescript, but then again I never had to deal with it.

I wasn't as careful with this project as some of the bigger ones, and I think that shows. Instead of having a large pile of documentation and logging to keep the model focused it was very apparent when the context was lost. Sometimes it'd forget how to build and run the app, other times it'd seem like it was rediscovering what the app essentially was (not to anthropmorphize, that was essentially true without a log). On the other hand, this made it closer to the 'vibe coding' some talk about, where I lazily iterate through high level ideas while half paying attention.

Ultimately, if I more carefully documented and planned this from the start, the result would probably be both better and cheaper. But that's the devil's bargain at play, you get to trade money for time and effort.