PDFのレイアウトを解析、AIへ質問できるOCR×AI対話リーダー です。
PDF の「読んでほしい順番」を UI 上で指定して、まとめて 1 枚の画像にし、そのまま AI に質問できます。
このアプリについて
技術仕様書やホワイトペーパーや論文を読むときに、
- 「この図とその前後の説明をセットで読んでほしい」
- 「3 ページ目の式と、5 ページ目の補足説明をいっしょに見てほしい」
というような「人間側の読み順」を、そのまま AI に渡せるようにしたツールです。
OCR 機能について:
このアプリでは 国立国会図書館 の NDLOCR-Lite を使った OCR 機能（レイアウト解析・文字認識など）を使って、PDF のレイアウトを解析したり文字認識をしたりしています。詳しくは別記事で書く予定です。
背景
技術系の PDF を読むとき、だいたい次のような構成に出会います。
- 2 段組みで、段と段の間に図がはさまっている
- 図のキャプションがページの下にあり、説明文は次のページにまたがっている
- 本文と数式、表がページをまたいで散らばっている
こういう PDF から「ここを読んでほしい」と AI に伝えようとすると、だいたい次のような作業になります。
- 深く読みたいページをスクショする
- 翻訳サービスやChatGPTなどのチャットツールに貼り付ける
- 図や数式と本文が離れているときは、何枚かのスクショを順番に送る
単純な PDF を読むときはこれでも十分ありがたいのですが、「図と数式と説明をセットで理解したい」や「この章や節の内容を踏まえて説明してほしい」ときには、次のようなもやもやが残ります。
- 図や数式だけ送ると、前後の文脈がないのでうまく要約してくれない
- 文章だけ送ると、「どの図の説明なのか」が AI には伝わりにくい
- 何枚もスクショを送っているうちに、自分でもどの順番で読んでほしかったのか分からなくなる
- 文章を送っても、AIがその章や節の内容を踏まえて説明してくれない
最終的には「図と数式と文章を頭の中で対応づけてから質問文を書く」という、地味にしんどい作業を続けることになります。
そこで、「PDF を読むときの、いい感じの読み順をそのまま UI で指定して AI に渡せるようにしよう」と思って作ったのが 「SmartExtract PDF」 です。
個人的には、学生さんや研究者、エンジニアなどの難しい技術書や論文を読むときに、このアプリが役に立つと思っています。
注釈
このアプリはRAG(Retrieval-Augmented Generation)は使っていません。RAGを使った要約などの用途には NotebookLM などのサービスをご利用ください。
SmartExtract PDF でできること
- 矩形で範囲を選び、読み順に並べて 1 枚の画像にまとめ、AI に送る
- サムネイルと目次表示
- 目次がない PDF は AI で自動生成
- チャットで使う LLM（OpenAI / Google など）を設定で切り替え
- OCR機能でPDFのページを解析し、見出し・段落・表・図ごとに矩形選択を半自動化
- OCR機能でテキストを認識し、画像PDFでも文字認識可能
使い方
1. 読んでほしい範囲を矩形で囲む
まず、PDF ビューアで「このページのこことここを読んでほしい」という範囲を、矩形で囲んでいきます。
- 対象の PDF を開く
- ツールバーの 「矩形選択」 ボタンを押して選択モードにする
- 読んでほしい箇所の上でドラッグして矩形を描く
- 必要に応じて、別のページや別の位置にも矩形を追加する
複数ページ・複数の矩形をまたいでも構いません。
- 1 ページ目の図
- 2 ページ目の図のキャプション
- 3 ページ目の補足説明
といったように、「あとでまとめて読んでほしいところ」を、とにかく囲んでいきます。
囲んだ矩形は、追加した順番に「1, 2, 3, ...」という形で並びます。
2. 1 枚の画像にまとめてチャットに送る
読み順を決めたら、リストごと 1 枚の画像にまとめます。
- 「選択範囲を画像として追加」ボタンを押す
- 先ほど指定した読み順どおりに、矩形が縦長の 1 枚の画像に並ぶ
- その画像が、そのままチャットの入力欄に添付される
あとは、画像と一緒に質問を書くだけです。
- 「この 3 ページ目の図は、2 ページ目の説明とどう対応していますか？」
- 「この式が何をしているのか、日本語でざっくり説明してください」
- 「この図と本文から、メリット・デメリットを 3 つずつまとめてください」
といった質問を投げると、AI は 1 枚の画像の中身を 上から順番に 読みながら回答してくれます。
こうすることで、複雑な読み順やページ・章・節をまたいだ構成の考慮、その推測コストをかなり減らせます。
結果として、要約も短くなりやすく、「自分が知りたかったこと」に近い回答が返ってきます。
その他の機能
サムネイルと目次（AI 自動生成つき）
左サイドバーには、ページのサムネイルと目次を表示できます。
- サムネイル: 全ページの縮小版を一覧表示し、クリックでジャンプ
- 目次: PDF に目次情報が含まれていれば、そのまま表示
技術ホワイトペーパーや論文は、そもそも PDF に目次が入っていないものも多いので、そのような場合は AI で目次を自動生成 できます。
- 「AI で目次を作成」ボタンを押す
- LLM が PDF 全体の構成をざっと読み、セクションごとに見出しとページを推定する
- 生成された目次がサイドバーに表示され、クリックで該当ページに飛べるようになる
LLM のプロバイダ・モデル設定
チャットに使う AI は、設定画面からプロバイダとモデルを選んで使えます。
OCR 機能
SmartExtract PDF の裏側では、国立国会図書館 NDL ラボが公開しているノートPCで動くOCRソフトNDLOCR-Liteを利用したOCR機能を実装しています。
NDLOCR-Liteを公開しました。ノートPC等の一般的な環境で動作する軽量なOCRです。英活字や手書きにも試行的に対応しています。
— 国立国会図書館 NDL (@NDLJP) February 24, 2026
マウス操作のみでお使いいただけるようWindows及びMacに対応したアプリもご用意しました。是非お試しください！https://t.co/ZMNWfVfI0J
使い方https://t.co/P0hCRLAgda pic.twitter.com/GfrJJu8QgO
このアプリを作成当時にちょうど話題になっていたということもあり、ぜひ利用してみたいということで追加実装しました。
（※もし動作が重たいと感じたら OCR 機能を OFF にできます）
具体的には次のような処理を行っています。
- レイアウト認識（DEIM）
- 文字認識（PARSeq）
この OCR 機能は、ノート PC でも動くという利点を活用するために、WASM（ONNX Runtime Web）を使って ブラウザ側で実行 しています。
主に次のような場面で利用しています。
-
AI で自動矩形選択
- 現在ページの画像を解析し、見出し・段落・表・図といったブロックごとに矩形を提案する
- 「だいたいここを読んでほしい」という範囲を、AIが半自動で選択してくれる
-
OCR テキストレイヤー
- ページを表示したときにバックグラウンドで OCR を実行し、行単位で認識したテキストを PDF 上に透明レイヤーとして重ねる
この OCR 処理は、計算処理をユーザ PC に依存した環境で安定して動作させるために、Web Worker によるマルチスレッド処理 や、現ページの処理を優先するように工夫したキュー処理、キャッシュを利用した OCR 結果の再利用などの最適化を行っています。
各種最適化の詳細については、別の記事で技術的に掘り下げる予定です。
構成
- クライアント: Vite (Rolldown) + React 19 + TypeScript, Proto, Tailwind v4, shadcn/ui, Vercel AI SDK, Streamdown, Zustand, wouter
- サーバー: Python3.13, uv, FastAPI, SQLAlchemy, LiteLLM, PostgreSQL
- DB: PostgreSQL
起動
起動は Docker を使います。Docker Desktop などをインストールしてください。
-
環境変数:
.env.exampleを.envにコピーして設定してください。cp server/.env.example server/.env cp client/.env.example client/.env -
Docker Compose で起動
docker compose upアプリは http://127.0.0.1:5173（クライアント）、API は
http://127.0.0.1:8000で利用できます。
蛇足
画面上のアプリから自動でスクリーンショットを撮りPDFにまとめるアプリも作りました。
併せて使うと便利かも…？