demo · v147

Tensor arithmetic

Build a tiny MLGraphBuilder graph — output = relu(a × W + b) — pick a backend (CPU / GPU / NPU), compile, and run. The same building blocks every WebNN frontend (ONNX Runtime Web, TF.js WebNN backend) generates, exposed end-to-end so you can see the shape of the API.

Origin trial: WebNN ships behind chrome://flags/#web-machine-learning-neural-network in Chrome 147. With no flag, this page falls back to a typed-array implementation so the math still runs.
input a · shape [1, 4]
weight W · shape [4, 3]
bias b · shape [1, 3]
graph (read-only)
backend—
build time—
compute time—
y = (nothing yet)

API trace

Why this shape

  1. navigator.ml.createContext({ deviceType }) picks the backend.
  2. new MLGraphBuilder(context) opens a builder.
  3. Constants come from typed-array buffers; inputs are placeholders.
  4. builder.matmul, builder.add, builder.relu — the same operator set ONNX models compile to.
  5. await builder.build({ y }) compiles the graph; await context.compute(graph, inputs, outputs) runs it.
const context = await navigator.ml.createContext({ deviceType: 'gpu' });
const builder = new MLGraphBuilder(context);

const a = builder.input('a', { dataType: 'float32', shape: [1, 4] });
const W = builder.constant({ dataType: 'float32', shape: [4, 3] }, wBuf);
const b = builder.constant({ dataType: 'float32', shape: [1, 3] }, bBuf);
const y = builder.relu(builder.add(builder.matmul(a, W), b));

const graph = await builder.build({ y });
const outputs = { y: new Float32Array(3) };
await context.compute(graph, { a: new Float32Array([1,-2,3.5,0.5]) }, outputs);
// outputs.y → Float32Array(3) [...]

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗