あなたの医療用の処方箋、パスポート、銀行の明細は、他人のサーバーにアップロードされるよりも、もっと良い扱いを受けるべきです。
私はインド出身の開発者で、DoctorDocsを作りました。これは無料のOCRプラットフォームで、処理のすべてのバイトがあなたのブラウザ内で行われます。アップロードは不要です。サーバーは使いません。データ収集もしません。あなたの書類は端末から一切出ていきません。
この記事では、なぜそれを作ったのか、内部でどう動いているのか、そしてWebAssemblyで動くアプリを本番環境に投入して学んだことを紹介します。
怒りのきっかけになった課題
私の祖母は、医師の処方箋を読める必要がありました。字が判読できないほど汚かったのです。薬剤師でさえ、目を細めて見ていました。私は「これなら、無料のオンラインツールがあるはずだ」と思いました。
あります。何十個も。ですが、そのどれもがあなたの医療用の処方箋をアップロードし、相手のサーバーに送ることを要求します。考えてみてください——あなたの名前、服用している薬、診断内容が、見知らぬ企業のS3バケットに置かれるのです。
Google Lensはうまく動きますが、画像をGoogleのサーバーに送ります。Adobe Scanはアカウントが必要です。私が見つけた「無料のOCR」ツールは、実際にはすべて「機密性の高い書類を私たちのクラウドにアップロードするのは無料」というものでした。
私は、別の仕組みで動くものを作ることにしました。
アーキテクチャ：サーバーでの処理ゼロ
DoctorDocsは厚いクライアント／薄いサーバーというアーキテクチャで動作し、Next.js 15で構築されています。「薄いサーバー」の役割は？静的なHTML/JSを配信するだけです。実際のOCR処理はすべて、WebAssemblyを使ってあなたのブラウザ内で動きます。
処理の流れは次のとおりです：
ユーザーが画像をドロップ
↓
OpenCV.js (WASM) → 二値化、影の除去、コントラスト強調
↓
Tesseract.js (WASM) → LSTMニューラルネットによるOCR、Web Workersでマルチスレッド
↓
独自のテキストフォーマッタ → ノイズ低減、エラー訂正
↓
Monacoエディタ → 編集、コピー、PDFに出力
すべてのステップはクライアント側のCPUで実行されます。サーバーは画像を見ることがありません。
マジックなEnhance（強化）機能
スマホカメラのOCRで最大の問題は照明が均一でないことです。机の照明スタンドの下で処方箋を撮影すると、ページの半分は明るく、もう半分は影になります。
多くのツールは単に明るさを全体的に上げます。すると明るい部分は白になりますが、暗い部分は……やはり暗いままです。
私はOpenCV.jsを使って適応的ガウス閾値処理（adaptive Gaussian thresholding）を実行しました。これは画像を31×31ピクセルの近傍に分割し、それぞれが持つローカルな領域に応じて閾値を調整します。影は消えます。文字がくっきりします。これは、工業用のドキュメントスキャナで使われているのと同じアルゴリズムであり、WebAssemblyによってブラウザ上で動きます。
// この処理は OpenCV.js の WASM 経由でブラウザ内だけで実行されます
cv.adaptiveThreshold(
grayMat,
binaryMat,
255,
cv.ADAPTIVE_THRESH_GAUSSIAN_C,
cv.THRESH_BINARY,
31, // block size
15 // constant
);
マルチスレッドOCR
Tesseract.jsは強力ですが、1スレッドだけだと遅いです。そこで私はnavigator.hardwareConcurrencyに問い合わせてCPUコア数を検出し、ワーカープールを立ち上げます：
const cores = navigator.hardwareConcurrency || 2;
const workerCount = Math.min(Math.max(cores - 1, 1), 4);
// 各ワーカーは eng_best の LSTM モデルを読み込みます
const worker = await createWorker('eng', OEM.LSTM_ONLY, {
corePath: '"tesseract-core-lstm.wasm.js',
langPath: '"4.0.0_best', // 高速版ではないディープラーニングモデル
});
最新のノートPCなら、単一スレッドのOCRと比べて処理時間を60〜70%短縮できます。
150+のツールページ、1つのエンジン
DoctorDocsには144の静的に生成されたツールページがあります——/tools/handwriting-to-text、/tools/prescription-ocr、/tools/receipt-scannerなどです。これらはすべて、内部では同じTesseract.jsエンジンを使っています。
「それってズルじゃない？」—いいえ。SmallpdfやILovePDFが使っているのと全く同じ戦略です。OCRエンジンは変わりませんが、SEOメタデータ、タイトル、FAQ、利用シーンの説明は変えます。それぞれのページは異なる検索キーワードを狙っています。
// generateStaticParams()でSSGが144ページをビルド時にすべて生成
export async function generateStaticParams() {
return TOOLS_CATALOG.map((tool) => ({ slug: tool.slug }));
}
各ツールページは自動的に「関連するツールもあるかもしれません（You Might Also Like）」セクションを生成し、関連する6つのツールへリンクします。これにより、全ページにまたがる内部リンクのメッシュが作られます。
OCRを超えて：ローカルで動くツール
DoctorDocsはOCRだけではありません。9つのPDFユーティリティと5つの画像編集ツールも用意されており、すべてクライアントサイドで動作します：
PDFツール（pdf-lib + pdf.jsで実現）：
- PDFの結合、分割、圧縮、透かし、回転
- ページの抽出／削除
- 画像からPDF、PDFからJPG
画像ツール（HTML Canvasで実現）：
- トリミング、明るくする、白黒化、AIによる高解像度化（Upscale）
AIツール（@xenova/transformersで実現）：
- AI Text Detector — WebGL を介してブラウザ上で 300MB の RoBERTa モデルを実行
- AI Text Writer
- AI Summarizer
どれも、何もアップロードせずに動作します。
自己学習型 OCR パイプライン
これは私が最もワクワクしている部分です。DoctorDocs は、あらゆるユーザー操作から学習する 3 段階の OCR システム を実装しています：
Tier 1: Gemini 2.5 Flash — 利用可能な場合、画像は Google の Gemini API に送られ、エンタープライズ品質の精度を実現します。これはオプトインで、API キーが設定されている場合にのみ使用されます。
Tier 2: TrOCR Vision Transformer — 「シャドーモデル」として、完全にブラウザ内で動作します。同じ画像をバックグラウンドで処理し、その出力を Tier 1 と比較して、学習（トレーニング）目的に使用します。
Tier 3: Tesseract.js — オフラインのフォールバックです。インターネットがなくても常に動作します。
ユーザーがテキストをコピーまたはダウンロードするとき、システムは AI の出力とユーザーが修正したバージョンとの差分（diff）を取得します。この正解データ（グラウンドトゥルース）は将来のモデル学習に活用されます。つまり、OCR は時間とともに良くなっていきます。
私が学んだこと
WebAssembly は重い計算にも実運用レベル。 WASM 経由でブラウザ内に C++ の OCR エンジンを動かすのは突拍子がないように聞こえますが、すべての最新ブラウザで確実に動作します。eng_best の LSTM モデルは約 500MB の RAM を使いますが、高速モデルよりもはるかに良い結果を出します。
プライバシーは「売り文句」ではなく、本当に機能として存在する。 私が「あなたの処方箋はあなたの電話から一切出ません」と人に伝えると、彼らは目に見えて安心します。特にインドでは、データのプライバシーに対する懸念が高い一方で、デジタルリテラシーにはばらつきがあるため、ここが重要です。
SEO は時間がかかる。 このサイトは 3 か月以上公開していますが、アクセス数はまだ積み上がっている最中です。ツール系のサイトを作っているなら、初日から宣伝を始めましょう。「完璧」になるまで待たないでください。
クライアントサイドのアーキテクチャが、最大のコストを消し去る。 私のホスティング費用は $0 です。Vercel の無料プランが静的アセットを提供します。すべての計算はユーザーのデバイスで実行されます。サーバー代は一切かけずに、10 万人のユーザーにも対応できるはずです。
使ってみて
doctordocs.in — 完全無料、サインアップ不要です。
手書きの処方箋の写真、古い手紙、レシート、または任意の書類を送ってください。テキストが表示されるのを見てください——処理はすべてあなたのデバイス上で完結します。
プロジェクト全体は Next.js 15、TailwindCSS、Tesseract.js、OpenCV.js、Transformers.js で構築されています。技術的なアーキテクチャに興味があるなら、詳しいプロジェクトレポートにすべてドキュメント化しました。
どう思いますか？ ブラウザ上で WebAssembly を使って何か作ったことはありますか？ コメントであなたの経験をぜひ聞かせてください。
`
