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

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

Responderで機械学習アプリケーションを作る

今、人気に火が着きつつある 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アプリケーションが完成するのか?」を、簡単にお見せしておきたいと思います。

トップページ

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

responder_keras_app_1-1

ネットワーク作成ページ

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

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

responder_keras_app_1-2

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

responder_keras_app_1-3

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

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

responder_keras_app_1-4

結果を表示する

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

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

responder_keras_app_result

アプリを作成手順

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

手順

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

  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 にアクセスしてみます。

responder_keras_app_1-6

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

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 }} のように、パイプでスッキリ書けます。

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

バッジ

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

これは

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

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

responder_keras_app_1-7

ここで {% 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 を作れば、ルーティング完了です。

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

第1回:おわりに

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

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

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

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

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

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事