J'ai créé une application d'apprentissage automatique avec Dash (+ Docker) part2 ~ Façon basique d'écrire Dash ~

introduction

J'ai créé une application d'apprentissage automatique simple en utilisant le framework d'application Web de Python Dash, j'ai donc écrit cet article comme un enregistrement d'apprentissage (le livrable est ici /)). Dans The above (part1), nous avons présenté comment créer un environnement Dash avec Docker. Dans cet article, nous continuerons à présenter comment écrire app.py, qui est la partie principale de l'application Dash, en nous concentrant sur les deux éléments principaux, Layout (la partie qui définit l'apparence de l'application) et Callback (la partie qui définit le mouvement interactif). Je continuerai à le faire. En gros, il s'agit d'un extrait du Tutoriel officiel, donc si vous êtes à l'aise avec l'anglais, veuillez le lire. De plus, je pense que ce sera plus facile à comprendre si vous avez des connaissances de base sur HTML et CSS (dans la mesure où vous pouvez prendre Progate gratuitement).

Comment écrire une mise en page

Dans la partie Layout, nous allons créer l'apparence de l'application. Dans d'autres frameworks, les fichiers html sont souvent créés séparément, mais dans Dash, ils sont essentiellement créés dans une seule feuille (app.py). Lorsque Dash est installé, le package dash_html_components qui fournit les balises HTML et le package dash_core_components qui fournit l'interface utilisateur requise pour le dessin sont automatiquement installés et la mise en page est écrite à l'aide de ceux-ci. À titre d'exemple, le même fichier app.py utilisé pour créer l'environnement est affiché.

app.py

#Importer la bibliothèque
import dash
import dash_core_components as dcc  #Un package qui fournit l'interface utilisateur requise pour le dessin
import dash_html_components as html #Package qui fournit des balises HTML

#Spécifiez le chemin du CSS externe
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

#Lancez l'appli. Vous pouvez spécifier le nom de l'application (dans ce cas__name__=Devenez une application). Le CSS externe est également spécifié ici.
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


#########################Partie de mise en page####################################
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'}
        }
    )
])
########################################################################

#Démarrez le serveur
if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=5050, debug=True)

Puisque dash_html_components a le même nom correspondant aux balises HTML (div, H1, etc.), nous les écrirons de manière HTML. La partie mise en page de app.py ci-dessus est écrite en HTML comme ci-dessous.

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

L'argument children reçoit la partie de texte à afficher (la partie prise en sandwich entre les balises en HTML). Vous pouvez également créer une structure imbriquée HTML en passant une liste à cet argument, telle que children = [html.H3 (), html.H5 (), ...]. Dans l'argument id, vous pouvez spécifier l'identifiant comme vous le souhaitez en HTML, et id est principalement utilisé pour le rappel, qui sera introduit plus tard. Écrivez le CSS sur la même feuille et spécifiez-le comme dictionnaire dans l'argument style. Par exemple, dans la partie "Hello Dash"

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

Si vous ajoutez quelque chose comme, «Hello Dash» sera affiché en rouge. Utilisez dash_core_components pour implémenter des listes déroulantes, des cases à cocher, des boutons, etc. Je vais l'omettre car il n'y a pas de netteté pour tout présenter, mais c'est très facile à mettre en œuvre en regardant Exemple de code du site officiel. De même, dessinez le graphe en utilisant dash_core_components et faites-le comme dcc.Graph (figure = ...). Si vous voulez utiliser le diagramme Plotly, il existe de nombreux exemples de code dans ici, alors spécifiez-le avec l'argument figure tout en y faisant référence. Veuillez noter que vous devez décrire l'importation du package fourni par Plotly. Je pense que l'installation était déjà terminée lors de l'installation de Dash.

Comment écrire un rappel

Dans la partie Callback, nous définirons le mouvement interactif. À titre d'exemple, prenons une application simple qui reflète les caractères saisis dans la zone de texte dans le texte.

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()

#########################Partie de mise en page####################################
app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div(['Input:',
        #Partie zone de texte
        dcc.Input(
            id='my-id', 
            value='initial value',  #Valeur initiale (non requise)
            type='text'
        )
    ]),
    #La partie pour afficher le texte
    html.Div(id='my-div')
])
########################################################################

#########################Partie de rappel##################################
@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)

Le rappel est écrit sous Layout en utilisant le décorateur @ app.callback. Peu importe si vous ne savez pas ce qu'est le décorateur, mais si vous voulez étudier, cet article est facile à comprendre. De plus, importez les «Input» et «Output» utilisés dans Callback.

Le mouvement de Callback est très simple, (1) L'élément spécifié par Input est passé comme argument de la fonction définie en dessous. (2) La sortie de la fonction est passée à l'élément spécifié par Output. Il y a deux étapes. L'entrée et la sortie sont spécifiées en spécifiant l'id et la propriété. Dans cet exemple, ① la valeur de 'my-id' id est la valeur de dc.Input (), qui est la partie de la zone de texte (= la valeur entrée par l'opération de l'interface utilisateur) est la fonction update_output_div. Il est passé comme argument (input_value) de (2) Le résultat de sortie ('Output: ~') de cette fonction est passé aux enfants de html.Div () where id = 'my-div'. Cela permet à la chaîne de caractères saisie dans la zone de texte d'être reflétée après le "Sortie:" ci-dessous.

• Remarques sur le rappel Une seule sortie peut être définie par rappel. Si vous souhaitez refléter une certaine entrée vers plusieurs sorties, vous devez écrire autant de rappels qu'il y en a. D'autre part, vous pouvez recevoir plusieurs entrées comme indiqué ci-dessous.

@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 ...

en conclusion

J'ai présenté la manière de base d'écrire Dash. Vous pouvez essentiellement créer une application qui semble compliquée à première vue en combinant ce rappel, et inversement, si vous comprenez ce mécanisme, vous pouvez l'appliquer à diverses choses tout en regardant l'exemple de code officiel. Je vais. Dans Article suivant, je voudrais vous présenter une partie de l'application d'apprentissage automatique que j'ai en fait créée comme exemple d'application.