Neural Network Simulation Tool

The Neural Network Visual Builder is an interactive, client-side tool designed to demystify deep learning. It allows users to drag-and-drop neural network layers to construct custom architectures, visualize the flow of data, and watch the training process happen in real-time directly within their browser.

1. Building Your Network

The interface is divided into three main sections: the Component Palette (left), the Canvas (center), and the Properties Panel (right).

• Drag and Drop: Start by dragging layers from the left sidebar onto the central canvas.
• Sequential Flow: The tool assumes a sequential model structure. Arrange your nodes vertically from top to bottom. The system will automatically draw connections to show the flow of data from one layer to the next.
• Load Sample: If you’re unsure where to start, click the “Load Sample CNN” button in the sidebar. This will populate the canvas with a classic Convolutional Neural Network architecture suitable for image recognition tasks.

2. Configuring Layers

Click on any node in the canvas to select it. The Properties Panel on the right will update to show the specific parameters for that layer.

• Input Layer: Define the shape of your input data (e.g., 28, 28, 1 for grayscale images).
• Dense (Fully Connected): Adjust the number of units (neurons) and the activation function (e.g., ReLU, Softmax).
• Conv2D: Set the number of filters and the kernelSize (window size) for feature extraction.
• Dropout: Set the rate (0-1) to control how many neurons are randomly deactivated during training to prevent overfitting.

3. Training the Model

Once your architecture is built, click the Train Model button.

• Auto-Layout: The canvas will automatically adjust spacing to ensure there is room for visualizations.
• Real-Time Feedback: A status log will appear, and a side panel will slide out displaying live graphs of Loss (error rate) and Accuracy.
• Visual Weights: As the model trains, you will see pixelated “heatmaps” appear on the nodes. These represent the actual weights (parameters) being learned by the network in real-time.

4. Running Inference

After training is complete, click Run Inference. The tool will generate a random input tensor (simulating an image) and pass it through your trained network. The side panel will display a bar chart showing the model’s confidence (probability distribution) for each class.

Under the Hood: How It Works

Client-Side Machine Learning

Unlike many AI tools that send data to a remote server, this builder runs entirely in your browser using TensorFlow.js. This means:

• Privacy: No data leaves your computer.
• Speed: Interaction is instantaneous.
• Hardware Acceleration: The tool leverages WebGL to utilize your computer’s GPU for mathematical calculations, making training significantly faster.

The Training Process

When you click “Train,” the tool performs several complex steps:

1. Compilation: It translates your visual nodes into a TensorFlow.js Sequential model. It validates the connections and shapes (e.g., ensuring a 3D image output is flattened before entering a 1D Dense layer).
2. Data Generation: For demonstration purposes, the tool generates “mock” data—random noise tensors shaped like MNIST images (28×28 pixels).
3. Backpropagation: The model runs a training loop (default 5 epochs). In each step, it makes a prediction, calculates the error (Loss), and uses an optimizer (Adam) to adjust the internal weights of every layer to minimize that error.

Visualization Tech

The tool provides two layers of visualization:

• tfjs-vis: This library powers the slide-out panel, rendering high-performance charts for metrics like categorical cross-entropy loss and accuracy over time.
• Canvas Heatmaps: The pixelated grids on the nodes are custom HTML5 Canvas elements. After every epoch, the tool extracts the raw weight tensors from the GPU, normalizes them (mapping values to colors), and renders them. This allows you to literally “see” the features the network is learning—for example, a Conv2D layer might start looking like edge detectors.

Architecture Constraints

To keep the builder user-friendly, it enforces a Sequential API pattern. This means data flows linearly from one layer to the next. While modern deep learning supports complex branching (like ResNets), this tool focuses on the fundamental building blocks (Dense, Conv2D, MaxPool) to provide a clear, educational sandbox for understanding neural network topology.