🧠 TinyCNN

A tiny neural network that learns to recognise patterns — built entirely from scratch with NumPy, no frameworks. This static page runs the real trained model in JavaScript. View source on GitHub
No TensorFlow No PyTorch Pure NumPy Manual backprop 4 filters GitHub Pages

✏️ Draw a 5×5 pattern

Click squares to turn them blue (on) or leave them dark (off). The network decides: "is this a diagonal pattern or not?"
Not diagonal0.5 · unsureDiagonal
0.500 / 1.000

🔍 What the 4 filters detect

The network has 4 small pattern detectors (filters). Each one slides across your drawing and lights up when it finds something it likes. During training, each filter learned to spot different arrangements of pixels.
Legend: ■ blue = negative weight (wants pixel OFF), ■ orange = positive weight (wants pixel ON).

🔥 Filter responses

These 4×4 grids show how strongly each filter activates on your drawing. Brighter blue = stronger match. This is real data from the actual trained network running in JavaScript.
Draw a pattern to see filter responses

⏳ Training: filters learning over time

This shows the 4 filters during the 100 epochs of real training done in Python. Each snapshot was captured during actual gradient descent. Press Play to watch them learn.
Epoch 0 / 99
Drag the slider to jump through training history

📉 Loss during training

Loss measures how wrong the network's predictions are. A falling line means it's learning. This chart shows the actual loss from real training — not a simulation.

📖 How it works (for beginners)

1 — Convolution
4 small filters (each 2×2) slide across your 5×5 drawing. At every position, each filter computes: "how much does this match what I'm looking for?"
2 — ReLU
Negative scores mean "doesn't match." ReLU sets them to zero. Only positive matches survive.
3 — Pooling
Shrinks each 4×4 map to 2×2 by keeping only the strongest response per block. Now the network cares about whether a pattern exists, not exactly where.
4 — Flatten
The 2×2 maps from all 4 filters are unrolled into a single list of 16 numbers — the network's final description of your drawing.
5 — Dense
A single neuron weighs all 16 numbers against what it learned. Produces one number: "how diagonal is this?"
6 — Sigmoid
Squashes the number into 0–1. > 0.5 = "yes, diagonal-like." < 0.5 = "no."
Built from scratch with NumPy · Forward pass re-implemented in JavaScript for this static page · View on GitHub