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でアイデアを形にするレシピ

 

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡本社、東京オフィスの2拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア