note: We've registered for our application - due to having set this up a few hours ago, it will probably take some time for the DNS routing to update.


The inspiration for NetWeaver is personal to us — while most of our team was well-acquainted with neural networks, I (Alex) had little to no experience with the field. Part of this was simply that any available resources on the topic were deeply technical: mathematical models, layers, nodes, activation functions...what does all that even look like?

NetWeaver is built on the idea that visualization is key to learning anything. You can read all the information you want, but as the saying goes, “a picture’s worth a thousand words.” By creating a graphical interface, we remove much of the complexity from neural networks, allowing people interested in NNs to get their first experience in an easy-to-understand environment without any coding. We even do the hard part for them — our tool automatically generates all the code they need to create that exact neural network in Python in real-time, so users can learn the various hyperparameters used by a neural network.

What it does

NetWeaver is an artificial neural network visualization tool that automatically generates code on-the-fly as users design their own networks. Users are able to add and remove layers, fine-tune more advanced hyperparameters, and modify aspects of the training process. While they configure the network to their liking, the page generates in real-time the code for the TensorFlow Keras library that will create that exact network.

How we built it

The app is built in React, on top of the standard create-react-app function that comes with it. From there, we used SigmaJS to handle the NN visualization, Bootstrap for most of the UI elements, and GitHub Pages to deploy our site.

Challenges we ran into

Before starting this project, only one of us had ever used React, and only to a basic level. One of us had actually never used JavaScript at all. The entire time we were writing React code, we were actively learning on the fly. Clearly, this was a pretty significant obstacle, as we spent time trying to figure out issues that a more experienced React developer would likely consider trivial.

Accomplishments that I'm proud of

With our limited React development experience, we are quite happy with our finished product, which is both functional and looks quite good. Our biggest achievement was probably the actual visualization component of the app — figuring out how to render, update, and interact with a live display was a critical mission, and we pulled it off.

What we learned

We learned a lot about how to use ReactJS to build a functional webapp. We also learned about using react-sigma in order to build dynamic graphs that can interact and change as indicated by the rest of our app.

What's next for NetWeaver

We plan to expand NetWeaver to allow for the visualization of Convolutional Neural Networks. We would also like to allow users to train their models on pre-selected datasets with just a click of a button. Most importantly, we want to include tips, feedback, and help within the application to guide new users.

Built With

Share this project: