React Native WebGPU

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.

Loading WebGPU playground…

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-webgpu

Import 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.