J'ai créé une application d'apprentissage automatique avec Dash (+ Docker) part3 ~ Practice ~
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 /)). Ce qui précède (partie 2) a introduit la mise en page et le rappel, qui sont les bases de la création d'applications Dash. Dans cet article, je voudrais présenter certaines des applications que j'ai réellement créées comme exemples d'application. Comme indiqué ci-dessous, implémentez une application qui affiche le résultat de l'analyse sélectionné par la case à cocher pour les données du tableau.
Veuillez consulter ici (part1) pour l'environnement d'exploitation. De plus, dans cet article, Pandas est utilisé pour le traitement des données, mais je pense que vous pouvez le lire presque sans problème, même si vous ne connaissez pas les Pandas.
Préparation
Dans l'application que j'ai créée, j'ai ajouté une fonction pour télécharger des fichiers csv, etc., mais cette fois, je vais lire directement les données préparées. Pour la partie sample_data.csv, essayez d'utiliser vos données de table préférées d'une taille appropriée (il est préférable d'avoir deux ou plusieurs variables numériques pour implémenter un diagramme de paires). Cet article utilise les données de compétition Titanic de Kaggle (train.csv).
<Structure du répertoire>
Dash_App/
├ sample_data.csv
├ app.py
├ Dockerfile
└ docker-compose.yml
Les parties autres que Layout et Callback doivent être les suivantes.
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
#Lire les données
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)
################################################################
Partie de mise en page
################################################################
################################################################
Partie de rappel
################################################################
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=5050, debug=True)
Création de la partie Layout
Cette fois, j'essaierai d'utiliser des cases à cocher (dcc.RadioItems ()) et des boutons (html.Button ()). L'exemple de code se trouve sur le Site officiel, donc je pense que c'est une bonne idée de trouver ce que vous voulez utiliser et de copier l'exemple pour l'implémenter. .. Par exemple, si vous regardez l'exemple de code de dcc.RadioItems (), il ressemble à ce qui suit.
Si vous regardez, vous pouvez voir que les options sont définies avec l'argument options, et label (texte affiché) et valeur sont spécifiés pour chaque option. De plus, comme «Montréal» est vérifié suite à la spécification de «MLT» dans l'argument suivant «valeur», la valeur initiale peut être définie dans l'argument «valeur» et la valeur sélectionnée par l'opération d'interface utilisateur est «valeur. Vous pouvez imaginer que le `sera écrasé (bien qu'il soit beaucoup plus rapide de le vérifier en le déplaçant que de le lire ...).
Tout en imitant l'exemple de code, j'ai créé la partie Layout comme suit. La valeur initiale de «valeur» n'a pas été définie et l'option définie «valeur» a été définie sur «AAA», «BBB» et «CCC» pour une meilleure compréhension.
app.py
app.layout = html.Div(children=[
html.H3('Step5:Analyse des variables numériques'),
html.H5('Sélectionnez une méthode d'analyse et appuyez sur Exécuter'),
#Partie case à cocher
dcc.RadioItems(
id='num_analysis_selection',
options=[
{'label': 'Liste des statistiques', 'value': 'AAA'},
{'label': 'Parcelle de paires', 'value': 'BBB'},
{'label': 'Matrice de corrélation', 'value': 'CCC'}
]
),
#Partie bouton
html.Button(id="num_analysis-button", n_clicks=0, children="Courir", style={'background': '#DDDDDD'}),
#La partie qui affiche le résultat
html.Div(id='num_result')
])
Si vous démarrez l'application dans cet état, elle s'affichera comme ci-dessous. Bien sûr, comme c'est le cas maintenant, rien ne se passe lorsque vous appuyez sur le bouton, je voudrais donc commencer à déplacer avec Callback à partir de la section suivante.
Partie de rappel
Contrôle de fonctionnement
Ensuite, j'écrirai la partie Callback. Avant d'utiliser les données, commençons par une simple vérification des opérations. Sous la partie Layout de app.py, écrivez Callback comme suit.
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
Si vous exécutez l'application dans cet état, vous pouvez voir que la valeur de valeur de l'option cochée est affichée sous le bouton. [Ce qui précède (part2)] Ceci est un examen de (), mais le mouvement est le suivant: ① La valeur de valeur de dc.ReadItems () spécifiée dans Input est l'argument (input) de la fonctionnum_analysis () (2) La valeur de retour (input) de cette fonction est transmise à l'argument children dehtml.Div (id = 'num_result')spécifié dans Output.
Après avoir confirmé le mouvement, j'aimerais utiliser les données réellement lues. Cette fois, un traitement différent est effectué en fonction du contenu sélectionné, de sorte que le branchement conditionnel est effectué avec l'instruction if en utilisant la valeur d'entrée.
Table à dessin
Tout d'abord, j'écrirai le traitement lorsque "Liste des statistiques" est sélectionné. Plus précisément, je voudrais dessiner un tableau des résultats de l'exécution de la méthode describe () dans Pandas. J'ai entendu comment dessiner un tableau avec Dash, mais ici j'utiliserai le plus simple html.Table. Si vous jetez un œil à l 'Exemple de code du didacticiel officiel,
C'est un peu compliqué, mais il semble que je crée une fonction appelée generate_table (). Cette fois, je l'ai implémenté comme ci-dessous en utilisant la partie retour de cette fonction.
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))
])
])
Si vous sélectionnez "Liste des statistiques", vous devriez être en mesure de dessiner le tableau comme indiqué ci-dessous.
Dessinez un diagramme tracé
Ensuite, nous implémenterons des graphiques de paires et un dessin de matrice de corrélation (carte thermique). La meilleure chose à propos de Dash est que vous pouvez utiliser les diagrammes interactifs et sympas de Plotly, donc je vais le rechercher sur le site officiel de Plotly. Puisque le flux de base est le même, nous ne regarderons que le diagramme de paires.
La façon de dessiner un tracé de Plotly avec Dash est essentiellement de passer de fig.show () dans Plotly à dcc.Graph (figure = fig). Ensuite, nous allons également implémenter la partie carte thermique.
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):
#Dessiner une liste de statistiques
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))
])
])
#Dessiner un diagramme de paires
elif input == 'BBB':
fig = px.scatter_matrix(
data,
dimensions=['Pclass', 'Age', 'Parch', 'Fare'],
color='Survived'
)
return dcc.Graph(figure=fig)
#Dessin du coefficient de corrélation (carte thermique)
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)
Vous devriez maintenant être en mesure de dessiner des graphiques de paires et des matrices de corrélation.
Utiliser l'état pour faire fonctionner le bouton
Une dernière étape. À ce stade, le dessin du diagramme commence au moment où vous le sélectionnez avec la case à cocher et le bouton d'exécution ci-dessous ne fonctionne pas. Nous modifierons cela pour que le résultat soit reflété en appuyant sur le bouton d'exécution après l'avoir sélectionné. Pour ce faire, nous utiliserons une fonctionnalité appelée State in Callback. Mettez en commentaire l'instruction if et ci-dessous une fois, et modifiez la partie Callback comme indiqué ci-dessous.
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)
J'ai spécifié un bouton pour Input et réécrit la case à cocher qui était à l'origine Input to State. En faisant cela, la partie spécifiée par State ne sera pas reflétée lorsqu'il y a une action, mais sera reflétée en même temps lorsqu'il y a une action dans la partie spécifiée par Input. Notez qu'il y a deux arguments passés à la fonction: dérivé du bouton (n_clicks) et dérivé de la case à cocher ( input). Au fait, n_clicks est le nombre de fois que le bouton a été enfoncé. Si vous essayez de démarrer l'application dans l'état ci-dessus, la valeur de n_clicks augmentera chaque fois que vous appuyez sur le bouton d'exécution, et vous pouvez voir que l'entrée contient'AAA'etc.
Maintenant que vous comprenez comment fonctionne State, retournez le contenu de la fonction num_analysis (n_clicks, input) à l'instruction if et ci-dessous. Je n'utilise pas n_clicks cette fois, donc c'est tout. Enfin, je publierai à nouveau le code complété.
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 des variables numériques'),
html.H5('Sélectionnez une méthode d'analyse et appuyez sur Exécuter'),
#Partie case à cocher
dcc.RadioItems(
id='num_analysis_selection',
options=[
{'label': 'Liste des statistiques', 'value': 'AAA'},
{'label': 'Parcelle de paires', 'value': 'BBB'},
{'label': 'Matrice de corrélation', 'value': 'CCC'}
]
),
#Partie bouton
html.Button(id="num_analysis-button", n_clicks=0, children="Courir", style={'background': '#DDDDDD'}),
#La partie qui affiche le résultat
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))
])
])
#Dessiner un diagramme de paires
elif input == 'BBB':
fig = px.scatter_matrix(
data,
dimensions=['Pclass', 'Age', 'Parch', 'Fare'],
color='Survived'
)
return dcc.Graph(figure=fig)
#Dessin du coefficient de corrélation (carte thermique)
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)
en conclusion
En version pratique, nous avons implémenté une application simple d'analyse de données de table. Lors de la création d'une application pour l'apprentissage automatique ou l'analyse de données, la plupart du travail est répété comme cette fois, "Traitement des données avec Pandas ou Scikit-learn → Passer des valeurs pour correspondre à Dash ou Plotly", donc diverses choses S'il vous plaît essayez. Dans le prochain article (dernier), j'aimerais vous montrer comment déployer votre application sur Heroku à l'aide de Docker. Cela fait longtemps, mais merci.
Recommended Posts