Flask, Vue.js, OpenCV, Pytorchで画像認識アプリをHerokuにデプロイする

MNISTで学習したモデルを使って複数桁の数字を認識できないかと思った．ついでにWebアプリとしてデプロイもしてみた．

• コード
• アプリ

作業工程

• 機械学習モデルを学習
• 複数桁の数字を一桁の数字へ変換するモジュールを作成
• Flask & Vue.jsのWebアプリを作成
• Herokuへデプロイ

機械学習モデルを学習

PyTorch MNIST example - GitHubを参考にして学習．
学習に使用したコード→ ./server/modules/mnist.py

複数桁の数字を一桁の数字へ変換するモジュールを作成

コード→ ./server/modules/processes.py
メソッドについて説明する．

__init__()

コンストラクタではフロントから送信された１次元の画像データ（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が結構厄介だった．