OCR Webアプリケーション

画像を読み取ってテキスト情報を抽出するWebアプリケーションです。日本語文書に特化したOCRライブラリ「yomitoku」を使用しています。

概要

このアプリケーションは、画像をアップロードすると、OCR処理によりテキスト情報を抽出します。 yomitokuの特徴を活かし、Paragraphs（段落レベル） と Words（単語レベル） の2つの粒度で結果を表示します。

特徴

• 🇯🇵 日本語に特化 - yomitokuによる高精度な日本語文字認識
• 📊 2つの粒度での抽出 - 段落レベルと単語レベルで結果を表示
• 🔄 ホットリロード対応 - Docker Composeでの快適な開発体験
• 🎨 シンプルなUI - ドラッグ&ドロップで簡単にアップロード
• 💰 完全無料 - 外部APIを使わずローカルで完結

使用技術

バックエンド:

• Python 3.11
• Flask 3.1.2 - WebフレームワークAPI
• yomitoku 0.9.4 - 日本語OCRエンジン
• Pillow 11.1.0 - 画像処理
• OpenCV - 画像フォーマット変換
• Flask-CORS - CORS対応

フロントエンド:

• TypeScript - 型安全な開発
• Vite - ビルドツール & 開発サーバー
• Vanilla JS - シンプルなランタイム

インフラ:

• Docker & Docker Compose - 開発環境

プロジェクト構造

python-ocr-jp/
├── src/
│   ├── backend/          # Pythonバックエンド
│   │   ├── app.py       # Flaskアプリケーション
│   │   └── utils/
│   │       └── ocr_processor.py  # OCR処理ロジック
│   └── frontend/         # TypeScriptフロントエンド
│       ├── main.ts      # メインロジック
│       ├── style.css    # スタイル
│       └── index.html   # 開発用HTML
├── templates/            # Jinja2テンプレート（本番用）
│   └── index.html
├── static/              # ビルド後の静的ファイル（自動生成）
├── requirements.txt      # Python依存関係
├── package.json         # Node.js依存関係
├── vite.config.js       # Viteビルド設定
├── compose.yml          # Docker Compose設定
└── Dockerfile           # Dockerイメージ定義

クイックスタート（推奨）

Docker Composeを使うのが最も簡単です。

前提条件

• Docker
• Docker Compose

起動手順

# リポジトリをクローン
git clone https://github.com/tamoco-mocomoco/python-de-ocr.git
cd python-de-ocr

# Docker Composeで起動（ホットリロード有効）
docker compose up --build

# バックグラウンドで起動する場合
docker compose up -d --build

アクセス先

• フロントエンド（推奨）: http://localhost:5001

  • Viteの開発サーバー
  • TypeScript/CSSの変更が即座に反映

• バックエンドAPI: http://localhost:5000

  • Flask APIサーバー
  • Pythonコードの変更が自動的に再起動

ホットリロード機能:

• ✅ TypeScript/CSSの変更 → 即座にブラウザに反映
• ✅ Pythonコードの変更 → Flaskが自動再起動

停止方法

# コンテナを停止
docker compose down

# コンテナとボリュームを削除
docker compose down -v

ログを確認

# 全サービスのログ
docker compose logs -f

# 特定のサービスのみ
docker compose logs -f web
docker compose logs -f vite

コンテナに入る

docker compose exec web bash

ローカル開発（Docker不使用）

Dockerを使わずにローカルで開発する場合の手順です。

前提条件

• Python 3.11以上
• Node.js 18以上
• npm

セットアップ

# リポジトリをクローン
git clone https://github.com/tamoco-mocomoco/python-de-ocr.git
cd python-de-ocr

# Python依存関係をインストール
pip install -r requirements.txt

# Node.js依存関係をインストール
npm install

開発サーバーの起動

ターミナル1 (Vite開発サーバー):

npm run dev

ターミナル2 (Flask):

cd src/backend
python app.py

• Vite開発サーバー: http://localhost:5001
• Flask API: http://localhost:5000

使い方

1. ブラウザでアプリケーションを開く（http://localhost:5001）
2. 画像をドラッグ&ドロップ、またはクリックしてファイルを選択
3. 自動的にOCR処理が開始される
4. 抽出されたテキストが2つの形式で表示される
   • Paragraphs: 段落単位でまとまった文章
   • Words: 個別の単語
5. 詳細情報セクションを開くと、位置情報などの生データを確認可能

対応画像形式

• PNG (.png)
• JPEG (.jpg, .jpeg)
• GIF (.gif)
• BMP (.bmp)

ファイルサイズ制限

最大 10MB

OCR結果について

yomitokuは2つの粒度でテキストを抽出します：

• Paragraphs（段落）: 文書の意味的なまとまりを保持。文書全体の内容理解に適している
• Words（単語）: 個別の単語レベルで抽出。キーワード検索やデータ抽出に適している

API エンドポイント

GET /

トップページを表示

GET /api/health

ヘルスチェック

レスポンス:

{
  "status": "ok"
}

POST /api/ocr

画像をOCR処理

リクエスト:

• Content-Type: multipart/form-data
• Body: file (画像ファイル)

レスポンス（成功時）:

{
  "success": true,
  "text": "全テキスト...",
  "blocks": [{"content": "テキスト行1", "bbox": {...}}, ...],
  "paragraphs": {
    "text": "段落レベルのテキスト...",
    "blocks": [{"content": "段落1", "bbox": {...}}, ...],
    "count": 11
  },
  "words": {
    "text": "単語レベルのテキスト...",
    "blocks": [{"content": "単語1", "bbox": {...}}, ...],
    "count": 50
  },
  "raw_data": {...}
}

レスポンス（エラー時）:

{
  "success": false,
  "error": "エラーメッセージ"
}

注意事項

セキュリティ

• アップロードされた画像は処理後すぐに削除されます
• 本番環境では適切なアクセス制御を実装してください
• HTTPS通信を使用してください

OCR精度について

• yomitokuのOCR精度は画像品質に依存します
• 低解像度や歪んだ画像では認識精度が低下する可能性があります
• 複雑なレイアウトの文書では、段落の認識が期待通りにならない場合があります

初回起動について

• 初回起動時、yomitokuがAIモデルをダウンロードするため時間がかかります
• Docker環境では初回ビルドに5〜10分程度かかる場合があります

今後の改善案

• データベースを追加して処理履歴を保存
• より高度なテキスト抽出ロジック
• 複数画像の一括処理
• ユーザー認証機能
• OCR結果の手動編集機能
• PDF対応

ライセンス

MIT

技術記事

このプロジェクトの詳細な解説記事：

• Zenn記事 - yomitokuで作る無料の日本語OCR Webアプリ

参考リンク

• yomitoku - 日本語OCRライブラリ
• Flask公式ドキュメント
• Vite公式ドキュメント
• Docker公式ドキュメント