[Streamlit] Ich hasse JavaScript, deshalb erstelle ich eine Webanwendung nur mit Python

Front (SPA) -Entwicklungsprojekt Ich habe zwei spielende Manager und einen Entwicklungsleiter, aber ich hasse JavaScript zu Tode. Es ist ein Skript, das im Browser ausgeführt wird, daher kann nicht geholfen werden, und das asynchrone Warten hat es viel bequemer gemacht, aber ich mag die asynchrone Verarbeitung immer noch nicht.

Java, Python und andere Sprachen, die ich für einen bestimmten Zeitraum berührt habe, fühlen sich normalerweise wie "jeder ist anders und jeder ist gut" an, aber ich glaube, ich hasse es wirklich, weil nur JavaScript dies nicht tut.

Übrigens hasse ich CSS mehr.

Ich denke, dass das Erstellen eines Modells für maschinelles Lernen häufig in Python implementiert wird, aber wenn es darum geht, eine kleine Demo-App zu erstellen, muss die Vorderseite in HTML, JavaScript und CSS erstellt werden.

Jupyter Notebook ist zwar eine Option, aber weniger ausdrucksstark als eine Web-App, und das Anzeigen von Codezellen sieht etwas chaotisch aus.

Unabhängig davon, ob ich es nicht mag oder nicht, denke ich, dass es einige Leute gibt, die Probleme mit der Frontentwicklung haben. ~~ ... bist du da? ~~ Die Bibliothek namens Streamlit, die ich in den Ferien im Juli berührt habe, war äußerst praktisch, daher werde ich dieses Mal versuchen, eine WEB-Anwendung mit Python ** "nur" ** damit zu erstellen!

Was ist Streamlit?

Ein von Streamlit entwickeltes Webanwendungsframework. Es unterstützt wichtige Grafikbibliotheken (und OpenCV) und wie in HP erwähnt, ist es einfach, Datenvisualisierungs-Apps und AI-Demo-Apps mit nur Python zu erstellen. Kann eingebaut werden. Es ist nicht erforderlich, HTML in Ihren Code einzubetten.

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.

Referenz ist erheblich und dauert etwas mehr als eine Stunde (mit Konzeption) von dem Zeitpunkt an, an dem Sie mit dem Lesen der Verwendung beginnen, bis zu dem Zeitpunkt, an dem Sie die von mir vorgestellte Demo-App erstellen. nicht.

Dieses Mal werden wir die Anzahl der infizierten Personen jeden Tag anhand der Daten der Kontrollstelle für Infektionskrankheiten des New Yorker Corona-Virus in Tokio visualisieren.

Einführung

Installieren Sie Streamlit. Dieses Mal wird matplotlib auch für die Diagrammbibliothek verwendet. Installieren Sie es also zusammen.

Überprüfen Sie nach Abschluss der Installation, ob die Demoseite mit dem folgenden Befehl angezeigt wird.

streamlit hello

Die Demoseite wird unter [http: // localhost: 8501 /](http: // localhost: 8501 /) gestartet.

Visualisierung von Tabellendaten

Rufen Sie Daily Infected Persons Data ab und zeigen Sie den Datenrahmen an. Sie können die Tabelle einfach anzeigen, indem Sie die gelesenen Daten in einen DataFrame konvertieren und in `` `st.write``` eintauchen. Die Verarbeitung, die Sie nicht jedes Mal ausführen möchten, z. B. das Lesen von Daten, wird durch Hinzufügen von "@ st.cache" zwischengespeichert. Bei der zweiten und nachfolgenden Ausführung wird der Cache verwendet, wenn keine Änderungen an Argumenten oder externen Variablen vorgenommen wurden.

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 in Tokio-19 Anzahl der Infizierten
Kontrollstelle für Infektionskrankheiten der Metropolregion New Corona in Tokio[Github](https://github.com/tokyo-metropolitan-gov/covid19)Daten abrufen von
"""

st.write(df_covid)

Sobald Sie dies getan haben, starten Sie die App mit dem folgenden Befehl.

streamlit run app.py

Wie bei der Installation wird die App unter [http: // localhost: 8501 /](http: // localhost: 8501 /) gestartet.

Sie können auch in aufsteigender oder absteigender Reihenfolge sortieren.

Versuchen Sie, ein Diagramm zu zeichnen

Zeigen Sie das mit matplotlib gezeichnete Diagramm an. Grundsätzlich wie bei Tabellendaten, fügen Sie nach dem Zeichnen des Diagramms mit matplotlib einfach das Figurenobjekt in `` `st.write``` ein.

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

"""
#Anzahl der Infizierten pro Tag
"""


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)

Wenn Sie die Quelle aktualisieren, werden Sie gefragt, ob Sie den Code erneut ausführen möchten. Drücken Sie daher erneut ausführen.

Von den zuvor erfassten Daten konnte ich ein Diagramm anzeigen, in dem die Anzahl der infizierten Personen dargestellt ist.

Machen Sie es mit der WEB-Benutzeroberfläche zu einer interaktiven App

Bis zu diesem Punkt gibt es keinen großen Unterschied zur Visualisierung mit Jupyter, daher werden wir eine Interaktion implementieren, die eine WEB-Anwendung zu sein scheint.

Fügen Sie nach dem Datenerfassungsprozess den Anzeigeprozess der Komponente hinzu, die den Datumsbereich angibt, um den Datenrahmen einzugrenzen. Fügen Sie eine UI-Komponente mit `st. Komponentenname für body und st.sidebar. Komponentenname` für sidebar hinzu.

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(
    "Bitte geben Sie den Zeitraum ein, den Sie anzeigen möchten",
    [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 in Tokio-19 Anzahl der Infizierten
Kontrollstelle für Infektionskrankheiten der Metropolregion New Corona in Tokio[Github](https://github.com/tokyo-metropolitan-gov/covid19)Daten abrufen von
"""

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

Beim erneuten Ausführen wird die datierte Komponente in der Seitenleiste angezeigt.

Sie können den Inhalt von Datenrahmen und Grafiken eingrenzen, indem Sie das Start- und Enddatum angeben.

Abschließend möchte ich eine Option hinzufügen, um die durchschnittliche Anzahl infizierter Personen pro Woche anzuzeigen.

"""
#Anzahl der Infizierten pro Tag
"""


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('Zeigt auch die durchschnittliche Anzahl infizierter Personen pro Woche an')
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)

Beim erneuten Ausführen wird der Seitenleiste ein Kontrollkästchen hinzugefügt.

Durch diese Überprüfung wird zusätzlich die durchschnittliche Anzahl infizierter Personen pro Woche ermittelt.

Impressionen

――Ich könnte wirklich nur mit Python eine Webanwendung erstellen Mit dieser Demo-App konnte ich sie in 70 Zeilen implementieren. Die Lernkosten waren niedrig und es war gelinde gesagt großartig, dass ich keinen Code auf die Vorderseite schreiben musste.

――Sie können keine App mit aufwändigem Design erstellen Das Konzept besteht darin, sich der Vorderseite nicht bewusst zu sein, daher gibt es nicht viel Freiheit in der Benutzeroberfläche. Das Layout ist nur mit body + sidebar einfach, und wenn Sie "my UI" implementieren möchten, sollten Sie den Code gehorsam auf die Vorderseite schreiben. Der Eindruck ist, dass es sich eher um ein Framework für Demo-Apps als um die Herstellung geeigneter Produkte handelt.

Dieses Mal habe ich nur die Daten visualisiert, aber ich wollte damit eine AI-Demo-App erstellen.