3D Gradient Descent WebApp

A few weeks ago I saw @chrwittm’s thread about Visualizing Gradient Descent in 3D which I really liked and which made me clear up some conceptions about gradient descent.

As good as Christian’s visualization is, it is limited by what python/jupyter offers, like “slow” render times and cumbersome handling of the 3D-plot. Since I was searching for a project I could refine my React skills with anyway, it seemed to be a nice thing to make it a web app.
If you are interested in the computations and on how to arrive at such visualization you should also have a look at Christian’s notebook since it explains the steps in detail.

Screenshot from 2022-12-01 11-43-38

With this app you can:

  • manually fit a quadratic function to some data,
  • use a Stepper to automatically step the parameters towards the local minimum,
  • have a look at the trace the loss left as it walked through the loss surface,
  • choose from different critics (mae,mse,rmse) to “see” how changing the way we measure the loss effects gradient descent,
  • intuitively interact with the 3D-plot by dragging and zoom, to keep the interesting parts in focus.

In the info-boxes of the app I gave “some” additional information about what is going on. I tried to walk the line between mathematical precision and accessibility, so please let me know if I failed at that :laughing:. Also: I’m not a web dev, so excuse me if the app is not optimized for every device (I tried my best). Having said that: please let me know, if you have any issues, questions or improvements, I’m happy to answer/discuss them here :slight_smile:

I hope you enjoy playing around with this as much as I did and learn something about gradient descent on the way.

Again: kudos to @chrwittm for the “original” project. It gave me alot of inspiration and something to glimpse at if I made an error in my implementation :wink:.



@benkarr I love your visualization! It has all the features I wished the matplotlib plotting had, for example, nice rotation and zooming. I also really like how you visualize the trace to see how you actually descended into the minimum - great work. I feel honored that you built upon my notebook!