MNISTで学習したモデルを使って複数桁の数字を認識できないかと思った.ついでにWebアプリとしてデプロイもしてみた.
- コード
- アプリ
作業工程
- 機械学習モデルを学習
- 複数桁の数字を一桁の数字へ変換するモジュールを作成
- Flask & Vue.jsのWebアプリを作成
- Herokuへデプロイ
機械学習モデルを学習
PyTorch MNIST example - GitHubを参考にして学習.
学習に使用したコード→ ./server/modules/mnist.py
複数桁の数字を一桁の数字へ変換するモジュールを作成
コード→ ./server/modules/processes.py
メソッドについて説明する.
__init__()
コンストラクタではフロントから送信された1次元の画像データ(1channel)と画像のサイズ(width, height)を受け取り,(width, height, channel)へ変換する.
例) MNISTだったら (784, ) → (28, 28, 3)
_labeling()
OpenCVを使って,画像を2値化・ラベリング処理し,それぞれを正方形の画像データに変換する(_to_square()
を使用).
_to_square()
MARGIN=5
,つまりラベル付けされたピクセルから縦横方向に最低5ピクセル余白を取った正方形画像データに変換する.
divide_to_digit()
_labeling()
,_to_squre()
で変換したそれぞれの画像をbase64でエンコードする.(あとでフロントに渡すため)
Flask & Vue.jsのWebアプリを作成
フロンエンド
package.json
は以下のようになっている.開発時はnpm run watch
を実行すると便利.コンパイルされたファイルが./dist
に作成される.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"watch": "vue-cli-service build --watch" # 追加文
}
サーバサイド
以下のパッケージをインストールする.
- Flask
- Flask-Cors
- gunicorn
- numpy
- opencv-python
- Pillow
- torch
- torchvision
開発時はpython server/app.py
を実行してサーバを立ち上げる.→ http://127.0.0.1:5000
Herokuへデプロイ
まず,Heroku CLIをインストールする.
その後,ログインしてHerokuへpushする.
heroku login
git add.
git commit -am "[update]"
git push heroku main
最後に
Herokuにデプロイする時に,OpenCVやPytorchが結構厄介だった.