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

Dashを使って、機械学習をさせるWebアプリケーション作ろうStep3！

これまでの流れはこちら

流れ(おさらい)

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

wimper-1996.hatenablog.com

Step2: 単純な線形モデルを作り、グラフとスコアを表示させる

wimper-1996.hatenablog.com

今回はここ↓

Step3: 複数のモデルを作り、ドロップダウンで選べるようにする

Step4: ファイルアップロード機能をつける

Step5: アップロードしたデータを読み込んで学習させるようにする

---

Step3での完成イメージ

ドロップダウンで選択したモデルに応じて、結果が変わる！！ (いや当たり前)

単純なアプリだけど、インプットに応じてアウトプットが変わるなんて、動的な、立派なWebアプリケーション！！…なはず。

いいんだよまずは簡単なもんで。やってみよう。

さて、ユーザーが選択したドロップダウンの中身(今回は学習モデル)に応じて、出力させる結果をインタラクティブに変えたい。どうやってやるのか？

Dashの重要な機能であるコールバック: Callbackの登場です。

今回は、最初から全部のコードを載せてしまう。↓

▶クリックで展開

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

import pandas as pd
import numpy as np
import plotly.graph_objs as go

from sklearn.linear_model import LinearRegression
# 新たにRandomForestのモデルをインポート
from sklearn.ensemble import RandomForestRegressor
from sklearn.metrics import mean_squared_error, r2_score
from sklearn.model_selection import KFold


common_style = {'font-family': 'Comic Sans MS', 'textAlign': 'center', 'margin': '0 auto'}

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

# 予測に用いるモデルとインスタンスを定義した辞書
models = {'Linear Regression': LinearRegression(),
          'Random Forest Regressor': RandomForestRegressor()}

df = pd.read_csv('housing_data.csv')

# アプリの見た目の記述
app.layout = html.Div(
    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={
                # 省略
            }
        ),
        html.Br(),

        # ＊モデルを選択するドロップダウンを追加する
        dcc.Dropdown(
            id='model-dropdown',
            options=[{'label': k, 'value': k} for k in models.keys()],
            value='Linear Regression'
        ),

        # モデルを学習させてスコアを表示
        html.H3(id='rmse-sentence'),
        html.H3(id='r2-sentence'),

        # グラフの部分

        dcc.Graph(id='residual-plot',
                  style={'margin': '0px 100px'})
    ]),
    style=common_style
)


# ドロップダウンで選択したモデリングで学習し、スコアと残渣プロットを返す
@app.callback([
    Output(component_id='rmse-sentence', component_property='children'),
    Output(component_id='r2-sentence',  component_property='children'),
    Output(component_id='residual-plot', component_property='figure')],
    [Input(component_id='model-dropdown', component_property='value')]
)
def update_result(model_name):
    X_train = df.iloc[:, :-1]
    y_train = df.iloc[:, -1]

    rmse_scores = []
    r2_scores = []

    # クロスバリデーションでモデルを評価する
    kf = KFold(n_splits=4, shuffle=True, random_state=0)
    for tr_idx, val_idx in kf.split(X_train):
        x_tr, x_val = X_train.iloc[tr_idx], X_train.iloc[val_idx]
        y_tr, y_val = y_train.iloc[tr_idx], y_train.iloc[val_idx]

        # 学習の実行
        model = models[model_name]
        model.fit(x_tr, y_tr)

        y_val_pred = model.predict(x_val)
        y_tr_pred = model.predict(x_tr)

        rmse_score = np.sqrt(mean_squared_error(y_val, y_val_pred))
        rmse_scores.append(rmse_score)

        # 左の変数はr2_scoreにしないように
        r2_score_ = r2_score(y_val, y_val_pred)
        r2_scores.append(r2_score_)

    # 各foldのスコア平均
    avg_rmse_score = np.mean(rmse_scores)
    avg_r2_score = np.mean(r2_scores)

    # グラフの記述
    figure = {
        'data': [
            go.Scatter(
                x=y_tr_pred,
                y=y_tr_pred - y_tr,
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 10,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name='train data'
            ),
            go.Scatter(
                x=y_val_pred,
                y=y_val_pred - y_val,
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 10,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name='test data'
            )
        ],
        'layout': go.Layout(
            title='Residual Plot of Median House Price',
            xaxis={'title': 'Predicted Values'},
            yaxis={'title': 'Residuals'}
        )
    }
    # rmse-sentence, r2-sentence, figureに送る実態を返す
    return [
        f'Average RMSE Score of {model_name} is {avg_rmse_score}',
        f'R2 score is {avg_r2_score}',
        figure
    ]


if __name__ == '__main__':
    app.run_server(debug=True)

さあ、できるだけ噛み砕いて説明します頑張ります

---

Callbackって何

@app.callbackデコレータ*1により記述される、ユーザーのインプットとそれに応じたアウトプットを明示的に記すための記法。

Dash apps are made interactive through Dash Callbacks: Python functions that are automatically called whenever an input component's property changes. Callbacks can be chained, allowing one update in the UI to trigger several updates across the app.

引用元:https://dash.plot.ly/

インプットに応じて自動でアウトプットが変わる様子は、エクセルのマクロに例えるとわかりやすい？↓

It's sort of like programming with Microsoft Excel: whenever an input cell changes, all of the cells that depend on that cell will get updated automatically. This is called "Reactive Programming".

引用元: https://dash.plot.ly/getting-started-part-2

callbackに必要な引数はたった2つ、component_idと、component_property。

component_idは、callbackする(される)要素を見分ける識別子みたいなもので、component_propertyは、callbackする(される)中身の性質を表す*2。

つまり今回の場合、まずinputは、

• ID "model-dropdown" を持つドロップダウン要素(dcc.Dropdown)の "value" プロパティ

(app.layoutの中のdcc.Dropdown要素の中のプロパティvalue部分。もう一つのプロパティoptionsの中のvalueに値として引き渡される)

outputは3つ、

• ID "rmse-sentense"を持つ、html.H3要素の "children" プロパティ
• ID "r2-sentence" を持つ、html.H3要素の"children" プロパティ
• ID "residual-plot"を持つ、dcc.Graph要素の "figure" プロパティ

図示するとこんな感じ

ちなみに、dcc.Dropdown要素の中のvalueに、すでに値Linear Regressionが入っていると思いますが、これはドロップダウンに表示される初期値。

今回は、初期値として線形モデルがvalueとしてcallback関数にinputされている。

さて、つらつらと書いてきましたが、callback関数でInputとOutputの中身を明示したら、

関数update_result(model_name):を定義し、

引数としてInputの中身を受けとり、returnとしてoutputの内容を記述します。

前回Step2で線形モデルを作ったと思いますが、その部分をごっそりcallback関数以下のupdate_result関数内に持っていき、

具体的にLinearRegression()と定義していたのを

# 学習の実行
    lr = LinearRegression()
    lr.fit(x_tr, y_tr)

変数model_nameで置き換えたりすればOKです。

# 学習の実行
        model = models[model_name]
        model.fit(x_tr, y_tr)

そしたら、完成イメージの出来上がり！

結果について

線形回帰だと説明力が72%だったのが、ランダムフォレスト回帰だと84%に、
RMSEは4.77から3.77になった！

誤差が小さくなったってことだから、残渣プロットも、y=0近傍により近づいて分布している(分散が小さくなった)ことが分かりますね。

きっとXGboostだともっと予測精度が上がるんだろうなぁとか、

ランダムフォレストを選択した場合は木の深さなどのパラメータも自分で動かせるようにもできるんだろうなぁとか、できることが膨らむ膨らむ。

最後に

Dashではよく、dcc.Graph要素のfigureプロパティや、html要素中のchildrenでアプリの見た目をアップデートさせます。

でもそれだけじゃなくて、styleやdcc.Dropdown要素のoptionsなど、(多分)ほぼ全てのプロパティが変更可能！

公式ドキュメントは英語ですが、本当に丁寧に記述されていてわかりやすく、例も豊富なのでぜひみてみてください。

callbackは、Dashアプリでインタラクティブな操作を実現するために(最も)重要な機能。

ので、しっかり使いこなせるようにしたいところ。

今回は、Step1で作っていたデータのアップロード部分の枠組みは一度置いといて、callbackを使ったドロップダウン機能を追加しました〜

次回は、このcallback関数を使って、アップロードしたデータをデータテーブルとして表示させます！

*1:デコレータなんてDashでしか使ったことないし、実態は分かっていません。強そう。

*2:慣れてきたら、id→propertyの順番で引数は省略して書くのが一般的