OpenTrainDNN – Real-time browser neural network training visualizer

OpenTrainDNN: A Browser-Based Real-Time Neural Network Visualizer.

OpenTrainDNN is an open-source, client-side web application designed to render the step-by-step training mechanics of deep neural networks in real-time. It provides direct visibility into backpropagation, activation flows, and weight updates without requiring backend servers, specialized hardware drivers, or local installation.

No install. No build step. No framework. No backend.

Every machine learning framework hides the interesting part behind a single function call. You write model.fit(x, y) and a number goes down. You never see what happened.

OpenTrainDNN does not hide anything. It runs a real neural network — real backpropagation, real optimizer, real weight updates — entirely in your browser. Every layer is visible. Every weight is a wire you can watch move. Every activation is on screen at the moment it is computed.

It exists to answer one question: what does a neural network actually do?

It is a teaching tool, not a framework. If you want to build production models, use PyTorch or JAX. If you want to see what those models are actually doing, use this.

The camera turns each frame into a 16×16 grayscale image. The microphone turns each sound into a 16×16 mel spectrogram. Both produce 256 numbers in the range −1 to +1. The network does not know the difference. That is the point.

• Dense — fully connected, small, fast, easy to reason about.
• CNN — convolutional, learns spatial filters, shows you the feature maps as they form.

From 4×4 to 64×64. Small resolutions train in seconds. Large resolutions require more data. The tool makes the trade-off visible.

• Every neuron is a glowing circle whose brightness tracks its activation.

• Every weight is a curved wire whose thickness, brightness, and glow track its magnitude.

• Every feature map updates every frame.

• The input itself — image or spectrogram — is shown full-size.

• Exact analytical gradients. No finite differences anywhere.

• Adam optimizer. Same update rule as production frameworks.

• Gradient clipping. Prevents divergence on large networks.

• Train / validation split. Every fifth sample is held out.

• Live overfitting warning. Fires the moment validation accuracy falls behind its peak.

Save the trained weights as JSON. Load them back later. Class names and colors survive the reload.

Download the repository. Open index.html in any modern browser.

Prefer to serve it? Run a local server from the project folder:

python3 -m http.server 8000

Then open http://localhost:8000/.

You can also use the live version hosted on GitHub Pages:

https://MatiwosKebede.github.io/OpenTrainDNN/

1. Click Start camera . Allow the permission prompt.

2. Hold a red object in front of the camera. Press1 fifteen times while moving it slightly.

3. Hold a blue object . Press2 fifteen times, same motion.

4. Press Train .

5. Watch the DNN preview fill in. Wires thicken and glow. After about ten seconds, accuracy stops rising.

6. Alternate the two objects. The prediction box flips.

7. Switch the input source to 🎤 Microphone .

8. Say "yes" twenty times. Press1 after each.

9. Say "no" twenty times. Press2 after each.

10. Press Train .

11. Say "yes". The first bar fills. Say "no". It flips.

That is the entire system end-to-end: real signal → real numbers → real learning → real prediction.

The rule. If a person could tell two things apart from a small grayscale thumbnail, the network can learn to do the same. If not, it cannot. No amount of training will help.

OpenTrainDNN/
├── index.html          — markup
├── style.css           — styling
├── README.md           — this file
├── CONTRIBUTING.md     — how to contribute
├── CODE_OF_CONDUCT.md  — community standards
├── SECURITY.md         — disclosure policy
├── CHANGELOG.md        — version history
├── LICENSE             — MIT
├── docs/
│   └── screenshot.png  — README image
├── .github/
│   ├── ISSUE_TEMPLATE/ — bug and feature templates
│   ├── workflows/      — Pages deployment
│   └── PULL_REQUEST_TEMPLATE.md
└── js/
    ├── math.js         — pure helpers, activations, MOSFET model
    ├── state.js        — every mutable global
    ├── input.js        — image + audio pipelines
    ├── network.js      — dense + CNN forward/backward
    ├── visualize.js    — live view, DNN preview, feature maps
    ├── classes.js      — class UI, capture, file handling
    └── main.js         — boot, save/load, event wiring, main loop

Load order matters. The script tags in index.html must load in exactly this sequence:

math  →  state  →  input  →  network  →  visualize  →  classes  →  main

Each module depends only on the ones before it.

Both input types are converted to a square grid of numbers in the range −1 to +1.

Standard feed-forward stack. Either:

input → dense → dense → ... → output (softmax)

or:

input → conv → relu → pool → conv → relu → pool → flatten → dense → output

Stochastic gradient descent with:

• Mini-batch size: 32 (Dense), 8 (CNN)
• Optimizer: Adam, β₁ = 0.9, β₂ = 0.999
• Learning rate: 0.01 (Dense), 0.008 (CNN)
• Weight clip: ±6
• Gradients: exact analytical derivatives

No finite differences. No autograd. Every derivative is written out by hand in network.js.

Any modern browser with getUserMedia and Web Audio API support.

No plugins. No extensions. No install.

The microphone requires HTTPS in some browsers. GitHub Pages provides that automatically. Locally, a small HTTP server such as Python's built-in one is enough.

Contributions are welcome. See CONTRIBUTING.md for the full guide.

Short version:

• Keep the modular structure intact.
• Do not add new architectures (RNN, LSTM, Transformer, attention).
• Do not add a build step or dependencies.
• Test on at least two browsers.
• Bug reports and honest criticism are more valuable than features.

See SECURITY.md for the disclosure policy.

MIT. See LICENSE for the full text.

Developed by Matiwos Kebede

The same learning algorithm runs in a browser tab and in a data center. The difference is only scale.