TensorFlow.js
Integrations demo - ML on the WebGPU backend without a Canvas.
TensorFlow.js can use the same Dawn stack as rendering - but for tensor math, not swapchain output. There is no <Canvas>, render pass, or present(). The preview below trains a tiny sentiment model on the WebGPU backend and runs inference in the browser.
Try phrases like "this is great" vs "terrible service" - the score bar shows how positive the model thinks the text is. The badge shows the active backend (webgpu when Dawn is available).
1. Install the WebGPU backend
npm i @tensorflow/tfjs @tensorflow/tfjs-backend-webgpu react-native-webgpuImport the backend before calling setBackend:
import "react-native-webgpu"; // installs navigator.gpu
import * as from "@tensorflow/tfjs";
import "@tensorflow/tfjs-backend-webgpu";2. Platform shim
TensorFlow.js expects a platform with fetch, text encode/decode, and typed-array checks. Provide a minimal React Native implementation:
import type { Platform } from "@tensorflow/tfjs-core";
export class implements Platform {
(: string, ?: RequestInit) {
return (, );
}
(: string, : ) {
return new (.(, ));
}
(: , : ) {
return .().();
}
() { return .(); }
() {
throw new ("react native does not support setTimeoutCustom");
}
(: unknown): is | | {
return instanceof || instanceof || instanceof ;
}
}
.("react-native", new ());3. Select the WebGPU backend
await .("webgpu");
.("Backend:", .()); // "webgpu"TF.js requests its own GPUDevice via global navigator.gpu (Installation). You do not pass a device from useDevice() unless you build a custom integration.
4. Build and train a model
Standard TF.js APIs work once the backend is ready:
const = .();
.(..({ : 5000, : 32, : 100 }));
.(..());
.(..({ : 16, : "relu" }));
.(..({ : 1, : "sigmoid" }));
.({
: ..(0.0005),
: "binaryCrossentropy",
: ["accuracy"],
});
const = .();
const = .();
await .(, , { : 50 });
.();
.();5. Inference
const = .([((), )]);
const = await .().();
.();The UI is plain React Native (TextInput, Button) - no WebGPU canvas involved.