ブラウザで言語学習のためにOCRを完全に実行するにはどうすればよいですか？

YuzuLingo · 2026/11/01

ブラウザで言語学習のためにOCRを完全に実行するには、コンパクトなONNXモデルをロードし、WebAssemblyまたはWebGPUで実行します。フレームはデバイスに保持されるため、認識はクラウドAPIキーやサーバーへのラウンドトリップに依存しません。

没入のためのブラウザOCRの重要性

埋め込まれた字幕はピクセルであり、テキストではありません。アニメ、Cドラマ、またはライブストリームを見ている学習者は、辞書が単語を引く前に、それらのピクセルを文字に変換する必要があります。タブでそれを行うことで、ビデオを再生する同じセッションで行を認識できます。

ページ内のONNXモデル

最新のOCRパックは、ブラウザ向けにサイズ調整されたONNXグラフとして提供されます。この拡張機能またはページは、一度重みをロードし、次に剪定された字幕領域をグラフに流します。小型のPaddleOCRスタイルのモデルは、精度とダウンロードサイズのバランスを取るため、CJKハードサブに一般的に選ばれます。

WebAssembly対WebGPU

WebAssemblyは、ChromiumとFirefoxが拡張機能をホストできるすべての場所で動作します。WebGPUは、GPUとブラウザがサポートされている場合に推論を加速します。しっかりとしたスタックは、利用可能な場合はWebGPUを選択し、WASMにフォールバックして、古いマシンでも認識が機能するようにします。

重い作業を隔離してUIがレスポンシブのままにする

メインコンテンツスクリプトスレッドでの数メガバイトのモデルのロードは、クリックやスクロールをフリーズさせます。隔離されたiframeやワーカー内で認識を実行することで、デコードと推論をページのインタラクションパスから外れた状態で維持します。ホストスクリプトは、トリミングされた部分だけを送信し、文字列を受信します。

初めての行が驚きのラグにならないように事前ウォーミングする

最初の推論は、モデルのダウンロードとグラフの初期化に必要なコストをカバーします。学習者がインタラクティブなゾーンを開く際に事前ウォーミングを行うことで、その作業が早めに開始され、静かな5秒のフリーズではなく、明確な読み込み状態が示されます。ウォームアップ後は、後の行がロードされたランタイムを再利用します。