1. HOME
  2. ブログ
  3. IT技術
  4. 【第4回】ResponderとKerasを使って機械学習Webアプリケーションを作ってみる【アプリ完成編】

【第4回】ResponderとKerasを使って機械学習Webアプリケーションを作ってみる【アプリ完成編】

第4回: 学習結果の表示

responder_keras_app_result

本アプリにおける最後の実装部分です。

前回は、「バックグラウンドで機械学習を行い、学習終了待機ページへのリダイレクト」まで実装しました。

今回は、「学習終了したら学習結果ページへ移行させる」処理を実装していきます!

まずは、第1回をお読みください

Responderのバックグラウンド処理は終了合図を送れない

早速ですが、筆者が遭遇した苦悩をご紹介します(笑)

普通は、非同期処理というと、他スレッドの処理が終わるのを、どこかのポイントで待機することが可能です。

しかし、Responderの非同期処理ではそれができないようです。

また、Responderでは、ビューの表示はルーティングされたクラスのメンバ関数全ての処理が終わるまではされないようなので、関数内で逐一ビューを変更させることも不可能でした。

Pythonの「threadingモジュール」で実装すれば解決するのですが、それだとResponderの恩恵がないので、今回はなんとかResponderのバックグラウンド処理を使って実現してみたいと思います

少しゴリ押しな部分もありますが、暖かい目でみてください(笑)

試行錯誤の末…

結果どうしたかというと、作成した学習結果のグラフが出来上がったら、「学習結果ページへリダイレクト」とすることにしました。

これならバックグラウンド側から信号を送る必要もないし、間接的にバックグラウンド処理の終了を認知することができます。

しかし、ビューを表示させた段階では、すでに Python の手から離れており、もうブラウザ側でしか処理を行えません

したがって、Javascript でファイルの有無を逐一確認すれば良さそうです。

が、これもうまくいきません。

クッキーのせいでうまくいかない

Web上で、画像形を処理するといくつか不具合が生じます。

まず、ブラウザでは2回目移行のページ訪問の際、余計な読み込みを防ぐために画像やCSS、Javascriptファイルなどはクッキーに保存されます。

したがって、最初に「画像がない」と判断された場合、しばらくそれがWeb上では反映されません

「じゃあクッキーを保持しないようにすれば良い」というのもありですが、それもなかなかうまくいかず・・・

定期的にページを読み込ませる方法

最終的にとった方法は「定期リロード」です。

Responderでは、「URLにアクセスしたとき、URLを解析しコントローラに渡しビューを表示させる」といった処理を行なっています。

したがって、ページリロードを行えば、再びPythonの処理をいれることが可能です。

そのときに、学習結果画像があれば「学習結果ビューへ」、そうでなければ「学習中ビューへ」のように処理をわけることができます。

さっそく実装してみる

まずは、学習中のビューに定期リロードを行うように Javascript を書きます。

記述する場所は、learning.htmlの {% endblock %} 前で構いません。

これで、5秒ごとにリロードしてくれます。

(秒数は適当に変更してもらって大丈夫です)

コントローラの修正

次に、コントローラを修正していきます。

まず、ファイル存在チェックを挟むので、以下を新たに controller.py にインポートします。

その後は、以下のように修正しましょう。

ビューの作成

最後に、ビューを作成します。

先程、いくつか引数を受け取りましたが、それらを展開するだけです。

注意点は、Jinja2 でのリストの取り扱い位です。

これはコードを見て貰えれば、理解していただけるかと思います!

学習経過を収めたテーブルは、学習回数によっては超長くなるので、表示サイズを指定し、縦スクロールができるようにしてみました。

動作確認

では、動作確認をしてみましょう!

(以下は、MNISTで 784 – 1000 – 10 のネットワークの学習結果)

responder_keras_result

うまく動作しています!

よくあるエラーは、 {% endautoescape %} を書き忘れていたり、配列のセグメンテーション違反くらいですかね。

それだけ注意していただければ、うまくいくはずです。

第4回: アプリ完成!~おわりに~

これで、本連載で作成しようとしていたアプリが完成しました。

この連載を通して、Responderの非同期処理の使い方や応用の仕方を理解できたかと思います。

ただ、本アプリも、まだまだ発展の余地があります。

例えば、「畳み込み層の追加をできる」ようにしたり、「使えるデータセットを増やす」などです。

はたまた、「中間層のニューロン数をもっと自由に指定できる」ようにしたりと、発展の仕方は無限大です。

ひとつ、すぐにでも改良すべき点は、今回端折ってしまいましたが、POSTデータの例外処理です。

現在は、初期学習率に数字以外を入れたりマイナスの値をいれても、エラー処理を実装していないので、思わぬ結果になってしまします。

アプリとしては、例外処理は必須なので、もしこのアプリをベースに発展させてければ、エラー処理から実装してみると良いかと思います。

弊社のブログ記事では多くの「実装してみよう」系の記事がありますので、ぜひ他の記事も読んでみてください!

全4回に渡り本連載をご愛読いただき、ありがとうございました!

本連載で出来上がったコードはGithubにあげていますのでご自由にお使いください!

関連記事

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事