Zenn
👓

pythonでWEBで操作できる簡素なOCRツールを作成してみる

2024/04/23に公開
Flask
Python 3
#
OCR
tech

はじめに

以下のGUIをWEBにした版を作成してみます。
https://zenn.dev/persona/articles/465128239ed781

前提

軽量でシンプルなWebアプリケーションフレームワークのflaskで実現します。
以下を入れておきましょう。

pip install flask
pip install werkzeug
pip install Pillow
pip install tesseract

実装

構成

web_ocr
∟ web_ocr.py
∟ templates
 ∟ index.html
∟ uploads

表示用html

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>OCR Webサービス</title>
</head>
<body>
    <h1>OCR Webサービス</h1>
    <form action="/ocr" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*">
        <input type="submit" value="OCR処理">
    </form>
    <h1>OCR結果</h1>
    <textarea id="ocr" name="ocr" rows="10" cols="100">{{ text }}
    </textarea>
        
</body>
</html>

OCR実装

web_ocr.py
from flask import Flask, render_template, request
from werkzeug.utils import secure_filename
import os
import pytesseract
from PIL import Image

app = Flask(__name__)

# アップロードディレクトリの作成
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# トップページ
@app.route('/')
def index():
    return render_template('index.html')

# OCR処理
@app.route('/ocr', methods=['POST'])
def ocr():
    # ファイルのアップロード処理
    if request.method == 'POST':
        # ファイルの取得
        file = request.files['file']
        if file:
            # ファイル名を安全な名前に変更
            filename = secure_filename(file.filename)
            # ファイルの保存
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

            # 画像の読み込み
            image = Image.open(os.path.join(app.config['UPLOAD_FOLDER'], filename))

            # OCR処理
            text = pytesseract.image_to_string(image, lang='jpn')

            # 結果の表示
            #return render_template('result.html', text=text)
            return render_template('index.html', text=text)

    return 'ファイルを選択してください'

if __name__ == '__main__':
    app.run(debug=True)

実行

pythonファイルを起動します。

python ocr_web_ocr.py

以下のような表示がされるので指示通り「http://127.0.0.1:5000」にアクセスします。

* Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 137-361-885
127.0.0.1 - - [23/Apr/2024 12:57:44] "POST /ocr HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2024 12:57:50] "POST /ocr HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2024 12:57:59] "POST /ocr HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2024 13:15:06] "POST /ocr HTTP/1.1" 200 -

アクセスすると以下のような画面が表示されます。

あとは画像を選択して

↑の画像を使ってます

OCR処理を実行します。テキストエリアに結果が表示されます。

Discussion