Use Web

The @rustors/web package brings client-side OCR capabilities to modern browsers, Web Workers, and client frameworks with full TypeScript support.

Installation

npm install @rustors/web @rustors/model-ppocrv6-tiny
# or
yarn add @rustors/web @rustors/model-ppocrv6-tiny
# or
pnpm add @rustors/web @rustors/model-ppocrv6-tiny

Quick Start

import { initialize, detectText } from '@rustors/web';
import { getModelUrls } from '@rustors/model-ppocrv6-tiny';

// 1. Initialize engine with pre-trained models
const urls = getModelUrls('/models/ppocrv6-tiny');

await initialize({
  preset: 'ppv6',
  models: {
    detection: urls.detection,
    recognition: urls.recognition,
    dictionary: urls.dictionary,
  },
});

// 2. Perform OCR on any ImageSource (Image, Canvas, File, Blob, or URL)
const results = await detectText(document.getElementById('my-image') as HTMLImageElement);

for (const item of results) {
  console.log(`${item.text} (${(item.score * 100).toFixed(1)}%)`);
}

CDN Usage (jsDelivr)

You can load pre-trained models and the WebAssembly runtime directly from the jsDelivr CDN without bundling large binaries into your app build:

In Bundlers (Vite, Next.js, Nuxt)

import { initialize, detectText } from '@rustors/web';
import { getModelUrls } from '@rustors/model-ppocrv6-tiny';

// Automatically resolves det.onnx, rec.onnx, and dict.txt from jsDelivr
const urls = getModelUrls('https://cdn.jsdelivr.net/npm/@rustors/model-ppocrv6-tiny');

await initialize({
  preset: 'ppv6',
  wasmUrl: 'https://cdn.jsdelivr.net/npm/@rustors/web/dist/wasm/rusto_rten_wasm_bg.wasm',
  models: {
    detection: urls.detection,
    recognition: urls.recognition,
    dictionary: urls.dictionary,
  },
});

const results = await detectText(imageFile);

Vanilla HTML / Browser ES Modules

No build step or bundler required:

<script type="module">
  import { initialize, detectText } from 'https://cdn.jsdelivr.net/npm/@rustors/web/+esm';
  import { getModelUrls } from 'https://cdn.jsdelivr.net/npm/@rustors/model-ppocrv6-tiny/+esm';

  const urls = getModelUrls('https://cdn.jsdelivr.net/npm/@rustors/model-ppocrv6-tiny');

  await initialize({
    preset: 'ppv6',
    wasmUrl: 'https://cdn.jsdelivr.net/npm/@rustors/web/dist/wasm/rusto_rten_wasm_bg.wasm',
    models: {
      detection: urls.detection,
      recognition: urls.recognition,
      dictionary: urls.dictionary,
    },
  });

  const results = await detectText('https://example.com/sample-receipt.jpg');
  console.log('Detected items:', results);
</script>

Supported Image Sources

@rustors/web accepts:

• Image URLs (e.g. 'https://example.com/receipt.jpg' or '/samples/doc.png')
• Base64 data strings ('data:image/jpeg;base64,...')
• DOM Elements: HTMLImageElement, HTMLCanvasElement, ImageData, ImageBitmap
• User files: File, Blob
• In-memory bytes: Uint8Array, ArrayBuffer, { bytes: Uint8Array }

Output Granularity

// Lines (default): row-grouped candidates
const lines = await detectText(imageFile, { output: 'lines' });

// Words: individual word-level tokens
const words = await detectText(imageFile, { output: 'words' });

// Spatial: formatted text with layout spacing and newlines preserved
const spatialText = await detectText(imageFile, { output: 'spatial' });
console.log(spatialText);

Content Security Policy (CSP)

If your web application deploys strict HTTP Content Security Policy headers, configure these directives:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'wasm-unsafe-eval' https://cdn.jsdelivr.net;
  connect-src 'self' https://cdn.jsdelivr.net blob:;
  worker-src 'self' blob:;
  img-src 'self' data: blob:;

• script-src 'wasm-unsafe-eval': Enables browser runtime compilation of WebAssembly binaries.
• connect-src https://cdn.jsdelivr.net blob:: Permits downloading .wasm and .rten / .onnx model files from the CDN or local blob stores.
• worker-src 'self' blob:: Required because @rustors/web executes inference in non-blocking Web Workers by default.
• img-src 'self' data: blob:: Allows reading images from local file previews or base64 streams.