Dashで機械学習ができるWebアプリを作る [Step1] -

やりたいこと

フレームワークDashを用いて、ファイルをアップロードして読み込んだデータ全てを使って機械学習をしてくれるアプリを作る

f:id:wimper_1996:20191028153645g:plain

今のところ選択出来るモデルは、線形回帰モデル(LinearRegression)とランダムフォレスト回帰(Random Forest Regressor)

多分、後半でXGboostなど、機能を随時追加していこうかなと思うので動画とはまた異なるかもしれない

Dashとは

Webアプリケーションを作るためのPython フレームワーク、つまりFlaskとDjangoと同じ部類

Pythonのデータ可視化モジュールであるPlotlyが開発していて、インタラクティブかつ操作性の高いグラフをシンプルに記述することが可能

Pythonを用いてデータ分析をする人に最適なツール！

同じようなツールとして、RのShinyというものがある。

また、デプロイ(Web上に公開すること)も簡単で、Flaskと同じようにできるらしい。(やったことない)

Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python. It's particularly suited for anyone who works with data in Python. Dash apps are rendered in the web browser. You can deploy your apps to servers and then share them through URLs. Since Dash apps are viewed in the web browser, Dash is inherently cross-platform and mobile ready.

引用元: Dash User Guide and Documentation - Dash by Plotly

尊敬する先輩曰く、「Dashは次来るぞ」とのこと。笑

確かに、プログラミング初心者の私でも簡単にできるし、コミュニティ自体もオープンですごく活発で、Dashは現在も日々アップデート中。

RのShinyも界隈では有名で本もあるくらいだから、より拡張性のありビッグデータも扱えるPythonを使うDashの今後に乞うご期待…といったところか

詳しくは公式サイトへ！！

プログラミング自体スーパー初心者でできることはまだまだ少ないけれど、このツールは使いこなしてわかっていることを発信できたらな〜と

おしゃれポイント

一見すごいアプリがCSSとhtmlファイルを必要とせず、一つのpythonファイルで作れる(上のアプリだと行数がトータル230行くらい、これが多いかも初心者には判別つかないけど…)
データのアップロード機能ってすごくない？
めちゃくちゃ簡単なモデルだけどUIを通じて機械学習ができるよ (何が嬉しいかは置いておく、今回はなんか楽しければOK)
plotlyを使った綺麗なグラフがみれる

何より

プログラミング初心者の私でも作れる

すなわち誰でも出来る！！！

このアプリの注意点

データは全て数値で、かつ欠損していないこと前提
1行目はカラムとなっている前提
前処理は何もしていない、ただ全データを学習に用いた

用いたデータ、コードはGIthubにあるので自由にご覧ください(随時更新予定)

https://github.com/Ayakie/dash_hands_on

流れ

Step1: タイトルとアップロードの部分だけ作って、cssでいい感じに表示させる

Step2: データを読み込み、単純な線形モデルを作り残渣プロットとスコアを表示させる

Step3: ドロップダウンでモデルを選択してコールバックで選択したモデルを学習させる

Step4: ファイルアップロード機能をつける (アップロードとデータの学習は別々)

Step5: アップロードしたデータを読み込んで学習させる、つまりアップロードと学習を連携させる

Step1. タイトルとファイルをアップロードする部分を作って、CSSでいい感じに表示させる

import dash
import dash_html_components as html
import dash_core_components as dcc

# アプリの実態(インスタンス)を定義
app = dash.Dash(__name__)

# アプリのレイアウトを記述していく
app.layout = html.Div([
    # タイトル
    html.H1('Dash Machine Learning Application'),

    # 空白を加える
    html.Br(),

    # アップロードの部分を作る
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ])
    )
])
# 外部ファイルからこのファイルを読み込んだ時に勝手に中身が実行されないようにするおまじない 
if __name__ == '__main__':
   app.run_server(debug=True)

結果

f:id:wimper_1996:20191028141636p:plain

まずapp = dash.Dash(__name__)で、アプリの実態を定義します

次に、app.layout =以降で、アプリのレイアウトを記述していきます。

html.Div() がhtmlでいう<div> ~~~ </div>と同じです。
dash_html_componentのライブラリは、htmlの属性を全て網羅しています。引数として()内に記述していきます。

例えばclassName = 'container'はhtmlでいう<div class= 'container'>と同じ、idやstyle属性も、htmlと役割は同じです。

最後、app.run_server(debug=True)でdebug=Trueとすることで、

Webブラウザがリアルタイムでコードの変更を反映してくれます！

まだまだ見た目がシンプルなので、ここにCSSを記述しておしゃれにしていこう

app = dash.Dash(__name__)

# 欧文はフォントが豊富で楽しいのでこのアプリも英語で記述する
# レイアウト全体に適用させるスタイルを定義する
common_style= {'font-family': 'Comic Sans MS', 'textAlign': 'center', 'margin': '0 auto'}

app.layout = html.Div([
    # タイトル
    html.H1('Dash Machine Learning Application'),

    # 空白を加える
    html.Br(),

    # アップロードの部分を作る
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),

        # アップロード部分のスタイル
        style={
            'width': '60%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '0 auto'
        }
    )
],
    # 全体Divのスタイルを変更
    style=common_style
)
 
if __name__ == '__main__':
   app.run_server(debug=True)

結果

f:id:wimper_1996:20191028150745p:plain

中央揃えになってフォントも可愛くなった！

"style"部分

   style={
        'width': '60%',
        'height': '60px',
        'lineHeight': '60px',
        'borderWidth': '1px',
        'borderStyle': 'dashed',
        'borderRadius': '5px',
        'textAlign': 'center',
        'margin': '0 auto'
    }

が、CSSの記述になります。あと、common_styleも

例えば 'width': '60%' は、cssで書くとwidth: 60%; となり、数値を''で囲む以外は書き方は似てますね。

ただ、cssだとline-heightと書くところをDashではlineHeightと、キャメル記法です。(実をいうとline-heightでも書けます、公式サイトだとキャメルなのでそれに習ってみた)

まだ、アップロード機能を加えただけで表示機能は未実装です。ただ、アプリ内にデータの中身は渡されています↓

f:id:wimper_1996:20191028232546g:plain