ONNX.css – Neural network inference using stylesheets

evmaki1 pts0 comments

ONNX.css — Neural network inference using stylesheets

ONNX model → CSS stylesheet

ONNX.css

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

ModelMNIST classifierMNIST VAE generatorSilero voice activity detector<br>Compilemnist-8.onnx

Model ready to compile

Compiled successfully<br>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

01Input canvas<br>28×28 tensor

Clear

Draw with mouse, trackpad, or touch.

02CSS prediction<br>Argmax of ten computed logits

Prediction— Waiting for a stroke

Canvas pixels→ CSS variables→ getComputedStyle()

ModelLeNet-style CNN<br>Graph12 ONNX nodes<br>Runtime30,852 CSS properties<br>Output10 raw logits

View generated CSS ↓

Generated artifact<br>Raw compiled CSS

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

mnist-8.css · truncated previewDownload full CSSCopy full CSS

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

Compiled successfully<br>Explore latent space.<br>Your browser's style engine generates images using a neural network expressed in CSS.

VAE decoder compiled to CSS 6 nodes · 3 dense layers

01Latent position<br>Two model inputs

Randomize

Horizontal 0.00<br>Vertical 0.00<br>↙↓↘←•→↖↑↗

The controls bind directly to two CSS custom properties.

02CSS-generated image<br>784 computed pixel values

Latent coordinate(0.00, 0.00)Waiting for CSS output

2 latent values→ CSS decoder→ 784 pixels

ModelVariational Autoencoder (VAE)<br>Graph6 ONNX nodes<br>Runtime3,170 CSS properties<br>Output28×28 generated image

View generated CSS ↓

Generated artifact<br>Raw decoder CSS

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

mnist-vae-decoder.css · truncated previewDownload full CSSCopy full CSS

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

Compiled successfully<br>Listen for speech.<br>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

01Audio window<br>256 samples at 8 kHz

Load audio file WAV, MP3, M4A, or OGG

Window position 0.000 s<br>Analyze selected window<br>Audio decoding and resampling happen in JavaScript.

02CSS speech estimate<br>Silero probability output

Voice activity— —

Decision threshold0.50Load an audio file to begin

256 audio samples→ CSS STFT + VAD→ Speech probability

ModelSilero VAD v6.2.1<br>Graph48 primitive nodes<br>Runtime8,188 CSS properties<br>Input32 ms fixed window

View generated CSS ↓

Generated artifact<br>Raw VAD CSS

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

silero-vad-v6.2.1-8k-fixed.css · truncated previewDownload full CSSCopy full CSS

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.

onnx model generated compiled using truncated

Related Articles