はじめに
商品画像や管理画面のスクリーンショットから文字を取り出すために、オンラインOCRを使うことがあります。ただ、請求書や契約書まで外部サーバーへ送るのは少し気になります。
そこで、PP-OCRv6をブラウザ内で動かし、元画像と認識結果をアップロードしないOCRを実装しました。この記事では、UIの紹介よりも、ブラウザ内で動かすために分けた処理と、実装時に困った点をまとめます。
OCR処理は専用Workerへ分離
認識処理をメインスレッドで実行すると、モデルの初期化や推論中に画面操作が重くなります。そのため、モデルの読み込み、画像の前処理、推論、後処理を専用のWeb Workerへ移しました。
メインスレッドが担当するのは、画像選択、進捗表示、結果編集、エクスポートです。Workerとの間では、画像データと認識結果だけを受け渡します。
モデルは初回使用時にダウンロードし、その後はブラウザキャッシュを利用します。OCR処理中に画像や認識文字列をアプリケーションサーバーへ送る処理はありません。
端末に合わせてモデルを3段階に分けた
最初は精度を優先して大きなモデルだけを使おうとしました。しかし、スマートフォンで約138.8MBのモデルを読み込むのは現実的ではありません。
現在は用途別に3つ用意しています。
| モデル | サイズ | 主な用途 |
|---|---|---|
| 高速 | 約6.0MB | 一般的なスクリーンショット |
| 標準 | 約31.2MB | 複雑なレイアウト、日本語を含む画像 |
| 高精度 | 約138.8MB | デスクトップ、小さい文字、難しいスキャン |
常に最大モデルを使うのではなく、画像と端末に合わせて選べるようにしました。スマートフォンでは高速または標準を基本にしています。
テキストだけでなく位置情報も残す
OCRの出力を一つの文字列にすると、表や管理画面の列構造が失われます。そこで、各行の座標、信頼度、読み順、簡単な表構造を保持するようにしました。
表として判断できた結果はタブ区切りでコピーできます。Excelやスプレッドシートへ貼り付けたときに列が分かれるので、OCR後の手作業を少し減らせます。TXT、Markdown、JSONへの書き出しにも対応しました。
現時点の制限
現在のモデルは、中国語、英語、日本語、ドイツ語、スペイン語、ポルトガル語、フランス語を対象にしています。韓国語にはまだ対応していません。
スキャン画像向けの軽い補正は入れていますが、強い二値化は使っていません。スクリーンショットの細い文字が欠けることがあったためです。ここは画像の種類を見て補正方法を切り替える余地があります。
まとめ
ブラウザ内OCRで難しかったのは、単にモデルを動かすことより、端末ごとのメモリ差と、認識後のレイアウトをどう残すかでした。
実際の動作は以下で確認できます。無料・登録不要です。
同じサイトで画像変換・圧縮、GIF/APNG編集、動画の背景除去も提供しています。ブラウザで処理できる一般的なファイルは、端末内で完結する設計にしています。