【サンプルコード】Keras・MNIST編:Flask(Python)Web機械学習アプリ開発入門 – 画像アップロード判定プログラム

【サンプルコード】Keras・MNIST編:Flask(Python)Web機械学習アプリ開発入門 - 画像アップロード判定プログラム

 

【Keras・MNIST】Flask(Python)Web機械学習アプリ開発チュートリアル

 

 

今回のサンプルコードの実行時の様子です。

Mac・Windowsアプリの外観【サンプルコード】Keras・MNIST編:Flask(Python)Web機械学習アプリ開発入門 - 画像アップロード判定プログラム

基本的な構造のみのシンプルなWeb機械学習アプリです。
Flaskで機械学習アプリを作る際の基本構造を学ぶ際に参考になるのではないかと思います。

 


サンプルコードダウンロード
初版:2021.2.4
最終更新:2021.2.8

 




 

【情報】

サンプルコードの日本語解説を公開しました。
日々の学習にお役立ていただけますと幸いです。

【コード解説】Keras・MNIST編:Flask(Python)Web機械学習アプリ開発入門 – 画像アップロード判定プログラム

オリジナルデータセットで画像認識AIアプリを作成するためのサンプルも公開しました。
【サンプルコード】自作画像認識編 Flask(Python)Web機械学習アプリ開発入門:画像アップロード判定プログラム 

【追記:2023年2月14日】
「keras.preprocessing API」は「Tensorflow 2.9.1」で廃止されたようです。
Tensorflow 2.9.1より上のバージョンを使う場合には
「from keras.preprocessing.image import img_to_array」のところを「from tensorflow.keras.utils import img_to_array」に修正してください。

 

【プログラムのライセンス】

 

 

The MIT License

Copyright 2021 child programmer

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

 

 

【プログラムの説明】

 

 

FlaskでWeb AIアプリ開発を始めたい初学者の方の学習の利便性を考え、Kerasで作成したMNISTの学習済みモデル(モデル構造と重み)を使って、Web上で画像認識ができる基本的な構造のプログラムを作成してみました。
既に「mnist_model_weight.h5」という名前で、学習済みモデルをフォルダ内に入れてあるので、手書きなどの数字画像をアップロード後に、「予測する」のボタンを押すと判定ができます。

HTMLの構造や、app.pyのPythonプログラムの構造も、なるべく必要最小限のシンプルな構造になっていますので、

・HTMLやPythonプログラムの必要機能の追加
・Bootstrapを始め、CSSなどのカスタマイズの練習

がしやすいのではないかと思います。

 

自分で学習させたい場合は以下のGoogle Colaboratoryの共有リンク

flask_keras_mnist_demo.ipynb | Google Colaboratory
(ファイル – ドライブにコピーを保存後にコピー環境で実行)

で学習済みモデルを作成し、ローカル環境に保存することもできます。
ディープラーニングの機械学習の難点として、

・学習済みモデルを作成するのにパソコンにかなりの負荷が長時間かかる・・・

点があるのではないかと思います。
Google Colaboratoryは、Googleアカウントにログインすれば無料でGPUやTPUなどが使えるのでありがたいですね。

 

 

【使い方】

 

 

仮想環境を作成しプログラムを実行することをお勧めします。

 

Pythonのバージョンを指定して仮想環境を作る方法は、一例として

・pyenv
・Anaconda

などがあるようです。
以下に、MacとWindowsの環境で実行する方法例をまとめてきます。

 

 

【実行環境+実行方法例】Macの例(エディタはVisual Studio Codeを使用)

 

 

・Visual Studio Code 1.52.1
・macOS Big Sur 11.2
・Command Line Tools:Xcode Version 12.4(12D4e)
・Homebrew:2.7.5
・pyenv:1.2.21
・Python 3.6.9

 

2020年2月確認時点では、「pyenv install」でPython 3.6.9をインストールできない事象を確認しています。
こちらの記事
【対応例】macOS Big Surでpyenv installでPythonをインストールできない…

に対応方法をまとめておきましたので必要に応じて参照ください。

 

【実行方法】

 

Python3.6.9を上記の記事の方法でpyenvにインストール済みの状態。
Visual Studio Codeで、「Flask-Keras-Simple-MNIST-basic」フォルダを読み込み後、ターミナルを起動し以下を実行。

 


手順1:作業環境内のPythonバージョンの指定

pyenv local 3.6.9

手順2:仮想環境の作成。「ai」という仮想環境を作る例。

python -m venv ai

手順3:仮想環境の起動。成功するとターミナルの始めの表示が「(ai)」になります。「ai」という仮想環境を起動する例。

source ai/bin/activate

手順4:pipのバージョンをアップデート。

python -m pip install --upgrade pip

(または「python -m」の記述がなくてもインストールできると思います)

手順5:プログラムを実行するのに必要なライブラリなどをインストール。

pip install -r requirements.txt

手順6:AIプログラムを起動。

python app.py

手順7:ターミナルに表示されたURLアドレスを、ブラウザで開くとWeb AIアプリが使えるようになります。
Running on http://127.0.0.1:500/
URLリンクの所を、「commandキー」+左クリックでも表示できます。

Web AIアプリの終了方法:ターミナルを選択した状態で実行。
controlキー + cキー

仮想環境の終了方法::ターミナルを選択した状態で実行。

deactivate

 

 

【実行環境+実行方法例】Windowsの例(エディタはVisual Studio Codeを使用)

 

 

・Visual Studio Code 1.52.1
・Windows 10(20H2)
・Anaconda3 2020.11(64bit)

* Visual Studio Codeでcondaコマンドを使えるようにするには、Anacondaをインストール時の設定の「Advanced Options」で

・「Add Anaconda3 to my PATH environment variable」

 

Visual Studio Codeでcondaコマンドを使う方法 - Advanced Options:Add Anaconda3 to my PATH environment variableにチェック

 

にもチェックをした状態にしてインストールする必要があります(「Register Anaconda3 as default Python 3.8」もチェックした状態でインストールしました)。動作確認の際は、Pythonを何もインストールしていないWindows環境でAnacondaをインストールした状態で実行しました。

 

【実行方法】

 

Visual Studio Codeで、「Flask-Keras-Simple-MNIST-basic」フォルダを読み込み後、ターミナルを起動し以下を実行。

 

手順1:Pythonバージョンの指定をした仮想環境の作成。「ai」という仮想環境を作る例。

conda create -n ai python=3.6.9

手順2:仮想環境の起動。成功するとターミナルの始めの表示が「(ai)」になります。「ai」という仮想環境を起動する例。

conda activate ai

手順3:pipのバージョンをアップデート。

python -m pip install --upgrade pip

手順4:プログラムを実行するのに必要なライブラリなどをインストール。

pip install -r requirements.txt

手順5:AIプログラムを起動。

python app.py

* 確認時点では、手順5を実行時にTensorFlow関係のロードエラー表示(白文字)などもあるようでしたが、Web AIアプリ自体は使えそうでした。

手順6:ターミナルに表示されたURLアドレスを、ブラウザで開くとWeb AIアプリが使えるようになります。
Running on http://127.0.0.1:500/
URLリンクの所を、「controlキー」+左クリックでも表示できます。

Web AIアプリの終了方法:ターミナルを選択した状態で実行。
controlキー + cキー

仮想環境の終了方法::ターミナルを選択した状態で実行。

conda deactivate

 

機械学習Webアプリ開発の学習のきっかけになることがありましたら幸いです。

 

 

ファイル構造:サンプルコード

 

ファイル構造:サンプルコード【サンプルコード】Keras・MNIST編:Flask(Python)Web機械学習アプリ開発入門 - 画像アップロード判定プログラム

 

Flask-Keras-Simple-MNIST-basic
-app.py(Pythonプログラム)
-mnist_model_weight.h5(Keras:CNN MNISTの学習モデル構造と学習済みの重み)
-requirements.txt(必要なライブラリのインストール)
-README.md(説明など)
:templates
– base.html(HTMLの基本構造となるベースレイアウト)
– index.html(トップページ)
– result.html(予測結果のページ)

 

 

app.py:サンプルコード

 

 

from flask import Flask, render_template, request
from keras.models import load_model
from PIL import Image, ImageOps 
from keras.preprocessing.image import img_to_array
#追記:「keras.preprocessing API」は「Tensorflow 2.9.1」で廃止。 Tensorflow 2.9.1より上のバージョンを使う場合には
#「from keras.preprocessing.image import img_to_array」のところを「from tensorflow.keras.utils import img_to_array」に修正してください

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/predict', methods=['POST'])
def predict():
    data = request.files['input_file'].stream
    im = Image.open(data)

    model = load_model('mnist_model_weight.h5') 

    img = im.resize((28,28))
    img = img.convert(mode='L')
    img = ImageOps.invert(img) 
    img = img_to_array(img)
    img = img.reshape(1, 28, 28, 1)
    img = img.astype('float32')/255

    result = model.predict_classes(img)
    result = result[0]

    return render_template('result.html',result_output=result)

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

 

 

base.html:サンプルコード

 

 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>【MNIST編】Flask+KerasでシンプルWeb AIアプリ</title>
        {% block head %} {% endblock %}
    </head>
    <body>
        <div style="text-align:center">
            <h2>【MNIST編】Flask+KerasでシンプルWeb AIアプリ</h2>
        </div>

       {% block body %} {% endblock %}
    </body>
</html>

 

 

index.html:サンプルコード

 

 

{% extends 'base.html' %}

{% block body %} 

<form method="POST" action="/predict" enctype="multipart/form-data">
   <div style="text-align:center">
       <input type="file"  name="input_file" aria-label="ファイルの選択">
       <input type="submit" value="予測する">
   </div>
</form>

{% endblock %}

 

 

result.html:サンプルコード

 

 

{% extends 'base.html' %}

{% block body %}

 <div style="text-align:center">
    <h2>予測結果は{{ result_output }}です。</h2>
    <button><a href="/">戻る</a></button>
 </div>

{% endblock %}

 

 

by 子供プログラマー | プログラミング入門ウェブ教室

 

 

【コード解説】Keras・MNIST編:Flask(Python)Web機械学習アプリ開発入門 – 画像アップロード判定プログラム