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 TensorFlow.js and Chart.js, this simulation operates
completely on the client side, eliminating backend processing latency and complex software environment
compilation.
By approximating a customized sinusoidal wave in real-time, this application visually translates deep
learning theory into dynamic, immediate feedback. Users can inspect how hidden layers map complex curvature
configurations, manipulate dataset constraints, and watch how network parameter weights converge toward
minimized error solutions.
How to Use
Fine-tuning and evaluating the browser-based neural network model relies on configuring parameter inputs and
analyzing corresponding graphical metrics:
Parameter Configuration: Use the sliders on the left control panel to configure
training sample sizes, target hidden units (1st and 2nd layers), continuous noise variables, learning
rates, epochs, and sample batch configurations. Note that as hidden layer nodes are shifted, the
Topology Graph in the dashboard updates instantly to show the current network wiring.
Initiating Optimization: Press the Train NN button. This instantiates
a sequential network model corresponding to the chosen architecture and initiates iterative feedforward
and backpropagation passes.
Auditory Indicators: Toggle the Sound button to unmute synthetic
auditory notifications. These signals translate the mathematical loss reduction curve into frequency
harmonics.
Analyzing Fit Curves: The Prediction Fit Chart plots the actual data
points alongside the network's approximation curve. Observe how the line adjusts dynamically from
initially flat curves to highly aligned sinusoidal approximations.
Analyzing Loss Ranges: The Convergence Curve illustrates the model's
computed error rate over successive training epochs. Watch how the error drops precipitously and
stabilizes as backpropagation fine-tunes layer weights.
Wiping Simulation: Tap Reset Simulation to halt running operations,
clear graphical datasets, and restore parameter inputs to default configuration metrics.
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 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:
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.
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
This sandbox environment establishes a robust architecture that can be scaled with several browser 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 signal patterns.
Hyperparameter Search Automation: Creating minor structural sweeps to automatically
test multiple hidden layer sizes and select the optimum network topology.