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

【第2回】ResponderとKerasを使って機械学習Webアプリケーションを作ってみる【ネットワーク作成編】

~第2回~ResponderとKerasを使って機械学習Webアプリケーションを作ってみる!

この第2回記事は、「ResponderとKerasを使って機械学習Webアプリケーションを作ってみる」という連載記事になります。

「なぜこの連載を始めたか」というと理由は3つあります。

  1. 1. Responderが面白く、他にもWebアプリを作ってみたい!
  2. 2. Responderの非同期処理を使ってみたい!
  3. 3. せっかくのPythonのフレームワークなので機械学習と組み合わせたい!

特に、2番目の「非同期処理」については、以前連載していた「Responderを使ってDjangoチュートリアルをやってみた」の記事では紹介しきれませんでした。

連載終了後、「機械学習と相性が良いのでは!?」と思い立ち、「Responder」と「機械学習」を絡めた記事を書くことを決めました。

簡単なアプリケーションではありますが、Responderのさらに詳しい使い方が分かっていただける記事になるはずです!

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

ネットワークを作成する

今回は前回、未実装で終わった class CreateController から作成していきます。

こんなものを作ります

この記事で作成するページは、以下のページです。

responder_keras_app_1-2

ネットワークをユーザが簡単に作成できるようなUIを目指します。

そのため、JavaScript で、自由にネットワークの層を追加し、モデルを構築していきます。

responder_keras_app_1-3

CreateControllerを作る

それでは、早速作っていきましょう!

ネットワーク作成ページでは、トップページと同じように、GETのみの実装です。

処理としては簡単で、「http://127.0.0.1:5042/create/yokuwakaran_dataset」など、「想定外のURLへの対処(404エラー)」と「必要なデータをビューに渡す」といった形です。

実装

したがって、以下のように実装しました。

ネットワーク作成では、データセットによって入力層と出力層のニューロン数は固定なので、コントローラ側で判断してしまいます。

404エラーページの作成

先に、404エラーページを作成しておきましょう。

まずは、urls.py に以下を追記します。

次に、簡単にコントローラも記述します。

あとは、ビューページを作るだけで、先程の404エラー処理は完了です。

createビューを作る

コントローラはできたので、ビューを作ります。

ここが本アプリケーションの大事なページです。

前提条件

まず、前提条件として

1. 入力層と出力層は固定
2. 中間層はある程度自由に追加可能
3. パラメータの調整もある程度可能

にします。

「1」と「3」は、Responder と htmlのフォームでどうにかなりますが、「2」についてはブラウザ側で処理しなければならず、Python は関与できません

そこで、JavaScript とうまく連携させましょう!

まずはHTMLで作成可能な部分を作る

「1」と「3」は、HTMLで作成可能ですので、まずは作ってしまいましょう。

コントローラ側で入力層および出力層のニューロン数はビューに渡しているので、それを展開するだけです。

またJavaScript部分は、まだ実装していませんが、中間層ニューロンを追加するボタンだけは先に作ってしまいましょう。

複数同じようなボタンを配置するので、Jinja2 のフィルタに登録してしまいましょう!

次に、ビュー(tenplates/create.html)を作ります。

これで、ネットワーク作成ページの雛形は完成です。

JavaScriptで中間層を自由に追加する

そうしたら、先程書いたビューの <div id="add_layer"><!-- ここに中間層が追加される --></div> の部分にボタン( {{ 500 | fc }} など)が押されたときに中間層が追加されるようにします。

関数名は、 add_fc(neurons) です。

早速、先程の create.html の {% endblock %} の前に以下のような JavaScript を追記します。

処理内容は、そんなに難しくありません。

「add_layer」ID を持つ divタグを探して、文字列を .innerHTML で追加しているだけです。

確認

実際に動かしてみると、うまく中間層がボタンによって追加されていることが分かります。

responder_keras_app_1-3

あとは、ここでデータを送信し、Python側で機械学習を行います

学習部のルーティング

先ほどのビューでPOST送信されたデータは、「/learn/{dataset}」というURLで受け取り、「LearnController」で処理することにします。

まずは、ルーティングしましょう。

GETで受け取った場合は対応しないので、404エラーページにリダイレクトします。

POST処理については本アプリケーションで重要な部分になりますので、実装は次回にします!(中途半端ですみません)

第2回: おわりに

今回は、ネットワーク作成ページを作成しました。

今回は、ほとんどビューのコードが占めてしまいましたが、ここまでくると Responder のルーティング作業も慣れてくるかと思います。

次回は、いよいよアプリの核を作っていきます!

Responder のバックグラウンド処理も利用していきますので、お楽しみに!

関連記事

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事