Streamlit Part Mastering-Eingabe-Widgets

Eingabe-Widgets in Streamlit beherrschen: Ein umfassender Leitfaden

? Holen Sie sich den Code: GitHub – jamesbmour/blog_tutorials

? Verwandte Streamlit-Tutorials:JustCodeIt

Streamlit hat die Art und Weise, wie wir Webanwendungen mit Python erstellen, revolutioniert. Seine Einfachheit und Leistungsfähigkeit machen es zu einer ausgezeichneten Wahl für Datenwissenschaftler und Entwickler gleichermaßen. In diesem Beitrag tauchen wir tief in eine der leistungsstärksten Funktionen von Streamlit ein: Eingabe-Widgets. Wir untersuchen 16 verschiedene Eingabetypen und zeigen, wie Sie sie effektiv in Ihren Streamlit-Apps verwenden.

Einrichten unserer Streamlit-App

Bevor wir uns mit den Widgets befassen, richten wir unsere Streamlit-App ein:

import streamlit as st

st.set_page_config(layout="wide")
st.title("Streamlit Part 4: Inputs in Streamlit")

col1, col2 = st.columns(2)

Wir haben Streamlit importiert, die Seite auf ein breites Layout eingestellt, einen Titel hinzugefügt und zwei Spalten zur besseren Organisation unserer Widgets erstellt.

Tasteneingaben

1. Basistaste

Die einfachste Form der Eingabe ist ein Button. So erstellen Sie eines:

with col1:
    st.subheader("1. Button")
    btn1 = st.button("Click Me", key="button", help="Click me to see the magic", type='secondary', disabled=False)
    if btn1:
        st.write("Button Clicked")

Detaillierte Erklärung:

• Die Funktion st.button() erstellt eine anklickbare Schaltfläche.
• Schlüssel: Eine eindeutige Kennung für die Schaltfläche, nützlich, wenn Sie mehrere Schaltflächen haben.
• Hilfe: Tooltip-Text, der angezeigt wird, wenn Sie mit der Maus über die Schaltfläche fahren.
• Typ: Bestimmt das Erscheinungsbild der Schaltfläche („primär“, „sekundär“ usw.).
• deaktiviert: Wenn auf True gesetzt, wird die Schaltfläche ausgegraut und kann nicht angeklickt werden.

Anwendungsfälle:

• Datenverarbeitung oder Modelltraining auslösen
• Formulare einreichen
• Daten oder Diagramme aktualisieren

Tipp: Verwenden Sie Schaltflächenzustände, um den Ablauf Ihrer App zu steuern, z. B. das Ein-/Ausblenden von Abschnitten oder das Auslösen von Berechnungen.

2. Link-Taste

Um Benutzer zu externen Links weiterzuleiten, verwenden Sie die Link-Schaltfläche:

st.subheader("2. Link Button")
if st.link_button("Click Me", "<https://www.streamlit.io/>"):
    st.write("Link Button Clicked")

Detaillierte Erklärung:

• st.link_button() erstellt eine Schaltfläche, die beim Klicken einen neuen Tab mit der angegebenen URL öffnet.
• Das erste Argument ist der Schaltflächentext und das zweite die URL.

Anwendungsfälle:

• Link zu Dokumentation oder externen Ressourcen
• Weiterleitung auf Social-Media-Profile
• Herstellen einer Verbindung zu verwandten Webanwendungen

Tipp:Verwenden Sie Link-Buttons sparsam, um zu vermeiden, dass Benutzer unnötig von Ihrer App weggeführt werden.

3. Download-Schaltfläche

Benutzern erlauben, Dateien direkt von Ihrer App herunterzuladen:

st.subheader("3. Download Button")
if st.download_button("Download Me", "hello world", "hello.txt", mime='text/plain'):
    st.write("Download Button Clicked")

Detaillierte Erklärung:

• st.download_button() erstellt eine Schaltfläche, die beim Klicken einen Dateidownload auslöst.
• Argumente: Schaltflächenbezeichnung, Dateiinhalt, Dateiname und MIME-Typ.
• Der MIME-Typ gibt den Dateityp an (z. B. „text/plain“ für .txt, „application/pdf“ für .pdf).

Anwendungsfälle:

• Herunterladen generierter Berichte oder Daten
• Verarbeitete Bilder oder Diagramme speichern
• Exportieren von vom Benutzer erstellten Inhalten

Tipp:Sie können Dateiinhalte basierend auf Benutzerinteraktionen oder Datenverarbeitungsergebnissen dynamisch generieren.

Auswahl-Widgets

4. Kontrollkästchen

Kontrollkästchen eignen sich hervorragend zum Umschalten von Optionen:

st.subheader("4. Checkbox")
checkbox_val = st.checkbox("Check Me", value=False)
if checkbox_val:
    st.write("Checkbox Checked")

Detaillierte Erklärung:

• st.checkbox() erstellt ein umschaltbares Kontrollkästchen.
• Der Wertparameter legt den Anfangszustand fest (True/False).

Anwendungsfälle:

• Funktionen in Ihrer App aktivieren/deaktivieren
• Auswählen mehrerer Optionen aus einer Liste
• Einfache Ja/Nein-Fragen erstellen

Tipp:Verwenden Sie Kontrollkästchen, um die Sichtbarkeit anderer Elemente in Ihrer App für ein dynamischeres Benutzererlebnis zu steuern.

5. Optionsfelder

Wenn Benutzer eine Option aus einer Liste auswählen müssen:

st.subheader("5. Radio")
radio_val = st.radio("Select Color", ["Red", "Green", "Blue"], index=0)
if radio_val:
    st.write(f"You selected {radio_val}")

Detaillierte Erklärung:

• st.radio() erstellt eine Reihe von Optionsfeldern.
• Das erste Argument ist die Bezeichnung, gefolgt von einer Liste von Optionen.
• index gibt die standardmäßig ausgewählte Option an (0-basiert).

Anwendungsfälle:

• Auswahl zwischen sich gegenseitig ausschließenden Optionen
• App-Modi oder Themen festlegen
• Daten nach Kategorien filtern

Tipp:Verwenden Sie Optionsfelder, wenn Sie nur wenige Optionen (normalerweise 2–5) haben, die sich gegenseitig ausschließen.

6. Feld auswählen

Für Dropdown-Auswahl:

st.subheader("6. Selectbox")
select_val = st.selectbox("Select Color", ["Red", "Green", "Blue", "Black"], index=1)
if select_val:
    st.write(f"You selected {select_val}")

Detaillierte Erklärung:

• st.selectbox() erstellt ein Dropdown-Menü.
• Ähnlich wie Optionsfelder, aber besser für längere Optionslisten.
• index legt die standardmäßig ausgewählte Option fest.

Anwendungsfälle:

• Selecting from a long list of options
• Choosing categories or filters
• Setting parameters for data analysis

Tip: You can populate the options dynamically based on data or user inputs.

7. Multi-select

Allow users to select multiple options:

st.subheader("7. Multiselect")
multiselect_val = st.multiselect("Select Colors", ["Red", "Green", "Blue", "Black"], default=["Red"])
if multiselect_val:
    st.write(f"You selected {multiselect_val}")

Detailed Explanation:

• st.multiselect() creates a dropdown that allows multiple selections.
• default sets the initially selected options.

Use Cases:

• Selecting multiple filters for data
• Choosing features for a machine learning model
• Creating customizable dashboards

Tip: Use st.multiselect() when you want users to be able to select any number of options, including none or all.

8. Select Slider

For selecting from a range of discrete values:

st.subheader("8. Select Slider")
select_slider_val = st.select_slider("Select Value", options=range(1, 101), value=50)
if select_slider_val:
    st.write(f"You selected {select_slider_val}")

Detailed Explanation:

• st.select_slider() creates a slider with discrete values.
• options can be a range of numbers or a list of any values (even strings).
• value sets the initial position of the slider.

Use Cases:

• Selecting from a range of predefined values
• Creating rating systems
• Adjusting parameters with specific increments

Tip: You can use custom labels for the slider by passing a list of tuples (label, value) as options.

Text Inputs

9. Text Input

For single-line text input:

with col2:
    st.subheader("9. Text Input")
    text_input_val = st.text_input("Enter some text", value="", max_chars=50)
    if text_input_val:
        st.write(f"You entered {text_input_val}")

Detailed Explanation:

• st.text_input() creates a single-line text input field.
• value sets the initial text (if any).
• max_chars limits the number of characters that can be entered.

Use Cases:

• Getting user names or short responses
• Inputting search queries
• Entering simple parameters or values

Tip: Use the type parameter to create password fields or other specialized inputs.

10. Text Area

For multi-line text input:

st.subheader("10. Text Area")
text_area_val = st.text_area("Enter some text", value="", height=150, max_chars=200)
if text_area_val:
    st.write(f"You entered {text_area_val}")

Detailed Explanation:

• st.text_area() creates a multi-line text input box.
• height sets the vertical size of the box.
• max_chars limits the total character count.

Use Cases:

• Collecting longer text responses or comments
• Inputting multi-line code snippets
• Creating text-based data entry forms

Tip: You can use st.text_area() with natural language processing models for text analysis or generation tasks.

Numeric and Date/Time Inputs

11. Number Input

For numerical inputs:

st.subheader("11. Number Input")
number_input_val = st.number_input("Enter a number", value=0, min_value=0, max_value=100, step=1)
if number_input_val:
    st.write(f"You entered {number_input_val}")

Detailed Explanation:

• st.number_input() creates a field for numerical input.
• min_value and max_value set the allowed range.
• step defines the increment/decrement step.

Use Cases:

• Inputting quantities or amounts
• Setting numerical parameters for algorithms
• Creating age or rating inputs

Tip: You can use format parameter to control the display of decimal places.

12. Date Input

For selecting dates:

st.subheader("12. Date Input")
date_input_val = st.date_input("Enter a date")
if date_input_val:
    st.write(f"You selected {date_input_val}")

Detailed Explanation:

• st.date_input() creates a date picker widget.
• You can set min_value and max_value to limit the date range.

Use Cases:

• Selecting dates for data filtering
• Setting deadlines or event dates
• Inputting birthdates or other significant dates

Tip: Use datetime.date.today() as the default value to start with the current date.

13. Time Input

For selecting times:

st.subheader("13. Time Input")
time_input_val = st.time_input("Enter a time")
if time_input_val:
    st.write(f"You selected {time_input_val}")

Detailed Explanation:

• st.time_input() creates a time picker widget.
• Returns a datetime.time object.

Use Cases:

• Setting appointment times
• Configuring schedules
• Inputting time-based parameters

Tip: Combine with st.date_input() to create full datetime inputs.

Advanced Inputs

14. File Uploader

For uploading files:

st.subheader("14. File Uploader")
file_uploader_val = st.file_uploader("Upload a file", type=["png", "jpg", "txt"])
if file_uploader_val:
    st.write(f"You uploaded {file_uploader_val.name}")

Detailed Explanation:

• st.file_uploader() creates a file upload widget.
• type parameter limits the allowed file types.
• Returns a UploadedFile object that you can process.

Use Cases:

• Uploading images for processing
• Importing data files for analysis
• Allowing users to upload documents or media

Tip: Use st.file_uploader() in combination with libraries like Pillow or pandas to process uploaded files directly in your app.

15. Color Picker

For selecting colors:

st.subheader("15. Color Picker")
color_picker_val = st.color_picker("Pick a color", value="#00f900")
if color_picker_val:
    st.write(f"You picked {color_picker_val}")

Detailed Explanation:

• st.color_picker() creates a color selection widget.
• Returns the selected color as a hex string.

Use Cases:

• Customizing UI elements
• Selecting colors for data visualization
• Creating design tools

Tip: You can use the selected color to dynamically update the appearance of other elements in your app.

16. Camera Input

For capturing images using the device's camera:

st.subheader("16. Camera Input")
camera_input_val = st.camera_input("Take a picture", help="Capture an image using your camera")
if camera_input_val:
    st.write("Picture captured successfully")

Detailed Explanation:

• st.camera_input() creates a widget that accesses the user's camera.
• Returns an image file that can be processed or displayed.

Use Cases:

• Real-time image processing applications
• Document scanning features
• Interactive computer vision demos

Tip: Combine with image processing libraries like OpenCV to perform real-time analysis on captured images.

Conclusion

Streamlit's input widgets provide a powerful and flexible way to create interactive web applications. From simple buttons to complex file uploaders and camera inputs, these widgets cover a wide range of use cases. By mastering these input types, you can create rich, interactive Streamlit apps that engage users and provide meaningful interactions with your data and models.

Happy Streamlit coding!

? Get the Code: GitHub - jamesbmour/blog_tutorials
? Related Streamlit Tutorials:JustCodeIt
? Support my work: Buy Me a Coffee

Das obige ist der detaillierte Inhalt vonStreamlit Part Mastering-Eingabe-Widgets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!