# Web

> On-device content moderation for the web: check images, text and the live camera or screen share right in the browser, with no cloud round-trip.

> For AI agents: the complete documentation index is at https://nosmai.com/llms/moderations.txt

Product: Nosmai Moderation
Group: platform-guides
Source: https://nosmai.com/docs/moderations/web/

## Install

```sh
npm install @nosmai/moderation-web
```

**Host the models.** The model files come with your license. Serve them as static files your site can fetch, for example under `/models/`: `nsm_nsfw.onnx`, `nsm_detector.onnx`, `nsm_text.onnx` and `vocab.txt`. They ship encrypted and are decrypted in the browser only after a valid license check.

**Requirements:** a modern browser (the SDK runs on ONNX Runtime Web, WASM by default with WebGPU optional) and a bundler (React, Vue, vanilla JS, and so on). The license key is bound to your site's domain.

## Initialize

Validate the license once, then load the models you use. Each model is a separate file you host.

```ts
import { NosmaiModeration } from '@nosmai/moderation-web';

const res = await NosmaiModeration.initialize('NOSMAI-XXXX');
if (!res.success) console.error('license:', res.status, res.error);

await NosmaiModeration.initializeNsfw({ modelUrl: '/models/nsm_nsfw.onnx' });
await NosmaiModeration.initializeDetector({ modelUrl: '/models/nsm_detector.onnx' });
await NosmaiModeration.initializeText({
  modelUrl: '/models/nsm_text.onnx',
  vocabUrl: '/models/vocab.txt',
});
```

Optionally prefer the GPU before loading models:

```ts
NosmaiModeration.setExecutionProviders(['webgpu', 'wasm']);
```

## Moderate an image

Pass any image source the browser can draw: an `HTMLImageElement`, a canvas, or an `ImageBitmap`.

```ts
const r = await NosmaiModeration.analyzeImage(imageElement);   // objects + NSFW
if (r.isUnsafe) {
  // r.detections, r.nsfw -> 'safe' | 'warn' | 'block'
}
```

## Moderate text

```ts
const t = await NosmaiModeration.moderateText('some message');
if (t.blocked) {
  // t.layer ('blocklist' | 'classifier'), t.category
}
```

## Live camera or screen

Play the stream in a `<video>` element and receive a result per analyzed frame. Use `source: 'screen'` for screen-share moderation.

```ts
await NosmaiModeration.startLive({
  video: videoEl,
  source: 'camera',            // or 'screen'
  onResult: (r) => {
    // r.isUnsafe, r.nsfw, r.detections
  },
});

// on leave
NosmaiModeration.stopLive();
```

## Cleanup

```ts
NosmaiModeration.shutdown();
```

> [!NOTE]
On the web there is no separate recorded-video call: to moderate a clip, draw frames from a `<video>` onto a canvas and pass each to `analyzeImage`. Decision thresholds are fixed by the model's calibration.