1
Original (already cropped)
Color JPEG from the dataset. No further crop is performed.
Provenance (not used at runtime)
—
This page could not start
Build the browser package with ./scripts/build-web.sh, then
serve the repository root with ./scripts/serve-web.sh (or
python3 -m http.server 8000) and open
http://localhost:8000/.
THE INPUT
From a color crop to 4,096 numbers
The browser decodes the JPEG. Crop, grayscale and downsample are hand-written arithmetic. The crop was baked into the dataset, so there is no runtime crop step.
2
Grayscale
One channel, computed at full resolution.
g = (299·R + 587·G + 114·B + 500) ÷ 1000
Hover the grayscale image to read R, G, B and g.
Display-only preview computed in the page. The classifier's path is the WASM implementation of the same formula.
3
Input: 64 × 64 grayscale
4,096 bytes, row-major, values 0–255. This is the only input every classifier sees.
Hover a cell for its value. Click a cell to pin an 8 × 8 zoom.
Hovered cell index = y × 64 + x. The outlined square is the pinned zoom region.
PIXEL ARITHMETIC
Pick a cell to trace its box filter
Hover or click a cell in the 64 × 64 grid. The page will show the
full-resolution block that produced it: boundaries, pixel count,
integer sum, and the exact rounding step.
Hover the full-resolution grayscale image to see one pixel's RGB
values and its grayscale result.
Box filter. Each of the 4,096 output cells is the rounded mean of one rectangle of full-resolution grayscale pixels. The rectangle boundaries use integer division:
x0 = ox · width ÷ 64 x1 = (ox + 1) · width ÷ 64
y0 = oy · height ÷ 64 y1 = (oy + 1) · height ÷ 64
out = (sum + count ÷ 2) ÷ count
Every source pixel belongs to exactly one cell. When the width or height is not divisible by 64, edge blocks differ in size by one pixel. That is part of the pinned formula, not a resize library.
The classifier never receives the color JPEG. It receives only the 4,096 bytes produced here.
Pinned 8 × 8 region
no cell pinnedClick a cell in the 64 × 64 grid to enlarge its neighborhood with numbers.
Checking the display preview against the WASM pipeline…
DATASET & TRAINING
96 training images · 48 cat / 48 dog
The four models are trained on the same 96 images, in manifest order, with seed 0. Held-out images are never used for training. Labels are never given to a classifier at prediction time: a prediction is computed from the 4,096 input bytes alone.
Waiting for the images to load.
HELD-OUT IMAGE
Choose one of the 32 images the models never trained on
Its manifest label stays hidden until after the forecast. The models do not receive the label; they only receive the 64 × 64 input above.
Position
—
Manifest id
—
Split
holdout
True label
hidden
The label is shown only after the four readings and the forecast have been computed. It is used for checking, not for prediction.
FOUR PREDICTION LINES
Four arithmetics, one image
☀ cat · ☁ dog · ◐ tie
p(cat) is each method's own native reading. The four values are not on the same scale and are not a confidence score.
01
no learning
Not trained
Centroid
Average all cat images and all dog images. Whichever average is closer wins.
—p(cat)
Train the models to compute the two distances.
Training has not run yet.
02
no learning
Not trained
k-NN k = 3
Memorize the training set. Find the three closest images and take a vote.
—p(cat)
Train the models to compare the input with all 96 training images.
Training has not run yet.
03
linear learning
Not trained
Perceptron
Learn one weight per pixel plus a bias by gradient descent. One straight boundary.
—p(cat)
Train the models to compute the logit and its sigmoid.
Training has not run yet.
04
non-linear learning
Not trained
MLP
32 hidden units and a hand-written backward pass. It can represent a curved boundary, unlike the perceptron's line.
—p(cat)
Train the models to see the hidden activations and the output logit.
Training has not run yet.
THE FORECAST
Four readings, counted — not averaged
The forecast is the majority of the four labels. A tie counts as neither, so the counts can add up to fewer than four.
Train the models to produce four readings.
Counts
—
Forecast
—
Provisional model quality. The classifiers are still being tuned. This page renders their live output and does not claim a winner. The suggested-example slot above is reserved for a held-out image where the methods visibly disagree.
HOW TO READ THIS PAGE
The last line is arithmetic, not a verdict
- Every heatmap is a 64 × 64 grid. Hover any cell for its exact number.
- Every probability is the method's own reading, not a shared confidence scale.
- Loss curves are measured on the 96 training images, not on the held-out image.
- The four methods are not ranked. They are four different arithmetic procedures.
THE ACKNOWLEDGED BOUNDARY
The MLP is the one place v0 stops asking you to replay every step
Its forward pass and backward pass are hand-written loops, but the learner is not expected to redo 32 hidden units by hand. The activations, output logit and training-loss curve are shown. The boundary itself is part of the lesson.
Perceptron and MLP inputs are explicitly divided by 255 before the dot product. Centroid and k-NN compare raw 0–255 bytes. These conventions are stated in each method's facts row.
DATA & PROVENANCE
128 balanced crops from a public cat/dog sample
Source: Jacquemont (2021), Cats and Dogs sample, Zenodo,
DOI 10.5281/zenodo.5226945,
CC BY 4.0. Each image is a deterministic largest centered square
crop. crop_rect records the source-pixel rectangle as
provenance; it is not applied at runtime. The shell shows the crop,
not the uncropped original.