ONNX.css – Neural network inference using stylesheets

ONNX model → CSS stylesheet

Choose an ONNX model, compile it into a CSS stylesheet, then let the browser style engine run inference.

Compiled successfully

Draw a digit. #

Your browser's style engine will infer the result using a neural network expressed in CSS.

Model compiled to CSS Official ONNX Model Zoo / opset 8

Input canvas #

28×28 tensor

Draw with mouse, trackpad, or touch.

CSS prediction #

Argmax of ten computed logits

— Waiting for a stroke

—

—

—

—

—

—

—

—

—

—

→ CSS variables

→ getComputedStyle() LeNet-style CNN

12 ONNX nodes

30,852 CSS properties

10 raw logits

Generated artifact

Raw compiled CSS #

Preview truncated Only the beginning of the stylesheet is shown. Copy or download to inspect the complete file.

Model source: ONNX Model Zoo / MNIST. Official validated mnist-8.onnx

model using ONNX opset 8.

Compiled successfully

Explore latent space. #

Your browser's style engine generates images using a neural network expressed in CSS.

VAE decoder compiled to CSS 6 nodes · 3 dense layers

Latent position #

Two model inputs

The controls bind directly to two CSS custom properties.

CSS-generated image #

784 computed pixel values

(0.00, 0.00) Waiting for CSS output→ CSS decoder

→ 784 pixels

Variational Autoencoder (VAE) 6 ONNX nodes

3,170 CSS properties

28×28 generated image

Generated artifact

Raw decoder CSS #

Preview truncated Only the beginning of the stylesheet is shown. Copy or download to inspect the complete file.

Pretrained checkpoint: pszmk/mnist-vae-latent2. Decoder-only fixed-shape ONNX export generated by this project. Compiled successfully

Listen for speech. #

Load audio, choose a fixed 32 ms window, and estimate its speech probability using a neural network in CSS.

Silero VAD v6.2.1 compiled to CSS Fixed 8 kHz · recurrent state

Audio window #

256 samples at 8 kHz

Audio decoding and resampling happen in JavaScript.

CSS speech estimate #

Silero probability output

—

—

0.50

Load an audio file to begin→ CSS STFT + VAD

→ Speech probability

Silero VAD v6.2.1

48 primitive nodes

8,188 CSS properties

32 ms fixed window

Generated artifact

Raw VAD CSS #

Preview truncated Only the beginning of the stylesheet is shown. Copy or download to inspect the complete file.

Model source: Silero VAD v6.2.1. With minor model surgery to remove dynamic shapes: fixed 8 kHz branch with prior-audio context and the LSTM lowered to primitive operators.

source & further reading

onnx.css.evanking.io — original article