Menggunakan React

Paket @rustors/react menyediakan komponen deklaratif untuk React: <RustoProvider />, useOcr(), <OcrOverlay />, dan <OcrDropzone />.

Instalasi

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

Konfigurasi Provider

Bungkus aplikasi Anda dengan RustoProvider untuk mengelola daur hidup engine dan konfigurasi model. Anda dapat memuat model dari aset lokal publik atau langsung dari CDN jsDelivr:

import React from 'react';
import { RustoProvider } from '@rustors/react';
import { getModelUrls } from '@rustors/model-ppocrv6-tiny';

// Opsi A: Aset lokal di folder public/
// const modelUrls = getModelUrls('/models/ppocrv6-tiny');

// Opsi B: Dihosting langsung via CDN jsDelivr (tanpa perlu bundling aset lokal)
const modelUrls = getModelUrls('https://cdn.jsdelivr.net/npm/@rustors/model-ppocrv6-tiny');

export function App() {
  return (
    <RustoProvider
      config={{
        preset: 'ppv6',
        wasmUrl: 'https://cdn.jsdelivr.net/npm/@rustors/web/dist/wasm/rusto_rten_wasm_bg.wasm',
        models: {
          detection: modelUrls.detection,
          recognition: modelUrls.recognition,
          dictionary: modelUrls.dictionary,
        },
      }}
    >
      <OcrScanner />
    </RustoProvider>
  );
}

Memindai dengan useOcr dan <OcrOverlay />

import React, { useState } from 'react';
import { useOcr, OcrOverlay, OcrDropzone } from '@rustors/react';

export function OcrScanner() {
  const [imageSrc, setImageSrc] = useState<string | null>(null);
  const { detect, results, isProcessing } = useOcr();

  const handleFileSelect = async (file: File) => {
    setImageSrc(URL.createObjectURL(file));
    await detect(file);
  };

  return (
    <div>
      <OcrDropzone onFileSelect={handleFileSelect} />

      {isProcessing && <p>Memindai dokumen...</p>}

      {imageSrc && results.length > 0 && (
        <OcrOverlay
          imageSrc={imageSrc}
          results={results}
          onItemClick={(item) => console.log('Kotak diklik:', item.text)}
        />
      )}
    </div>
  );
}

Pemecahan Masalah Kebijakan Keamanan Konten (CSP)

Saat mengintegrasikan @rustors/react pada aplikasi React, Vite, Next.js, atau Remix dengan aturan CSP yang ketat:

Content-Security-Policy:
  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:;

• Jika muncul EvalError: Refused to compile or instantiate WebAssembly module, tambahkan 'wasm-unsafe-eval' pada script-src.
• Jika berkas model gagal diunduh dari jsDelivr, tambahkan https://cdn.jsdelivr.net pada connect-src.
• Jika pembuatan Web Worker gagal dengan SecurityError, tambahkan worker-src 'self' blob:.