PaddleOCR オンライン — ブラウザだけで動く OCR

このオンライン PaddleOCR のしくみ#

このページは、PaddleOCR チームが @paddleocr/paddleocr-js として公開している公式ブラウザ SDK、PaddleOCR.js を読み込みます。処理は Python ライブラリと同じ 2 段階のパイプラインです。¹

どちらのモデルも ONNX Runtime Web で動作します。SDK はブラウザが WebGPU に対応していれば WebGPU を使い、そうでなければ WebAssembly にフォールバックします。モデルファイルは Baidu の公式 CDN から取得し、失敗した場合は Hugging Face の PaddlePaddle 組織にある同一の ONNX 版を取得します。いずれの場合もブラウザのキャッシュに保存されるため、2 回目以降は数秒で起動します。³

どのモデルを選ぶべきか#

サーバー向けの PP-OCRv6 medium（Python 版の既定モデル）は、ブラウザ版 SDK では提供されていません。私たちの CPU ベンチマーク (EN) では、small は 5 つのテスト文書のうち 3 つで medium と完全に同じ結果になり、2 つのレシートではそれぞれ 1 文字だけ誤りが多い程度でした。Python ライブラリで得られる結果のプレビューとして十分に参考になります。

認識精度を上げるコツ#

• 文字の部分だけを切り抜く。大きな写真はテキスト検出の前に縮小されるため、大きな写真の中の小さな文字は見落とされることがあります。切り抜きが最も効果的です。
• 文字が抜ける場合は、「検出の設定」を開いて text_det_box_thresh を下げてください（例：0.4）。薄い文字やコントラストの低い文字は、これでしきい値を超えることがよくあります。
• 端の文字が欠ける場合は、text_det_unclip_ratio を 2.0 に上げると、検出枠が少し広く描かれます。
• 傾いたページは、ある程度の傾きまでなら問題ありません（サンプルのレシート写真は 7.5° 傾いていますが、完全に読み取れました）。上下逆や横向きのページには、Python 版パイプラインの use_doc_orientation_classify=True で先に向きを補正します。
• 信頼度スライダーで不確かな行を非表示にできます。赤い枠は 0.80 未満で、誤認識の多くはこの範囲にあります。

ブラウザ版と Python 版の違い#

同じ OCR を自分のサイトに組み込む#

このページの機能は、すべて公式 SDK で実現できます。最小構成は次のとおりです。

import { PaddleOCR } from "@paddleocr/paddleocr-js";

const ocr = await PaddleOCR.create({
  lang: "en",
  ocrVersion: "PP-OCRv6",          // maps to PP-OCRv6_small
  ortOptions: { backend: "auto" }  // WebGPU if available, else WASM
});

const [result] = await ocr.predict(fileInput.files[0]);
for (const line of result.items) {
  console.log(line.text, line.score.toFixed(3), line.poly);
}

バンドラー、Web Worker、WebGPU 用のヘッダー、そしてこのページを安定させるために回避が必要だった CDN の挙動については、PaddleOCR.js ガイド (EN) で解説しています。

よくある質問#