Ich habe eine App für maschinelles Lernen mit Dash (+ Docker) Teil 2 ~ Grundlegende Schreibweise für Dash ~ 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. /)). In Oben (Teil 1) wurde das Erstellen einer Dash-Umgebung mit Docker vorgestellt. In diesem Artikel werden wir weiterhin das Schreiben von app.py vorstellen, dem Hauptteil der Dash-App, wobei wir uns auf die beiden Hauptelemente Layout (der Teil, der das Erscheinungsbild der App festlegt) und Callback (der Teil, der die interaktive Bewegung festlegt) konzentrieren. Ich werde es weiterhin tun. Grundsätzlich handelt es sich um einen Auszug aus Official Tutorial. Wenn Sie also mit Englisch vertraut sind, lesen Sie es bitte. Ich denke auch, dass es einfacher zu verstehen ist, wenn Sie über Grundkenntnisse in HTML und CSS verfügen (sofern Sie Progate kostenlos nutzen können).

Wie schreibe ich Layout

Im Layout-Teil erstellen wir das Erscheinungsbild der Anwendung. In anderen Frameworks werden HTML-Dateien häufig separat erstellt, in Dash jedoch grundsätzlich in einem Blatt (app.py). Wenn Dash installiert ist, werden das Paket "dash_html_components", das HTML-Tags bereitstellt, und das Paket "dash_core_components", das die für das Zeichnen erforderliche Benutzeroberfläche bereitstellt, automatisch installiert, und Layout wird mit diesen geschrieben. Als Beispiel wird dieselbe app.py-Datei angezeigt, die zum Erstellen der Umgebung verwendet wurde.

app.py

#Bibliothek importieren
import dash
import dash_core_components as dcc  #Ein Paket, das die zum Zeichnen erforderliche Benutzeroberfläche bereitstellt
import dash_html_components as html #Paket, das HTML-Tags bereitstellt

#Geben Sie den Pfad des externen CSS an
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

#Starten Sie die App. Sie können den App-Namen angeben (in diesem Fall__name__=App werden). Hier wird auch das externe CSS angegeben.
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


#########################Layoutteil####################################
app.layout = html.Div(children=[

    html.H1(children='Hello Dash'),
    html.Div(children='Dash: A web application framework for Python.'),
    dcc.Graph(
        id='example-graph',
        figure={
            'data':[{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                    {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'}],
            'layout':{'title': 'Dash Data Visualization'}
        }
    )
])
########################################################################

#Starten Sie den Server
if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=5050, debug=True)

Da "dash_html_components" denselben Namen hat, der HTML-Tags (div, H1 usw.) entspricht, schreiben wir sie auf HTML-ähnliche Weise. Der Layout-Teil von app.py oben ist wie folgt in HTML geschrieben.

<div>
    <h1>Hello Dash</h1>
    <div>Dash: A web application framework for Python.</div>
    <div id="exampl-graph" class="dash-graph">
        <!--Inhalt zeichnen-->
    </div>
</div>

Das Argument "Kinder" erhält den anzuzeigenden Textteil (den Teil, der zwischen Tags in HTML eingefügt ist). Sie können auch eine verschachtelte HTML-Struktur erstellen, indem Sie eine Liste an dieses Argument übergeben, z. B. "children = [html.H3 (), html.H5 (), ...]". Im Argument "id" können Sie die ID in HTML beliebig angeben. Die ID wird hauptsächlich für den Rückruf verwendet, der später eingeführt wird. Schreiben Sie CSS auf dasselbe Blatt und geben Sie es als Wörterbuch im Argument style an. Zum Beispiel im Teil von 'Hallo Dash'

html.H1(children='Hello Dash', style={'color':'red'})

Wenn Sie etwas wie hinzufügen, wird 'Hello Dash' rot angezeigt. Verwenden Sie "dash_core_components", um Pulldowns, Kontrollkästchen, Schaltflächen usw. zu implementieren. Ich werde es weglassen, weil es keine Schärfe gibt, um alle einzuführen, aber es ist sehr einfach zu implementieren, wenn man sich Codebeispiel der offiziellen Site ansieht. Zeichnen Sie das Diagramm auf ähnliche Weise mit "dash_core_components" und machen Sie es wie "dcc.Graph (figure = ...)". Wenn Sie das Plotly-Diagramm verwenden möchten, finden Sie in hier viele Codebeispiele. Geben Sie es daher mit dem Argument "figure" an, während Sie darauf verweisen. Bitte beachten Sie, dass Sie den Import des von Plotly bereitgestellten Pakets beschreiben müssen. Ich denke, die Installation wurde bereits durchgeführt, als Dash installiert wurde.

Wie schreibe ich Rückruf

Im Rückrufteil legen wir die interaktive Bewegung fest. Nehmen wir als Beispiel eine einfache App, die die im Textfeld im Text eingegebenen Zeichen widerspiegelt.

app.py

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

app = dash.Dash()

#########################Layoutteil####################################
app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div(['Input:',
        #Textfeldteil
        dcc.Input(
            id='my-id', 
            value='initial value',  #Anfangswert (nicht erforderlich)
            type='text'
        )
    ]),
    #Der Teil, in dem der Text angezeigt werden soll
    html.Div(id='my-div')
])
########################################################################

#########################Rückrufteil##################################
@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'Output: "{}"'.format(input_value)
########################################################################

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

Rückruf wird unter Layout mit dem Dekorator @ app.callback geschrieben. Es spielt keine Rolle, ob Sie nicht wissen, was der Dekorateur ist, aber wenn Sie studieren möchten, ist dieser Artikel leicht zu verstehen. Importieren Sie auch die in Callback verwendeten "Input" und "Output".

Die Bewegung von Callback ist sehr einfach, (1) Das durch Input angegebene Element wird als Argument der darunter definierten Funktion übergeben. (2) Die Ausgabe der Funktion wird an das durch Ausgabe angegebene Element übergeben. Es gibt zwei Schritte. Eingabe und Ausgabe werden durch Angabe von ID und Eigenschaft angegeben. In diesem Beispiel ist ① der Wert von "my-id" id der Wert von "dc.Input ()". Dies ist der Textfeldteil (= der Wert, der durch die UI-Operation eingegeben wird). Dies ist die Funktion update_output_div. Es wird als Argument (input_value) von (2) übergeben. Das Ausgabeergebnis ('Output: ~') dieser Funktion wird an die untergeordneten Elemente von html.Div () where id = 'my-div' übergeben. Auf diese Weise kann die im Textfeld eingegebene Zeichenfolge nach der folgenden Ausgabe "Ausgabe:" wiedergegeben werden.

• Hinweise zum Rückruf Pro Rückruf kann nur ein Ausgang eingestellt werden. Wenn Sie eine bestimmte Eingabe in mehrere Ausgaben umwandeln möchten, müssen Sie so viele Rückrufe wie möglich schreiben. Auf der anderen Seite können Sie mehrere Eingänge empfangen, wie unten gezeigt.

@app.callback(
    Output(component_id='id_3', component_property='children'),
    [Input(component_id='id_1', component_property='value'),
     Input(component_id='id_2', component_property='value')]
)
def func(input1, input2):
    return ...

abschließend

Ich habe die grundlegende Schreibweise von Dash vorgestellt. Sie können im Grunde genommen eine App erstellen, die auf den ersten Blick kompliziert aussieht, indem Sie diesen Rückruf kombinieren. Wenn Sie diesen Mechanismus verstehen, können Sie ihn umgekehrt auf verschiedene Dinge anwenden, während Sie sich den offiziellen Beispielcode ansehen. Ich werde. In Nächster Artikel möchte ich einen Teil der App für maschinelles Lernen vorstellen, die ich tatsächlich als Anwendungsbeispiel erstellt habe.