diff --git a/README.md b/README.md index c740f90..a485fd9 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ * [English](readmes/en/README.md) * [বাংলা](readmes/bn/README.md) +* [Deutsch](readmes/de/README.md) * [français](readmes/fr/README.md) * [हिन्दी](readmes/hi/README.md) * [русский](readmes/ru/README.md) diff --git a/content/de/Day1.md b/content/de/Day1.md new file mode 100644 index 0000000..675174e --- /dev/null +++ b/content/de/Day1.md @@ -0,0 +1,40 @@ +# Aufsetzen einer lokalen Entwicklungsumgebung + +Bevor wir damit beginnen können, Streamlit Apps zu bauen, müssen wir zuerst eine Entwicklungsumgebung aufsetzen. + +Lass uns damit starten, eine Condaumgebung zu installieren und zu erstellen. + +## **Installiere Conda** +- Installiere `conda` indem du auf https://docs.conda.io/en/latest/miniconda.html gehst und dein Betriebssystem auswählst (Windows, Mac oder Linux). +- Lade und führe die Installationsroutine aus, um `conda` zu installieren. + +## **Erstelle eine neue Condaumgebung** +Nun da du Conda installiert hast, lass uns eine Condaumgebung erstellen, um alle Python +Bibliotheksabhängigkeiten zu installieren. + +Um eine neue Python 3.9 Umgebzung zu erstellen, führe folgenden Befehl aus: +```bash +conda create -n stenv python=3.9 +``` + +wobei die Condaumgebung durch `create -n stenv` den Namen `stenv` bekommt und durch `python=3.9` Python 3.9 verwendet. + +## **Aktiviere die neue Condaumgebung** + +Um eine Condaumgebung zu verwenden, die wir mit dem Namen `stenv` gerade erst erstellt haben, führe den folgenden Befehl in der Kommandozeile aus: + +```bash +conda activate stenv +``` + +## **Installiere die Streamlit Bibliothek** +Jetzt ist es an der Zeit, die `streamlit` Bibliothek zu installieren: +```bash +pip install streamlit +``` + +## **Starte die Streamlit Demoapplikation** +Um die Streamlit Demoapp zu starten (Grafik 1), tippe: +```bash +streamlit hello +``` diff --git a/content/de/Day10.md b/content/de/Day10.md new file mode 100644 index 0000000..4c37518 --- /dev/null +++ b/content/de/Day10.md @@ -0,0 +1,63 @@ +# st.selectbox + +`st.selectbox` ermöglicht die Anzeige eines Auswahl-Widgets. + +## Was bauen wir? + +Eine einfache App, die den Benutzer fragt, was seine Lieblingsfarbe ist. + +Ablauf der App: +1. Der Benutzer wählt eine Farbe aus +2. Die App zeigt die ausgewählte Farbe an + +## Demo App +Die eingesetze Streamlit App sollte wie die im folgenden Link aussehen: + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.selectbox/) + +## Code +Hier ist der Code zur Implementierung der oben genannten App: +```python +import streamlit as st + +st.header('st.selectbox') + +option = st.selectbox( + 'What is your favorite color?', + ('Blue', 'Red', 'Green')) + +st.write('Your favorite color is ', option) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('st.selectbox') +``` + +Als nächstes erstellen wir eine Variable namens `option`, die Benutzereingaben in Form eines **select** Eingabe Widgets über den Befehl `st.selectbox()` akzeptiert. + +```python +option = st.selectbox( + 'What is your favorite color?', + ('Blue', 'Red', 'Green')) +``` +Wie aus der obigen Code-Box ersichtlich, akzeptiert der Befehl `st.selectbox()` 2 Argumente: +1. Der Text, der über dem Auswahl-Widget steht, d.h. `'What is your favorite color?'` +2. Die möglichen Werte zum Auswählen: `('Blue', 'Red', 'Green')` + +Zuletzt zeigen wir die ausgewählte Farbe wie folgt an: +```python +st.write('Your favorite color is ', option) +``` + +## Nächste Schritte +Jetzt, da die Streamlit App lokal erstellt ist, können wir sie auf [Streamlit Community Cloud](https://streamlit.io/cloud) bereitstellen. + +## Referenzen +Mehr über [`st.selectbox`](https://docs.streamlit.io/library/api-reference/widgets/st.selectbox) diff --git a/content/de/Day11.md b/content/de/Day11.md new file mode 100644 index 0000000..55c2b77 --- /dev/null +++ b/content/de/Day11.md @@ -0,0 +1,50 @@ +# st.multiselect + +`st.multiselect` zeigt ein Mehrfachauswahl- bzw. Multiselect-Widget an. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.multiselect/) + +## Code +So wird `st.multiselect` verwendet: +```python +import streamlit as st + +st.header('st.multiselect') + +options = st.multiselect( + 'What are your favorite colors', + ['Green', 'Yellow', 'Red', 'Blue'], + ['Yellow', 'Red']) + +st.write('You selected:', options) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('st.multiselect') +``` + +Als nächstes, werden wir das Widget `st.multiselect` verwenden, um Eingaben zu akzeptieren, bei denen die Benutzer eine oder mehrere Farben auswählen können. + +```python +options = st.multiselect( + 'What are your favorite colors', + ['Green', 'Yellow', 'Red', 'Blue'], + ['Yellow', 'Red']) +``` + +Zuletzt zeigen wir die ausgewählten Farben an: +```python +st.write('You selected:', options) +``` + +## Literaturhinweise +- [`st.multiselect`](https://docs.streamlit.io/library/api-reference/widgets/st.multiselect) diff --git a/content/de/Day12.md b/content/de/Day12.md new file mode 100644 index 0000000..4f06a62 --- /dev/null +++ b/content/de/Day12.md @@ -0,0 +1,68 @@ +# st.checkbox + +`st.checkbox` zeigt ein Kontrollkästchen- bzw. Checkbox-Widget an. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.checkbox/) + +## Code +So wird `st.checkbox` verwendet: +```python +import streamlit as st + +st.header('st.checkbox') + +st.write ('What would you like to order?') + +icecream = st.checkbox('Ice cream') +coffee = st.checkbox('Coffee') +cola = st.checkbox('Cola') + +if icecream: + st.write("Great! Here's some more 🍦") + +if coffee: + st.write("Okay, here's some coffee ☕") + +if cola: + st.write("Here you go 🥤") +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('st.checkbox') +``` + +Als nächstes werden wir eine Frage mit `st.write` stellen: +```python +st.write ('What would you like to order?') +``` + +Wir werden dann einige Menüpunkte zum Ankreuzen bereitstellen: +```python +icecream = st.checkbox('Ice cream') +coffee = st.checkbox('Coffee') +cola = st.checkbox('Cola') +``` + +Zuletzt werden wir einen bestimmten Text anzeigen, je nachdem, welches Kästchen angekreuzt wurde: +```python +if icecream: + st.write("Great! Here's some more 🍦") + +if coffee: + st.write("Okay, here's some coffee ☕") + +if cola: + st.write("Here you go 🥤") +``` + +## Literaturhinweise +- [`st.checkbox`](https://docs.streamlit.io/library/api-reference/widgets/st.checkbox) diff --git a/content/de/Day13.md b/content/de/Day13.md new file mode 100644 index 0000000..4897ca4 --- /dev/null +++ b/content/de/Day13.md @@ -0,0 +1,12 @@ +# Aufsetzen einer Cloud-Entwicklungsumgebung + +### GitPod +Um eine Entwicklungsumgebung in der Cloud einzurichten, können wir [GitPod](https://www.gitpod.io/) verwenden. Man kann einfach auf den folgenden Link klicken: +- Versuch es: 👉 https://gitpod.io/#/https://github.com/dataprofessor/streamlit101/ + +Wie man aus der obigen URL ersehen kann, wird nach `https://gitpod.io/#/` eine GitHub-Repo-URL angehängt, die es GitPod ermöglicht, eine Entwicklungsumgebung einzurichten. Diese Anweisungen sind in der GitHub-Repo-URL enthalten (nämlich in der Datei `requirements.txt`, in der die zu installierenden Python-Bibliotheken aufgeführt sind). + +> Hinweis: Es gibt andere ähnliche Cloud-Entwicklungsumgebungen wie zum Beispiel: +> - [GitHub Codespaces](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces) +> - [Replit](https://replit.com/) +> - [Cloud9](https://aws.amazon.com/cloud9/) diff --git a/content/de/Day14.md b/content/de/Day14.md new file mode 100644 index 0000000..c5656f5 --- /dev/null +++ b/content/de/Day14.md @@ -0,0 +1,84 @@ +# Streamlit Komponenten + +Komponenten sind Python-Module von Drittanbietern, die die Möglichkeiten von Streamlit erweitern [[1](https://docs.streamlit.io/library/components)]. + +## Welche Streamlit-Komponenten gibt es? + +Es gibt mehrere Streamlit-Komponenten, die auf der Streamlit-Website [[2](https://streamlit.io/components)] vorgestellt werden. + +Fanilo (ein Streamlit-Entwickler) hat eine erstaunliche Liste von Streamlit-Komponenten in einem Wiki-Beitrag [[3](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634)] zusammengestellt, die seit April 2022 etwa 85 Streamlit Komponenten auflistet. + +## Wie wird es verwendet? + +Streamlit-Komponenten brauchen nur eine einfache pip-Installation. + +In diesem Tutorial zeigen wir dir, wie man die Komponente `streamlit_pandas_profiling` verwenden kann [[4](https://share.streamlit.io/okld/streamlit-gallery/main?p=pandas-profiling)]. + +#### Komponente installieren + +```bash +pip install streamlit_pandas_profiling +``` + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-components/) + +## Code +So erstellt man eine Streamlit App mithilfe einer Komponent: +```python +import streamlit as st +import pandas as pd +import pandas_profiling +from streamlit_pandas_profiling import st_profile_report + +st.header('`streamlit_pandas_profiling`') + +df = pd.read_csv('https://raw.githubusercontent.com/dataprofessor/data/master/penguins_cleaned.csv') + +pr = df.profile_report() +st_profile_report(pr) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +import pandas as pd +import pandas_profiling +from streamlit_pandas_profiling import st_profile_report +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('`streamlit_pandas_profiling`') +``` + +Als nächstes laden wir den Penguins-Datensatz mit dem Befehl `read_csv` von `pandas`. +```python +df = pd.read_csv('https://raw.githubusercontent.com/dataprofessor/data/master/penguins_cleaned.csv') +``` + +Zuletzt wird der Profiling-Bericht von `pandas` mit dem Befehl `profile_report()` erstellt und mit `st_profile_report` angezeigt: +```python +pr = df.profile_report() +st_profile_report(pr) +``` + +## Eigene Komponenten erstellen + +Wenn du daran interessiert bist, deine eigene Komponente zu erstellen, schau dir die folgenden Ressourcen an: +- [Create a Component](https://docs.streamlit.io/library/components/create) +- [Publish a Component](https://docs.streamlit.io/library/components/publish) +- [Components API](https://docs.streamlit.io/library/components/components-api) +- [Blog post on Components](https://blog.streamlit.io/introducing-streamlit-components/) + +Wenn du lieber mit Videos lernen möchten, hat unser Entwickler Tim Conkling ein paar tolle Tutorials zusammengestellt: +- [How to build a Streamlit component | Part 1: Setup and Architecture](https://youtu.be/BuD3gILJW-Q) +- [How to build a Streamlit component | Part 2: Part 2: Make a Slider Widget](https://youtu.be/QjccJl_7Jco) + +## Weitere Informationen über Komponenten +1. [Streamlit Components - API Documentation](https://docs.streamlit.io/library/components) +2. [Featured Streamlit Components](https://streamlit.io/components) +3. [Streamlit Components - Community Tracker](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634) +4. [`streamlit_pandas_profiling`](https://share.streamlit.io/okld/streamlit-gallery/main?p=pandas-profiling) diff --git a/content/de/Day15.md b/content/de/Day15.md new file mode 100644 index 0000000..5a04ed2 --- /dev/null +++ b/content/de/Day15.md @@ -0,0 +1,47 @@ +# st.latex + +`st.latex` zeigt LaTeX-formatierte mathematische Ausdrücke an. + +## Was bauen wir? + +Eine einfache App, die mithilfe des Befehls `st.latex` eine mathematische Gleichung in LaTeX-Syntax anzeigt. + +## Demo App +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.latex/) + +## Code +So wird `st.latex` verwendet: +```python +import streamlit as st + +st.header('st.latex') + +st.latex(r''' + a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} = + \sum_{k=0}^{n-1} ar^k = + a \left(\frac{1-r^{n}}{1-r}\right) + ''') +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('st.latex') +``` + +Als nächstes, zeigen wir mit `st.latex` die mathematische Gleichung: +```python +st.latex(r''' + a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} = + \sum_{k=0}^{n-1} ar^k = + a \left(\frac{1-r^{n}}{1-r}\right) + ''') +``` + +## Referenzen +- Lies mehr über [`st.latex`](https://docs.streamlit.io/library/api-reference/text/st.latex) in der Streamlit-API-Dokumentation. diff --git a/content/de/Day16.md b/content/de/Day16.md new file mode 100644 index 0000000..88e4611 --- /dev/null +++ b/content/de/Day16.md @@ -0,0 +1,86 @@ +# Anpassen des Themas von Streamlit-Apps + +We can customize the theme by adjusting parameters in `config.toml`, which is a configuration file stored in the same folder as the app in the `.streamlit` folder. +Wir können das Thema anpassen, indem wir die Parameter in der Konfigurationsdatei `config.toml` anpassen, die im gleichen Ordner wie die App im Ordner `.streamlit` gespeichert ist. + +## Was bauen wir? + +Eine einfache App, die das Ergebnis unserer Themenanpassung zeigt. Dies wird durch die Anpassung des HTML-HEX-Codes in der Datei [`.streamlit/config.toml`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/.streamlit/config.toml) ermöglicht. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-custom-theme/) + +## Code +Hier ist der Code für die [`streamlit_app.py`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/streamlit_app.py) Datei: +```python +import streamlit as st + +st.title('Customizing the theme of Streamlit apps') + +st.write('Contents of the `.streamlit/config.toml` file of this app') + +st.code(""" +[theme] +primaryColor="#F39C12" +backgroundColor="#2E86C1" +secondaryBackgroundColor="#AED6F1" +textColor="#FFFFFF" +font="monospace" +""") + +number = st.sidebar.slider('Select a number:', 0, 10, 5) +st.write('Selected number from slider widget is:', number) +``` + +Here's the code to the [`.streamlit/config.toml`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/.streamlit/config.toml) file: +```python +[theme] +primaryColor="#F39C12" +backgroundColor="#2E86C1" +secondaryBackgroundColor="#AED6F1" +textColor="#FFFFFF" +font="monospace" +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('Theming with config.toml') +``` + +Als nächstes werden wir den Inhalt der Datei `.streamlit/config.toml` zeigen. Wir zeigen zuerst eine Anmerkung mit `st.write` an und dann den eigentlichen Code mit `st.code`: +```python +st.write('Contents of the ./streamlit/config.toml file of this app') + +st.code(""" +[theme] +primaryColor="#F39C12" +backgroundColor="#2E86C1" +secondaryBackgroundColor="#AED6F1" +textColor="#FFFFFF" +font="monospace" +""") +``` + +Zuletzt erstellen wir ein Slider-Widget in der Seitenleiste und zeigen die ausgewählte Zahl an: +```python +number = st.sidebar.slider('Select a number:', 0, 10, 5) +st.write('Selected number from slider widget is:', number) +``` + +Schauen wir uns auf die individuelle Farben, die wir in dieser App verwendet haben und die in der Datei `.streamlit/config.toml` angegeben sind: +- `primaryColor="#F39C12"` - Damit wird die Primärfarbe auf Orange eingestellt. Siehe die orangen Farben im Slider-Widget. +- `backgroundColor="#2E86C1"` - Damit wird die Hintergrundfarbe auf Blau eingestellt. Siehe, dass das Hauptpanel eine blaue Hintergrundfarbe hat. +- `secondaryBackgroundColor="#AED6F1"` - Damit wird die sekundäre Hintergrundfarbe auf Dunkelgrau eingestellt. Siehe die graue Hintergrundfarbe der Seitenleiste und die Hintergrundfarbe der Codebox im Hauptfenster. +- `textColor="#FFFFFF"` - Die Textfarbe wird auf weiß eingestellt. +- `font="monospace"` - Damit wird der Font auf eine Festbreitenschrift (`monospace`) eingestellt. + +## Literaturhinweise +- [Theming](https://docs.streamlit.io/library/advanced-features/theming) +- [HTML Color Codes](https://htmlcolorcodes.com/) ist ein Hilfsmittel, um interessanter Farben zu auswählen. \ No newline at end of file diff --git a/content/de/Day17.md b/content/de/Day17.md new file mode 100644 index 0000000..66f96b6 --- /dev/null +++ b/content/de/Day17.md @@ -0,0 +1,41 @@ +# st.secrets + +`st.secrets` ermöglicht es dir, vertrauliche Informationen wie API-Schlüssel, Datenbank-Passwörter oder andere Anmeldedaten zu speichern. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.secrets/) + +## Code +So wird `st.secrets` verwendet: +```python +import streamlit as st + +st.title('st.secrets') + +st.write(st.secrets['message']) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('st.secrets') +``` + +Zuletzt zeigen wir die gespeicherten Geheimdaten an: +```python +st.write(st.secrets['message']) +``` + +Es ist zu beachten, dass Geheimdaten in der Streamlit Community Cloud gespeichert werden können, wie in den Screenshots unten gezeigt. + +Wenn man lokal arbeitet, können Daten in `.streamlit/secrets.toml` gespeichert werden. Achte darauf, dass du diese Datei nicht in ein GitHub-Repo hochlädst, wenn die App bereitgestellt wird. + +## Literaturhinweise +- [Add secrets to your Streamlit apps](https://blog.streamlit.io/secrets-in-sharing-apps/) +- [Secrets management](https://docs.streamlit.io/streamlit-cloud/get-started/deploy-an-app/connect-to-data-sources/secrets-management) diff --git a/content/de/Day18.md b/content/de/Day18.md new file mode 100644 index 0000000..48dca47 --- /dev/null +++ b/content/de/Day18.md @@ -0,0 +1,65 @@ +# st.file_uploader + +`st.file_uploader` zeigt ein Datei-Hochlade- (bzw. Uploader-) Widget an [[1](https://docs.streamlit.io/library/api-reference/widgets/st.file_uploader)]. + +Standardmäßig sind die hochgeladenen Dateien auf 200 MB begrenzt. Man kann dies mit der Konfigurationsoption server.maxUploadSize konfigurieren. Weitere Informationen zum Festlegen von Konfigurationsoptionen findet man unter [[2](https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options)]. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.file_uploader/) + +## Code +So wird `st.file_uploader` verwendet: +```python +import streamlit as st +import pandas as pd + +st.title('st.file_uploader') + +st.subheader('Input CSV') +uploaded_file = st.file_uploader("Choose a file") + +if uploaded_file is not None: + df = pd.read_csv(uploaded_file) + st.subheader('DataFrame') + st.write(df) + st.subheader('Descriptive Statistics') + st.write(df.describe()) +else: + st.info('☝️ Upload a CSV file') +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +import pandas as pd +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('st.file_uploader') +``` + +Als nächstes, verwenden wir `st.file_uploader`, um ein Widget für die Annahme von Benutzereingaben anzuzeigen: +```python +st.subheader('Input CSV') +uploaded_file = st.file_uploader("Choose a file") +``` + +Zuletzt definieren wir bedingte Anweisungen. Beim ersten Durchgang wird die `else`-Bedinging aktiviert und eine Willkommensnachricht angezeigt, die den Benutzer zum Hochladen seiner Datei auffordert. Nach dem Hochladen der Datei werden die `if`-Anweisungen aktiviert und die CSV-Datei wird von der `pandas` Bibliothek gelesen und mit dem Befehl `st.write` angezeigt. + +```python +if uploaded_file is not None: + df = pd.read_csv(uploaded_file) + st.subheader('DataFrame') + st.write(df) + st.subheader('Descriptive Statistics') + st.write(df.describe()) +else: + st.info('☝️ Upload a CSV file') +``` + +## Literaturhinweise +1. [`st.file_uploader`](https://docs.streamlit.io/library/api-reference/widgets/st.file_uploader) +2. [Set configuration options](https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options) diff --git a/content/de/Day19.md b/content/de/Day19.md new file mode 100644 index 0000000..68aaa62 --- /dev/null +++ b/content/de/Day19.md @@ -0,0 +1,116 @@ +# Wie man deine Streamlit-App gestaltet + +In diesem Tutorial werden wir die folgenden Befehle verwenden, um unsere Streamlit-App zu gestalten: +- `st.set_page_config(layout="wide")` - Zeigt den Inhalt der App im Wide-Modus an (sonst wird der Inhalt standardmäßig in einer Box mit festgelegter Breite umschlossen). +- `st.sidebar` - Platziert die Widgets oder Text-/Bildanzeigen in der Seitenleiste. +- `st.expander` - Platziert Text-/Bildanzeigen in einer ausklappbaren Containerbox. +- `st.columns` - Erstellt einen tabellarischen Bereich (oder Spalte), in dem Inhalte platziert werden können. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-layout/) + +## Code +So kannst du das Layout deiner Streamlit-App anpassen können: +```python +import streamlit as st + +st.set_page_config(layout="wide") + +st.title('How to layout your Streamlit app') + +with st.expander('About this app'): + st.write('This app shows the various ways on how you can layout your Streamlit app.') + st.image('https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png', width=250) + +st.sidebar.header('Input') +user_name = st.sidebar.text_input('What is your name?') +user_emoji = st.sidebar.selectbox('Choose an emoji', ['', '😄', '😆', '😊', '😍', '😴', '😕', '😱']) +user_food = st.sidebar.selectbox('What is your favorite food?', ['', 'Tom Yum Kung', 'Burrito', 'Lasagna', 'Hamburger', 'Pizza']) + +st.header('Output') + +col1, col2, col3 = st.columns(3) + +with col1: + if user_name != '': + st.write(f'👋 Hello {user_name}!') + else: + st.write('👈 Please enter your **name**!') + +with col2: + if user_emoji != '': + st.write(f'{user_emoji} is your favorite **emoji**!') + else: + st.write('👈 Please choose an **emoji**!') + +with col3: + if user_food != '': + st.write(f'🍴 **{user_food}** is your favorite **food**!') + else: + st.write('👈 Please choose your favorite **food**!') +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Zuerst legen wir das Seitenlayout fest, welches im `wide` Modus angezeigt wird. Dabei kann sich der Seiteninhalt auf die Breite des Browsers ausdehnen. +```python +st.set_page_config(layout="wide") +``` + +Als nächstes geben wir der Streamlit-App einen Titel. +```python +st.title('How to layout your Streamlit app') +``` + +Unter dem Titel der App befindet sich ein ausklappbares Feld mit der Überschrift `About this app`. Nach der Vergrößerung werden zusätzliche Details angezeigt. + +```python +with st.expander('About this app'): + st.write('This app shows the various ways on how you can layout your Streamlit app.') + st.image('https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png', width=250) +``` + +Eingabe-Widgets zur Annahme von Benutzereingaben werden mit dem Befehl `st.sidebar` vor den Streamlit-Befehlen `text_input` und `selectbox` in der Seitenleiste platziert. Vom Benutzer eingegebene oder ausgewählte Eingabewerte werden den Variablen `user_name`, `user_emoji` und `user_food` zugewiesen und gespeichert. + +```python +st.sidebar.header('Input') +user_name = st.sidebar.text_input('What is your name?') +user_emoji = st.sidebar.selectbox('Choose an emoji', ['', '😄', '😆', '😊', '😍', '😴', '😕', '😱']) +user_food = st.sidebar.selectbox('What is your favorite food?', ['', 'Tom Yum Kung', 'Burrito', 'Lasagna', 'Hamburger', 'Pizza']) +``` + +Zuletzt erstellen wir mit dem Befehl `st.columns` drei Spalten, die `col1`, `col2` und `col3` entsprechen. Dann weisen wir jeder Spalte einen Inhalt zu, durch die Erstellung einzelne Codeblöcke, die mit der `with`-Anweisung beginnen. Darunter erstellen wir bedingte Anweisungen, die einen von 2 alternativen Texten anzeigen, je nachdem, ob der Benutzer seine Eingabedaten (in der Sidebar angegeben) eingegeben hat oder nicht. Standardmäßig wird der Text unter der `else`-Anweisung auf der Seite angezeigt. Nach der Benutzereingabe werden die entsprechenden Informationen, die der Benutzer an die App weitergibt, unter der Überschrift `Output` angezeigt. + +```python +st.header('Output') + +col1, col2, col3 = st.columns(3) + +with col1: + if user_name != '': + st.write(f'👋 Hello {user_name}!') + else: + st.write('👈 Please enter your **name**!') + +with col2: + if user_emoji != '': + st.write(f'{user_emoji} is your favorite **emoji**!') + else: + st.write('👈 Please choose an **emoji**!') + +with col3: + if user_food != '': + st.write(f'🍴 **{user_food}** is your favorite **food**!') + else: + st.write('👈 Please choose your favorite **food**!') +``` +Es ist auch erwähnenswert, dass f-Strings verwendet wurden, um vorgefertigten Text mit den vom Benutzer eingegebenen Werten zu kombinieren. + + +## Literaturhinweise +- [Layouts and Containers](https://docs.streamlit.io/library/api-reference/layout) diff --git a/content/de/Day2.md b/content/de/Day2.md new file mode 100644 index 0000000..a7b0e66 --- /dev/null +++ b/content/de/Day2.md @@ -0,0 +1,30 @@ +# Bau deine erste Streamlit App + +## Starte deine IDE + +Starte deine IDE, egal ob es Atom, VS Code oder eine Cloud IDE wie zum Beispiel GitPod oder GitHub.dev ist. + +Erstelle eine Datei namens `streamlit_app.py` + +## Füge deine ersten Zeilen Code ein + +Füge folgenden Codezeilen in die gerade erstelle Datei ein: + +``` +import streamlit as st + +st.write('Hello world!') +``` + +Speicher die Datei. + +## Starte deine Kommandozeile (Terminal) + +In der Kommandozeile, füge folgendes ein: + +``` +streamlit run streamlit_app.py +``` +Ein Browserfenster sollte sich öffnen, welches die neu-erstellte Streamlit App zeigt. + +**Glückwunsch!** Du hast soeben deine erste Streamlit App erstellt! diff --git a/content/de/Day20.md b/content/de/Day20.md new file mode 100644 index 0000000..03eb6e3 --- /dev/null +++ b/content/de/Day20.md @@ -0,0 +1,6 @@ +# Tech Twitter Space über What is Streamlit? +## (Veranstaltet von Francesco Ciulla) + +Nimm an der Diskussion über Streamlit teil mit unserem Host [Francesco Ciulla](https://twitter.com/FrancescoCiull4). + +👉 Link: https://twitter.com/i/spaces/1dRJZlbglXMKB \ No newline at end of file diff --git a/content/de/Day21.md b/content/de/Day21.md new file mode 100644 index 0000000..5b6a69d --- /dev/null +++ b/content/de/Day21.md @@ -0,0 +1,60 @@ +# st.progress + +`st.progress` zeigt einen Fortschrittsbalken an, der mit dem Fortschreiten der Iteration grafisch aktualisiert wird. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.progress/) + +## Code +So wird `st.progress` verwendet: +```python +import streamlit as st +import time + +st.title('st.progress') + +with st.expander('About this app'): + st.write('You can now display the progress of your calculations in a Streamlit app with the `st.progress` command.') + +my_bar = st.progress(0) + +for percent_complete in range(100): + time.sleep(0.05) + my_bar.progress(percent_complete + 1) + +st.balloons() +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +import time +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('st.progress') +``` + +Ein **About box** (**Über-Schaltfläche**) wird mit `st.expander` erstellt und die Beschreibung wird mit `st.write` angezeigt: +```python +with st.expander('About this app'): + st.write('You can now display the progress of your calculations in a Streamlit app with the `st.progress` command.') +``` + +Zuletzt definieren wir einen Fortschrittsbalken und instanziieren ihn mit einem Startwert von `0`. Dann durchläuft eine `for`-Schleife die Werte `0` bis `100`. Bei jeder Iteration verwenden wir `time.sleep(0.05)`, damit die App `0.05`s warten kann, bevor der Fortschrittsbalken `my_bar` um `1` erhöht wird. Dabei wird die grafische Darstellung des Balkens mit jeder Iteration größer. + +```python +my_bar = st.progress(0) + +for percent_complete in range(100): + time.sleep(0.05) + my_bar.progress(percent_complete + 1) + +st.balloons() +``` + +## Literaturhinweise +- [`st.progress`](https://docs.streamlit.io/library/api-reference/status/st.progress) diff --git a/content/de/Day22.md b/content/de/Day22.md new file mode 100644 index 0000000..1c6aa40 --- /dev/null +++ b/content/de/Day22.md @@ -0,0 +1,139 @@ +# st.form + +`st.form` erstellt ein Formular, das Elemente mit einer `Submit` Schaltfläche zusammenfasst. + +Wenn ein Benutzer mit einem Widget interagiert, wird in der Regel die Streamlit-App neu gestartet. + +Ein Formular ist ein Container, der andere Elemente und Widgets visuell zusammenfasst und eine `Submit` Schaltfläche enthält. Damit kann ein Benutzer beliebig oft mit mehreren Widgets interagieren, ohne dass ein erneuter Durchlauf erforderlich ist. Wenn der Submit-Button des Formulars gedrückt wird, werden alle Widgetwerte innerhalb des Formulars in einem einzigen Batch an Streamlit gesendet. + +Um Elemente zu einem Formularobjekt hinzuzufügen, kann man die `with`-Notation verwenden (bevorzugt), oder Objektnotation, indem man einfach Methoden direkt auf dem Formular aufruft (wobei man zuerst das Formular der Variablen zuweist und anschließend Streamlit-Methoden darauf aufruft). Siehe in der Beispiel-App. + +Für Formulare gibt es einige Beschränkungen: +- Jedes Formular muss `st.form_submit_button` enthalten. +- `st.button` und `st.download_button` können nicht zu einem Formular hinzugefügt werden. +- Formulare können überall in deiner App erscheinen (Sidebar, Spalten, etc.), aber sie können nicht in andere Formulare eingebettet werden. + +Weitere Informationen über Formulare findet man in unserem [Blog Post](https://blog.streamlit.io/introducing-submit-button-and-forms/). + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.form/) + +## Code +So wird `st.form` verwendet: +```python +import streamlit as st + +st.title('st.form') + +# Komplettes Beispiel für die Verwendung der 'with'-Notation +st.header('1. Example of using `with` notation') +st.subheader('Coffee machine') + +with st.form('my_form'): + st.subheader('**Order your coffee**') + + # Eingabe-Widgets + coffee_bean_val = st.selectbox('Coffee bean', ['Arabica', 'Robusta']) + coffee_roast_val = st.selectbox('Coffee roast', ['Light', 'Medium', 'Dark']) + brewing_val = st.selectbox('Brewing method', ['Aeropress', 'Drip', 'French press', 'Moka pot', 'Siphon']) + serving_type_val = st.selectbox('Serving format', ['Hot', 'Iced', 'Frappe']) + milk_val = st.select_slider('Milk intensity', ['None', 'Low', 'Medium', 'High']) + owncup_val = st.checkbox('Bring own cup') + + # Jedes Formular muss eine 'Submit' Schaltfläche haben + submitted = st.form_submit_button('Submit') + +if submitted: + st.markdown(f''' + ☕ You have ordered: + - Coffee bean: `{coffee_bean_val}` + - Coffee roast: `{coffee_roast_val}` + - Brewing: `{brewing_val}` + - Serving type: `{serving_type_val}` + - Milk: `{milk_val}` + - Bring own cup: `{owncup_val}` + ''') +else: + st.write('☝️ Place your order!') + + +# Kurzes Beispiel für die Verwendung der Objektnotation +st.header('2. Example of object notation') + +form = st.form('my_form_2') +selected_val = form.slider('Select a value') +form.form_submit_button('Submit') + +st.write('Selected value: ', selected_val) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('st.form') +``` + +### Erstes Beispiel +Beginnen wir mit dem ersten Beispiel, in dem wir den Befehl `st.form` mit der `with`-Notation verwenden. Innerhalb des Formulars fangen wir mit einer Zwischenüberschrift `Order your coffee` an und erstellen dann mehrere Eingabe-Widgets (`st.selectbox`, `st.select_slider` und `st.checkbox`), um Informationen über die Kaffeebestellung zu sammeln. Schließlich wird mit dem Befehl `st.form_submit_button` ein Submit-Button erstellt, der, wenn er angeklickt wird, alle Benutzereingaben als einen einzigen Batch von Informationen zur Verarbeitung an die App sendet. + +```python +# Komplettes Beispiel für die Verwendung der 'with'-Notation +st.header('1. Example of using `with` notation') +st.subheader('Coffee machine') + +with st.form('my_form'): + st.subheader('**Order your coffee**') + + # Eingabe-Widgets + coffee_bean_val = st.selectbox('Coffee bean', ['Arabica', 'Robusta']) + coffee_roast_val = st.selectbox('Coffee roast', ['Light', 'Medium', 'Dark']) + brewing_val = st.selectbox('Brewing method', ['Aeropress', 'Drip', 'French press', 'Moka pot', 'Siphon']) + serving_type_val = st.selectbox('Serving format', ['Hot', 'Iced', 'Frappe']) + milk_val = st.select_slider('Milk intensity', ['None', 'Low', 'Medium', 'High']) + owncup_val = st.checkbox('Bring own cup') + + # Jedes Formular muss eine 'Submit' Schaltfläche haben + submitted = st.form_submit_button('Submit') +``` + +Als nächstes fügen wir die Logik hinzu, nachdem der Submit-Button angeklickt wurde. Standardmäßig wird beim Laden der Streamlit-App die `else`-Anweisung ausgeführt, und die Meldung `☝️ Place your order!` wird angezeigt. Nach dem Klick auf den Submit-Button werden alle Eingaben des Benutzers über die verschiedenen Widgets in verschiedenen Variablen gespeichert (z.B. `coffee_bean_val`, `coffee_roast_val`, etc.) und mit den Befehl `st.markdown` mithilfe von f-string ausgedruckt. + +```python +if submitted: + st.markdown(f''' + ☕ You have ordered: + - Coffee bean: `{coffee_bean_val}` + - Coffee roast: `{coffee_roast_val}` + - Brewing: `{brewing_val}` + - Serving type: `{serving_type_val}` + - Milk: `{milk_val}` + - Bring own cup: `{owncup_val}` + ''') +else: + st.write('☝️ Place your order!') +``` + + +### Zweites Beispiel +Jetzt kommen wir zu dem zweiten Beispiel, wo man `st.form` mit Objektnotation benutzt. Hier wird der Befehl `st.form` der Variablen `form` zugewiesen. Anschließend werden verschiedene Streamlit-Befehle wie `slider` oder `form_submit_button` auf die Variable `form` verwendet. + +```python +# Kurzes Beispiel für die Verwendung der Objektnotation +st.header('2. Example of object notation') + +form = st.form('my_form_2') +selected_val = form.slider('Select a value') +form.form_submit_button('Submit') + +st.write('Selected value: ', selected_val) +``` + +## Literaturhinweise +- [`st.form`](https://docs.streamlit.io/library/api-reference/control-flow/st.form) +- [Introducing Submit button and Forms](https://blog.streamlit.io/introducing-submit-button-and-forms/) diff --git a/content/de/Day23.md b/content/de/Day23.md new file mode 100644 index 0000000..45cab10 --- /dev/null +++ b/content/de/Day23.md @@ -0,0 +1,99 @@ +# st.experimental_get_query_params + +`st.experimental_get_query_params` ermöglicht den Abruf von Abfrageparametern (bzw. Query-Parametern) direkt aus der URL des Browsers des Nutzers. + +## Demo App + +1. Der folgende Link lädt die Demo App ohne Query-Parametern (bitte die Fehlermeldung bemerken): + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.experimental_get_query_params/) + +2. Der folgende Link lädt die Demo App ohne Query-Parametern (hier keine Fehlermeldung): + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/?firstname=Jack&surname=Beanstalk) + +## Code +So wird `st.experimental_get_query_params` verwendet: +```python +import streamlit as st + +st.title('st.experimental_get_query_params') + +with st.expander('About this app'): + st.write("`st.experimental_get_query_params` allows the retrieval of query parameters directly from the URL of the user's browser.") + +# 1. Instructions +st.header('1. Instructions') +st.markdown(''' +In the above URL bar of your internet browser, append the following: +`?firstname=Jack&surname=Beanstalk` +after the base URL `http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/` +such that it becomes +`http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/?firstname=Jack&surname=Beanstalk` +''') + + +# 2. Contents of st.experimental_get_query_params +st.header('2. Contents of st.experimental_get_query_params') +st.write(st.experimental_get_query_params()) + + +# 3. Retrieving and displaying information from the URL +st.header('3. Retrieving and displaying information from the URL') + +firstname = st.experimental_get_query_params()['firstname'][0] +surname = st.experimental_get_query_params()['surname'][0] + +st.write(f'Hello **{firstname} {surname}**, how are you?') +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('st.experimental_get_query_params') +``` + +Fügen wir auch ein "About" Dropdown-Feld hinzu: +```python +with st.expander('About this app'): + st.write("`st.experimental_get_query_params` allows the retrieval of query parameters directly from the URL of the user's browser.") +``` + +Dann geben wir den Besuchern der App Anweisungen, wie sie Query-Parameter direkt an die URL übergeben können: +```python +# 1. Instructions +st.header('1. Instructions') +st.markdown(''' +In the above URL bar of your internet browser, append the following: +`?name=Jack&surname=Beanstalk` +after the base URL `http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/` +such that it becomes +`http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/?firstname=Jack&surname=Beanstalk` +''') +``` + +Anschließend zeigen wir den Inhalt des Befehls `st.experimental_get_query_params` an. +```python +# 2. Contents of st.experimental_get_query_params +st.header('2. Contents of st.experimental_get_query_params') +st.write(st.experimental_get_query_params()) +``` + +Zuletzt werden wir selektive Informationen aus dem Query-Parameter der URL auswählen und anzeigen: +```python +# 3. Retrieving and displaying information from the URL +st.header('3. Retrieving and displaying information from the URL') + +firstname = st.experimental_get_query_params()['firstname'][0] +surname = st.experimental_get_query_params()['surname'][0] + +st.write(f'Hello **{firstname} {surname}**, how are you?') +``` + +## Literaturhinweise +- [`st.experimental_get_query_params`](https://docs.streamlit.io/library/api-reference/utilities/st.experimental_get_query_params) diff --git a/content/de/Day24.md b/content/de/Day24.md new file mode 100644 index 0000000..e631d22 --- /dev/null +++ b/content/de/Day24.md @@ -0,0 +1,134 @@ +# st.cache + +`st.cache` ermöglicht es dir, die Leistung deiner Streamlit-App zu optimieren. + +Streamlit bietet einen Caching-Mechanismus, der es deiner App ermöglicht, beim Laden von Daten aus dem Web, bei der Bearbeitung großer Datensätze oder bei rechenintensiven Anwendungen performant zu bleiben. Dies wird mit dem Dekorator `@st.cache` erreicht. + +Wenn du eine Funktion mit dem @st.cache-Dekorator markieren, wird es mit Streamlit mitgeteilt, dass es bei jedem Aufruf der Funktion einige Dinge überprüfen muss: + +1. Die Eingabeparameter, mit denen die Funktion aufgerufen wurde +2. Der Wert einer externen Variable, die in der Funktion verwendet wird +3. Der Funktionsrumpf +4. Jeder Funktionsrumpf, der innerhalb der gecachten Funktion verwendet wird + +Wenn Streamlit diese vier Komponenten zum ersten Mal mit genau diesen Werten und in genau dieser Kombination und Reihenfolge gesehen hat, führt es die Funktion aus und speichert das Ergebnis in einem lokalen Cache. Wenn sich dann beim nächsten Aufruf der gecachten Funktion keine dieser Komponenten geändert hat, überspringt Streamlit die Ausführung der Funktion ganz und gibt stattdessen die zuvor im Cache gespeicherte Ausgabe zurück. + +Streamlit verfolgt die Änderungen in den Komponenten durch Hashing. Stell dir den Cache als einen In-Memory Key-Value-Store vor, bei dem der Schlüssel ein Hash aller oben genannten Komponenten und der Wert das Ausgabeobjekt ist, das als Referenz übergeben wird. + +Schließlich unterstützt `@st.cache` Argumente, um das Verhalten des Caches zu konfigurieren. Weitere Informationen dazu findet man in unserer API-Referenz. + +## Wie wird es verwendet? + +Man kann einfach den Dekorator `st.cache` in die vorangehende Zeile einer Funktion einfügen, die du in deiner Streamlit-App definierst. Siehe das Beispiel unten. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.cache/) + +## Code +So wird `st.cache` verwendet: +```python +import streamlit as st +import numpy as np +import pandas as pd +from time import time + +st.title('st.cache') + +# Using cache +a0 = time() +st.subheader('Using st.cache') + +@st.cache(suppress_st_warning=True) +def load_data_a(): + df = pd.DataFrame( + np.random.rand(2000000, 5), + columns=['a', 'b', 'c', 'd', 'e'] + ) + return df + +st.write(load_data_a()) +a1 = time() +st.info(a1-a0) + + +# Not using cache +b0 = time() +st.subheader('Not using st.cache') + +def load_data_b(): + df = pd.DataFrame( + np.random.rand(2000000, 5), + columns=['a', 'b', 'c', 'd', 'e'] + ) + return df + +st.write(load_data_b()) +b1 = time() +st.info(b1-b0) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +import numpy as np +import pandas as pd +from time import time +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('Streamlit Cache') +``` + +Als nächstes werden wir 2 Funktionen zur Erzeugung eines großen DataFrame definieren, wobei die erste den Dekorator `st.cache` verwendet und die zweite nicht: +```python +@st.cache(suppress_st_warning=True) +def load_data_a(): + df = pd.DataFrame( + np.random.rand(1000000, 5), + columns=['a', 'b', 'c', 'd', 'e'] + ) + return df + +def load_data_b(): + df = pd.DataFrame( + np.random.rand(1000000, 5), + columns=['a', 'b', 'c', 'd', 'e'] + ) + return df +``` + +Zuletzt führen wir die benutzerdefinierte Funktion aus, wobei wir auch die Laufzeit mit dem Befehl `time()` messen. + +```python +# Using cache +a0 = time() +st.subheader('Using st.cache') + +# We insert the load_data_a function here + +st.write(load_data_a()) +a1 = time() +st.info(a1-a0) + +# Not using cache +b0 = time() +st.subheader('Not using st.cache') + +# We insert the load_data_b function here + +st.write(load_data_b()) +b1 = time() +st.info(b1-b0) +``` + +Es ist zu bemerken, dass der erste Durchlauf in etwa die gleiche Laufzeit ergibt. Lade die App neu und beobachte, wie sich die Laufzeit bei Verwendung des Dekorators "st.cache" ändert. Konntest du einen Geschwindigkeitszuwachs feststellen? + +## Literaturhinweise +- [`st.cache` API Documentation](https://docs.streamlit.io/library/api-reference/performance/st.cache) +- [Optimize performance with `st.cache`](https://docs.streamlit.io/library/advanced-features/caching) +- [Experimental cache primitives](https://docs.streamlit.io/library/advanced-features/experimental-cache-primitives) +- [`st.experimental_memo`](https://docs.streamlit.io/library/api-reference/performance/st.experimental_memo) +- [`st.experimental_singleton`](https://docs.streamlit.io/library/api-reference/performance/st.experimental_singleton) diff --git a/content/de/Day25.md b/content/de/Day25.md new file mode 100644 index 0000000..06ff28e --- /dev/null +++ b/content/de/Day25.md @@ -0,0 +1,80 @@ +# st.session_state + +Wir definieren den Zugriff auf eine Streamlit-App in einer Browser-Tab als eine Session (Sitzung). Für jeden Browser-Tab, die sich mit dem Streamlit-Server verbindet, wird eine neue Sitzung erstellt. Streamlit führt dein Skript von vorne bis hinten aus jedes Mal, wenn du mit deiner App interagierst. Jede Wiederholung findet in einer leeren Umgebung statt: Es werden keine gemeinsamen Variablen zwischen den Durchläufen benutzt. + +Der Session-State (Sitzungszustand) ist eine Möglichkeit, Variablen zwischen den Wiederholungen der einzelnen Benutzersitzungen gemeinsam zu nutzen. Neben der Möglichkeit, den Zustand zu speichern und beizubehalten, bietet Streamlit auch die Möglichkeit, den Zustand mithilfe von Callbacks zu manipulieren. + +In diesem Tutorial werden wir die Verwendung von Session-State und Callbacks zeigen, während wir eine App zur Gewichtsumwandlung erstellen. + +`st.session_state` ermöglicht die Implementierung des Sessionsstatus in einer Streamlit-App. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.session_state/) + +## Code +So wird `st.session_state` verwendet: +```python +import streamlit as st + +st.title('st.session_state') + +def lbs_to_kg(): + st.session_state.kg = st.session_state.lbs/2.2046 +def kg_to_lbs(): + st.session_state.lbs = st.session_state.kg*2.2046 + +st.header('Input') +col1, spacer, col2 = st.columns([2,1,2]) +with col1: + pounds = st.number_input("Pounds:", key = "lbs", on_change = lbs_to_kg) +with col2: + kilogram = st.number_input("Kilograms:", key = "kg", on_change = kg_to_lbs) + +st.header('Output') +st.write("st.session_state object:", st.session_state) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen eines Titels für die App: +```python +st.title('st.session_state') +``` + +Als nächstes definieren wir Funktionen für die Gewichtsumrechnung von Pfund in Kilo und umgekehrt: +```python +def lbs_to_kg(): + st.session_state.kg = st.session_state.lbs/2.2046 +def kg_to_lbs(): + st.session_state.lbs = st.session_state.kg*2.2046 +``` + +Hier verwenden wir `st.number_input`, um numerische Eingaben für die Gewichtswerte zu annehmen: +```python +st.header('Input') +col1, spacer, col2 = st.columns([2,1,2]) +with col1: + pounds = st.number_input("Pounds:", key = "lbs", on_change = lbs_to_kg) +with col2: + kilogram = st.number_input("Kilograms:", key = "kg", on_change = kg_to_lbs) +``` + +Die obigen 2 definierten Funktionen werden aufgerufen, sobald ein numerischer Wert in das Zahlenfeld eingegeben wird, das durch den Befehl `st.number_input` erstellt wurde. Es ist zu bemerken, dass die Option `on_change` die beiden Funktionen (`lbs_to_kg` und `kg_to_lbs`) festlegt. + +Kurz gesagt wird die Zahl durch diese Funktionen bei der Eingabe einer Zahl in das Feld `st.number_input` umgewandelt. + +Zuletzt werden die Gewichtswerte in den Einheiten `kg` und `lbs` mit `st.write` ausgedruckt, die im Session-State als `st.session_state.kg` und `st.session_state.lbs` gespeichert sind: + +```python +st.header('Output') +st.write("st.session_state object:", st.session_state) +``` + +## Literaturhinweise +- [Session State](https://docs.streamlit.io/library/api-reference/session-state) +- [Add statefulness to apps](https://docs.streamlit.io/library/advanced-features/session-state) diff --git a/content/de/Day26.md b/content/de/Day26.md new file mode 100644 index 0000000..68deb84 --- /dev/null +++ b/content/de/Day26.md @@ -0,0 +1,99 @@ +# How to use API by building the Bored API app + +Die Bored API-App schlägt dir lustige Dinge vor, wenn dir langweilig ist! + +Eigentlich demonstriert es auch die Verwendung von APIs innerhalb einer Streamlit-App. +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/bored-api-app/) + +## Code +So wird eine Bored-API App erstellt: +```python +import streamlit as st +import requests + +st.title('🏀 Bored API app') + +st.sidebar.header('Input') +selected_type = st.sidebar.selectbox('Select an activity type', ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"]) + +suggested_activity_url = f'http://www.boredapi.com/api/activity?type={selected_type}' +json_data = requests.get(suggested_activity_url) +suggested_activity = json_data.json() + +c1, c2 = st.columns(2) +with c1: + with st.expander('About this app'): + st.write('Are you bored? The **Bored API app** provides suggestions on activities that you can do when you are bored. This app is powered by the Bored API.') +with c2: + with st.expander('JSON data'): + st.write(suggested_activity) + +st.header('Suggested activity') +st.info(suggested_activity['activity']) + +col1, col2, col3 = st.columns(3) +with col1: + st.metric(label='Number of Participants', value=suggested_activity['participants'], delta='') +with col2: + st.metric(label='Type of Activity', value=suggested_activity['type'].capitalize(), delta='') +with col3: + st.metric(label='Price', value=suggested_activity['price'], delta='') +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +import requests +``` + +Der Titel der App wird mit `st.title` angezeigt: +```python +st.title('🏀 Bored API app') +``` + +Als nächstes wird Benutzereingaben zur **activity type** mithilfe des Befehls `st.selectbox` angenommen: +```python +st.sidebar.header('Input') +selected_type = st.sidebar.selectbox('Select an activity type', ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"]) +``` + +Die oben genannte ausgewählte Aktivität wird dann mit einem f-String an die URL angehängt, die dann zum Abrufen der resultierenden JSON-Daten verwendet wird: +```python +suggested_activity_url = f'http://www.boredapi.com/api/activity?type={selected_type}' +json_data = requests.get(suggested_activity_url) +suggested_activity = json_data.json() +``` + +Hier werden wir Informationen über die App und die JSON-Daten mit dem Befehl `st.expander` anzeigen: +```python +c1, c2 = st.columns(2) +with c1: + with st.expander('About this app'): + st.write('Are you bored? The **Bored API app** provides suggestions on activities that you can do. This app is powered by the Bored API.') +with c2: + with st.expander('JSON data'): + st.write(suggested_activity) +``` + +Wir werden dann eine vorgeschlagene Aktivität anzeigen: +```python +st.header('Suggested activity') +st.info(suggested_activity['activity']) +``` + +Zuletzt zeigen wir auch die begleitenden Informationen zu der vorgeschlagenen Aktivität an, wie z.B. die Anzahl der Teilnehmer, die Art der Aktivität und den Preis. +```python +col1, col2, col3 = st.columns(3) +with col1: + st.metric(label='Number of Participants', value=suggested_activity['participants'], delta='') +with col2: + st.metric(label='Type of Activity', value=suggested_activity['type'].capitalize(), delta='') +with col3: + st.metric(label='Price', value=suggested_activity['price'], delta='') +``` + +## Literaturhinweise +- [Bored API](http://www.boredapi.com/) diff --git a/content/de/Day27.md b/content/de/Day27.md new file mode 100644 index 0000000..e681772 --- /dev/null +++ b/content/de/Day27.md @@ -0,0 +1,274 @@ +# Erstellung eines verschieb- und größenveränderbaren Dashboards mit Streamlit Elements + +Streamlit Elements ist eine Komponente eines Drittanbieters, die von [okld] (https://github.com/okld) entwickelt wurde und dir die Möglichkeit bietet, schöne Apps und Dashboards mit Material UI-Widgets, Monaco-Editor (Visual Studio Code), Nivo-Diagrammen und vielem mehr zu erstellen. + +## Wie wird es verwendet? + +### Installation + +Der erste Schritt besteht darin, Streamlit Elements in Ihrer Umgebung zu installieren: + +```bash +pip install streamlit-elements==0.1.* +``` + +Es wird empfohlen, die Version auf `0.1.*` festzulegen, da zukünftige Versionen möglicherweise brechende API-Änderungen einführen. + +### Verwendung + +Eine ausführliche Anleitung zur Verwendung findet man in [Streamlit Elements README](https://github.com/okld/streamlit-elements#getting-started). + +## Was bauen wir? + +Das Ziel der heutigen Herausforderung ist es, ein Dashboard zu erstellen, das aus drei Material UI-Karten besteht: + +- Eine erste Karte mit einem Monaco-Code-Editor zur Dateneingabe; +- Eine zweite Karte, die diese Daten in einem Nivo Bump-Diagramm anzeigt; +- Eine dritte Karte, um eine YouTube-Video-URL anzuzeigen, die mit `st.text_input` definiert wurde. + +Man kann die von der Nivo Bump-Demo generierten Daten auf dem "Daten"-Tab verwenden: https://nivo.rocks/bump/. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/okld/streamlit-elements-demo/main) + +## Code mit zeilenweiser Erklärung + +```python +# Zuerst brauchen wir die folgenden Importe für unsere App. + +import json +import streamlit as st +from pathlib import Path + +# Was Streamlit Elements betrifft, brauchen wir alle diese Objekte. +# Alle verfügbaren Objekte und ihre Verwendung sind dort aufgeführt: https://github.com/okld/streamlit-elements#getting-started + +from streamlit_elements import elements, dashboard, mui, editor, media, lazy, sync, nivo + +# Seitenlayout ändern, damit das Dashboard die ganze Seite einnimmt. + +st.set_page_config(layout="wide") + +with st.sidebar: + st.title("🗓️ #30DaysOfStreamlit") + st.header("Day 27 - Streamlit Elements") + st.write("Build a draggable and resizable dashboard with Streamlit Elements.") + st.write("---") + + # URL für Medienplayer festlegen. + media_url = st.text_input("Media URL", value="https://www.youtube.com/watch?v=vIQQR_yq-8I") + +# Standarddaten initialisieren für den Code-Editor und das Diagramm. +# +# Für dieses Tutorial brauchen wir Daten für ein Nivo Bump-Diagramm. +# Zufallsdaten erhälst du dort, im Tab 'Daten': https://nivo.rocks/bump/ +# +# Wie man unten sieht wird dieser Session-State aktualisiert, wenn der +# Code-Editor geändert wird, und es wird von Nivo Bump Chart gelesen werden, um die Daten zu zeichnen. + + +if "data" not in st.session_state: + st.session_state.data = Path("data.json").read_text() + +# Ein Standardlayout für das Dashboard festlegen. +# Das Dashboard-Gitter hat standardmäßig 12 Spalten. +# +# Weitere Informationen zu den verfügbaren Parametern: +# https://github.com/react-grid-layout/react-grid-layout#grid-item-props + +layout = [ + # Das Editorelement wird an den Koordinaten x=0 und y=0 positioniert, nimmt 6/12 Spalten ein und hat eine Höhe von 3. + dashboard.Item("editor", 0, 0, 6, 3), + # Das Diagrammelement wird an den Koordinaten x=6 und y=0 positioniert, nimmt 6/12 Spalten ein und hat eine Höhe von 3. + dashboard.Item("chart", 6, 0, 6, 3), + # Das Medienelement wird an den Koordinaten x=0 und y=3 positioniert, nimmt 6/12 Spalten ein und hat eine Höhe von 4. + dashboard.Item("media", 0, 2, 12, 4), +] + +# Einen Rahmen erstellen, um Elemente anzuzeigen. + +with elements("demo"): + + # Ein neues Dashboard mit dem oben angegebenen Layout erstellen. + # + # draggableHandle ist ein CSS-Query-Selektor, um den ziehbaren Teil jedes Dashboard-Elements zu definieren. + # Hier werden Elemente mit einem 'draggable' Klassennamen ziehbar sein. + # + # Weitere Informationen zu den verfügbaren Parametern für das Dashboard-Gitter findet man hier: + # https://github.com/react-grid-layout/react-grid-layout#grid-layout-props + # https://github.com/react-grid-layout/react-grid-layout#responsive-grid-layout-props + + with dashboard.Grid(layout, draggableHandle=".draggable"): + + # Erste Karte, der Code-Editor. + # + # Wir benutzen den Parameter 'key', um das richtige Dashboard-Element zu identifizieren. + # + # Damit der Inhalt der Karte automatisch die verfügbare Höhe ausfüllt, verwenden wir CSS Flexbox. + # sx ist ein Parameter, der bei jedem Material UI-Widget verfügbar ist, um CSS-Attribute zu definieren. + # + # Weitere Informationen zu Card, flexbox und sx: + # https://mui.com/components/cards/ + # https://mui.com/system/flexbox/ + # https://mui.com/system/the-sx-prop/ + + with mui.Card(key="editor", sx={"display": "flex", "flexDirection": "column"}): + + # Um diese Überschrift ziehbar zu machen, müssen wir nur ihren Klassennamen auf 'draggable' setzen, + # wie oben in draggableHandle (Argument von dashboard.Grid) definiert. + + mui.CardHeader(title="Editor", className="draggable") + + # Wir möchten, dass der Inhalt der Karte die gesamte verfügbare Höhe einnimmt. Deswegen setzen wir den CSS-Wert flex auf 1. + # Wir wollen auch, dass der Inhalt der Karte schrumpft, wenn die Karte verkleinert wird. Deswegen setzen wir minHeight auf 0. + + with mui.CardContent(sx={"flex": 1, "minHeight": 0}): + + # Hier ist unser Monaco-Code-Editor. + # + # Zuerst setzen wir den Defaultwert auf st.session_state.data, den wir oben initialisiert haben. + # Zweitens legen wir die zu verwendende Sprache fest, hier JSON. + # + # Dann wollen wir die Änderungen von dem Inhalt des Editors abrufen. + # Die Monaco-Dokumentation zeigt, dass es eine onChange Eigenschaft gibt, die eine Funktion annimmt. + # Diese Funktion wird jedes Mal aufgerufen, wenn eine Änderung vorgenommen wird, und der aktualisierte Inhaltswert wird in + # den ersten Parameter übergeben (vgl. onChange: https://github.com/suren-atoyan/monaco-react#props) + # + # Streamlit Elemente bieten eine spezielle sync()-Funktion. Diese Funktion erstellt einen Callback, der + # Parameter automatisch an die Session-State von Streamlit weiterleitet. + # + # Beispiele + # -------- + # Erstelle einen Callback, der seinen ersten Parameter an ein Session-State-Element namens "data" weiterleitet: + # >>> editor.Monaco(onChange=sync("data")) + # >>> print(st.session_state.data) + # + # Erstelle einen Callback, der seinen zweiten Parameter an ein Session-State-Element namens "ev" weiterleitet: + # >>> editor.Monaco(onChange=sync(None, "ev")) + # >>> print(st.session_state.ev) + # + # Erstelle einen Callback, der seine beiden Parameter an die Session-State weiterleitet: + # >>> editor.Monaco(onChange=sync("data", "ev")) + # >>> print(st.session_state.data) + # >>> print(st.session_state.ev) + # + # Jetzt gibt es ein Problem: onChange wird jedes Mal aufgerufen, wenn eine Änderung vorgenommen wird. Das bedeutet, dass jedes Mal wenn + # man ein einziges Zeichen eingibt, wird die gesamte Streamlit-App neu ausgeführt. + # + # Um dieses Problem zu vermeiden, kann man Streamlit Elements anweisen, auf ein anderes Ereignis zu warten + # (z. B. ein Button-Klick), bevor die aktualisierten Daten gesendet werden. Dies wird durch Verwendung von lazy() als Wrapper für den Callback erreicht. + # + # Weitere Informationen zu den verfügbaren Parametern für Monaco: + # https://github.com/suren-atoyan/monaco-react + # https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html + + + editor.Monaco( + defaultValue=st.session_state.data, + language="json", + onChange=lazy(sync("data")) + ) + + with mui.CardActions: + + # Der Monaco-Editor hat einen Lazy-Callback, der an onChange gebunden ist. Das bedeutet, dass selbst wenn man den + # Inhalt von Monaco ändert, wird Streamlit nicht direkt benachrichtigt, also wird es nicht jedes Mal neu geladen. + # Wir brauchen also ein anderes, nicht-lazy Ereignis, um ein Update auszulösen. + # + # Die Lösung ist, einen Button zu erstellen, der beim Klick einen Callback auslöst. + # Unser Callback muss nichts Besonderes tun. Du kannst entweder eine leere + # Python-Funktion erstellen, oder sync() ohne Argument verwenden. + # + # Jetzt jedes Mal, wenn du auf den Button klickst, wird der onClick-Callback ausgelöst. Aber jeder andere + # Lazy-Callback, der sich in der Zwischenzeit geändert hat, wird ebenfalls aufgerufen. + + mui.Button("Apply changes", onClick=sync()) + + # Zweite Karte, das Nivo Bump Chart. + # Wir werden die gleiche Flexbox-Konfiguration wie bei der ersten Karte verwenden, um die Höhe des Inhalts automatisch anzupassen. + + with mui.Card(key="chart", sx={"display": "flex", "flexDirection": "column"}): + + # Um diese Überschrift ziehbar zu machen, müssen wir nur ihren Klassennamen auf 'draggable' setzen, + # wie oben in draggableHandle (Argument von dashboard.Grid) definiert. + + mui.CardHeader(title="Chart", className="draggable") + + # Like above, we want to make our content grow and shrink as the user resizes the card, + # by setting flex to 1 and minHeight to 0. + + # Wie oben wollen wir unseren Inhalt vergrößern und verkleinern lassen, wenn der Benutzer die Größe der Karte ändert. + # Dies wird durch die Setzung von flex auf 1 und minHeight auf 0 erreicht. + + with mui.CardContent(sx={"flex": 1, "minHeight": 0}): + + # Hier werden wir unser Bump-Diagramm zeichnen. + # + # Für diese Übung können wir einfach das Beispiel von Nivo anpassen und es mit Streamlit Elements verwenden. + # Das Beispiel von Nivo ist auf dem Tab 'code' verfügbar: https://nivo.rocks/bump/ + # + # Data nimmt ein Dictionary als Parameter, also müssen wir unsere JSON-Daten von einem String in + # ein Python-dictionary umwandeln, mit `json.loads()`. + # + # Für weitere Informationen über andere verfügbare Nivo-Diagramme: + # https://nivo.rocks/ + + nivo.Bump( + data=json.loads(st.session_state.data), + colors={ "scheme": "spectral" }, + lineWidth=3, + activeLineWidth=6, + inactiveLineWidth=3, + inactiveOpacity=0.15, + pointSize=10, + activePointSize=16, + inactivePointSize=0, + pointColor={ "theme": "background" }, + pointBorderWidth=3, + activePointBorderWidth=3, + pointBorderColor={ "from": "serie.color" }, + axisTop={ + "tickSize": 5, + "tickPadding": 5, + "tickRotation": 0, + "legend": "", + "legendPosition": "middle", + "legendOffset": -36 + }, + axisBottom={ + "tickSize": 5, + "tickPadding": 5, + "tickRotation": 0, + "legend": "", + "legendPosition": "middle", + "legendOffset": 32 + }, + axisLeft={ + "tickSize": 5, + "tickPadding": 5, + "tickRotation": 0, + "legend": "ranking", + "legendPosition": "middle", + "legendOffset": -40 + }, + margin={ "top": 40, "right": 100, "bottom": 40, "left": 60 }, + axisRight=None, + ) + + # Drittes Element des Dashboards: der Media-Player. + + with mui.Card(key="media", sx={"display": "flex", "flexDirection": "column"}): + mui.CardHeader(title="Media Player", className="draggable") + with mui.CardContent(sx={"flex": 1, "minHeight": 0}): + + # Dieses Element wird von ReactPlayer angetrieben, es unterstützt viele weitere Player + # als YouTube. Sie können es dort ausprobieren: https://github.com/cookpete/react-player#props + + media.Player(url=media_url, width="100%", height="100%", controls=True) + +``` + +## Weitere Fragen? + +Man kann alle Fragen zu Streamlit Elements oder zu dieser Herausforderung dort stellen: [Streamlit Elements Thema](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material-ui-nivo-charts-and-more/24616) \ No newline at end of file diff --git a/content/de/Day28.md b/content/de/Day28.md new file mode 100644 index 0000000..2c66f85 --- /dev/null +++ b/content/de/Day28.md @@ -0,0 +1,205 @@ +# streamlit-shap + +[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) ist eine Streamlit-Komponente, die einen Wrapper zur Anzeige von [SHAP](https://github.com/slundberg/shap) Plots in [Streamlit](https://streamlit.io/) bereitstellt. + +Die Bibliothek wird von unserem internen Mitarbeiter [Snehan Kekre](https://github.com/snehankekre) entwickelt, der auch die Website [Streamlit Documentation](https://docs.streamlit.io/) pflegt. + +Zuerst muss man Streamlit installieren (natürlich!) und dann die Bibliothek `streamlit-shap` mit pip: +```bash +pip install streamlit +pip install streamlit-shap +``` + +Es gibt noch weitere Bibliotheken zu installieren (z.B. `matplotlib`, `pandas`, `scikit-learn` und `xgboost`), falls du dies noch nicht getan hast. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-shap/) + +## Code +So wird `streamlit-shap` verwendet: +```python +import streamlit as st +from streamlit_shap import st_shap +import shap +from sklearn.model_selection import train_test_split +import xgboost +import numpy as np +import pandas as pd + +st.set_page_config(layout="wide") + +@st.experimental_memo +def load_data(): + return shap.datasets.adult() + +@st.experimental_memo +def load_model(X, y): + X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=7) + d_train = xgboost.DMatrix(X_train, label=y_train) + d_test = xgboost.DMatrix(X_test, label=y_test) + params = { + "eta": 0.01, + "objective": "binary:logistic", + "subsample": 0.5, + "base_score": np.mean(y_train), + "eval_metric": "logloss", + "n_jobs": -1, + } + model = xgboost.train(params, d_train, 10, evals = [(d_test, "test")], verbose_eval=100, early_stopping_rounds=20) + return model + +st.title("`streamlit-shap` for displaying SHAP plots in a Streamlit app") + +with st.expander('About the app'): + st.markdown('''[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) is a Streamlit component that provides a wrapper to display [SHAP](https://github.com/slundberg/shap) plots in [Streamlit](https://streamlit.io/). + The library is developed by our in-house staff [Snehan Kekre](https://github.com/snehankekre) who also maintains the [Streamlit Documentation](https://docs.streamlit.io/) website. + ''') + +st.header('Input data') +X,y = load_data() +X_display,y_display = shap.datasets.adult(display=True) + +with st.expander('About the data'): + st.write('Adult census data is used as the example dataset.') +with st.expander('X'): + st.dataframe(X) +with st.expander('y'): + st.dataframe(y) + +st.header('SHAP output') + +# train XGBoost model +model = load_model(X, y) + +# compute SHAP values +explainer = shap.Explainer(model, X) +shap_values = explainer(X) + +with st.expander('Waterfall plot'): + st_shap(shap.plots.waterfall(shap_values[0]), height=300) +with st.expander('Beeswarm plot'): + st_shap(shap.plots.beeswarm(shap_values), height=300) + +explainer = shap.TreeExplainer(model) +shap_values = explainer.shap_values(X) + +with st.expander('Force plot'): + st.subheader('First data instance') + st_shap(shap.force_plot(explainer.expected_value, shap_values[0,:], X_display.iloc[0,:]), height=200, width=1000) + st.subheader('First thousand data instance') + st_shap(shap.force_plot(explainer.expected_value, shap_values[:1000,:], X_display.iloc[:1000,:]), height=400, width=1000) +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +from streamlit_shap import st_shap +import shap +from sklearn.model_selection import train_test_split +import xgboost +import numpy as np +import pandas as pd +``` + +Als nächstes stellen wir das Seitenlayout so ein, dass die Inhalte der Streamlit-App die gesamte Seitenbreite einnehmen können. +```python +st.set_page_config(layout="wide") +``` + +Dann laden wir einen Datensatz aus der Bibliothek `shap`: +```python +@st.experimental_memo +def load_data(): + return shap.datasets.adult() +``` + +Anschließend wird eine Funktion namens `load_model` definiert, die das Matrixpaar `X, y` als Eingabe annimmt, die Daten in Trainings-/ Testsätze aufteilt, eine `DMatrix` erstellt und ein XGBoost-Modell erstellt. +```python +@st.experimental_memo +def load_model(X, y): + X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=7) + d_train = xgboost.DMatrix(X_train, label=y_train) + d_test = xgboost.DMatrix(X_test, label=y_test) + params = { + "eta": 0.01, + "objective": "binary:logistic", + "subsample": 0.5, + "base_score": np.mean(y_train), + "eval_metric": "logloss", + "n_jobs": -1, + } + model = xgboost.train(params, d_train, 10, evals = [(d_test, "test")], verbose_eval=100, early_stopping_rounds=20) + return model +``` + +Dann wird der Titel der Streamlit-App angezeigt: +```python +st.title("`streamlit-shap` for displaying SHAP plots in a Streamlit app") +``` + +Ein "Über" Ausklappfeld ist implementiert, um Details über die App bereitzustellen: +```python +with st.expander('About the app'): + st.markdown('''[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) is a Streamlit component that provides a wrapper to display [SHAP](https://github.com/slundberg/shap) plots in [Streamlit](https://streamlit.io/). + The library is developed by our in-house staff [Snehan Kekre](https://github.com/snehankekre) who also maintains the [Streamlit Documentation](https://docs.streamlit.io/) website. + ''') +``` + +Hier wird die Überschrift zusammen mit einem Ausklappfeld für die Eingabevariablen "X" und "y" angezeigt: +```python +st.header('Input data') +X,y = load_data() +X_display,y_display = shap.datasets.adult(display=True) + +with st.expander('About the data'): + st.write('Adult census data is used as the example dataset.') +with st.expander('X'): + st.dataframe(X) +with st.expander('y'): + st.dataframe(y) +``` + +Hier wird die Überschrift für die anstehende SHAP-Ausgabe angezeigt: +```python +st.header('SHAP output') +``` + +Das XGBoost-Modell wird dann mithilfe der Funktion "load_model" erstellt, die oben implementiert wurde. + +```python +# train XGBoost model +X,y = load_data() +X_display,y_display = shap.datasets.adult(display=True) + +model = load_model(X, y) +``` + +Hier werden die SHAP-Werte berechnet, die dann zur Erstellung der Wasserfall- und Beeswarm-Diagramme verwendet werden. +```python +# compute SHAP values +explainer = shap.Explainer(model, X) +shap_values = explainer(X) + +with st.expander('Waterfall plot'): + st_shap(shap.plots.waterfall(shap_values[0]), height=300) +with st.expander('Beeswarm plot'): + st_shap(shap.plots.beeswarm(shap_values), height=300) +``` + +Zum Schluss wird der Tree-SHAP-Algorithmus verwendet, um die Ergebnisse von Ensemble-Baummodellen mit dem Befehl `shap.TreeExplainer` zu erklären und mit dem Befehl `shap.force_plot` zu visualisieren: +```python +explainer = shap.TreeExplainer(model) +shap_values = explainer.shap_values(X) + +with st.expander('Force plot'): + st.subheader('First data instance') + st_shap(shap.force_plot(explainer.expected_value, shap_values[0,:], X_display.iloc[0,:]), height=200, width=1000) + st.subheader('First thousand data instance') + st_shap(shap.force_plot(explainer.expected_value, shap_values[:1000,:], X_display.iloc[:1000,:]), height=400, width=1000) +``` + +## Literaturhinweise +- [`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) +- [SHAP](https://github.com/slundberg/shap) diff --git a/content/de/Day29.md b/content/de/Day29.md new file mode 100644 index 0000000..7bc3671 --- /dev/null +++ b/content/de/Day29.md @@ -0,0 +1,32 @@ +# Wie man ein Zero-Shot-Learning-Textklassifizierer mit Hugging Face und Streamlit baut + +In der heutigen Herausforderung wird [Charly Wargnier](https://twitter.com/DataChaz) uns durch den Prozess der Entwicklung eines Zero-Shot-Learning-Textklassifizierers mit Hugging Face und Streamlit führen. + +## Introduction + +Hallo Streamliters! + +Heute freue ich mich, mit diesem interaktiven Tutorial einen Beitrag zur 30DaysofStreamlit-Herausforderung leisten zu können! 🎈 + +## Was bauen wir? + +Wir werden ein Zero-Shot-Learning-Textklassifizierer der die API von Hugging Face und Distilbart verwendet! + +Du wirst die mächtige Kraft haben, Schlüsselsätze on-the-fly, schnell und ohne vorheriges ML-Training zu klassifizieren! + +Erstelle Klassifizierungsetiketten, füge deine Schlüsselsätze ein, und los geht's! + +Man kann diese Etiketten beliebig festlegen, z.B.: + +- Positiv, Negativ und Neutral für die Stimmungsanalyse +- Wütend, Glücklich, Emotional für die Emotionsanalyse +- Navigational, Transactional, Informational für die Klassifizierung von Absichten +- Dein Produktsortiment (Taschen, Schuhe, Stiefel usw.) + +Du entscheidest! + +Begeistert? Tauchen wir ein! + +## Den gesamten Blog lesen +👉 [Den gesamten Blog lesen](https://www.charlywargnier.com/post/how-to-create-a-zero-shot-learning-text-classifier-using-hugging-face-and-streamlit) + diff --git a/content/de/Day3.md b/content/de/Day3.md new file mode 100644 index 0000000..1c8ead4 --- /dev/null +++ b/content/de/Day3.md @@ -0,0 +1,85 @@ +# st.button + +`st.button` erlaubt es dir, eine interaktive Schaltfläche anzuzeigen. + +## Was bauen wir? + +Eine einfache App, welche abhängig davon, ob auf die Schaltfläche geklickt wurde, alternative Nachrichten anzeigt. + +Fluss der App: + +1. Standardmäßig zeig die App `Goodbye` an +2. Wenn die Schaltfläche gedrückt wurde, zeigt die App die alternative Nachricht `Why hello there` an + +## Demo App + +Die veröffentlichte Streamlit App sollte so ähnlich aussehen wie diejenige hinter folgendem Link: + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.button/) + +## Code + +Hier ist der Code um die oben erwähnte App zu erstellen: + +```python +import streamlit as st + +st.header('st.button') + +if st.button('Say hello'): + st.write('Why hello there') +else: + st.write('Goodbye') +``` + +## Zeilen-für-Zeilen Erklärung + +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` zu importieren: + +```python +import streamlit as st +``` + +This is followed by creating a header text for the app: + +```python +st.header('st.button') +``` + +Next, we will use conditional statements `if` and `else` for printing alternative messages. + +```python +if st.button('Say hello'): + st.write('Why hello there') +else: + st.write('Goodbye') +``` + +Wie wir an der obigen Codebox sehen können, akzeptiert der `st.button()` Befehl das `label` Argument `Say hello`, welches als Text des Knopfes angezeigt wird. + +Der `st.write` Befehl wird dazu benutzt, entweder `Why hello there` oder `Goodbye` als Textnachrichten anzuzeigen, je nachdem, ob der Knopf gedrückt wurde. Die Implementierung sieht folgendermaßen aus: + +```python +st.write('Why hello there') +``` + +and + +```python +st.write('Goodbye') +``` + +Es ist wichtig zu verstehen, dass die obigen `st.write` Ausdrücke innerhalb der `if` und `else` Bedingungen platziert sind. Damit wird die oben genannte alternative Anzeige der Nachrichten erreicht. + +## Nächste Schritte + +Nun da wir die Streamlit App lokal erstellt haben, ist es an der Zeit, sie auf [Streamlit Community Cloud](https://streamlit.io/cloud) zu veröffentlichen. Das wird in einer der nächsten Herausforderungen näher erläutert. + +Wir zeigen den kompletten Code direkt hier auf der Website (wie in der Codebox oben dargestellt), weil es deine erste Woche ist. +Für die nächsten Herausforderungen empfehlen wir, dass du zuerst versuchst die Streamlit Apps selbst zu implementieren. + +Nicht verzweifeln, falls du mal nicht weiterkommen solltest. Du kannst jederzeit einen Blick auf die Lösung werfen. + +## Referenzen + +Lies mehr über [`st.button`](https://docs.streamlit.io/library/api-reference/widgets/st.button) in der Streamlit API Dokumentation. diff --git a/content/de/Day30.md b/content/de/Day30.md new file mode 100644 index 0000000..0a3bea7 --- /dev/null +++ b/content/de/Day30.md @@ -0,0 +1,127 @@ +# Die Kunst der Erstellung von Streamlit-Apps + +Heute ist Tag 30 des Wettbewerbs *#30DaysOfStreamlit*. Herzlichen Glückwunsch, dass du so weit gekommen bist. + +In diesem Tutorial werden wir unser neu erworbenes Wissen aus dieser Herausforderung nutzen, um Streamlit-Apps zur Lösung realer Probleme zu erstellen. + +## Real existierendes Problem + +Als Content-Ersteller ist der Abruf von Vorschaubildern (Thumbnails) der YouTube-Videos eine nützliche Ressource für die soziale Werbung und die Erstellung von Content. + +Lass uns herausfinden, wie wir dieses Problem angehen und eine Streamlit-App bauen können. + +## Lösung + +Heute werden wir `yt-img-app` bauen, eine Streamlit-App, die Vorschaubilder aus YouTube-Videos extrahieren kann. + +Kurzgesagt, hier sind die 3 einfachen Schritte, die wir mit der Streamlit-App durchführen wollen: + +1. Annehmung einer YouTube-URL als Benutzereingabe +2. Durchführen einer Textverarbeitung der URL, um die eindeutige YouTube-Video-ID zu extrahieren +3. Verwendung der YouTube-Video-ID als Eingabe für eine Funktion, die das Vorschaubild von YouTube-Videos abruft und anzeigt + +## Anleitung + +Um die Streamlit-App zu verwenden, kopiere eine YouTube-URL und füge sie in das Textfeld ein. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/yt-img-app/) + +## Code +So baut man die `yt-img-app` Streamlit App: +```python +import streamlit as st + +st.title('🖼️ yt-img-app') +st.header('YouTube Thumbnail Image Extractor App') + +with st.expander('About this app'): + st.write('This app retrieves the thumbnail image from a YouTube video.') + +# Image settings +st.sidebar.header('Settings') +img_dict = {'Max': 'maxresdefault', 'High': 'hqdefault', 'Medium': 'mqdefault', 'Standard': 'sddefault'} +selected_img_quality = st.sidebar.selectbox('Select image quality', ['Max', 'High', 'Medium', 'Standard']) +img_quality = img_dict[selected_img_quality] + +yt_url = st.text_input('Paste YouTube URL', 'https://youtu.be/JwSS70SZdyM') + +def get_ytid(input_url): + if 'youtu.be' in input_url: + ytid = input_url.split('/')[-1] + if 'youtube.com' in input_url: + ytid = input_url.split('=')[-1] + return ytid + +# Display YouTube thumbnail image +if yt_url != '': + ytid = get_ytid(yt_url) # yt or yt_url + + yt_img = f'http://img.youtube.com/vi/{ytid}/{img_quality}.jpg' + st.image(yt_img) + st.write('YouTube video thumbnail image URL: ', yt_img) +else: + st.write('☝️ Enter URL to continue ...') +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +``` + +Als nächstes zeigen wir der Titel der App und die dazugehörige Überschrift an: +```python +st.title('🖼️ yt-img-app') +st.header('YouTube Thumbnail Image Extractor App') +``` +Wo wir gerade dabei sind, können wir auch gleich eine ausklappbare Box einbauen. +```python +with st.expander('About this app'): + st.write('This app retrieves the thumbnail image from a YouTube video.') + +Hier erstellen wir ein Auswahlfeld, in das der Benutzer die gewünschte Bildqualität eingeben kann. +```python +# Image settings +st.sidebar.header('Settings') +img_dict = {'Max': 'maxresdefault', 'High': 'hqdefault', 'Medium': 'mqdefault', 'Standard': 'sddefault'} +selected_img_quality = st.sidebar.selectbox('Select image quality', ['Max', 'High', 'Medium', 'Standard']) +img_quality = img_dict[selected_img_quality] +``` + +Es wird ein Eingabefeld angezeigt, in das der Benutzer die URL des YouTube-Videos eingeben kann, aus dem das Bild extrahiert werden soll. +```python +yt_url = st.text_input('Paste YouTube URL', 'https://youtu.be/JwSS70SZdyM') +``` + +Eine Funktion, die die Textverarbeitung der Eingabe-URL durchführt: +```python +def get_ytid(input_url): + if 'youtu.be' in input_url: + ytid = input_url.split('/')[-1] + if 'youtube.com' in input_url: + ytid = input_url.split('=')[-1] + return ytid +``` + +Zuletzt verwenden wir Verzweigung, um zu bestimmen, ob die Eingabeaufforderung der URL angezeigt werden soll (d.h. wie in der `else`-Anweisung) oder ob das YouTube-Thumbnail-Bild angezeigt werden soll (d.h. wie in der `if`-Anweisung). +```python +# Display YouTube thumbnail image +if yt_url != '': + ytid = get_ytid(yt_url) # yt or yt_url + + yt_img = f'http://img.youtube.com/vi/{ytid}/{img_quality}.jpg' + st.image(yt_img) + st.write('YouTube video thumbnail image URL: ', yt_img) +else: + st.write('☝️ Enter URL to continue ...') +``` + +## Zusammenfassung + +Insgesamt haben wir gesehen, dass wir bei der Erstellung einer Streamlit-App in der Regel damit beginnen, das Problem zu identifizieren und zu definieren. Als nächstes entwickeln wir eine Lösung für das Problem, indem wir es in einzelne Schritte zerlegen, die wir in der Streamlit-App implementieren. + +Hier müssen wir auch festlegen, welche Daten oder Informationen wir als Eingabe von den Nutzern benötigen und welchen Ansatz und welche Methode wir bei der Verarbeitung der Nutzereingaben verwenden wollen, um die gewünschte Endausgabe zu erzeugen. + +Wir hoffen, dass dir dieses Tutorial gefallen hat. Viel Spaß beim Streamlit-ing! diff --git a/content/de/Day4.md b/content/de/Day4.md new file mode 100644 index 0000000..6e782f3 --- /dev/null +++ b/content/de/Day4.md @@ -0,0 +1,7 @@ +# Bau Streamlit Apps mit Ken Jee + +## Schau Kens Video + +Lass uns schauen, wie [Ken Jee](https://www.youtube.com/c/KenJee1) eine Streamlit App in diesem Video baut: + +[![Data Science Portfolio Project from Scratch](https://img.youtube.com/vi/Yk-unX4KnV4/0.jpg)]()] diff --git a/content/de/Day5.md b/content/de/Day5.md new file mode 100644 index 0000000..03238d8 --- /dev/null +++ b/content/de/Day5.md @@ -0,0 +1,150 @@ +# st.write + +`st.write` erlaubt es, Texte und Argumente in der Streamlit App zu schreiben. + +Zusätzlich zum Anzeigen von Text, können folgende Befehle / Objekte mittels `st.write()` angezeigt werden: + +- Zeigt Strings an; funktioniert wie `st.markdown()` +- Zeigt ein Python `dict` Object an +- `pandas` DataFrame kann als Tabelle dargestellt werden +- Plots/Graphen/Bilder von `matplotlib`, `plotly`, `altair`, `graphviz`, `bokeh` +- Und mehr (siehe [st.write on API docs](https://docs.streamlit.io/library/api-reference/write-magic/st.write)) + +## Was bauen wir? + +Eine einfache Streamlit App, welche die verschiedenen Wege demonstiert, in welchen der `st.write()` Befehl verwendet werden kann, um Text, Nummern, Pandas DataFrames und Graphen angezeigt werden können. + +## Demo App + +Die veröffentlichte Streamlit App sollte ungefähr so aussehen, die hier verlinkte: + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.write/) + +## Code + +So wird `st.write` verwendet: + +```python +import numpy as np +import altair as alt +import pandas as pd +import streamlit as st + +st.header('st.write') + +# Example 1 + +st.write('Hello, *World!* :sunglasses:') + +# Example 2 + +st.write(1234) + +# Example 3 + +df = pd.DataFrame({ + 'first column': [1, 2, 3, 4], + 'second column': [10, 20, 30, 40] + }) +st.write(df) + +# Example 4 + +st.write('Below is a DataFrame:', df, 'Above is a dataframe.') + +# Example 5 + +df2 = pd.DataFrame( + np.random.randn(200, 3), + columns=['a', 'b', 'c']) +c = alt.Chart(df2).mark_circle().encode( + x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c']) +st.write(c) +``` + +## Zeilen-für-Zeilen Erklärung + +Die allerste Sache + +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` zu importieren: + +```python +import streamlit as st +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: + +```python +st.header('st.write') +``` + +**Beispiel 1** +Die standardmäßige Verwendung ist das Anzeigen von (Markdown) Text: + +```python +st.write('Hello, *World!* :sunglasses:') +``` + +**Beispiel 2** +Wie oben beschrieben, kann der Befehl auch zum Anzeigen anderer Datenformate verwendet werden, wie zum Beispiel Nummern: + +```python +st.write(1234) +``` + +**Beispiel 3** +DataFrames können ebenfalls angezeigt werden: + +```python +df = pd.DataFrame({ + 'first column': [1, 2, 3, 4], + 'second column': [10, 20, 30, 40] + }) +st.write(df) +``` + +**Beispiel 4** +Du kannst mehrere Argumente verwenden: + +```python +st.write('Below is a DataFrame:', df, 'Above is a dataframe.') +``` + +**Beispiel 5** +Zum Schluss kannst du auch Grafiken anzeigen lassen, indem du sie einer Variable hinzufügst und dann `st.write` mit dieser Variable aufrufst: + +```python +df2 = pd.DataFrame( + np.random.randn(200, 3), + columns=['a', 'b', 'c']) +c = alt.Chart(df2).mark_circle().encode( + x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c']) +st.write(c) +``` + +## Demo App + +Die veröffentlichte Streamlit App sollte so ähnlich aussehen wie die hinter folgendem Link: + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.write/) + +## Nächste Schritte + +Nun da wir die Streamlit App lokal erstellt haben, ist es an der Zeit, sie auf [Streamlit Community Cloud](https://streamlit.io/cloud) zu veröffentlichen. Das wird in einer der nächsten Herausforderungen näher erläutert. + +Wir zeigen den kompletten Code direkt hier auf der Website (wie in der Codebox oben dargestellt), weil es deine erste Woche ist. +Für die nächsten Herausforderungen empfehlen wir, dass du zuerst versuchst die Streamlit Apps selbst zu implementieren. + +Nicht verzweifeln, falls du mal nicht weiterkommen solltest. Du kannst jederzeit einen Blick auf die Lösung werfen. + +## Zum weiteren Lesen + +Neben [`st.write`](https://docs.streamlit.io/library/api-reference/write-magic/st.write) kannst du noch andere Wege erkunden, Text anzeigen zu lassen: + +- [`st.markdown`](https://docs.streamlit.io/library/api-reference/text/st.markdown) +- [`st.header`](https://docs.streamlit.io/library/api-reference/text/st.header) +- [`st.subheader`](https://docs.streamlit.io/library/api-reference/text/st.subheader) +- [`st.caption`](https://docs.streamlit.io/library/api-reference/text/st.caption) +- [`st.text`](https://docs.streamlit.io/library/api-reference/text/st.text) +- [`st.latex`](https://docs.streamlit.io/library/api-reference/text/st.latex) +- [`st.code`](https://docs.streamlit.io/library/api-reference/text/st.code) diff --git a/content/de/Day6.md b/content/de/Day6.md new file mode 100644 index 0000000..0ed11fe --- /dev/null +++ b/content/de/Day6.md @@ -0,0 +1,35 @@ +# Hochladen deiner Streamlit App auf GitHub + +## GitHub + +Git ist eine Software, die zur Erfassung von Änderungen an Code verwendet wird (d.h. Versionskontrolle). GitHub ist ein Git Repository Hosting-Service, der Daten und Code im Internet öffentlich zugänglich macht, was die Zusammenarbeit im Team ermöglicht und anderen erlaubt, zum Repository beizutragen. + +Wenn man eine Streamlit App in einem GitHub Repository hostet, kann man die App in der Cloud bereitstellen (die nächste Herausforderung). + +## GitHub Konto registrieren + +Erstens, melde dich für ein [GitHub](https://github.com/) Konto an. + +## GitHub Repository erstellen + +Gehe wie folgt vor, um ein GitHub Repository zu erstellen: + +- Klicke in der rechten oberen Ecke auf das Symbol **"+"**, wodurch ein Dropdown Menü angezeigt wird, und dann auf **"New repository "** klicken (*Figure 1*). + +- Daraufhin sollte eine neue Webseite mit dem Titel **"Create a new repository"** angezeigt werden. Gebe in das Feld **"Repository name"** einen Namen für dein Projektarchiv ein, z.B. `helloworld` (***Figure 2***). + +- Unter dem Feld **"Initialize this repository with:"** kreuze **"Add a README file"** an. + +- Zuletzt klicke auf **"Create repository"** (Figure 3). + +Dein neu erstelltes Repository wird unter `https://github.com/dataprofessor/helloworld` verfügbar sein, wobei `dataprofessor` der Benutzername und `helloworld` der Name des Repositorys ist. + +Unten sieht man einen Screenshot des neu erstellten Repo (Figure 4): + +## Daten hochladen auf dem GitHub Repo + +Oberhalb der Dateitabelle, neben der grünen Schaltfläche **Code**, klicke auf **Add files** > **Upload files** (Figure 5). + +Dies bringt dir zu einer neuen Seite, auf der in der Mitte das Feld ***Drag files here to add them to your repository*** und **choose your files** steht. Man kann Dateien entweder per Drag & Drop in dieses Feld ziehen oder auf den Link **choose your files** klicken, um Dateien von deinem lokalen Computer auszuwählen. + +Klicke auf **Commit changes**, um fortzufahren (Figure 6). \ No newline at end of file diff --git a/content/de/Day7.md b/content/de/Day7.md new file mode 100644 index 0000000..e71b86b --- /dev/null +++ b/content/de/Day7.md @@ -0,0 +1,18 @@ +# Bereitstellen deiner Streamlit App mit Streamlit Community Cloud + +## Streamlit Community Cloud + +[Streamlit Community Cloud](https://streamlit.io/cloud) ist ein Hosting-Service, mit dem man mühelos Streamlit Apps bereitstellen kann. + +## Bei Streamlit Community Cloud registrieren + +Du kannst dich ganz einfach für die [Streamlit Community Cloud](https://streamlit.io/cloud) anmelden, man muss nur mit deinem Google- oder GitHub-Konto einloggen. + +## Streamlit App bereitstellen + +Um eine Streamlit App bereitzustellen, mach folgendes: +1. Mit deinen GitHub oder Gmail Anmeldeinformationen einloggen +2. Wähle ein Repo, ein Branch und eine Datei +3. Klicke auf "**Deploy**" + +Wenn du dann einen Git-Push durchführst, wird deine App sofort aktualisiert. \ No newline at end of file diff --git a/content/de/Day8.md b/content/de/Day8.md new file mode 100644 index 0000000..6d499bb --- /dev/null +++ b/content/de/Day8.md @@ -0,0 +1,154 @@ +# st.slider + +`st.slider` ermöglicht es dir, eine interaktive Schieberegler bzw. Slider anzuzeigen. + +Die folgenden Datentypen werden unterstützt: int, float, date, time, und datetime. + +## Was bauen wir? + +Eine einfache App, die verschiedene Möglichkeiten aufzeigt, wie man Benutzereingaben durch Einstellen des Sliders akzeptiert. + +Ablauf der App: +1. Der Benutzer wählt einen Wert aus durch Einstellen des Sliders. +2. Die App zeigt den ausgewählten Wert an. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.slider/) + + +## Code +So wird st.slider verwendet: + +```python +import streamlit as st +from datetime import time, datetime + +st.header('st.slider') + +# Beispiel 1 + +st.subheader('Slider') + +age = st.slider('How old are you?', 0, 130, 25) +st.write("I'm ", age, 'years old') + +# Beispiel 2 + +st.subheader('Range slider') + +values = st.slider( + 'Select a range of values', + 0.0, 100.0, (25.0, 75.0)) +st.write('Values:', values) + +# Beispiel 3 + +st.subheader('Range time slider') + +appointment = st.slider( + "Schedule your appointment:", + value=(time(11, 30), time(12, 45))) +st.write("You're scheduled for:", appointment) + +# Beispiel 4 + +st.subheader('Datetime slider') + +start_time = st.slider( + "When do you start?", + value=datetime(2020, 1, 1, 9, 30), + format="MM/DD/YY - hh:mm") +st.write("Start time:", start_time) + +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` zu importieren: +```python +import streamlit as st +from datetime import time, datetime +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('st.slider') +``` + +**Beispiel 1** + +Slider: + +```python +st.subheader('Slider') + +age = st.slider('How old are you?', 0, 130, 25) +st.write("I'm ", age, 'years old') +``` + +Wie wir sehen können, wird der Befehl "st.slider()` verwendet, um Eingaben über Alter zu sammeln. + +Das erste Argument zeigt den Text `'How old are you?'` direkt über dem **slider** Widget an. + +Die folgenden drei Zahlen `0, 130, 25` stehen jeweils für den Minimal-, Maximal- und Defaultwert. + +**Beispiel 2** + +Bereich-Slider: + +```python +st.subheader('Range slider') + +values = st.slider( + 'Select a range of values', + 0.0, 100.0, (25.0, 75.0)) +st.write('Values:', values) +``` + +Mit dem Bereich-Slider kann man ein unterer und ein oberer Grenzwert eines Zahlenbereiches auswählen. + +Das erste Argument zeigt den Text `'Select a range of values'` direkt über dem **range slider** Widget an. + +Die erste zwei Argumente `0.0, 100.0` stehen für die Minimal- und Maximalwerte, während das letzte Tupel die Defaultwerte angibt, die als untere (`25.0`) und obere (`75.0`) Grenze verwendet werden sollen + +**Beispiel 3** + +Zeitbereich-Slider: + +```python +st.subheader('Range time slider') + +appointment = st.slider( + "Schedule your appointment:", + value=(time(11, 30), time(12, 45))) +st.write("You're scheduled for:", appointment) +``` +Mit dem Zeitbereich-Slider kann man ein unterer und ein oberer Grenzwert eines Zeitbereiches auswählen. + +Das erste Argument zeigt den Text `'Schedule your appointment:'` direkt über dem **range time slider** Widget an. + +Die Defaultwerte für die untere und obere Grenze des Zeitbereichs sind auf 11:30 bzw. 12:45 festgelegt. + +**Beispiel 4** + +Datum/Zeit (Datetime) Slider: + +```python +st.subheader('Datetime slider') + +start_time = st.slider( + "When do you start?", + value=datetime(2020, 1, 1, 9, 30), + format="MM/DD/YY - hh:mm") +st.write("Start time:", start_time) +``` + +Mit dem Datetime-Slider kann man ein Datum zusammen mit einer Uhrzeit auswählen. + +Das erste Argument zeigt den Text `'When do you start?'` direkt über dem **datetime** Widget an. + +Der Defaultwert wurde mit der Option `value` auf den 1. Januar 2020 um 9:30 Uhr festgelegt. + +## Literaturhinweise +Man kann auch folgendes verwandtes Widget erkunden: +- [`st.select_slider`](https://docs.streamlit.io/library/api-reference/widgets/st.select_slider) diff --git a/content/de/Day9.md b/content/de/Day9.md new file mode 100644 index 0000000..1aac936 --- /dev/null +++ b/content/de/Day9.md @@ -0,0 +1,65 @@ +# st.line_chart + +`st.line_chart` zeigt ein Liniendiagramm an. + +Dies ist syntaktischer Zucker um `st.altair_chart`. Der wesentliche Unterschied besteht darin, dass dieser Befehl die eigenen Spalten und Indizes der Daten verwendet, um die Spezifikationen des Diagramms zu festlegen. Das Ergebnis ist, dass dieser Befehl für viele ["Just plot this"] Szenarien einfacher zu verwenden ist, während er weniger flexibel ist. + +Wenn `st.line_chart` die Datenspezifikation nicht richtig errät, versuche mit `st.altair_chart` dein gewünschtes Diagramm zu spezifizieren. + +## Was bauen wir? + +Eine einfache App, wodurch ein Liniendiagramm angezeigt wird. + +Ablauf der App: +1. Erstellen eines `Pandas` DataFrame mit `NumPy` generierten Zufallszahlen. +2. Erstellen und Anzeigen des Liniendiagramms mit dem Befehl `st.line_chart()`. + +## Demo App + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.line_chart/) + +## Code +So wird [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart) verwendet: +```python +import streamlit as st +import pandas as pd +import numpy as np + +st.header('Line chart') + +chart_data = pd.DataFrame( + np.random.randn(20, 3), + columns=['a', 'b', 'c']) + +st.line_chart(chart_data) + +``` + +## Zeilenweise Erklärung +Der erste Schritt für das Erstellen einer Streamlit App ist es, die `streamlit` Bibliothek als `st` sowie andere Bibliotheken zu importieren: +```python +import streamlit as st +import pandas as pd +import numpy as np +``` + +Dies wird gefolgt von dem Erstellen einer Überschrift für die App: +```python +st.header('Line chart') +``` + +Dann erstellen wir einen DataFrame mit zufällig generierten Zahlen, der 3 Spalten enthält. +```python +chart_data = pd.DataFrame( + np.random.randn(20, 3), + columns=['a', 'b', 'c']) +``` + +Zum Schluss wird ein Liniendiagramm mit `st.line_chart()` erstellt, wobei der in der Variablen `chart_data` gespeicherte DataFrame als Eingabedaten verwendet wird: +```python +st.line_chart(chart_data) +``` + +## Literaturhinweise +Lies mehr über den folgenden verwandten Streamlit Befehl, auf dem [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart) basiert ist: +- [`st.altair_chart`](https://docs.streamlit.io/library/api-reference/charts/st.altair_chart) diff --git a/content/de/figures/Day1.csv b/content/de/figures/Day1.csv new file mode 100644 index 0000000..2d8beff --- /dev/null +++ b/content/de/figures/Day1.csv @@ -0,0 +1,2 @@ +img,figure,caption +2C9104F7-CF84-4DAF-9004-52BB4644CF28.png, Figure 1, Streamlit demo app is launched via "streamlit hello" diff --git a/content/de/figures/Day20.csv b/content/de/figures/Day20.csv new file mode 100644 index 0000000..68e084f --- /dev/null +++ b/content/de/figures/Day20.csv @@ -0,0 +1,2 @@ +img,figure,caption +77EC58A5-25FD-4477-A74E-421333312514.jpeg, Figure 1, Join the Tech Twitter Space on What is Streamlit? (Hosted by Francesco Ciulla) available at https://twitter.com/i/spaces/1dRJZlbglXMKB diff --git a/content/de/figures/Day6.csv b/content/de/figures/Day6.csv new file mode 100644 index 0000000..a1681de --- /dev/null +++ b/content/de/figures/Day6.csv @@ -0,0 +1,7 @@ +img,figure,caption +8ED4483A-58C6-4F76-BE59-C8CC6DCDB95E.jpeg, Figure 1, Creating a new repository +0CEEBB8C-29FB-4B85-9932-CEF642777A8A.jpeg, Figure 2, Enter the repository name "helloworld" +7A7B0072-71ED-42BD-B985-B0D35CF03A1F.jpeg, Figure 3, Setting the initial settings (Adding a README file) and confirming the creation of the new repository +F8DCC7EB-D497-426D-904F-6941E2C4B750.jpeg, Figure 4, New repository called "helloworld" is now created along with its first file (README.md) +8032B4CC-A9BD-4B4F-8DFB-EBE7326886DE.jpeg, Figure 5, Initiate the uploading of file(s) to the GitHub repo +8085E82C-304F-48EE-8AD6-3F941E31860B.jpeg, Figure 6, Drag and drop files to be uploaded into the specified central box. Or alternatively click on "choose your files" that will bring up a file selection window where files can be selected for upload diff --git a/content/de/images/0CEEBB8C-29FB-4B85-9932-CEF642777A8A.jpeg b/content/de/images/0CEEBB8C-29FB-4B85-9932-CEF642777A8A.jpeg new file mode 100644 index 0000000..86727db Binary files /dev/null and b/content/de/images/0CEEBB8C-29FB-4B85-9932-CEF642777A8A.jpeg differ diff --git a/content/de/images/2C9104F7-CF84-4DAF-9004-52BB4644CF28.png b/content/de/images/2C9104F7-CF84-4DAF-9004-52BB4644CF28.png new file mode 100644 index 0000000..f6230e4 Binary files /dev/null and b/content/de/images/2C9104F7-CF84-4DAF-9004-52BB4644CF28.png differ diff --git a/content/de/images/77EC58A5-25FD-4477-A74E-421333312514.jpeg b/content/de/images/77EC58A5-25FD-4477-A74E-421333312514.jpeg new file mode 100644 index 0000000..75feb1b Binary files /dev/null and b/content/de/images/77EC58A5-25FD-4477-A74E-421333312514.jpeg differ diff --git a/content/de/images/7A7B0072-71ED-42BD-B985-B0D35CF03A1F.jpeg b/content/de/images/7A7B0072-71ED-42BD-B985-B0D35CF03A1F.jpeg new file mode 100644 index 0000000..7d05dd6 Binary files /dev/null and b/content/de/images/7A7B0072-71ED-42BD-B985-B0D35CF03A1F.jpeg differ diff --git a/content/de/images/8032B4CC-A9BD-4B4F-8DFB-EBE7326886DE.jpeg b/content/de/images/8032B4CC-A9BD-4B4F-8DFB-EBE7326886DE.jpeg new file mode 100644 index 0000000..c25e0a4 Binary files /dev/null and b/content/de/images/8032B4CC-A9BD-4B4F-8DFB-EBE7326886DE.jpeg differ diff --git a/content/de/images/8085E82C-304F-48EE-8AD6-3F941E31860B.jpeg b/content/de/images/8085E82C-304F-48EE-8AD6-3F941E31860B.jpeg new file mode 100644 index 0000000..9c80ab5 Binary files /dev/null and b/content/de/images/8085E82C-304F-48EE-8AD6-3F941E31860B.jpeg differ diff --git a/content/de/images/8ED4483A-58C6-4F76-BE59-C8CC6DCDB95E.jpeg b/content/de/images/8ED4483A-58C6-4F76-BE59-C8CC6DCDB95E.jpeg new file mode 100644 index 0000000..3725723 Binary files /dev/null and b/content/de/images/8ED4483A-58C6-4F76-BE59-C8CC6DCDB95E.jpeg differ diff --git a/content/de/images/F8DCC7EB-D497-426D-904F-6941E2C4B750.jpeg b/content/de/images/F8DCC7EB-D497-426D-904F-6941E2C4B750.jpeg new file mode 100644 index 0000000..e5eaea7 Binary files /dev/null and b/content/de/images/F8DCC7EB-D497-426D-904F-6941E2C4B750.jpeg differ diff --git a/content/de/images/readme.md b/content/de/images/readme.md new file mode 100644 index 0000000..4148b2f --- /dev/null +++ b/content/de/images/readme.md @@ -0,0 +1 @@ +# images diff --git a/locale/bn/LC_MESSAGES/messages.mo b/locale/bn/LC_MESSAGES/messages.mo index f32991f..b9c5938 100644 Binary files a/locale/bn/LC_MESSAGES/messages.mo and b/locale/bn/LC_MESSAGES/messages.mo differ diff --git a/locale/de/LC_MESSAGES/messages.mo b/locale/de/LC_MESSAGES/messages.mo new file mode 100644 index 0000000..33be52a Binary files /dev/null and b/locale/de/LC_MESSAGES/messages.mo differ diff --git a/locale/de/LC_MESSAGES/messages.po b/locale/de/LC_MESSAGES/messages.po new file mode 100644 index 0000000..84bd399 --- /dev/null +++ b/locale/de/LC_MESSAGES/messages.po @@ -0,0 +1,528 @@ +#: streamlit_app.py:27 +msgid "Day" +msgstr "Tag" + +#: streamlit_app.py:34 +msgid "# 30 Days of Streamlit" +msgstr "# 30 Tage Streamlit" + +#: streamlit_app.py:47 +msgid "Start the Challenge 👇" +msgstr "Starten Sie die Herausforderung 👇" + +#: streamlit_app.py:51 +msgid "About the #30DaysOfStreamlit" +msgstr "Über #30DaysOfStreamlit" + +#: streamlit_app.py:52 +msgid "" +"\n" +" The **#30DaysOfStreamlit** is a coding challenge designed to help you" +" get started in building Streamlit apps.\n" +" \n" +" Particularly, you'll be able to:\n" +" - Set up a coding environment for building Streamlit apps\n" +" - Build your first Streamlit app\n" +" - Learn about all the awesome input/output widgets to use for your " +"Streamlit app\n" +" " +msgstr "" +"\n" +" **#30DaysOfStreamlit** ist eine Programmierherausforderung, welche " +"dir dabei hilft mit dem Bauen von Streamlit Apps zu starten.\n" +" \n" +" Insbesonderes wirst du in der Lage sein:\n" +" - Eine Entwicklungsumgebung zum Bauen von Streamlit Apps aufzusetzen\n" +" - Deine erste Streamlit App zu bauen\n" +" - Lerne über all die überragenden Komponenten, die du in der " +"Streamlit App benutzen kannst\n" +" " + +#: streamlit_app.py:64 +msgid "About" +msgstr "Über" + +#: streamlit_app.py:65 +msgid "" +"[Streamlit](https://streamlit.io) is a Python library that allows the " +"creation of interactive, data-driven web applications in Python." +msgstr "" +"[Streamlit](https://streamlit.io) ist eine Pythonbibliothek, welche es " +"erlaubt, interaktive, datengetriebene Webapplikationen in Python zu " +"erstellen." + +#: streamlit_app.py:69 +msgid "Resources" +msgstr "Materialien" + +#: streamlit_app.py:70 +msgid "" +"\n" +"- [Streamlit Documentation](https://docs.streamlit.io/)\n" +"- [Cheat sheet](https://docs.streamlit.io/library/cheatsheet)\n" +"- [Book](https://www.amazon.com/dp/180056550X) (Getting Started with " +"Streamlit for Data Science)\n" +"- [Blog](https://blog.streamlit.io/how-to-master-streamlit-for-data-" +"science/) (How to master Streamlit for data science)\n" +msgstr "" +"\n" +"- [Streamlit Dokumentation](https://docs.streamlit.io/)\n" +"- [Cheat Sheet](https://docs.streamlit.io/library/cheatsheet)\n" +"- [Buch](https://www.amazon.com/dp/180056550X) (Getting Started with " +"Streamlit for Data Science)\n" +"- [Blog](https://blog.streamlit.io/how-to-master-streamlit-for-data-" +"science/) (How to master Streamlit for data science)\n" + +#: streamlit_app.py:79 +msgid "Deploy" +msgstr "Hochladen" + +#: streamlit_app.py:80 +msgid "" +"You can quickly deploy Streamlit apps using [Streamlit Community " +"Cloud](https://streamlit.io/cloud) in just a few clicks." +msgstr "" +"Du kannst Streamlit Apps schnell und mit nur wenigen Klicks auf " +"[Streamlit Community Cloud](https://streamlit.io/cloud) hochladen." + +#: streamlit_app.py:92 +msgid "### Figures" +msgstr "### Grafiken" + +#: venv/lib/python3.10/site-packages/altair/sphinxext/altairplot.py:296 +#, python-format +msgid "[ graph: %s ]" +msgstr "" + +#: venv/lib/python3.10/site-packages/altair/sphinxext/altairplot.py:298 +msgid "[ graph ]" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/_termui_impl.py:496 +msgid "{editor}: Editing failed" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/_termui_impl.py:500 +msgid "{editor}: Editing failed: {e}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1097 +msgid "Aborted!" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1282 +#: venv/lib/python3.10/site-packages/click/decorators.py:495 +msgid "Show this message and exit." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1313 +#: venv/lib/python3.10/site-packages/click/core.py:1339 +msgid "(Deprecated) {text}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1357 +msgid "Options" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1385 +msgid "Got unexpected extra argument ({args})" +msgid_plural "Got unexpected extra arguments ({args})" +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/click/core.py:1398 +msgid "DeprecationWarning: The command {name!r} is deprecated." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1605 +msgid "Commands" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1637 +msgid "Missing command." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:1715 +msgid "No such command {name!r}." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:2271 +msgid "Value must be an iterable." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:2293 +msgid "Takes {nargs} values but 1 was given." +msgid_plural "Takes {nargs} values but {len} were given." +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/click/core.py:2734 +msgid "env var: {var}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:2764 +msgid "(dynamic)" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:2777 +msgid "default: {default}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/core.py:2790 +msgid "required" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/decorators.py:400 +#, python-format +msgid "%(prog)s, version %(version)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/decorators.py:464 +msgid "Show the version and exit." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:43 +#: venv/lib/python3.10/site-packages/click/exceptions.py:79 +msgid "Error: {message}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:71 +msgid "Try '{command} {option}' for help." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:120 +msgid "Invalid value: {message}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:122 +msgid "Invalid value for {param_hint}: {message}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:178 +msgid "Missing argument" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:180 +msgid "Missing option" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:182 +msgid "Missing parameter" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:184 +msgid "Missing {param_type}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:191 +msgid "Missing parameter: {param_name}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:211 +msgid "No such option: {name}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:225 +msgid "Did you mean {possibility}?" +msgid_plural "(Possible options: {possibilities})" +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:261 +msgid "unknown error" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/exceptions.py:268 +msgid "Could not open file {filename!r}: {message}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/parser.py:231 +msgid "Argument {name!r} takes {nargs} values." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/parser.py:413 +msgid "Option {name!r} does not take a value." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/parser.py:473 +msgid "Option {name!r} requires an argument." +msgid_plural "Option {name!r} requires {nargs} arguments." +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/click/shell_completion.py:315 +msgid "Shell completion is not supported for Bash versions older than 4.4." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/shell_completion.py:322 +msgid "Couldn't detect Bash version, shell completion is not supported." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/termui.py:160 +msgid "Repeat for confirmation" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/termui.py:176 +msgid "Error: The value you entered was invalid." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/termui.py:178 +msgid "Error: {e.message}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/termui.py:189 +msgid "Error: The two entered values do not match." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/termui.py:245 +msgid "Error: invalid input" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/termui.py:776 +msgid "Press any key to continue..." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:265 +msgid "" +"Choose from:\n" +"\t{choices}" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:299 +msgid "{value!r} is not {choice}." +msgid_plural "{value!r} is not one of {choices}." +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/click/types.py:389 +msgid "{value!r} does not match the format {format}." +msgid_plural "{value!r} does not match the formats {formats}." +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/click/types.py:409 +msgid "{value!r} is not a valid {number_type}." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:465 +msgid "{value} is not in the range {range}." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:606 +msgid "{value!r} is not a valid boolean." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:630 +msgid "{value!r} is not a valid UUID." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:811 +msgid "file" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:813 +msgid "directory" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:815 +msgid "path" +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:861 +msgid "{name} {filename!r} does not exist." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:870 +msgid "{name} {filename!r} is a file." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:878 +msgid "{name} '{filename}' is a directory." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:887 +msgid "{name} {filename!r} is not readable." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:896 +msgid "{name} {filename!r} is not writable." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:905 +msgid "{name} {filename!r} is not executable." +msgstr "" + +#: venv/lib/python3.10/site-packages/click/types.py:971 +msgid "{len_type} values are required, but {len_value} was given." +msgid_plural "{len_type} values are required, but {len_value} were given." +msgstr[0] "" +msgstr[1] "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:281 +msgid "January" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:282 +msgid "February" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:283 +msgid "March" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:284 +msgid "April" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:285 +msgid "May" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:286 +msgid "June" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:287 +msgid "July" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:288 +msgid "August" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:289 +msgid "September" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:290 +msgid "October" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:291 +msgid "November" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:292 +msgid "December" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:295 +msgid "Monday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:296 +msgid "Tuesday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:297 +msgid "Wednesday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:298 +msgid "Thursday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:299 +msgid "Friday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:300 +msgid "Saturday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:301 +msgid "Sunday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:371 +msgid "1 second ago" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:377 +msgid "1 minute ago" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:382 +msgid "1 hour ago" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:385 +#, python-format +msgid "%(time)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:387 +msgid "yesterday" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:387 +#, python-format +msgid "yesterday at %(time)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:389 +#, python-format +msgid "%(weekday)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:389 +#, python-format +msgid "%(weekday)s at %(time)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:392 +#: venv/lib/python3.10/site-packages/tornado/locale.py:445 +#, python-format +msgid "%(month_name)s %(day)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:394 +#, python-format +msgid "%(month_name)s %(day)s at %(time)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:399 +#, python-format +msgid "%(month_name)s %(day)s, %(year)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:401 +#, python-format +msgid "%(month_name)s %(day)s, %(year)s at %(time)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:439 +#, python-format +msgid "%(weekday)s, %(month_name)s %(day)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/locale.py:462 +#, python-format +msgid "%(commas)s and %(last)s" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/test/locale_test.py:68 +msgctxt "law" +msgid "right" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/test/locale_test.py:69 +msgctxt "good" +msgid "right" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/test/locale_test.py:71 +#: venv/lib/python3.10/site-packages/tornado/test/locale_test.py:74 +msgctxt "organization" +msgid "club" +msgstr "" + +#: venv/lib/python3.10/site-packages/tornado/test/locale_test.py:76 +#: venv/lib/python3.10/site-packages/tornado/test/locale_test.py:77 +msgctxt "stick" +msgid "club" +msgstr "" + +#~ msgid "Day" +#~ msgstr "Tag" + diff --git a/locale/en/LC_MESSAGES/messages.mo b/locale/en/LC_MESSAGES/messages.mo index 77c8436..7c1251f 100644 Binary files a/locale/en/LC_MESSAGES/messages.mo and b/locale/en/LC_MESSAGES/messages.mo differ diff --git a/locale/es/LC_MESSAGES/messages.mo b/locale/es/LC_MESSAGES/messages.mo index 6d6e53e..ce84092 100644 Binary files a/locale/es/LC_MESSAGES/messages.mo and b/locale/es/LC_MESSAGES/messages.mo differ diff --git a/locale/fr/LC_MESSAGES/messages.mo b/locale/fr/LC_MESSAGES/messages.mo index d6643cf..f5cfd95 100644 Binary files a/locale/fr/LC_MESSAGES/messages.mo and b/locale/fr/LC_MESSAGES/messages.mo differ diff --git a/locale/hi/LC_MESSAGES/messages.mo b/locale/hi/LC_MESSAGES/messages.mo index 4050803..5c075ca 100644 Binary files a/locale/hi/LC_MESSAGES/messages.mo and b/locale/hi/LC_MESSAGES/messages.mo differ diff --git a/locale/pl/LC_MESSAGES/messages.mo b/locale/pl/LC_MESSAGES/messages.mo index 8eae1df..ead0a53 100644 Binary files a/locale/pl/LC_MESSAGES/messages.mo and b/locale/pl/LC_MESSAGES/messages.mo differ diff --git a/locale/pt/LC_MESSAGES/messages.mo b/locale/pt/LC_MESSAGES/messages.mo index 1abb8dc..ed355f5 100644 Binary files a/locale/pt/LC_MESSAGES/messages.mo and b/locale/pt/LC_MESSAGES/messages.mo differ diff --git a/locale/ru/LC_MESSAGES/messages.mo b/locale/ru/LC_MESSAGES/messages.mo index c3f32a8..14ba847 100644 Binary files a/locale/ru/LC_MESSAGES/messages.mo and b/locale/ru/LC_MESSAGES/messages.mo differ diff --git a/locale/zh/LC_MESSAGES/messages.mo b/locale/zh/LC_MESSAGES/messages.mo index 4a662a2..e748eb9 100644 Binary files a/locale/zh/LC_MESSAGES/messages.mo and b/locale/zh/LC_MESSAGES/messages.mo differ diff --git a/readmes/de/README.md b/readmes/de/README.md new file mode 100644 index 0000000..666f39d --- /dev/null +++ b/readmes/de/README.md @@ -0,0 +1,51 @@ +# 30 Tage Streamlit auf Deutsch 🎈 + + + +Das ist das offizielle Repository von `#30DaysOfStreamlit` - ein 30-Tage Wettbewerb für dich zum Lernen, Bauen, und Hochladen von [Streamlit](https://streamlit.io) Applikationen. + +## Wie mitmachen + +Alles was du zum Mitmachen benötigst, ist ein Computer, etwas Erfahrung mit Python und deine Neugier. 🧠 + +Jeden Tag wird eine neue Herausforderung via Streamlits [Twitter](https://twitter.com/streamlit) und [LinkedIn](https://www.linkedin.com/company/streamlit/posts/?feedView=all) Accounts, als auch der [`#30DaysOfStreamlit` app](https://share.streamlit.io/streamlit/30days/) veröffentlicht. + +[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/streamlit/30days/) + +Mach die täglichen Herausforderungen, teile deine Lösungen mit uns auf Twitter oder LinkedIn und gewinne coolen Streamlit Swag! 😎 + +## Was sind die täglichen Herausforderungen? + +Finde mehr über die spezifischen Aufgaben heraus, indem du mitmachst! Die 30-Tage Aufgaben sind in 3 Schwierigkeitsgrade unterteilt, damit jeder und jede mitmachen kann: + +| Anfänger (Tage 1-7) | Fortgeschritten (Tage 8-23) | Erfahren (Tage 24-30) | +| :--- | :---- | :--- | +| Richte deine Lokale- und Cloudentwicklungsumgebung ein, installiere Streamlit, und baue deine erste Streamlit App.| Lerne jeden Tag einen neuen [Streamlitbefehl](https://docs.streamlit.io/library/api-reference) und benutze ihn, um eine einfache Streamlit App zu erstellen und bereitzustellen. | Lerne etwas über wichtige Themen wie Sessionstatus, effiziente Daten- und Speicherverwaltung mittels Caching, komplexe Strukturen und vielem mehr. + +## Preise + +Falls das Arbeiten mit der schnellsten und einfachsten Lösungen Data Apps zu bauen selbst noch nicht das beste Sommergeschenk ist, kannst du auch Streamlitgeschenke absahnen! + +Stelle die täglichen Aufgaben fertig, teile deine Lösung mit uns auf [Twitter](https://twitter.com/streamlit) oder [LinkedIn](https://www.linkedin.com/company/streamlit/posts/?feedView=all), und bekomme coolen Streamlit Swag! 🎁 + +## Materialien + +- Die offizielle [`#30DaysOfStreamlit` app](https://share.streamlit.io/streamlit/30days/), in welcher die täglichen Aufgaben veröffentlicht werden +- Unsere [Twitter](https://twitter.com/streamlit) und [LinkedIn](https://www.linkedin.com/company/streamlit/posts/?feedView=all) Feeds für tägliche Updates +- Streamlit [Dokumentation](https://docs.streamlit.io/) und [Cheat Sheet](https://docs.streamlit.io/library/cheatsheet) für einen guten Überblick der Streamlitbefehle +- Unsere fantastische [Gallerie](https://streamlit.io/gallery) für Inspiration, Vorlagen, und Communityapps +- Unser [Blog](https://blog.streamlit.io/how-to-master-streamlit-for-data-science/) +für Tipps und Tricks und die neusten Informationen rund um Streamlit + +## Übersetzungen + +Du möchtest uns dabei helfen, die Reichweite von `#30DaysOfStreamlit` zu erhöhen und Englisch ist nicht deine Muttersprache? Übersetze die Aufgaben in deine bervorzugte Sprache und verlinke sie unten! + +- [Englisch](https://github.com/streamlit/30days) (Offiziell): [![30 Days of Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days.streamlit.app) +- [Chinesisch](https://github.com/TeddyHuang-00/30days-Chinese) (von [TeddyHuang-00](https://github.com/TeddyHuang-00)): [![30 天学 Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-chinese.streamlit.app) +- [Spanisch](https://github.com/streamlit/30days-spanish/) (von [Emiliano Rosso](https://github.com/arraydude)): [![30 Días de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-spanish.streamlit.app/) +- [Französisch](https://github.com/streamlit/30days-French) (von [Charly Wargnier](https://github.com/charlyWargnier/)): [![30 Days of Streamlit en Français!](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-french.streamlit.app/) +- [Polnisch](https://github.com/streamlit/30days-polish) (von [Michał Nowotka](https://github.com/sfc-gh-mnowotka)): [![Streamlit w 30 dni po Polsku](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://w30dni.streamlit.app/) +- [Portugiesisch](https://github.com/franciscoed/30days) (von [franciscoed](https://github.com/franciscoed)): [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30dias.streamlit.app/) +- [Russisch](https://github.com/kseniaanske/30days) (von [Ksenia Anske](https://github.com/kseniaanske)): [![30 Дней Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-russian.streamlit.app/) +- [Deutsch](https://github.com/raethlein/30days-german) (von [Patrick Plettner](https://github.com/pplettner) und [Benjamin Räthlein](https://github.com/raethlein)): [![30 Tage Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days.streamlit.app) diff --git a/streamlit_app.py b/streamlit_app.py index 0772f73..d9ec391 100644 --- a/streamlit_app.py +++ b/streamlit_app.py @@ -22,6 +22,11 @@ def update_params(): [int(x.strip("Day").strip(".md")) for x in glob.glob1(f"content/{selected_language}", "*.md")] ) +placeholder = st.empty() +with placeholder: + st.write(_("Day")) +placeholder.empty() + # Logo and Navigation col1, col2, col3 = st.columns((1, 4, 1)) with col2: