Menggunakan Web

Paket @rustors/web menyediakan kapabilitas OCR sisi klien untuk browser modern, Web Workers, dan framework frontend dengan dukungan TypeScript penuh.

Instalasi

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

Memulai Cepat

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

// 1. Inisialisasi engine dengan model pre-trained lokal
const urls = getModelUrls('/models/ppocrv6-tiny');

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

// 2. Jalankan OCR pada sumber gambar (Elemen Gambar, Canvas, File, Blob, atau 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)}%)`);
}

Penggunaan via CDN jsDelivr

Anda dapat memuat model pre-trained dan runtime WebAssembly langsung dari CDN jsDelivr tanpa perlu menyertakan biner berukuran besar ke dalam berkas build aplikasi Anda:

Pada Bundler (Vite, Next.js, Nuxt)

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

// Mengambil URL det.onnx, rec.onnx, dan dict.txt langsung dari 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

Dapat langsung dijalankan di peramban tanpa alat build:

<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('Hasil deteksi teks:', results);
</script>

Format Keluaran (Output Granularity)

// Lines (bawaan): kandidat teks dikelompokkan per baris
const lines = await detectText(imageFile, { output: 'lines' });

// Words: token terpisah per kata individual
const words = await detectText(imageFile, { output: 'words' });

// Spatial: teks dengan format spasi dan tata letak asli
const spatialText = await detectText(imageFile, { output: 'spatial' });
console.log(spatialText);

Kebijakan Keamanan Konten (CSP)

Jika aplikasi web Anda menerapkan header HTTP Content Security Policy yang ketat, pastikan direktif berikut telah dikonfigurasi:

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': Diperlukan oleh peramban modern untuk mengompilasi biner WebAssembly.
• connect-src https://cdn.jsdelivr.net blob:: Mengizinkan pengunduhan runtime .wasm dan berkas model dari CDN atau objek blob lokal.
• worker-src 'self' blob:: Wajib karena @rustors/web mengeksekusi inferensi pada Web Worker latar belakang secara default.
• img-src 'self' data: blob:: Mengizinkan pembacaan berkas gambar lokal pratinjau maupun base64.