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

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

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

今、人気に火が着きつつある Python の WebAPIフレームワーク「Responder(レスポンダー)」

以前、ライトコードでも流行りに全力で乗っかり「Responderを使ってDjangoチュートリアルをやってみた」という連載記事を行いました。

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

今回から始まる連載は「ResponderとKerasを使って機械学習Webアプリケーションを作ってみた」です!

なぜこのような連載を始めたかというと、3つ理由があります。

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

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

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

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

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



実装環境

  1.  Webアプリケーション部分は、「Responder」
  2. 機械学習フレームワークは、「Keras」

Responder は Webアプリケーション部分、機械学習フレームワークは Keras を使います。

なお、本記事では、以下の環境で実装をしています。

Python3.7.4
Responder1.3.2
Keras2.2.4

この記事の完成品

今回の連載で「どんなWebアプリケーションが完成するのか?」を、簡単にお見せしておきたいと思います。

トップページ

トップページでは、学習させるタスク(データセット)を選択します。

ネットワーク作成ページ

データセットを選択したら、ユーザがネットワークを自由に作成します。

また、ちょっとしたパラメータも指定できるようにします。

以下のように、層を ある程度自由に追加できます。

ネットワークを学習させる

作成したネットワークをバックグラウンド(重要!)で学習させます。

結果を表示する

学習が終了したら、学習結果ページに移行させます。

そのページでは、学習遷移などが確認できます。

アプリを作成手順

それでは早速、作業に取り掛かってまいりましょう!

手順

アプリ作成は、以下の手順で進めていきます。

  1. Responderの大枠作成
  2. トップページのデザインの作成
  3. ネットワーク作成ページの作成
  4. バックグラウンドタスク(学習部)の作成
  5. 学習結果ページの作成

それでは、順番にいきます。

Responderの大枠作成

まずはじめに、Responderのファイル構成などを決めてしまいます。

Responderでは、サーバー立ち上げもルーティングも1つのファイルでやろうと思えばできるのですが、それだと後々管理が困難になります。

ですので、Djangoのように用途によってファイルを分けたいと思います。

サーバー立ち上げ用 – run.py

これは、今後いじることはありません。

サーバーの立ち上げのみ担います。

ルーティング用 – urls.py

このファイルに、「ルーティング処理」を記述していきます。

が、ここにはURLを受け取ったときの処理は書きません。

この後に説明する、コントローラに処理を投げます

Responderは通常、 @api.route() デコレータでルーティングをします。

しかし、今回は処理を分けるために api.add_route('URL', classなど) を使います。

ルーティング処理用 – controller.py

先ほどの api.add_route() で追加されたURLの処理を書くファイルです。

また、ここで Responder の APIインスタンスを作成します。

これで、Responder-Webアプリケーションの大枠が完成です。

それでは試しに、全体レイアウトの「 templates/layout.html 」と、トップページデザインの「 templates/index.html 」を作りましょう。

全体のレイアウト – layout.html

今回もデザインには、Bootstrap4 を用います。

【参考】
はじめに – Bootstrap 4.3 – 日本語リファレンス

各コントローラから、ページタイトルを受け取る仕様にしてみます。

このファイルは、もういじることはありません。

トップページ – index.html

それでは、トップページを適当に作ります。

まだ質素なページですが、ここで動作確認をしてみましょう。

動作確認

http://127.0.0.1:5042 にアクセスしてみます。

うまく動作していそうです。

Jinja2にフィルタを追加してみる

トップページに情報を書き加えていきます。

が、その前に、htmlファイルがスッキリするように、Jinja2 のフィルタ機能を活用してみます。

ちなみに、Jinja2とは先程の、htmlファイルでいう {{ }} や {% %} に囲まれた部分がJinja2が処理する部分で、htmlを生成してくれるテンプレートエンジンです。

Jinja2環境設定用ファイル – jinja_env.py

Jinja2のフィルタは、「 jinja_env.py 」というファイルで定義します。

とりあえずは、以下のように書いておきます。

urls.pyでフィルタを登録

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

そうすると、テンプレート側では、 '/static/images/image.png' と書いていたところを、 {{ 'image.png' | image }} のように、パイプでスッキリ書けます。

これで管理のしやすさも向上しました。

バッジ

また、ついでに「バッジ」もフィルタに登録しました。

これは

と書くと、以下のように表示されます。

ちょっとしたオシャレ要素です(笑)

ここで {% autoescape false %} をつけないと、うまく表示されません。(一度消してみるとどうなるか分かります)

トップページを完成させる

では、トップページを完成させましょう。

役割としては、ユーザに「データセット」を選ばせるページなので、使うデータセットの情報を表示し、選択されたデータセットに対応したネットワーク作成ページにリンクさせます。

そのため、こんな感じにしてみました。

長々としたコードですが、大したことは書いていません。

最初に見せたトップページのデザインになります。

ネットワーク作成URLは、http://127.0.0.1:5042/create/mnist といった http://127.0.0.1:5042/create/{dataset} とします。

新たにルーティング

したがって、「 urls.py 」に新たに、以下を記述しましょう。

そうしたら、controllers.py に class CreateController を作れば、ルーティング完了です。

その実装は、次の記事にて!

第2回へ続く!

今回から新たに「Responder で機械学習アプリを作る」という短い連載がスタートしました。

最初に書いたように、「Responder の非同期処理を如何にうまく利用するか」が重要なアプリケーションです。

筆者も非同期処理には、少し格闘しながら作成したのですが、これがなかなか思うようにいかず…。

そんな「苦労」と「発見」を読者のみなさまと共有できたらと思っています(笑)

それでは、第2回でまたお会いしましょう!

なお、ResponderとKerasについての開発依頼・お見積もりはこちらまでお願いします。

第2回はこちら!

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



Kerasのオススメ本

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

 

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

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

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

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

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

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

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

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

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事