WebAssembly Usage

npm install @nekoimageland/retto-wasm

pnpm add @nekoimageland/retto-wasm

yarn add @nekoimageland/retto-wasm

import { Retto } from '@nekoimageland/retto-wasm';

class OCRApp {
  private retto: Retto | null = null;
  
  async initialize() {
    // Load WASM module
    console.log('Loading OCR engine...');
    this.retto = await Retto.load((progress) => {
      console.log(`Progress: ${(progress * 100).toFixed(0)}%`);
    });
    
    // Initialize with embedded models
    await this.retto.init();
    console.log('OCR engine ready!');
  }
  
  async processImage(file: File): Promise<string[]> {
    if (!this.retto) {
      throw new Error('OCR engine not initialized');
    }
    
    const imageData = await file.arrayBuffer();
    const results: string[] = [];
    
    for await (const stage of this.retto.recognize(imageData)) {
      if (stage.stage === 'rec') {
        results.push(...stage.result.map(r => r.text));
      }
    }
    
    return results;
  }
}

// Usage
const app = new OCRApp();
await app.initialize();

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (file) {
    const text = await app.processImage(file);
    console.log('Recognized text:', text);
  }
});

import React, { useState, useEffect } from 'react';
import { Retto, RecProcessorResult } from '@nekoimageland/retto-wasm';

export function OCRComponent() {
  const [retto, setRetto] = useState<Retto | null>(null);
  const [loading, setLoading] = useState(true);
  const [results, setResults] = useState<string[]>([]);
  
  useEffect(() => {
    async function init() {
      const instance = await Retto.load();
      await instance.init();
      setRetto(instance);
      setLoading(false);
    }
    init();
  }, []);
  
  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !retto) return;
    
    setLoading(true);
    const imageData = await file.arrayBuffer();
    const texts: string[] = [];
    
    for await (const stage of retto.recognize(imageData)) {
      if (stage.stage === 'rec') {
        texts.push(...stage.result.map(r => r.text));
      }
    }
    
    setResults(texts);
    setLoading(false);
  };
  
  return (
    <div>
      <input type="file" onChange={handleFileUpload} disabled={loading} />
      {loading && <p>Processing...</p>}
      <ul>
        {results.map((text, i) => <li key={i}>{text}</li>)}
      </ul>
    </div>
  );
}