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

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

第2回~ResponderとKerasで機械学習アプリケーションを作りたい!~

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

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

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

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

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

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

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

ネットワークを作成する

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

こんなものを作ります

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

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

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

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 で追加しているだけです。

確認

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

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

学習部のルーティング

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

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

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

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

第3回へつづく!

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

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

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

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

関連記事

こちらの記事もオススメ!



Kerasのオススメ本

直感 Deep Learning ―Python×Kerasでアイデアを形にするレシピ
直感 Deep Learning ―Python×Kerasでアイデアを形にするレシピ

 

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア