}}内の「result_output」は変数名です。内の記述が、Pythonのコードとして認識されます。今回のプログラムでは、「index.html」でアップロードされた画像ファイル(変数名:input_file)を、「app.py」のPythonプログラムで予測した結果を「result_output」という変数名にしています。}}と記述をすることで、予測結果を表示できます。href=”/”>戻る</a></button>#コード解説:指定したページに移動するボタンの作成。href=”/”」とすることでトップページ(index.html)に移動するように設定しています。href=”/”>〜</a></button>内には、ボタンの意味がわかりやすいようにテキストを入力します。今回は「戻る」ボタンとして機能するように設定しています。world!」を表示できるようです。app.run(debug=True)これが、FlaskでWebアプリを作成する上での基本的な構造です。world!」のテキストを変えると、新たなテキストが表示できるようになります。Flask:flaskパッケージのFlaskクラスのインポート。Flask(__name__):Flaskクラスの「app」という変数名のインスタンス作成。「app」という変数に、Flaskを定義して使えるようにする。「__name__」は、自動的に定義される変数を指し、現在のファイルのモジュール名が入る。app.pyの場合「app」)@app.route(‘/’):「app」に「https://example.com」(URL「https://example.com」の例)のアドレスに処理を追加。world!」をブラウザ上に表示しています。「@」の行はデコレータと呼ばれるようです。@app.route()の引数には、(‘/’)や(‘/predict’)などのURLを記述します。world」とブラウザに表示させる処理。world!プログラムでは「index」という関数名の関数が記述されています。いうコード入力(コマンド入力)で実行されているかどうか?」を判定。app.py」とコード入力(コマンド入力)した際に、プログラムが実行されることを防ぐ。「app」をデバッグモードで起動。np#コード解説:今回のプログラム(app.py)のPythonプログラムで必要なライブラリ・モジュールなどをインポートしています。request:Flaskを使うために必要なモジュールなどを読み込む。render_template:render_template()関数を利用することで、「index.html」「result.html」などのテンプレートにサーバのデータを組み込めるようになります。request:methods=[‘POST’]を使う際に必要です。load_model:Kerasで作成した機械学習の「モデル構造」「学習済みの重み」などを読み込むために必要です。#学習済みモデルの読み込み(重みを含む)で使われています。Library)後継の画像処理ライブラリPillowを使います。#画像の読み込みで使われています。Libraryから分岐した画像ライブラリのデータフォーマット)からndarray(NumPyの独自のデータ構造。img_to_array(img)で使われています。np:科学技術計算や機械学習など、ベクトルや行列の演算などを行う分野でよく使われるPythonのライブラリ(または、拡張モジュール)の1つNumPyをインポートし、「np」という名前でプログラム内で使います。np.arrayで使われています。render_template(‘index.html’)#コード解説::「app」に「https://example.com」(URL「https://example.com」の例)のアドレスに「index.html」のページを表示させる処理を追加。上記のコードでは、「index」と言う関数名が割り当てられています。・トップページ(ホームページ)に「index.html」に記述してあるHTMLを表示させるのようなニュアンス。Flaskでは、「render_template関数」を使い、HTMLファイルを表示させ、HTMLファイル内に値を入れることができます。「render_template」を利用する際の注意点として、Pythonプログラム内に「render_template」をimportすることと、「templates」と言う名前のフォルダを作成し、「templates」フォルダ内にHTMLファイルを入れておく必要があるようです。「templates」フォルダを作成していないと指定したHTMLファイルを読み込むことが出来ないようです。render_template(‘result.html’,result_output=folder[result.argmax()])#コード解説:「app」に「https://example.com/predict」(URL「https://example.com」の例)のアドレスに「result.html」のページを表示させる処理を追加。result.htmlに記述されている「result_output」と言う変数名には、app.pyのPythonプログラムで予測された「result」(変数名)の結果を反映させます。「folder[result.argmax()]」という記述で「folder」内の予測確率が一番高い正解ラベルを出力できるようにします。‘×:バツ’]とすることで、今回は日本語のラベルが出力されるようにしています。上記のコードでは、一連の処理を「predict」と言う名前の関数として定義しています。result[0]#コード解説:「index.html」でアップロードされた画像(変数名:input_file)を読み込み、Kerasで作成したオリジナルデータセットで作成した学習済みモデル(モデル構造+重み)の「keras_cnn_model_gray_weight.h5」を利用できるように画像を処理後に、画像認識結果を出力させています。今回は、モノクロ・グレースケールとして学習させた学習済みモデルを使っています。カラー画像としてオリジナルデータセットを学習させた場合には、コメントアウト部分(コードの先頭に#がついているコード)のコードを利用します。(コード先頭の#を消す)その場合には、モノクロ・グレースケールの場合に使っていたコードの先頭に#をつけてコメントアウトさせてください。request.files[‘input_file’].stream:「index.html」でアップロードされた画像(変数名:input_file)を「data」と言う変数名でロードする。Image.open(data):「im」と言う変数名で、「data」の画像ファイルを参照する。load_model(‘keras_cnn_model_gray_weight.h5’)#モノクロ・グレースケール(白黒)の場合のモデル読み込み:Kerasで作成したオリジナルデータセットをモノクロ・グレースケールで学習させた学習済みモデル(モデル構造+重み)の「keras_cnn_model_gray_weight.h5」を読み込む。#カラーの場合のモデル読み込み:Kerasで作成したオリジナルデータセットをカラーで学習させた学習済みモデル(モデル構造+重み)の「keras_cnn_model_color_weight.h5」を読み込む。デフォルトでは、コメントアウトの#をコードの先頭につけて無効化しています。「keras_cnn_model_color_weight.h5」の学習済みモデルは、別途ダウンロードして、「Flask-Keras-Simple-Original-basic」のフォルダ直下に入れてください。‘×:バツ’]:オリジナルデータセットの各フォルダ名(ラベル)を「circle」(丸の画像を入れてあるフォルダ)、「cross」(バツの画像を入れてあるフォルダ)にしてあるものを上述のモデルの読み込みで、読み込んでいます。順番で日本語に変更させています。ここの設定をしない場合は、データセットのフォルダ名が出力されます。28:今回の一連のプログラムでは「28」を指定した場合、縦28横28ピクセルの画像に変換します。ここの数値は、オリジナルデータセットを学習させた際の画像の大きさと同じにします。「keras_cnn_model_gray_weight.h5」「keras_cnn_model_color_weight.h5」の学習済みモデルでは、縦28横28ピクセルで学習させています。#カラーの場合の場合は「3」にする:今回の一連のプログラムでは、「1」はモノクロ・グレースケール画像。「3」はカラー画像として処理を行います。ここの数値は、オリジナルデータセットを学習させた際の、画像の形式に合わせます。3」の方にコメントアウトの#を先頭につけて無効化しています。「keras_cnn_model_gray_weight.h5」の学習済みモデルは、モノクロ・グレースケール画像として学習させたデータです。「keras_cnn_model_color_weight.h5」の学習済みモデルは、カラー画像として学習させたデータです。image_size)):「im」と言う変数名の画像を「縦28×横28ピクセル」に変換し「img」と言う変数に入れる。28))という意味になります。利用する学習済みモデルの画像処理形式に合わせて設定します。利用する学習済みモデルの画像処理形式に合わせて設定します。Libraryから分岐した画像ライブラリのデータフォーマット)からndarray(NumPyの独自のデータ構造。color_setting)」の所で「img」と言う変数名の画像データのデータ構造の変換。1)という意味になります。「縦28×横28ピクセル」の「モノクロ・グレースケール(白黒)」のデータ。「縦28×横28ピクセル」の「カラー(RGBモード)」のデータ。カラー:チャンネル数):「.astype(‘float32’)/255」の所で「img」と言う変数名の画像データを正規化。黒から白までの変化を0〜255で表現しているので、255で割ることでデータを0〜1の範囲に正規化。float型にすることで実数値で表現。model.predict(np.array([img])):「img」と言う変数名の正規化された画像データを元に、画像認識(予測)し、「result」と言う変数名に入れる。result[0]::[0]を付けないと出力結果に「[]」がついてしまうので[0]を追記。render_template(‘result.html’,result_output=folder[result.argmax()])で、予測結果をブラウザ上に表示することができます。上記のコードでは、一連の処理を「predict」と言う名前の関数として定義しています。【おわりに】Keras・自作データセット編:Flask(Python)Web機械学習アプリチュートリアルの解説お疲れ様でした。以上、簡単ではありますがFlaskを活用した機械学習Webアプリの解説です。機械学習をするなら、やはりオリジナルデータセットで自分の関心のある物などを予測させられると面白いですね。画像アップロード判定プログラムの解説記事でも記載させていただきましたが、Webアプリ化をより楽しむためには、基礎的なWebアプリ開発の知識も必要そうです。・JavaScript:Webサイトに動きをつけるオブジェクト指向スクリプト言語などの基礎や、関連するフレームワーク(Bootstrapなど)を知っていると応用の幅が広がるのではないかと思います。AIアプリを作成したいと考えている方の学習の一助になることがありましたら幸いです。印刷用PDF:【コード解説】Keras・自作データセット編:Flask(Python)Web機械学習アプリ開発入門:画像アップロード判定プログラム学習の利便性を考え、印刷しやすいようにPDFも作成しました。プリンタの印刷設定で、ブックレット等の冊子風に印刷すると読みやすいのではないかと思います。