Ich habe eine App für maschinelles Lernen mit Dash (+ Docker) Teil 3 ~ Übung ~ erstellt

Einführung

Ich habe eine einfache App für maschinelles Lernen mit Pythons Web-App-Framework Dash erstellt und diesen Artikel als Lernprotokoll geschrieben (das Ergebnis ist hier. /)). Oben (Teil 2) führte Layout und Rückruf ein, die die Grundlagen für die Erstellung von Dash-Apps darstellen. In diesem Artikel möchte ich einige der Apps vorstellen, die ich tatsächlich als Anwendungsbeispiele erstellt habe. Implementieren Sie wie unten gezeigt eine Anwendung, die das durch das Kontrollkästchen für die Tabellendaten ausgewählte Analyseergebnis anzeigt. Die Betriebsumgebung finden Sie unter hier (Teil 1). In diesem Artikel wird Pandas auch für die Datenverarbeitung verwendet, aber ich denke, dass Sie es fast problemlos lesen können, auch wenn Sie keine Kenntnisse über Pandas haben.

Vorbereitung

In der App, die ich tatsächlich erstellt habe, habe ich eine Funktion zum Hochladen von CSV-Dateien usw. hinzugefügt, aber dieses Mal werde ich die vorbereiteten Daten direkt lesen. Versuchen Sie für den Teil sample_data.csv, Ihre bevorzugten Tabellendaten einer geeigneten Größe zu verwenden (es ist besser, zwei oder mehr numerische Variablen zu haben, um ein Paardiagramm zu implementieren). Dieser Artikel verwendet die Titanic-Wettbewerbsdaten von Kaggle (train.csv).

<Verzeichnisstruktur>
Dash_App/
　　├ sample_data.csv
　　├ app.py
　　├ Dockerfile
　　└ docker-compose.yml

Die anderen Teile als Layout und Rückruf sollten wie folgt sein.

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
import plotly.express as px
import plotly.figure_factory as ff

#Daten lesen
data = pd.read_csv('src/sample_data.csv')

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
################################################################
Layoutteil
################################################################
################################################################
Rückrufteil
################################################################

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=5050, debug=True)

Erstellen des Layout-Teils

Dieses Mal werde ich versuchen, Kontrollkästchen (dcc.RadioItems ()) und Schaltflächen (html.Button ()) zu verwenden. Der Beispielcode befindet sich auf der offiziellen Website. Ich denke, es ist eine gute Idee, das zu finden, was Sie verwenden möchten, und das Beispiel zu kopieren, um es zu implementieren. .. Wenn Sie sich beispielsweise den Beispielcode von "dcc.RadioItems ()" ansehen, sieht er wie folgt aus. Wenn Sie einen Blick darauf werfen, können Sie sehen, dass die Optionen mit dem Argument options festgelegt sind und label (angezeigter Text) und value für jede Option angegeben sind. Als Ergebnis der Angabe von "MLT" im nächsten Argument "Wert" wird "Montreal" überprüft, sodass der Anfangswert im Argument "Wert" festgelegt werden kann und der von der UI-Operation ausgewählte Wert "Wert" ist. Sie können sich vorstellen, dass `überschrieben wird (obwohl es viel schneller ist, sich tatsächlich zu bewegen und zu überprüfen, als es zu lesen ...). Während ich den Beispielcode imitierte, erstellte ich den Layout-Teil wie folgt. Der Anfangswert von "Wert" wurde nicht gesetzt, und die eingestellte Option "Wert" wurde zum leichteren Verständnis auf "AAA", "BBB" und "CCC" gesetzt.

app.py

app.layout = html.Div(children=[

    html.H3('Step5:Analyse numerischer Variablen'),
    html.H5('Wählen Sie eine Analysemethode und drücken Sie Ausführen'),
    #Kontrollkästchen Teil
    dcc.RadioItems(
        id='num_analysis_selection',
        options=[
            {'label': 'Liste der Statistiken', 'value': 'AAA'},
            {'label': 'Paar Grundstück', 'value': 'BBB'},
            {'label': 'Korrelationsmatrix', 'value': 'CCC'}
        ]
    ),
    #Knopfteil
    html.Button(id="num_analysis-button", n_clicks=0, children="Lauf", style={'background': '#DDDDDD'}),
    #Der Teil, der das Ergebnis anzeigt
    html.Div(id='num_result')
])

Wenn Sie die App in diesem Zustand starten, wird sie wie folgt angezeigt. Natürlich passiert so wie es jetzt ist nichts, wenn Sie die Taste drücken, daher möchte ich ab dem nächsten Abschnitt mit Rückruf beginnen.

Rückrufteil

Funktionsprüfung

Als nächstes werde ich den Rückrufteil schreiben. Bevor wir die Daten verwenden, beginnen wir mit einer einfachen Funktionsprüfung. Schreiben Sie unter dem Layout-Teil von app.py Callback wie folgt.

app.py

@app.callback(
    Output(component_id='num_result', component_property='children'),
    [Input(component_id='num_analysis_selection', component_property='value')]
)
def num_analysis(input):
    return input

Wenn Sie die App in diesem Zustand ausführen, können Sie sehen, dass der Wert "Wert" der aktivierten Option unter der Schaltfläche angezeigt wird. [Oben (Teil 2)] Dies ist eine Überprüfung von (), aber die Bewegung ist wie folgt: (1) Der in Eingabe angegebene Wert von "Wert" von "dc.ReadItems ()" ist das Argument ("Eingabe") der Funktion "num_analysis ()". (2) Der Rückgabewert ("Eingabe") dieser Funktion wird an das in "Ausgabe" angegebene Argument "Kinder" von "html.Div (id =" num_result ")" übergeben. Nach Bestätigung der Bewegung möchte ich die tatsächlich gelesenen Daten verwenden. Dieses Mal wird abhängig vom ausgewählten Inhalt eine unterschiedliche Verarbeitung durchgeführt, sodass eine bedingte Verzweigung mit der if-Anweisung unter Verwendung des Eingabewerts durchgeführt wird.

Zeichentisch

Zuerst werde ich die Verarbeitung schreiben, wenn "Statistikliste" ausgewählt ist. Insbesondere möchte ich eine Tabelle mit den Ergebnissen der Ausführung der Methode "description ()" in Pandas zeichnen. Ich habe gehört, wie man mit Dash eine Tabelle zeichnet, aber hier verwende ich die einfachste "html.Table". Wenn Sie sich den offiziellen Beispielcode für das Tutorial ansehen, Es ist ein wenig kompliziert, aber es scheint, dass ich eine Funktion namens "generate_table ()" mache. Dieses Mal habe ich es wie folgt implementiert, indem ich den Rückgabeteil dieser Funktion verwendet habe.

app.py

@app.callback(
    Output(component_id='num_result', component_property='children'),
    [Input(component_id='num_analysis_selection', component_property='value')]
)
def num_analysis(input):
    if input == 'AAA':
        describe = data.describe()
        return html.Table([
            html.Thead(
                html.Tr([html.Th(col) for col in describe.columns])
            ),
            html.Tbody([
                html.Tr([
                    html.Td(describe.iloc[i][col]) for col in describe.columns
                ]) for i in range(len(describe))
            ])
        ])

Wenn Sie "Statistikliste" auswählen, sollten Sie in der Lage sein, die Tabelle wie unten gezeigt zu zeichnen.

Zeichnen Sie ein Plotly-Diagramm

Als nächstes werden wir Paardiagramme und eine Zeichnung der Korrelationsmatrix (Wärmekarte) implementieren. Das Beste an Dash ist, dass Sie die interaktiven und coolen Diagramme von Plotly verwenden können. Ich werde sie daher auf der offiziellen Website von Plotly suchen. Da der Grundfluss derselbe ist, betrachten wir nur das Paardiagramm. Die Art und Weise, ein Diagramm von Plotly mit Dash zu zeichnen, besteht im Wesentlichen darin, von fig.show () in Plotly zudcc.Graph (figure = fig)zu wechseln. Dann werden wir auch den Heatmap-Teil implementieren.

app.py

@app.callback(
    Output(component_id='num_result', component_property='children'),
    [Input(component_id='num_analysis_selection', component_property='value')]
)
def num_analysis(input):
    #Zeichnen einer Statistikliste
    if input == 'AAA':
        describe = data.describe()
        return html.Table([
            html.Thead(
                html.Tr([html.Th(col) for col in describe.columns])
            ),
            html.Tbody([
                html.Tr([
                    html.Td(describe.iloc[i][col]) for col in describe.columns
                ]) for i in range(len(describe))
            ])
        ])
    #Zeichnen eines Paarplots
    elif input == 'BBB':
        fig = px.scatter_matrix(
            data, 
            dimensions=['Pclass', 'Age', 'Parch', 'Fare'], 
            color='Survived'
        )
        return dcc.Graph(figure=fig)

    #Zeichnung des Korrelationskoeffizienten (Wärmekarte)
    elif input == 'CCC':
        corr = data[['Pclass', 'Age', 'Parch', 'Fare']].corr().round(4)
        fig = ff.create_annotated_heatmap(
            z=corr.values, 
            x=list(corr.columns),
            y=list(corr.index), 
            colorscale='Oranges',
            hoverinfo='none'
        )
        return dcc.Graph(figure=fig)

Sie sollten nun auch Paardiagramme und Korrelationsmatrizen zeichnen können.

Verwenden Sie Status, damit die Schaltfläche funktioniert

Ein letzter Schritt. Zu diesem Zeitpunkt beginnt die Zeichnung des Diagramms in dem Moment, in dem Sie es mit dem Kontrollkästchen auswählen, und die Schaltfläche Ausführen unten funktioniert nicht. Wir werden dies so ändern, dass das Ergebnis durch Drücken der Ausführen-Taste nach Auswahl wiedergegeben wird. Zu diesem Zweck verwenden wir eine Funktion namens Status in Rückruf. Kommentieren Sie die folgende if-Anweisung einmal aus und ändern Sie den Callback-Teil wie unten gezeigt.

app.py

@app.callback(
    Output(component_id='num_result', component_property='children'),
    [Input(component_id='num_analysis-button', component_property='n_clicks')],
    [State(component_id='num_analysis_selection', component_property='value')]
)
def num_analysis(n_clicks, input):
    return 'n_clicks:{}, input:{}'.format(n_clicks, input)

Ich habe eine Schaltfläche für Eingabe angegeben und das Kontrollkästchen neu geschrieben, das ursprünglich Eingabe in Status war. Auf diese Weise wird der vom Status angegebene Teil nicht angezeigt, wenn eine Aktion vorliegt, sondern gleichzeitig, wenn in dem von Input angegebenen Teil eine Aktion vorhanden ist. Beachten Sie, dass der Funktion zwei Argumente übergeben werden: Button-abgeleitet (n_clicks) und Checkbox-abgeleitet ( input). Übrigens ist "n_clicks" die Häufigkeit, mit der die Taste gedrückt wurde. Wenn Sie versuchen, die App im obigen Status zu starten, erhöht sich der Wert von n_clicks jedes Mal, wenn Sie auf die Schaltfläche "Ausführen" klicken, und Sie können sehen, dass die Eingabe "AAA" usw. enthält. Nachdem Sie nun verstanden haben, wie State funktioniert, geben Sie den Inhalt der Funktion num_analysis (n_clicks, input) an die if-Anweisung und darunter zurück. Ich benutze diesmal keine "n_clicks", also das war's. Zum Schluss werde ich den fertigen Code nochmal posten.

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
import plotly.express as px
import plotly.figure_factory as ff

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

data = pd.read_csv('src/dash/titanic_train.csv')

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[

    html.H3('Step5:Analyse numerischer Variablen'),
    html.H5('Wählen Sie eine Analysemethode und drücken Sie Ausführen'),
    #Kontrollkästchen Teil
    dcc.RadioItems(
        id='num_analysis_selection',
        options=[
            {'label': 'Liste der Statistiken', 'value': 'AAA'},
            {'label': 'Paar Grundstück', 'value': 'BBB'},
            {'label': 'Korrelationsmatrix', 'value': 'CCC'}
        ]
    ),
    #Knopfteil
    html.Button(id="num_analysis-button", n_clicks=0, children="Lauf", style={'background': '#DDDDDD'}),
    #Der Teil, der das Ergebnis anzeigt
    html.Div(id='num_result')
])
@app.callback(
    Output(component_id='num_result', component_property='children'),
    [Input(component_id='num_analysis-button', component_property='n_clicks')],
    [State(component_id='num_analysis_selection', component_property='value')]
)
def num_analysis(n_clicks, input):
    if input == 'AAA':
        describe = data.describe()
        return html.Table([
            html.Thead(
                html.Tr([html.Th(col) for col in describe.columns])
            ),
            html.Tbody([
                html.Tr([
                    html.Td(describe.iloc[i][col]) for col in describe.columns
                ]) for i in range(len(describe))
            ])
        ])
    #Zeichnen eines Paarplots
    elif input == 'BBB':
        fig = px.scatter_matrix(
            data, 
            dimensions=['Pclass', 'Age', 'Parch', 'Fare'], 
            color='Survived'
        )
        return dcc.Graph(figure=fig)
    
    #Zeichnung des Korrelationskoeffizienten (Wärmekarte)
    elif input == 'CCC':
        corr = data[['Pclass', 'Age', 'Parch', 'Fare']].corr().round(4)
        fig = ff.create_annotated_heatmap(
            z=corr.values, 
            x=list(corr.columns),
            y=list(corr.index), 
            colorscale='Oranges',
            hoverinfo='none'
        )
        return dcc.Graph(figure=fig)
        

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=5050, debug=True)

abschließend

Als praktische Version haben wir eine einfache App zur Analyse von Tabellendaten implementiert. Wenn Sie eine Anwendung für maschinelles Lernen oder Datenanalyse erstellen, wird der größte Teil der Arbeit wie folgt wiederholt: "Verarbeiten von Daten mit Pandas oder Scikit-Learn → Übergeben von Werten, die mit Dash oder Plotly übereinstimmen", also verschiedene Dinge Bitte versuche. Im nächsten Artikel (letzter) möchte ich Ihnen zeigen, wie Sie Ihre App mit Docker für Heroku bereitstellen. Es ist lange her, aber danke.