【Keras・オリジナルデータセット】Flask（Python）Web機械学習アプリ開発チュートリアル
今回のサンプルコードの実行時の様子です。
オリジナルデータセットで自作画像認識ができる基本的な構造のみのシンプルなWeb機械学習アプリです。
Flaskでオリジナル機械学習アプリを作る際の基本構造を学ぶ際に参考になるのではないかと思います。
【追記：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」に修正してください。
サンプルコードダウンロード
初版：2021年2月9日
最終更新：2021年2月10日
学習済みモデル「keras_cnn_model_color_weight.h5」ダウンロード
画像認識用の丸バツ画像サンプルダウンロード
【情報】
サンプルコードの日本語解説も公開中です。
日々の学習にお役立ていただけますと幸いです。
：【コード解説】自作画像認識編 Flask（Python）Web機械学習アプリ開発入門：画像アップロード判定プログラム
【プログラムのライセンス】
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で作成したオリジナルデータセットの学習済みモデル（モデル構造と重み）を使って、Web上で画像認識ができる基本的な構造のプログラムを作成してみました。
既に
・keras_cnn_model_gray_weight.h5
（データセット画像を白黒のグレースケール設定で学習させたモデル）
・keras_cnn_model_color_weight.h5
（データセット画像をカラー設定で学習させたモデル）
＊「keras_cnn_model_color_weight.h5」は別途ダウンロードして、「Flask-Keras-Simple-Original-basic」のフォルダ直下に入れてください。
という名前で、○×判定（丸バツ判定）用の学習済みモデルをフォルダ内に入れてあるので、○×の画像をアップロード後に、「予測する」のボタンを押すと判定ができます。
HTMLの構造や、app.pyのPythonプログラムの構造も、なるべく必要最小限のシンプルな構造になっていますので、
・HTMLやPythonプログラムの必要機能の追加
・Bootstrapを始め、CSSなどのカスタマイズの練習
がしやすいのではないかと思います。
自分で学習させたい場合は以下のGoogle Colaboratoryの共有リンク
：flask_keras_cnn_originaldataset_demo.ipynb| Google Colaboratory
（ファイル – ドライブにコピーを保存後にコピー環境で実行）
＊ 2021年6月14日時点で、Google Colaboratoryに公開中のサンプルコードでエラーが出ないように修正しておきました。
で学習済みモデルを作成し、ローカル環境に保存することもできます。
ディープラーニングの機械学習の難点として、
・学習済みモデルを作成するのにパソコンにかなりの負荷が長時間かかる・・・
点があるのではないかと思います。
Google Colaboratoryは、Googleアカウントにログインすれば無料でGPUやTPUなどが使えるのでありがたいですね。
【使い方】
仮想環境を作成しプログラムを実行することをお勧めします。
Pythonのバージョンを指定して仮想環境を作る方法は、一例として
・pyenv
・Anaconda
などがあるようです。
以下に、MacとWindowsの環境で実行する方法例をまとめてきます。
【実行環境＋実行方法例】Macの例（エディタはVisual Studio Codeを使用）
・Visual Studio Code 1.53
・macOS Big Sur 11.2
・Command Line Tools：Xcode Version 12.4（12D4e）
・Homebrew:3.0.0
・pyenv：1.2.22
・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-Original-basic」フォルダを読み込み後、ターミナルを起動し以下を実行。
手順１：作業環境内のPythonバージョンの指定
pyenv local 3.6.9手順２：仮想環境の作成。「ai」という仮想環境を作る例。
python -m venv ai手順３：仮想環境の起動。成功するとターミナルの始めの表示が「(ai)」になります。「ai」という仮想環境を起動する例。
source ai/bin/activate手順４：pipのバージョンをアップデート。
python -m pip install --upgrade pip（または「python -m」の記述がなくてもインストールできると思います）
手順５：プログラムを実行するのに必要なライブラリなどをインストール。
pip install -r requirements.txt手順６：AIプログラムを起動。
python app.py手順７：ターミナルに表示された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.53.0
・Windows 10（20H2）
・Anaconda3 2020.11（64bit）
＊ Visual Studio Codeでcondaコマンドを使えるようにするには、Anacondaをインストール時の設定の「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-Original-basic」フォルダを読み込み後、ターミナルを起動し以下を実行。
手順１：Pythonバージョンの指定をした仮想環境の作成。「ai」という仮想環境を作る例。
conda create -n ai python=3.6.9手順２：仮想環境の起動。成功するとターミナルの始めの表示が「(ai)」になります。「ai」という仮想環境を起動する例。既に「ai」という仮想環境を作成している場合は、他の名前に変えてください。
conda activate ai手順３：pipのバージョンをアップデート。
python -m pip install --upgrade pip手順４：プログラムを実行するのに必要なライブラリなどをインストール。
pip install -r requirements.txt手順５：AIプログラムを起動。
python app.py＊ 確認時点では、手順５を実行時にTensorFlow関係のロードエラー表示（白文字）などもあるようでしたが、Web AIアプリ自体は使えそうでした。
手順６：ターミナルに表示されたURLアドレスを、ブラウザで開くとWeb AIアプリが使えるようになります。
Running on http://127.0.0.1:500/
URLリンクの所を、「controlキー」＋左クリックでも表示できます。
Web AIアプリの終了方法：ターミナルを選択した状態で実行。
controlキー + cキー
仮想環境の終了方法：：ターミナルを選択した状態で実行。
conda deactivate
機械学習Webアプリ開発の学習のきっかけになることがありましたら幸いです。
ファイル構造：サンプルコード
Flask-Keras-Simple-Original-basic
-app.py（Pythonプログラム）
-keras_cnn_model_color_weight.h5
（Keras：CNNオリジナルデータセット画像をカラー設定で学習させた学習モデル構造と学習済みの重み）
＊「keras_cnn_model_color_weight.h5」は別途ダウンロードして、「Flask-Keras-Simple-Original-basic」のフォルダ直下に入れてください。
-keras_cnn_model_gray_weight.h5
（Keras：CNNオリジナルデータセット画像を白黒のグレースケール設定で学習させた学習モデル構造と学習済みの重み）
-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
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」に修正してください
import numpy as np
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('keras_cnn_model_gray_weight.h5') #グレースケール（白黒）の場合のモデル読み込み
#model = load_model('keras_cnn_model_color_weight.h5') #カラーの場合のモデル読み込み
folder = ['○：丸', '×：バツ']
image_size = 28
color_setting = 1 #グレースケール（白黒）の場合は「1」にする
#color_setting = 3 #カラーの場合の場合は「3」にする
img = im.resize((image_size, image_size))
img = img.convert(mode='L') #グレースケール（白黒）の場合は「L」
#img = img.convert(mode='RGB') #カラーの場合は「RGB」
img = img_to_array(img)
img = img.reshape(image_size, image_size, color_setting).astype('float32')/255
result = model.predict(np.array([img]))
result = result[0]
return render_template('result.html',result_output=folder[result.argmax()])
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>【オリジナルデータセット編】Flask+KerasでシンプルWeb自作画像認識AIアプリ</title>
{% block head %} {% endblock %}
</head>
<body>
<div style="text-align:center">
<h2>【オリジナルデータセット編】</h2>
<h3>Flask+KerasでシンプルWeb自作画像認識AIアプリ</h3>
</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 %}
：【コード解説】Keras・MNIST編：Flask（Python）Web機械学習アプリ開発入門 – 画像アップロード判定プログラム