Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Einführung in Streamlit-Komponenten

Olaf Källström
Name
Olaf Källström

Updated on

Streamlit ist eine leistungsstarke Open-Source-Bibliothek, die es Data Scientists und Entwicklern ermöglicht, interaktive, benutzerfreundliche Webanwendungen für maschinelles Lernen und Data Science zu erstellen. Im Zentrum dieser Anwendungen stehen Streamlit-Komponenten, eine Reihe interaktiver Widgets, die Benutzern ermöglichen, die ihnen präsentierten Daten zu manipulieren und mit ihnen zu interagieren.

Streamlit-Komponenten sind die Bausteine von Streamlit-Anwendungen. Sie bieten die Benutzeroberfläche und ermöglichen es den Benutzern, auf verschiedene Weise mit der Anwendung zu interagieren. Von einfachen Schaltflächen und Kontrollkästchen bis hin zu komplexeren Formularen und Tabellen bieten Streamlit-Komponenten eine Vielzahl von Möglichkeiten, interaktive und dynamische Data-Science-Anwendungen zu erstellen.

Haben Sie von diesem großartigen Data-Analyse- und Data-Visualisierungstool gehört, das Ihre Streamlit-App in eine Tableau-ähnliche Benutzeroberfläche verwandelt?

PyGWalker (opens in a new tab) ist eine Python-Bibliothek, die Ihnen dabei hilft, eine Tableau-ähnliche Benutzeroberfläche mühelos in Ihre eigene Streamlit-App einzubetten. Schauen Sie sich dieses großartige Video von Wie man Daten mit PyGWalker in Python erkundet (opens in a new tab) an, in dem die detaillierten Schritte zur Stärkung Ihrer Streamlit-App mit dieser leistungsstarken Python-Bibliothek für Datenvisualisierung demonstriert werden!


Besonderer Dank an Sven und seinen großartigen Beitrag (opens in a new tab) zur PyGWalker-Community!

Darüber hinaus können Sie auf der PyGWalker-GitHub-Seite (opens in a new tab) weitere PyGWalker-Beispiele finden.

Interaktive Widgets in Streamlit

In Streamlit sind Widgets das primäre Mittel der Benutzerinteraktion. Sie ermöglichen es Benutzern, Daten einzugeben, Auswahl zu treffen und das Verhalten der Anwendung zu steuern. Streamlit bietet eine Vielzahl von Widgets, darunter Schaltflächen, Kontrollkästchen, Texteingabefelder, Schieberegler und mehr. Jedes Widget dient einem spezifischen Zweck und kann an die Bedürfnisse der Anwendung angepasst werden.

Widgets in Streamlit dienen nicht nur der Benutzereingabe. Sie können auch verwendet werden, um Daten und andere Informationen anzuzeigen. Zum Beispiel kann ein Tabellen-Widget verwendet werden, um einen Datenrahmen anzuzeigen, während ein Markdown-Widget zum Anzeigen von formatiertem Text verwendet werden kann. Diese Flexibilität macht Widgets zu einem leistungsstarken Werkzeug zur Erstellung interaktiver und dynamischer Data-Science-Anwendungen.

Tiefere Einblicke in Streamlit-Komponenten

Streamlit-Schaltfläche

Eine Streamlit-Schaltfläche ist eine einfache, aber leistungsstarke Komponente. Sie ermöglicht es Benutzern, Aktionen in der Anwendung auszulösen, z. B. das Ausführen eines Skripts oder das Aktualisieren einer Anzeige. Die Schaltflächenkomponente wird mit der Funktion st.button definiert, die einen String-Parameter für die Schaltflächenbeschriftung erhält.

import streamlit as st
 
if st.button('Klick mich'):
    st.write('Schaltfläche geklickt!')

In diesem Beispiel wird bei Klicken der Schaltfläche mit der Beschriftung 'Klick mich' die Nachricht 'Schaltfläche geklickt!' auf dem Bildschirm angezeigt. Dieser einfache Mechanismus kann verwendet werden, um komplexere Aktionen auszulösen und macht die Schaltfläche zu einer vielseitigen Komponente in Streamlit-Anwendungen.

Streamlit-Spalten

Streamlit-Spalten ermöglichen es Ihnen, das Layout Ihrer Anwendung effektiver zu organisieren. Mit der Funktion st.columns können Sie Ihre Anwendung in mehrere Spalten aufteilen und verschiedene Komponenten in jeder Spalte platzieren.

import streamlit as st
 
col1, col2 = st.columns(2)
 
with col1:
    st.write('Dies ist Spalte 1')
 
with col2:
    st.write('Dies ist Spalte 2')

In diesem Beispiel wird die Anwendung in zwei Spalten aufgeteilt. Die erste Spalte zeigt den Text 'Dies ist Spalte 1' an, und die zweite Spalte zeigt 'Dies ist Spalte 2' an. Dies ermöglicht es Ihnen, komplexere Layouts zu erstellen und die Benutzererfahrung Ihrer Anwendung zu verbessern.

Streamlit-Formular

Streamlit-Formulare sind eine Möglichkeit, verwandte Eingabewidgets zu gruppieren und deren Werte gleichzeitig zu übermitteln. Dies ist besonders nützlich, wenn Sie mehrere Eingaben haben, die zusammen übermittelt werden sollen.

import streamlit as st
 
with st.form(key='mein_formular'):
    text_input = st.text_input(label='Geben Sie etwas Text ein')
    submit_button = st.form_submit_button(label='Senden')

In diesem Beispiel wird ein Formular mit einem Texteingabefeld und einer Senden-Schaltfläche erstellt. Wenn auf die Schaltfläche "Senden" geklickt wird, werden alle Eingaben im Formular gleichzeitig übermittelt.

Streamlit-Tabelle

Streamlit-Tabellen bieten eine Möglichkeit, Daten in strukturierter Form anzuzeigen. Sie können eine Tabelle in Streamlit mit der Funktion st.table erstellen, die einen Datenrahmen oder ein Wörterbuch als Eingabe akzeptiert.

import streamlit as st
import pandas as pd
 
data = {'Name': ['John', 'Anna', 'Peter'],
        'Alter': [28, 23, 35]}
 
df = pd.DataFrame(data)
 
st.table(df)

In diesem Beispiel wird ein Datenrahmen mit der Pandas-Bibliothek erstellt und als Tabelle in der Streamlit-Anwendung angezeigt. Die Tabelle zeigt die Daten in Zeilen und Spalten deutlich an, so dass Benutzer sie leicht verstehen können.

Streamlit-Kontrollkästchen

Ein Streamlit-Kontrollkästchen ist eine Komponente, mit der Benutzer eine binäre Option umschalten können. Es kann verwendet werden, um das Verhalten der Anwendung zu steuern, z. B. das Anzeigen oder Ausblenden zusätzlicher Informationen. Die Kontrollkästchenkomponente wird mit der Funktion st.checkbox definiert, die einen String-Parameter für die Kontrollkästenbeschriftung erhält.

import streamlit as st
 
if st.checkbox('Details anzeigen'):
    # Code zum Anzeigen der Details

In diesem Beispiel wird bei Aktivierung des Kontrollkästchens mit der Beschriftung 'Details anzeigen' der Code zum Anzeigen der Details ausgeführt. Dies ermöglicht es Benutzern, das Verhalten der Anwendung zu steuern und macht das Kontrollkästchen zu einer nützlichen Komponente in Streamlit-Anwendungen. st.write('Hier sind die Details...')


In diesem Beispiel wird die Nachricht 'Hier sind die Details...' auf dem Bildschirm angezeigt, wenn das Kontrollkästchen mit der Beschriftung 'Details anzeigen' aktiviert ist. Mit diesem Mechanismus kann die Sichtbarkeit zusätzlicher Informationen basierend auf den Vorlieben des Benutzers gesteuert werden.

### Streamlit Texteingabe

Streamlit Texteingabe ist eine Komponente, mit der Benutzer eine Textzeile eingeben können. Sie kann verwendet werden, um Benutzereingaben wie eine Suchanfrage oder eine Formularantwort zu erfassen. Die Texteingabe-Komponente wird mit der Funktion `st.text_input` definiert, die ein Zeichenfolgenargument für das Eingabeetikett benötigt.

```python
import streamlit as st

titel = st.text_input('Filmtitel', 'Das Leben des Brian')
st.write('Der aktuelle Filmtitel ist', titel)

In diesem Beispiel wird ein Texteingabefeld mit dem Etikett 'Filmtitel' und einem Standardwert von 'Das Leben des Brian' erstellt. Der Wert des Texteingabefelds kann abgerufen und in der Anwendung verwendet werden, wie es die Meldung zeigt, die den aktuellen Filmtitel anzeigt.

Streamlit Markdown

Streamlit Markdown ist eine Komponente, mit der Text gemäß der Markdown-Syntax formatiert angezeigt werden kann. Dies kann verwendet werden, um Überschriften, fett oder kursiv geschriebenen Text, Listen, Links und mehr anzuzeigen. Die Markdown-Komponente wird mit der Funktion st.markdown definiert, die ein Zeichenfolgenargument mit dem formatierten Text in Markdown-Syntax erwartet.

import streamlit as st
 
st.markdown('## Dies ist eine Überschrift')
st.markdown('Dies ist **fetter** Text')

In diesem Beispiel werden eine Überschrift und fettgedruckter Text mithilfe der Markdown-Syntax angezeigt. Dies ermöglicht es Ihnen, in Ihren Streamlit-Anwendungen formatierten Text zu erstellen.

Streamlit Mehrfachauswahl

Streamlit Mehrfachauswahl ist eine Komponente, mit der Benutzer mehrere Optionen aus einer Liste auswählen können. Sie kann verwendet werden, um Daten zu filtern, die Anzeige von Informationen zu steuern und mehr. Die Mehrfachauswahl-Komponente wird mit der Funktion st.multiselect definiert, die ein Zeichenfolgenargument für das Eingabeetikett und eine Liste von Optionen benötigt.

import streamlit as st
 
optionen = st.multiselect(
    'Was sind Ihre Lieblingsfarben',
    ['Grün', 'Gelb', 'Rot', 'Blau'],
    ['Gelb', 'Rot']
)
st.write('Sie haben ausgewählt:', optionen)

In diesem Beispiel wird ein Mehrfachauswahlfeld mit dem Etikett 'Was sind Ihre Lieblingsfarben' und vier Optionen erstellt. Der Benutzer kann mehrere Optionen auswählen, und die ausgewählten Optionen werden auf dem Bildschirm angezeigt.

Streamlit Container

Streamlit Container sind eine Möglichkeit, verwandte Komponenten zusammenzufassen. Sie können verwendet werden, um komplexere Layouts zu erstellen und die Anzeige von Komponenten auf eine organisierte Art und Weise zu verwalten. Der Container wird mit der Funktion st.container definiert, die keine Argumente benötigt.

import streamlit as st
 
with st.container():
    st.write('Dies ist innerhalb des Containers')
    st.button('Klick mich')

In diesem Beispiel wird ein Container mit einem Text und einer Schaltflächenkomponente darin erstellt. Die Komponenten innerhalb des Containers werden zusammen angezeigt, sodass Sie komplexere Layouts erstellen und die Organisation Ihrer Anwendung verbessern können.

Best Practices für die Verwendung von Streamlit-Komponenten

Bei der Integration von Streamlit-Komponenten in Ihre Anwendungen ist es wichtig, gewisse Best Practices zu beachten, um eine optimale Leistung und Benutzererfahrung zu gewährleisten. Hier sind einige wichtige Punkte zu beachten:

  • Benutzererfahrung: Priorisieren Sie immer die Benutzererfahrung. Organisieren Sie Ihre Komponenten auf intuitive Weise und stellen Sie klare Beschriftungen und Anweisungen bereit. Dies verbessert nicht nur die Benutzerfreundlichkeit, sondern gibt auch jedem Komponenten Kontext.
## Gute Praxis: klare Beschriftungen und Anweisungen
st.markdown('### Bitte geben Sie Ihre Daten ein')
name = st.text_input('Name')
email = st.text_input('E-Mail')
  • Leistung: Beachten Sie die potenziellen Leistungsauswirkungen Ihrer Komponenten. Bestimmte Komponenten wie Formulare und Tabellen können ressourcenintensiv sein und Ihre Anwendung verlangsamen, wenn sie nicht sparsam eingesetzt werden. Bemühen Sie sich, Ihre Komponenten zu optimieren und sie nur sparsam zu verwenden, um eine reibungslose und reaktionsschnelle Benutzererfahrung aufrechtzuerhalten.
## Schlechte Praxis: große Tabelle
st.table(großer_datenrahmen)
 
## Gute Praxis: optimierte Tabelle mit Seitenzahl
for i in range(0, len(großer_datenrahmen), 100):
    st.table(großer_datenrahmen[i:i+100])
  • Testing: Stellen Sie sicher, dass Sie Ihre Komponenten gründlich testen. Sie sollten wie erwartet funktionieren und Benutzereingaben elegant handhaben. Dazu gehört auch das Testen von Randfällen und die angemessene Behandlung von Fehlern.
## Gute Praxis: Fehlerbehandlung
try:
    ergebnis = einige_funktion(benutzereingabe)
except EinigeFehler as e:
    st.error(f'Ein Fehler ist aufgetreten: {e}')

Anwendungen von Streamlit-Komponenten in der Realität

Streamlit-Komponenten finden in einer Vielzahl von realen Anwendungen Anwendung und verbessern die Interaktivität und Benutzerbindung. Hier sind einige Beispiele:

  • Data Science: Streamlit-Komponenten werden häufig verwendet, um interaktive Dashboards und Datenexplorationstools zu erstellen. Benutzer können Schieberegler, Kontrollkästchen und Dropdown-Menüs verwenden, um Daten zu filtern und zu manipulieren, während Tabellen und Diagramme verwendet werden, um die Ergebnisse anzuzeigen.
## Beispiel: Datenexplorationstool
ausgewählte_daten = daten[st.multiselect('Spalten auswählen', daten.spalten)]
st.line_chart(ausgewählte_daten)
  • Maschinelles Lernen: Streamlit-Komponenten werden verwendet, um interaktive Modellsimulationstools zu erstellen. Benutzer können Parameter eingeben, Modelle ausführen und Ergebnisse innerhalb derselben Anwendung anzeigen. Dadurch wird das Verständnis und die Interpretation von maschinellem Lernen erleichtert.
## Beispiel: Modellsimulationstool
parameter = st.sidebar.slider('Modellparameter', 0, 10)
modell = train_model(parameter)
st.write('Modellwert:', modell.score(X, y))
  • Webentwicklung: Streamlit-Komponenten werden verwendet, um dynamische, interaktive Webanwendungen zu erstellen. Von einfachen Formularen und Schaltflächen bis hin zu komplexen Layouts mit mehreren Containern bieten Streamlit-Komponenten eine Vielzahl von Möglichkeiten, um ansprechende Web-Erlebnisse zu schaffen.
## Beispiel: Webanwendung
with st.container():
st.header('Willkommen in meiner App!')
    if st.button('Klick mich'):
        st.balloons()

In all diesen Anwendungen liegt der Schlüssel darin, Streamlit-Komponenten auf eine Weise zu verwenden, die die Benutzererfahrung verbessert, die Anwendung interaktiver macht und dem Benutzer ermöglicht, mit den Daten auf sinnvolle Weise zu interagieren.

Praktische Anwendungen von Streamlit-Komponenten

Streamlit-Komponenten werden in einer Vielzahl von praktischen Anwendungen eingesetzt. Zum Beispiel werden sie in der Datenwissenschaft oft verwendet, um interaktive Dashboards und Datenexplorationswerkzeuge zu erstellen. Benutzer können Schieberegler, Kontrollkästchen und Dropdown-Menüs verwenden, um Daten zu filtern und zu manipulieren, während Tabellen und Diagramme zur Anzeige der Ergebnisse verwendet werden.

  • In Machine Learning werden Streamlit-Komponenten verwendet, um interaktive Modellerkundungswerkzeuge zu erstellen. Benutzer können Parameter eingeben, Modelle ausführen und Ergebnisse innerhalb derselben Anwendung anzeigen. Dadurch wird das Verständnis und die Interpretation von Machine Learning-Modellen erleichtert.

  • In der Webentwicklung werden Streamlit-Komponenten verwendet, um dynamische, interaktive Webanwendungen zu erstellen. Von einfachen Formularen und Schaltflächen bis hin zu komplexen Layouts mit mehreren Containern bieten Streamlit-Komponenten eine Vielzahl von Möglichkeiten, um ansprechende Web-Erlebnisse zu schaffen.

In all diesen Anwendungen liegt der Schlüssel darin, Streamlit-Komponenten auf eine Weise zu verwenden, die die Benutzererfahrung verbessert, die Anwendung interaktiver macht und dem Benutzer ermöglicht, mit den Daten auf sinnvolle Weise zu interagieren.

Fazit

Streamlit-Komponenten sind die Bausteine interaktiver Datenwissenschaftsanwendungen. Sie bieten eine Vielzahl von Möglichkeiten, um dynamische und ansprechende Benutzeroberflächen zu erstellen, von einfachen Schaltflächen und Kontrollkästchen bis hin zu komplexeren Formularen und Tabellen. Durch das Verständnis und die effektive Nutzung dieser Komponenten können Sie leistungsstarke Anwendungen erstellen, die es Benutzern ermöglichen, mit Daten auf sinnvolle Weise zu interagieren.

Egal, ob Sie ein Datenwissenschaftler sind, der ein interaktives Dashboard erstellen möchte, ein Machine Learning-Ingenieur, der ein Modellerkundungswerkzeug erstellen möchte, oder ein Webentwickler, der eine dynamische Webanwendung erstellen möchte, Streamlit-Komponenten sind die richtige Wahl für Sie. Denken Sie immer an die Benutzererfahrung, achten Sie auf die Leistungsfähigkeit und testen Sie Ihre Komponenten gründlich. Mit diesen bewährten Methoden sind Sie auf dem besten Weg, Streamlit-Komponenten zu beherrschen.

Hast du von diesem fantastischen Tool zur Datenanalyse und Datenvisualisierung gehört, das deine Streamlit-App in Tableau verwandelt?

PyGWalker (opens in a new tab) ist eine Python-Bibliothek, die es Ihnen ermöglicht, eine Tableau-ähnliche Benutzeroberfläche mühelos in Ihre eigene Streamlit-App einzubetten.

PyGWalker zur Datenvisualisierung in Streamlit (opens in a new tab)

Häufig gestellte Fragen

1. Was sind die Nachteile von Streamlit?

Obwohl Streamlit ein leistungsfähiges Tool zum Erstellen interaktiver Datenwissenschaftsanwendungen ist, hat es einige Einschränkungen. Zum Beispiel ist es nicht für die Erstellung komplexer Mehrseitenanwendungen ausgelegt und unterstützt keine Benutzerauthentifizierung oder Sitzungsverwaltung von Haus aus. Darüber hinaus kann Streamlit aufgrund der serverseitigen Ausführung möglicherweise nicht so reaktionsschnell sein wie clientseitige JavaScript-Anwendungen für große Datensätze oder komplexe Berechnungen.

2. Wie strukturiert man eine Streamlit-App?

Eine Streamlit-App basiert auf dem Konzept der "Skriptausführung". Wenn ein Benutzer mit einem Widget interagiert, wird das gesamte Skript von oben nach unten neu ausgeführt. Dies macht den Code einfach und linear, ähnlich wie bei einem traditionellen Python-Skript. Sie können jedoch auch Funktionen und Klassen verwenden, um Ihren Code zu strukturieren, und Sie können den st.cache-Decorator verwenden, um die Ergebnisse lang laufender Berechnungen zu zwischenspeichern und unnötige Wiederholungen zu vermeiden.

3. Wie optimiere ich die Leistung meiner Streamlit-App?

Es gibt mehrere Möglichkeiten, die Leistung Ihrer Streamlit-App zu optimieren. Eine Möglichkeit besteht darin, den st.cache-Decorator zu verwenden, um die Ergebnisse lang laufender Berechnungen zu zwischenspeichern. Eine andere Möglichkeit besteht darin, die Funktion st.beta_columns zu verwenden, um mehrere Spalten zu erstellen und das Rendern Ihrer Komponenten zu parallelisieren. Sie können auch die Funktion st.experimental_memo verwenden, um Funktionsaufrufe zu memoisieren und unnötige Neuberechnungen zu vermeiden. Seien Sie außerdem besorgt über die Größe Ihrer Daten und die Komplexität Ihrer Berechnungen und verwenden Sie bei Bedarf einen leistungsstärkeren Server.