{"slug": "opentraindnn-real-time-browser-neural-network-training-visualizer", "title": "OpenTrainDNN – Real-time browser neural network training visualizer", "summary": "OpenTrainDNN, an open-source client-side web application from developer MatiwosKebede, runs real backpropagation, Adam optimizer weight updates, and gradient clipping entirely in the browser to visualize neural network training step by step. The tool converts camera frames and microphone audio into 16×16 grayscale images or mel spectrograms — 256 numbers in the range −1 to +1 — and supports Dense and CNN architectures at resolutions from 4×4 to 64×64, with exact analytical gradients, a train/validation split holding out every fifth sample, and a live overfitting warning. It is positioned as a teaching tool rather than a framework, with trained weights savable as JSON and the repository runnable by opening index.html or serving locally via python3 -m http.server 8000.", "body_md": "**OpenTrainDNN: A Browser-Based Real-Time Neural Network Visualizer.**\n\nOpenTrainDNN 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.\n\n**No install. No build step. No framework. No backend.**\n\nEvery 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.\n\nOpenTrainDNN 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.\n\nIt exists to answer one question: **what does a neural network actually do?**\n\nIt 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.\n\nThe 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.\n\n- **Dense** — fully connected, small, fast, easy to reason about.\n- **CNN** — convolutional, learns spatial filters, shows you the feature maps as they form.\n\nFrom 4×4 to 64×64. Small resolutions train in seconds. Large resolutions require more data. The tool makes the trade-off visible.\n\n- Every neuron is a glowing circle whose brightness tracks its activation.\n- Every weight is a curved wire whose thickness, brightness, and glow track its magnitude.\n- Every feature map updates every frame.\n- The input itself — image or spectrogram — is shown full-size.\n\n- **Exact analytical gradients.** No finite differences anywhere.\n- **Adam optimizer.** Same update rule as production frameworks.\n- **Gradient clipping.** Prevents divergence on large networks.\n- **Train / validation split.** Every fifth sample is held out.\n- **Live overfitting warning.** Fires the moment validation accuracy falls behind its peak.\n\nSave the trained weights as JSON. Load them back later. Class names and colors survive the reload.\n\nDownload the repository. Open `index.html` in any modern browser.\n\nPrefer to serve it? Run a local server from the project folder:\n\n`python3 -m http.server 8000`\n\nThen open `http://localhost:8000/`.\n\nYou can also use the live version hosted on GitHub Pages:\n\n`https://MatiwosKebede.github.io/OpenTrainDNN/`\n\n1. Click **Start camera** . Allow the permission prompt.\n2. Hold a **red object** in front of the camera. Press`1` fifteen times while moving it slightly.\n3. Hold a **blue object** . Press`2` fifteen times, same motion.\n4. Press **Train** .\n5. Watch the DNN preview fill in. Wires thicken and glow. After about ten seconds, accuracy stops rising.\n6. Alternate the two objects. The prediction box flips.\n\n1. Switch the input source to **🎤 Microphone** .\n2. Say **\"yes\"** twenty times. Press`1` after each.\n3. Say **\"no\"** twenty times. Press`2` after each.\n4. Press **Train** .\n5. Say \"yes\". The first bar fills. Say \"no\". It flips.\n\nThat is the entire system end-to-end: **real signal → real numbers → real learning → real prediction**.\n\n| ✅ Works well |  | ❌ Does not work | \n|---|---|---|\n| Distinct colors | Pen vs pencil *(if the tip is visible)* | Fine textures (wood vs metal) | \n| Distinct brightness | Letters A vs B *(not A vs Å)* | Small details | \n| Faces (you vs a wall) | Two similar faces | Full sentences | \n| Hand gestures |  | Cat vs dog | \n| Simple shapes |  | Anything requiring counting | \n| Two short words |  | Anything requiring reasoning | \n\n**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.\n\n```\nOpenTrainDNN/\n├── index.html          — markup\n├── style.css           — styling\n├── README.md           — this file\n├── CONTRIBUTING.md     — how to contribute\n├── CODE_OF_CONDUCT.md  — community standards\n├── SECURITY.md         — disclosure policy\n├── CHANGELOG.md        — version history\n├── LICENSE             — MIT\n├── docs/\n│   └── screenshot.png  — README image\n├── .github/\n│   ├── ISSUE_TEMPLATE/ — bug and feature templates\n│   ├── workflows/      — Pages deployment\n│   └── PULL_REQUEST_TEMPLATE.md\n└── js/\n    ├── math.js         — pure helpers, activations, MOSFET model\n    ├── state.js        — every mutable global\n    ├── input.js        — image + audio pipelines\n    ├── network.js      — dense + CNN forward/backward\n    ├── visualize.js    — live view, DNN preview, feature maps\n    ├── classes.js      — class UI, capture, file handling\n    └── main.js         — boot, save/load, event wiring, main loop\n```\n\n**Load order matters.** The script tags in `index.html` must load in exactly this sequence:\n\n```\nmath  →  state  →  input  →  network  →  visualize  →  classes  →  main\n```\n\nEach module depends only on the ones before it.\n\nBoth input types are converted to a square grid of numbers in the range **−1 to +1**.\n\n| Camera | Microphone | \n|---|---|\n| Frame drawn to offscreen canvas at SIZE×SIZE | `AnalyserNode` computes spectrum at 40 Hz | \n| Read luminance of each pixel | Bin into log-spaced bands | \n| Flatten to `Float64Array(SIZE²)` | Write column into ring buffer | \n|  | Flatten buffer to `Float64Array(SIZE²)` | \n\nStandard feed-forward stack. Either:\n\n`input → dense → dense → ... → output (softmax)`\n\nor:\n\n`input → conv → relu → pool → conv → relu → pool → flatten → dense → output`\n\nStochastic gradient descent with:\n\n- **Mini-batch size:** 32 (Dense), 8 (CNN)\n- **Optimizer:** Adam, β₁ = 0.9, β₂ = 0.999\n- **Learning rate:** 0.01 (Dense), 0.008 (CNN)\n- **Weight clip:** ±6\n- **Gradients:** exact analytical derivatives\n\nNo finite differences. No autograd. Every derivative is written out by hand in `network.js`.\n\n|  | Lesson | \n|---|---|\n| 🧠 | **Backpropagation is a coordinate transformation.** The hidden layers re-parameterize the input so the final classification becomes linear in the new coordinates. | \n| 📈 | **Generalization is real.** A network trained on 40 samples answers correctly for points it has never seen. | \n| 📉 | **Overfitting is real.** Training accuracy goes up while validation accuracy goes down. The warning fires the moment the gap opens. | \n| 📊 | **Data determines learning.** One image per class produces a network that reports 100% accuracy and fails on everything else. Forty images per class produces a network that works. | \n| 🔄 | **The medium does not matter.** The same learning rule works whether the input is light or sound, and whether the unit is a smooth activation or a MOSFET. | \n\nAny modern browser with `getUserMedia` and Web Audio API support.\n\n| Browser | Status | \n|---|---|\n| Chrome | ✅ Tested | \n| Firefox | ✅ Tested | \n| Safari | ✅ Tested | \n| Edge | ✅ Tested | \n\nNo plugins. No extensions. No install.\n\nThe 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.\n\nContributions are welcome. See [CONTRIBUTING.md](https://github.com/MatiwosKebede/OpenTrainDNN/blob/main/CONTRIBUTING.md) for the full guide.\n\nShort version:\n\n- Keep the modular structure intact.\n- Do not add new architectures (RNN, LSTM, Transformer, attention).\n- Do not add a build step or dependencies.\n- Test on at least two browsers.\n- Bug reports and honest criticism are more valuable than features.\n\nSee [SECURITY.md](https://github.com/MatiwosKebede/OpenTrainDNN/blob/main/SECURITY.md) for the disclosure policy.\n\nMIT. See [LICENSE](https://github.com/MatiwosKebede/OpenTrainDNN/blob/main/LICENSE) for the full text.\n\n**Developed by Matiwos Kebede**\n\n*The same learning algorithm runs in a browser tab and in a data center.*\n*The difference is only scale.*", "url": "https://wpnews.pro/news/opentraindnn-real-time-browser-neural-network-training-visualizer", "canonical_source": "https://github.com/MatiwosKebede/OpenTrainDNN", "published_at": "2026-10-03 06:02:02+00:00", "updated_at": "2026-10-03 06:06:12.015633+00:00", "lang": "en", "topics": ["neural-networks", "machine-learning", "developer-tools", "artificial-intelligence"], "entities": ["OpenTrainDNN", "MatiwosKebede", "GitHub Pages", "PyTorch", "JAX", "Adam"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/opentraindnn-real-time-browser-neural-network-training-visualizer", "markdown": "https://wpnews.pro/news/opentraindnn-real-time-browser-neural-network-training-visualizer.md", "text": "https://wpnews.pro/news/opentraindnn-real-time-browser-neural-network-training-visualizer.txt", "jsonld": "https://wpnews.pro/news/opentraindnn-real-time-browser-neural-network-training-visualizer.jsonld"}}