Image created by marcel blattner. Bubble and Lobster Claw Nebula. Shot with narroband filters Ha, OIII, and SII (2024). Net overlay generated with delaunay triangulation.
marcel blattner | May, 2025
Introduction
The world of artificial intelligence often discusses complex systems like large language models, but understanding the fundamental principles behind them is crucial. Neural networks, the core of many AI applications, are built upon concepts that can be explored and understood through simpler examples. This interactive demo https://nndemo-btec.vercel.app/ provides a hands-on way to these foundational ideas, focusing on how a basic neural network learns to classify data.
Understanding the Classification Problem
At its heart, this demo tackles a fundamental machine learning task: binary classification. Imagine you have a set of points on a graph, some colored blue and others red. The goal for the neural network is to figure out how to draw a boundary that effectively separates the blue points from the red points. By watching the network learn this task, you can gain insight into how these systems make decisions and generalize from the data they are shown.
Exploring the Network Architecture: Inputs, Hidden Layers, and Outputs
The neural network visualized in the demo has a clear structure designed for learning. It starts with an Input Layer, which receives the coordinates (like the x and y position on the graph) for each data point. Think of these as the network's senses, perceiving the incoming information.
Next is the Hidden Layer. This is the crucial part where the learning happens. It contains a number of processing units called neurons. You can adjust how many neurons are in this layer in the demo. These hidden neurons work together to recognize patterns in the data that aren't immediately obvious. They transform the input data in complex ways, allowing the network to learn non-linear relationships – like separating points arranged in a circle or a spiral.
Finally, the Output Layer, in this case just a single neuron, produces the network's prediction. It gives a value indicating whether the network thinks a given point belongs to the blue class or the red class, often representing this as a level of confidence.
Using the Demo: An Interactive Learning Experience
This demo is designed for active exploration. You begin by selecting a Dataset. Options range from simple 'Linear' patterns, where a straight line can separate the classes, to more complex arrangements like 'Circular', 'XOR', or 'Spiral'. Trying different datasets demonstrates how the network's challenge changes and highlights its ability to adapt to varying complexities.
You can then adjust key Network Parameters. Changing the number of 'Hidden Units' affects the network's capacity to learn intricate patterns – more units mean more learning power, but also a risk of memorizing the training data instead of generalizing. The 'Learning Rate' controls how quickly the network adjusts itself during training; a faster rate can speed things up but might overshoot the best solution, while a slower rate is more cautious. You can also select different 'Activation Functions' (like ReLU or Sigmoid), which are mathematical functions within the neurons that help the network learn non-linear boundaries.
Once you click "Train," you can observe the Learning Process unfold. Watch how the colored decision boundary, representing the network's current understanding of the separation, changes over time (or 'epochs'). The displayed 'loss' value quantifies the network's error, and you should see it decrease as the network improves its predictions. You have controls to "Stop" the training to examine the state or "Reset" it to start over, perhaps with different parameters.
Visualizing the Learning Process: Seeing the Network at work
The demo provides powerful visualizations. The evolving decision boundary is the most direct view of what the network has learned. You can also see the network's internal structure. Lines connecting the neurons represent the 'weights' – the strength of the connections between them. These weights are what the network adjusts during learning. Blue lines typically indicate connections that excite the next neuron, while red lines indicate connections that inhibit it. The thickness of the line shows the strength or importance of that connection. Watching these weights change provides insight into how the network prioritizes different pieces of information to arrive at its final decision.
The Learning Mechanism: Prediction, Error, and Adjustment
How does the network actually learn? It's a cyclical process. First, the network takes an input point and makes a Prediction based on its current weights (the forward pass). Then, it compares its prediction to the actual correct label (blue or red) and calculates the Error or 'loss'. Finally, using a process called backpropagation (the details of which are beyond this conceptual overview), the network determines how much each weight contributed to the error and makes small Adjustments to those weights to reduce the error in the future. This cycle of prediction, error calculation, and weight adjustment repeats many times, allowing the network to gradually refine its decision boundary and improve its accuracy.
This demo provides a window into these core concepts, allowing you to build an intuitive understanding of how even simple neural networks learn and make decisions by interacting directly with the process.
Implementation
If you are interested in my implementation. Here we go: https://github.com/marcelbtec/nndemo