[Streamlit] Je déteste JavaScript, donc je crée une application Web uniquement avec Python

Projet de développement Front (SPA) J'ai deux managers et un responsable du développement, mais je déteste le JavaScript à mort. C'est un script qui s'exécute sur le navigateur, donc il ne peut pas être aidé, et async-await l'a rendu beaucoup plus pratique, mais je n'aime toujours pas le traitement asynchrone.

Java, Python et d'autres langages que j'ai touchés depuis un certain temps donnent généralement l'impression que "tout le monde est différent et tout le monde est bon", mais je pense que je déteste vraiment parce que seul JavaScript ne le fait pas.

Au fait, je déteste plus le CSS.

Je pense que la création d'un modèle d'apprentissage automatique est souvent implémentée en Python, mais lorsqu'il s'agit de créer une petite application de démonstration, la face avant doit être construite en HTML, JavaScript et CSS.

Jupyter Notebook peut être une option, mais il est moins expressif qu'une application Web, et voir la cellule de code semble un peu désordonnée.

Que je n'aime pas cela ou non, je pense qu'il y a pas mal de gens qui ont des problèmes avec le développement du front. ~~ ... êtes-vous là? ~~ La bibliothèque appelée Streamlit que j'ai touchée pendant les vacances de juillet était extrêmement pratique, donc cette fois je vais essayer de faire une application WEB avec Python ** "uniquement" ** en utilisant ceci!

Qu'est-ce que Streamlit

Un framework d'application Web développé par Streamlit. Il prend en charge les principales bibliothèques de graphiques (et OpenCV), et comme mentionné dans HP, les applications de visualisation de données et les applications de démonstration AI sont faciles avec juste Python. Peut être intégré. Il n'est pas nécessaire d'incorporer du HTML dans votre code.

Streamlit’s open-source app framework is the easiest way for data scientists and machine learning engineers to create beautiful, performant apps in only a few hours! All in pure Python. All for free.

Référence est substantielle, et cela prend un peu plus d'une heure (avec un concept) entre le moment où vous commencez à lire comment l'utiliser et le moment où vous créez une application de démonstration à introduire. pas.

Cette fois, nous allons visualiser le nombre de personnes infectées chaque jour en utilisant les données du Tokyo Metropolitan New Corona Virus Infectious Disease Control Site.

introduction

Installez Streamlit. Cette fois, matplotlib est également utilisé pour la bibliothèque de graphes, alors installez-le ensemble.

Une fois l'installation terminée, vérifiez si vous pouvez voir la page de démonstration avec la commande suivante.

streamlit hello

La page de démonstration sera lancée à l'adresse [http: // localhost: 8501 /](http: // localhost: 8501 /).

Visualisation des données de table

Obtenez Données quotidiennes sur les personnes infectées et affichez la base de données. Vous pouvez afficher le tableau simplement en convertissant les données lues en DataFrame et en les plongeant dans st.write```. Le traitement que vous ne souhaitez pas exécuter à chaque fois, tel que la lecture de données, est mis en cache en ajoutant @ st.cache '', et dans la deuxième exécution et les suivantes, le cache est utilisé s'il n'y a pas de modification des arguments ou des variables externes.

import streamlit as st
import pandas as pd
import requests

@st.cache
def get_covid_df(url):
    response_json = requests.get(url).json()
    df = pd.DataFrame(response_json['data'])
    return df

url = 'https://raw.githubusercontent.com/tokyo-metropolitan-gov/covid19/development/data/daily_positive_detail.json'
df_covid = get_covid_df(url)

"""
#COVID à Tokyo-19 Nombre de personnes infectées
Site métropolitain de contrôle des maladies infectieuses du nouveau virus Corona de Tokyo[Github](https://github.com/tokyo-metropolitan-gov/covid19)Obtenir des données de
"""

st.write(df_covid)

Une fois que vous avez fait cela, démarrez l'application avec la commande suivante.

streamlit run app.py

Comme pour l'installation, l'application sera lancée sur [http: // localhost: 8501 /](http: // localhost: 8501 /).

Vous pouvez également trier par ordre croissant ou décroissant.

Essayez de dessiner un graphique

Affichez le graphique tracé à l'aide de matplotlib. Fondamentalement, la même chose que pour les données de table, après avoir tracé le graphique avec matplotlib, insérez simplement l'objet figure dans `` st.write```.

import matplotlib.pyplot as plt
import matplotlib.dates as mdates

"""
#Nombre de personnes infectées par jour
"""


x = [
    datetime.datetime.strptime(diagnosed_date, '%Y-%m-%d')
    for diagnosed_date in df_covid['diagnosed_date'].values
]
y_count = df_covid['count'].values

fig = plt.figure()
ax = fig.add_subplot(111)
ax.plot(x, y_count)

xfmt = mdates.DateFormatter('%m/%d')
xloc = mdates.DayLocator(interval=20)

ax.xaxis.set_major_locator(xloc)
ax.xaxis.set_major_formatter(xfmt)
st.write(fig)

Lorsque vous mettez à jour la source, il vous sera demandé si vous souhaitez réexécuter le code, alors appuyez sur Réexécuter.

Parmi les données acquises précédemment, j'ai pu afficher un graphique qui trace le nombre de personnes infectées.

Faites-en une application interactive à l'aide de l'interface utilisateur WEB

Jusqu'à présent, il n'y a pas beaucoup de différence avec la visualisation avec Jupyter, nous allons donc implémenter une interaction qui semble être une application WEB.

Après le processus d'acquisition de données, ajoutez le processus d'affichage du composant qui spécifie la plage de dates pour affiner le bloc de données. Ajoutez un composant d'interface utilisateur avec st. Nom du composant '' pour le corps et st.sidebar. Nom du composant '' pour la barre latérale.

url = 'https://raw.githubusercontent.com/tokyo-metropolitan-gov/covid19/development/data/daily_positive_detail.json'
df_covid = get_covid_df(url)

diagnosed_date_list = df_covid['diagnosed_date'].values
str_maxdate = diagnosed_date_list[len(diagnosed_date_list)-1]
mindate = datetime.datetime.strptime(diagnosed_date_list[0], '%Y-%m-%d')
maxdate = datetime.datetime.strptime(str_maxdate, '%Y-%m-%d')

selected_date = st.sidebar.date_input(
    "Veuillez saisir la période que vous souhaitez afficher",
    [mindate, maxdate],
    min_value=mindate,
    max_value=maxdate
)

str_startdate = selected_date[0].strftime('%Y-%m-%d')
str_enddate = selected_date[1].strftime(
    '%Y-%m-%d') if len(selected_date) == 2 else str_maxdate

"""
#COVID à Tokyo-19 Nombre de personnes infectées
Site métropolitain de contrôle des maladies infectieuses du nouveau virus Corona de Tokyo[Github](https://github.com/tokyo-metropolitan-gov/covid19)Obtenir des données de
"""

df_selected = df_covid.query(
    f'"{str_startdate}" <= diagnosed_date <= "{str_enddate}"')
st.write(df_selected)

Lorsque je réexécute, je vois le composant daté dans la barre latérale.

Vous pouvez affiner le contenu des blocs de données et des graphiques en spécifiant la date de début et la date de fin.

Enfin, j'aimerais ajouter une option pour afficher le nombre moyen de personnes infectées par semaine.

"""
#Nombre de personnes infectées par jour
"""


x = [
    datetime.datetime.strptime(diagnosed_date, '%Y-%m-%d')
    for diagnosed_date in df_selected['diagnosed_date'].values
]
y_count = df_selected['count'].values

fig = plt.figure()
ax = fig.add_subplot(111)
ax.plot(x, y_count)

wac_shown = st.sidebar.checkbox('Affiche également le nombre moyen de personnes infectées par semaine')
if wac_shown:
    y_weekly_average_count = df_selected['weekly_average_count'].values
    ax.plot(x, y_weekly_average_count)

xfmt = mdates.DateFormatter('%m/%d')
xloc = mdates.DayLocator(interval=20)

ax.xaxis.set_major_locator(xloc)
ax.xaxis.set_major_formatter(xfmt)
st.write(fig)

Lorsque je réexécute, une case à cocher est ajoutée à la barre latérale.

En le vérifiant, le nombre moyen de personnes infectées par semaine sera également établi.

Impressions

――Je pourrais vraiment créer une application Web uniquement avec Python Avec cette application de démonstration, j'ai pu l'implémenter en 70 lignes. Le coût d'apprentissage était faible et c'était génial de dire le moins que je n'avais pas à écrire de code au recto.

――Vous ne pouvez pas créer une application avec un design élaboré Le concept est de ne pas être conscient de la face avant, il n'y a donc pas beaucoup de liberté dans l'interface utilisateur. La mise en page est simple avec body + sidebar, et si vous voulez implémenter "mon UI", vous devez écrire le code sur le recto avec obéissance. L'impression est qu'il s'agit d'un cadre pour les applications de démonstration plutôt que pour la fabrication de produits appropriés.

Cette fois, je ne visualisais que les données, mais je voulais créer une application de démonstration AI en utilisant cela.