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)

スクリーンショット 2020-11-12 14.02.22.png

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.

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

Recommended Posts

J'ai créé une application d'apprentissage automatique avec Dash (+ Docker) part2 ~ Façon basique d'écrire Dash ~
J'ai créé une application d'apprentissage automatique avec Dash (+ Docker) part3 ~ Practice ~
J'ai essayé de créer une application d'apprentissage automatique avec Dash (+ Docker) part1 ~ Construction de l'environnement et vérification du fonctionnement ~
J'ai essayé de faire une authentification de base avec Java
[iOS] J'ai essayé de créer une application de traitement de type insta avec Swift
J'ai essayé de cloner une application Web pleine de bugs avec Spring Boot
J'ai essayé de créer une fonction de message de l'extension Rails Tutorial (Partie 1): Créer un modèle
J'ai essayé de moderniser une application Java EE avec OpenShift.
J'ai créé un client RESAS-API en Java
J'ai essayé de créer un environnement de développement padrino avec Docker
J'ai essayé de faire une fonction de réponse de l'extension Rails Tutorial (Partie 3): Correction d'un malentendu des spécifications
J'ai essayé de convertir l'exemple d'application en microservice selon l'idée du livre "Microservice Architecture".
J'ai essayé de développer une application web à partir d'un mois et demi d'histoire d'apprentissage de la programmation
J'ai essayé de créer une fonction de message pour l'extension Rails Tutorial (Partie 2): Créer un écran à afficher
J'ai essayé d'exécuter une application d'échange de cartes de crédit avec Corda 1
J'ai essayé de créer un environnement de serveur UML Plant avec Docker
J'ai essayé de créer une application Android avec MVC maintenant (Java)
J'ai essayé de créer une fonction de groupe (babillard) avec Rails
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "J'ai essayé de créer une fenêtre avec Bootstrap 3"
J'ai essayé de créer une classe parent d'objet de valeur dans Ruby
J'ai essayé de faire une sauvegarde automatique avec plus agréable + PostgreSQL + SSL + docker
J'ai essayé de créer une API Web qui se connecte à DB avec Quarkus
J'ai essayé de créer une application de conversation en Java à l'aide de l'IA «A3RT»
J'ai essayé de vérifier AdoptOpenJDK 11 (11.0.2) avec l'image Docker
C # (base de l'encapsulation)
J'ai essayé de casser le bloc avec java (1)
J'ai essayé de créer un portefeuille avec AWS, Docker, CircleCI, Laravel [avec lien de référence]
J'ai essayé de faire un jeu simple avec Javafx ① "Trouvons le jeu du bonheur" (inachevé)
Rails6 Je veux créer un tableau de valeurs avec une case à cocher
[Android] J'ai créé un écran de liste de matériaux avec ListView + Bottom Sheet
J'ai essayé de créer une fonction de connexion avec Java
[Apprentissage automatique] J'ai essayé la détection d'objets avec Create ML [détection d'objets]
Introduction à l'apprentissage automatique avec Spark "Estimation de prix" # 3 Apprenons avec les données d'entraînement et créons un [moteur d'estimation de prix]
Rails6 J'ai essayé d'introduire Docker dans une application existante
J'ai essayé de créer une application Web qui recherche les tweets avec vue-word cloud et examine la tendance de ce qui est écrit dans le profil associé
[Azure] J'ai essayé de créer une application Java gratuitement ~ Se connecter avec FTP ~ [Débutant]
J'ai essayé de créer un outil de comparaison des prix des produits Amazon dans le monde entier avec Java, l'API Amazon Product Advertising, l'API Currency (29/01/2017)
clone de kintone? J'étais assez accro au lancement de l'extension OSS WebDB avec Lightsail + Docker, alors prenez-en note.
Un mémo quand j'ai essayé "Parler d'écrire une application Java dans Eclipse et de la publier dans Kubernetes dans un conteneur Liberty (Partie 1)"
Facile à créer LINE BOT avec Java Servlet Partie 2: J'ai essayé des messages image et des modèles
J'ai essayé de faire une demande en 3 mois d'inexpérimenté
J'ai essayé de créer un environnement de développement java8 avec Chocolatey
[Rails] J'ai essayé de créer une mini application avec FullCalendar
Je veux faire une liste avec kotlin et java!
Je veux créer une fonction avec kotlin et java!
Apprendre Ruby avec AtCoder 13 Comment créer un tableau à deux dimensions
J'ai brièvement résumé la grammaire de base de Ruby
J'ai essayé de créer un environnement de WSL2 + Docker + VSCode
J'ai essayé de toucher JavaScript Part.1 Système de code de traitement de base
J'ai essayé d'implémenter une application web pleine de bugs avec Kotlin
J'ai essayé OCR de traiter un fichier PDF avec Java part2
J'ai essayé BIND avec Docker
J'ai essayé d'exprimer les résultats avant et après de la classe Date avec une ligne droite numérique
Après avoir appris Progate, j'ai essayé de créer une application SNS en utilisant Rails dans l'environnement local
Créons une application Web de gestion de livres avec Spring Boot part1