このサイトは、アフィリエイト広告を利用しています。Colaboratoryに公開中のサンプルコードでエラーが出ないように修正しておきました。自作画像認識AIアプリを実装出来るようにしたサンプルコードを作成し、コードの解説をしてみました。機械学習を活用した自作画像認識Webアプリの基本的な仕組みを学びたい!」と考えている方の、何かしらのきっかけになることがありましたら幸いです。今回のプログラムをきっかけに、Flaskを活用した他の機械学習Webアプリのサンプルコードも読み始められますように尚、内容に関しては正確に記載するように努めておりますが、個人で学習した範囲の情報ですので、正確な情報等の詳細に関してはご自身でもよくお調べください。【情報】このページをPDF化した資料を無料でダウンロードできるように公開しました。2.9.1」で廃止されたようです。img_to_array」に修正してください。Flask(Python)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」のフォルダ直下に入れてください。Language)の基本構造(骨格)を記述しています。・(1度記述すれば、その後は)少量の記述だけで効率的にWebページを作成できるようになります。要は使い回せるということです。内の記述で共通で使える部分を指定しています。・<head>・<body>を使い回します。その他にも、Jinja2を活用することでHTMLの中にPythonを埋め込むことができるようになります。AIアプリのトップページ(ホームページ)の構造を記述しています。Jinja2を使い「base.html」で記述したHTMLコードを再利用して・<head>・<body>内の構造を反映させています。・ファイルのアップロード用フォーム・予測を開始するためのボタンなどを設置しています。AIアプリの予測結果ページの構造を記述しています。「index.html」の時と同様に、Jinja2を使い「base.html」で記述したHTMLコードを再利用して・<head>・<body>内の構造を反映させています。機械学習Webアプリ開発で気になる・予測結果を表示させるための場所です。「どのように予測させているの?」と疑問に思うのではないかと思います。次は、いよいよ今回の機械学習アプリの心臓部分を覗いてみましょう。app.run(debug=True)ここには、機械学習アプリの核となるPythonプログラムを記述しています。・アップロード画像を予測するために必要な:「機械学習モデル構造」「学習済みの重み」や、アップロード画像の処理と予測に必要な各種ライブラリなどのインポート:実装などを記述しています。画像アップロード判定プログラムある程度、Flaskで機械学習アプリを作成する方法を学ばれた方は、上記の概略を見るだけで、アプリの構造が大体わかるのではないかと思いますが、HTMLやPython、Flask初学者の方にとっては、意味不明なのではないかと思います。以下に詳細を解説していきます。html>#コード解説:文書型宣言(DOCTYPE宣言)。HTMLバージョンによって書き方が変わりますが、今回はHTML5の文書型宣言の記述です。Definition:文書型定義)などを宣言できるようです。古いバージョンのHTMLの記述方法に比べるとHTML5は、シンプルでいいすね。lang=”ja”>#コード解説:HTMLのlang属性。html要素内で使われている言語は、日本語(ja:japanese)という意味です。<head>〜</head>#コード解説:<head>〜</head>内に文書のヘッダ部分を指定するための記述をします。description(メタディスクリプション)・ブラウザのタブに表示されているテキスト(タイトル):titleなどは、ここに記述されているようです。charset=”UTF-8′′>#コード解説:文字コード(文字エンコーディング)の指定。meta要素のcharset属性を使うと文字コードを指定できます。今回は「UTF-8」を指定しています。HTMLの世界では、HTMLファイルの文字コードと、HTMLの内容を表示させるブラウザの文字コードが異なると、文字化けが発生する原因になります。initial-scale=1′′>#コード解説:viewport(表示領域)の指定。以下のように指定するとviewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返すようになるようです。content=”width=device-width”>initial-scaleで初期倍率を指定できます。今回は「1」を指定していますが、width=device-widthを記述すると、自動的に初期倍率は「1」となるようです。当初は、サンプルコードをシンプルにするために、このコードを入れていませんでしたが、Edgeのブラウザに注意されたので入れておきました...<title>【オリジナルデータセット編】Flask+KerasでシンプルWeb自作画像認識AIアプリ</title>#コード解説:コンテンツ(ページ)のタイトルを指定。<title>〜</title>内に好きなタイトルを入れます。・Googleなどの検索結果のタイトル・ブラウザのタブに表示されているテキスト(タイトル)の表示が変わります。基本的には、コンテンツの内容を上手く反映しているタイトルにすることで、検索エンジンを介して探す方に見つけてもらいやすい名前をつけます。%}#コード解説:Jinja2でテンプレートの継承を設定。%}と記述することで、テンプレートとして他のHTMLページに継承したいブロックを指定できます。%}と「head」と書くことで<head>〜</head>内の情報を継承することができるように設定しています。render_template(‘xxx.html’,title=’表示させたいタイトルを記述’)などと記述することで、各ページの(タイトルの)中身を定義することもできるようです。<body>〜</body>#コード解説:<body>〜</body>の中に記述されたテキストや画像などがブラウザの画面上に表示されます。style=”text-align:center”>〜</div>#コード解説:中央揃えをしています。・Flask+KerasでシンプルWeb自作画像認識AIアプリなどを中央に表示させています。<h2>〜</h2><h3>〜</h3>#コード解説:HTMLでマークアップする見出しタグです。小見出しh1・h2・h3・h4・h5・h6などがあります。<h3>〜</h3>内に、表示させたいテキストを入力します。%}#コード解説:Jinja2でテンプレートの継承を設定。%}と「body」と書くことで<body>〜</body>内の情報を継承することができるように設定しています。%}#コード解説:指定したHTMLを拡張。今回は、ベースレイアウト「base.html」を使い回します。</body></html>を使い回しています。%}#コード解説:ベースレイアウト「base.html」の<body>〜</body>内の内容に加えて、「〜」の部分に、新たに追加したいコードを記述します。value=”予測する”></div></form>#コード解説:画像ファイルをアップロード後に、アップロードした画像ファイルをサーバーに送信(HTTPメソッド:POST送信)し、「〜/predict」のページを表示させるための処理です。action=”/predict”:サーバーに送信。入力データを「〜/predict」のページに送信。enctype=”multipart/form-data:データをマルチパートデータとして送信。ファイルを送信するフォームで必要なようです。style=”text-align:center”>〜</div>:中央揃え。今回は<h2>〜</h2>内の・ファイルの選択(画像アップロード用のボタン)・予測する(予測実行用のボタン)を中央に表示させています。aria-label=”ファイルの選択”>:<input>要素のtype属性に「file」を指定すると閲覧者が、自分のパソコン・スマホなどの端末のストレージからファイルを選択できるようになります。「name=”input_file”」とすることで「app.py」のPythonプログラムで「input_file」という名前で画像ファイルを扱えるように指定しています。「aria-label=”ファイルの選択”」についてですが、aria-label属性は、画面上には表示されませんがテキストリーダーなどでの読み上げの際に認識しやすいように設定しました。aria-label属性を付けなくても、見かけ上は「ファイルを選択」という表示があったのでよしとしていましたが、Edgeのブラウザで確認したところ、注意されましたので追記することにしました。value=”予測する”>:<input>要素のtype属性に「submit」を指定し、フォームの送信ボタンを作成します。「value=”予測する”」でボタン名を表示を指定しています。%}#コード解説:指定したHTMLを拡張。「index.html」と同様に、ベースレイアウト「base.html」を使い回します。</body></html>を使い回しています。%}#コード解説:ベースレイアウト「base.html」の<body>〜</body>内の内容に加えて、「〜」の部分に、新たに追加したいコードを記述します。style=”text-align:center”>〜</div>#コード解説:中央揃えをしています。・戻る(ボタン)を中央に表示させています。</h2>#コード解説:<h2>〜</h2>は、HTMLでマークアップする見出しタグです。小見出しh1・h2・h3・h4・h5・h6などがあります。<h2>〜</h2>内に、表示させたいテキストを入力します。