OCR Online — Embed API

A client-side OCR component you embed in your app, like Stripe Elements. Documents never reach a server.

Try it

Pick an image or paste one from your clipboard. Recognition happens inside a hidden iframe pointing at /embed.html; this page never sees the pixel data after handing it over.

loading model…

Integration

Drop a hidden iframe in your page and import the SDK. The iframe runs OCR locally; your page calls recognize() like a normal async function.

<script type="module">
  import { OcrClient } from 'https://ocr.rotko.net/embed-client.js'

  const ocr = await OcrClient.attach('https://ocr.rotko.net/embed.html')
  const result = await ocr.recognize(file)   // File | Blob | ImageBitmap | ImageData
  console.log(result.text, result.items, result.avgConfidence)
</script>

What the embed does

Loads the PP-OCRv5 mobile model (≈17 MB) + the onnxruntime wasm (≈26 MB) once; subsequent calls are zero-network.
Receives Blob / ImageBitmap / ImageData via postMessage; runs OCR inside a Web Worker on its own origin.
Posts back {text, items, avgConfidence}. No persistence; closing the embed clears everything.
Source code: github.com/rotkonetworks/modgrad

Wire protocol

If you'd rather not use the SDK, the postMessage envelopes are tiny:

// parent → embed
{ type: 'ocr/recognize', id: number, blob | bitmap | imageData }

// embed → parent
{ type: 'ocr/hello',  version: 1 }      // on iframe load
{ type: 'ocr/ready' }                    // once models are cached
{ type: 'ocr/result', id, text, items, avgConfidence }
{ type: 'ocr/error',  id, error }