[2026/9/8]

[WEB App] Text Extractor v1 — tesseract.js OCR + Whisper STT デュアルモード テキスト抽出ツール

[WEB App] Text Extractor v1 — tesseract.js OCR + Whisper STT デュアルモード テキスト抽出ツール

Text Extractor

画像からテキストを読み取る OCR と、音声からテキストを起こす Speech-to-Text を、1つのブラウザツールに統合したテキスト抽出ツール。

OCRモードでは tesseract.js（Tesseract WASM）による多言語画像認識、STTモードでは @huggingface/transformers（Whisper ONNX WASM）による音声文字起こしを実行します。すべての処理はブラウザ内で完結し、ファイルがサーバーにアップロードされることはありません。

スクリーンショット

OCR モード

画像ファイルを読み込み、テキスト抽出

Text Extractor — OCRモード

STT モード

音声・動画ファイルを読み込み、テキスト抽出

Text Extractor — STTモード

動画（GIF）

OCR モード

Text Extractor — OCR操作デモ

STT モード

Text Extractor — STT操作デモ

特徴

  • デュアルモード統合 — OCR（画像→テキスト）とSTT（音声→テキスト）をタブ切替で1つのツールに統合
  • ブラウザ完結処理 — ファイルをサーバーへ送信せず、すべてブラウザ内で処理。プライバシーの高いファイルでも安心
  • 多言語OCR — 日本語・英語・中国語（簡体/繁体）・韓国語・フランス語・ドイツ語・スペイン語・ポルトガル語・ロシア語・アラビア語・タイ語の12言語対応
  • バッチOCR処理 — 複数画像の一括ドロップ、サムネイル一覧、順次処理
  • Whisper音声認識 — OpenAI Whisperモデル（tiny/base/small）による高精度テキスト起こし
  • 翻訳機能 — STTモードで「Translate to English」を選択すると、音声を英語に翻訳しながらテキスト化
  • モデル自動キャッシュ — Whisperモデルは初回ダウンロード後、ブラウザのCache APIに保存。2回目以降はオフラインでも動作
  • 遅延ロード — OCRエンジンはページ読み込み時、Whisperエンジンは初回使用時にのみロード。互いの起動速度に影響しない
  • クリップボード入力 — Ctrl+V で画像をペーストして即OCR
  • ローカルファイルゼロ — /public にファイルを置く必要なし。すべてCDN/HF Hubから取得

使い方

モード切替

画面左上の 🔍 OCR / 🎤 STT タブをクリックしてモードを切り替えます。各モードの設定パネル・ドロップエリアが切り替わります。

Text Extractor — OCRモード Text Extractor — STTモード

Sample data

音声サンプルは「プロの声素材 PRO-VIDEO」様よりお借りしてます。

OCR モード（画像→テキスト）

1. 画像を読み込む

左パネルの「IMAGE」ドロップエリアに画像をドラッグ＆ドロップするか、エリアをクリックしてファイルを選択します。 Ctrl+V でクリップボードからの画像ペーストにも対応しています。複数画像の同時ドロップも可能です。

2. 言語を設定する

設定説明
Primaryメインの認識言語（デフォルト：日本語）
Secondary補助言語。日英混在テキスト等に。デフォルトは None

日本語テキスト内のアルファベット（URL・変数名等）は、日本語モデル単体でもそこそこ認識できます。

3. テキストを抽出する

🔍 EXTRACT TEXT ボタンをクリック、または Ctrl+Enter で認識を開始します。プログレスバーで進捗が表示されます。

4. 結果を利用する

ボタン説明
📋 COPY TEXT認識結果をクリップボードにコピー
💾 SAVE TXTテキストファイルとしてダウンロード
✕ CLEARファイルと結果をすべてクリア

複数画像をドロップした場合は「BATCH」セクションが表示され、⚡ EXTRACT ALL で全画像を順次処理できます。

STT モード（音声→テキスト）

1. 音声ファイルを読み込む

左パネルの「AUDIO」ドロップエリアに音声/動画ファイルをドラッグ＆ドロップするか、エリアをクリックしてファイルを選択します。

対応する入力フォーマット: MP3, WAV, OGG, FLAC, M4A, WebM, MP4 など、ブラウザが再生可能な音声/動画ファイル全般。

2. モデルと言語を設定する

設定説明
SizeWhisperモデルサイズ。tiny (~45MB) / base (~75MB, 推奨) / small (~250MB)
Language認識言語。デフォルト：日本語。Auto-detect も選択可能
TaskTranscribe（そのまま文字起こし）/ Translate to English（英語に翻訳）

モデルサイズの選び方: tiny は英語向き。日本語では精度が低く、ハルシネーション（存在しないテキストの生成）が起きます。日本語音声には base 以上 を推奨します。

3. テキストを起こす

🎤 TRANSCRIBE ボタンをクリック、または Ctrl+Enter で処理を開始します。

初回実行時はモデルのダウンロードが必要です（base: 約75MB）。プログレスバーでダウンロード進捗が表示されます。ダウンロード済みモデルはブラウザにキャッシュされ、2回目以降は即座に処理が始まります。

4. 結果を利用する

OCRモードと同様に、📋 COPY TEXT / 💾 SAVE TXT / ✕ CLEAR が使えます。

キーボードショートカット

ショートカット説明
Ctrl+V画像をペースト（OCRモード）
Ctrl+Enterテキスト抽出を実行
Ctrl+C結果をクリップボードにコピー（テキストエリア非フォーカス時）

技術スタック

  • tesseract.js v5 — Tesseract OCRエンジンのWASM実装（LSTM認識エンジン）
  • @huggingface/transformers v3 — ONNX Runtime Web 上で Whisper モデルを推論
  • Whisper (onnx-community/whisper-base) — OpenAI Whisperの量子化済みONNXモデル
  • Web Audio API (AudioContext) — 音声ファイルの16kHzモノラルデコード
  • Canvas API — 音声波形の簡易描画
  • Astro — Webアプリケーション基盤

技術記事

更新履歴

  • [v1.0] (2026-09-08): 初回公開。
    • tesseract.js v5 による多言語OCR（12言語対応・バッチ処理）
    • @huggingface/transformers v3 + Whisper ONNX WASM による音声テキスト起こし
    • OCR/STT デュアルモード タブ切替UI
    • 波形表示・オーディオプレイヤー搭載
    • クリップボード画像ペースト対応