neural-flexbox
Flexbox, approximately.
Stop using a 10-trillion-parameter model to centre your divs.
Use
a 36,354-parameter model instead.
Inspired by the very useful GPU Lexer, which uses a small model for fast syntax highlighting. neural-flexbox tries something similar in a considerably less useful way: teaching a neural network to guess where CSS would put a box.
Drag the edges to resize. Select a box to change its rules. Each box shows its largest edge error: how far its left or right edge is from the browser’s. Position and width both matter.
Your browser already knows the right answer: CSS computes these positions and widths directly. The dashed outlines show the browser’s boxes; green shows the model’s prediction, and orange shows the difference. This experiment asks how closely 33 KiB of learned weights can approximate that calculation.
Syntax highlighting by GPU Lexer. Loading highlighting…
Model and training
The training harness generates layouts, asks Chromium to measure each box, and uses those positions and widths as targets. A small neural network learns from the container width, gap, alignment, and each box’s basis, grow, and shrink rules. The hidden weights are then quantized to 8 bits to keep the download small.
Trained on 152,000 Chromium layouts. The accepted model averages 0.350 px position/width error on 5,000 held-out layouts. Individual misses can be larger. One row, up to eight boxes, no wrapping or text measurement.
Loading model measurements…