Overview
The Neural Network Trainer is an educational single-page application engineered to
demonstrate backpropagation, continuous function approximation, and loss optimization directly in modern web
browsers. Leveraging the computational performance of TensorFlow.js and the responsive
rendering loops of Chart.js, this simulation operates completely on the client side. This
client-side implementation eliminates backend processing latency, network request overhead, and complex local
environment compilation. By approximating a customized sinusoidal wave in real-time, this application visually
translates mathematical deep learning theory into dynamic, immediate feedback.
At the core of this educational application is the concept of a neural network as a universal function
approximator. Formally established by the Cybenko Universal Approximation Theorem, a
feedforward network containing a single hidden layer with a finite number of non-linear neurons can
approximate any continuous function on compact subsets of $\mathbb{R}^n$ to arbitrary precision $\epsilon > 0$.
Here, the network is tasked with mapping a one-dimensional coordinate input space $X$ to a continuous target
dimension $Y$. This simulates the challenges of mapping physical waves, physiological cycles, or mechanical
trajectories from noisy experimental observations.
Under standard conditions, the network works to resolve a underlying continuous function defined as:
$$y_i = \sin(x_i) + \epsilon_i$$
where $x_i \in [0, 2\pi]$ and the perturbation term $\epsilon_i$ represents Gaussian noise drawn from a zero-mean normal distribution:
$$\epsilon_i \sim \mathcal{N}(0, \sigma^2)$$
By adjusting the size, depth, and parameter configuration of the model, researchers can inspect how hidden
units map complex curves, how parameter adjustments converge toward optimized coordinate fits, and how
variations in parameters affect generalization boundaries.
How to Use
Fine-tuning and evaluating the browser-based neural network model relies on configuring parameter inputs and
analyzing corresponding graphical metrics. Adjusting parameter coordinates allows the operator to observe
different optimization conditions and functional outcomes in real-time:
- Interactive System Controls: Located at the very top of the primary control panel,
the Start Demo button triggers an automated structural testing profile. The
Reset Baseline button immediately cancels active running loops and restores the system to
its default operational state.
- Network Parameter Sizing: Modify the physical configuration of the mapping algorithm:
- Training Set Size ($N$): Dictates the resolution and density of data coordinates drawn along the sinusoidal waveform.
- 1st & 2nd Hidden Layer Size ($H_1, H_2$): Modulates the number of artificial neurons within each sequential hidden layer. Changing these parameters triggers an immediate visual recalculation and redraw of the custom vector Topology Graph in the dashboard view.
- Noise Level ($\sigma$): Injects stochastic variance into the target values, simulating raw environmental interference or physiological sensor noise.
- Optimization Variables: Calibrate the numerical updates:
- Learning Rate ($\eta$): The scalar coefficient regulating step sizing along calculated loss gradients during optimization updates.
- Epochs ($T$): The total iterations of backpropagation passes computed across the generated dataset.
- Batch Size ($B$): The size of coordinate matrices processed during each batch update within an epoch.
- Model Architecture Toggles: Switch activation functions $\phi(z)$, optimizers, and loss formulations to observe their effects on learning behavior. Choices include Tanh, ReLU, or Sigmoid activations, alongside Adam, SGD, or Adagrad optimizers.
- Acoustic Tuning: Toggle the Sound button to convert optimization progress into auditory signals. This maps the descending loss curve to changing sound frequencies, translating math into sound.
Technical Details
This application uses a pure client-side architecture supported by high-performance browser features:
- Stable CPU Execution Model: To circumvent WebGL context losses, canvas rendering crashes,
and GPU shader compilation errors across various browser configurations, the underlying matrix mathematical
engine is set to execute on the CPU backend via
tf.setBackend('cpu'). This maintains low execution
times for lightweight models while preventing hardware incompatibilities.
- Dynamic SVG Topology Graph: Network weight layouts and neural intersections are mapped as
a custom inline vector graphic. Moving layer sliders triggers instant geometric recalculations that redraw SVG
connection nodes dynamically to display the new hidden units and weights.
- Adaptive MSLE Shift Protection: Mean Squared Logarithmic Error is mathematically defined as:
$$L_{MSLE} = \frac{1}{N} \sum_{i=1}^N \left( \ln(\hat{y}_i + 1) - \ln(y_i + 1) \right)^2$$
Because logarithmic scales are undefined for inputs less than or equal to zero, choosing MSLE for functions with
negative output values (such as a standard sinusoid ranging from -1 to 1) results in undefined (NaN) gradients.
The engine resolves this by automatically shifting output target parameters by $+1.5$ when MSLE is chosen, mapping
inputs into a safe positive range and preserving optimization stability.
- Backpropagation Engine Details: Weights and biases are updated using the chosen optimization
framework. In standard Stochastic Gradient Descent (SGD), the weight matrix $\mathbf{W}$ at step $t$ is updated via:
$$\mathbf{W}^{(t+1)} = \mathbf{W}^{(t)} - \eta \nabla L(\mathbf{W}^{(t)})$$
For the Adam optimizer, the step size is dynamically adapted using running estimates of the first and second
raw moments of the gradients, which helps navigate complex loss landscapes.
- Optimizing Interaction to Next Paint (INP): Numerical computations and deep training passes
are decoupled from chart layouts. Heavy matrix predictions utilize
requestAnimationFrame rendering steps
to keep UI inputs responsive and preserve an INP score under 200ms.
Future Directions
The current modular training framework provides a foundation for several planned features:
- Interactive Weight Visualizations: Color-coding the dynamic SVG connection lines
dynamically to represent the absolute weight values of the model's layers as they change in real-time.
- Custom Output Functions: Introducing drop-down profiles allowing users to select and train
networks on sawtooth, triangular, or multi-modal physiological patterns.
- Hyperparameter Search Automation: Creating minor structural sweeps to automatically test
multiple hidden layer sizes and select the optimum network topology.