Widgets d'entrée de maîtrise des parties Streamlit

Maîtriser les widgets d'entrée dans Streamlit : un guide complet

? Obtenez le code : GitHub - jamesbmour/blog_tutorials

? Tutoriels Streamlit associés : JustCodeIt

Streamlit a révolutionné la façon dont nous créons des applications Web avec Python. Sa simplicité et sa puissance en font un excellent choix pour les data scientists et les développeurs. Dans cet article, nous approfondirons l'une des fonctionnalités les plus puissantes de Streamlit : les widgets d'entrée. Nous explorerons 16 types d'entrée différents, démontrant comment les utiliser efficacement dans vos applications Streamlit.

Configuration de notre application Streamlit

Avant de plonger dans les widgets, configurons notre application Streamlit :

import streamlit as st

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

col1, col2 = st.columns(2)

Nous avons importé Streamlit, défini la page sur une mise en page large, ajouté un titre et créé deux colonnes pour une meilleure organisation de nos widgets.

Entrées des boutons

1. Bouton de base

La forme de saisie la plus simple est un bouton. Voici comment en créer un :

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")

Explication détaillée :

• La fonction st.button() crée un bouton cliquable.
• key : Un identifiant unique pour le bouton, utile lorsque vous avez plusieurs boutons.
• help : texte d'info-bulle qui apparaît lorsque vous survolez le bouton.
• type : Détermine l'apparence du bouton ("primaire", "secondaire", etc.).
• désactivé : s'il est défini sur True, le bouton sera grisé et non cliquable.

Cas d'utilisation :

• Déclenchement du traitement des données ou de l'entraînement du modèle
• Envoi des formulaires
• Actualisation des données ou des graphiques

Conseil : Utilisez les états des boutons pour contrôler le flux de votre application, comme afficher/masquer des sections ou déclencher des calculs.

2. Bouton de lien

Pour rediriger les utilisateurs vers des liens externes, utilisez le bouton de lien :

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

Explication détaillée :

• st.link_button() crée un bouton qui, lorsque vous cliquez dessus, ouvre un nouvel onglet avec l'URL spécifiée.
• Le premier argument est le texte du bouton et le second est l'URL.

Cas d'utilisation :

• Liens vers de la documentation ou des ressources externes
• Redirection vers les profils de réseaux sociaux
• Connexion aux applications Web associées

Conseil : Utilisez les boutons de lien avec parcimonie pour éviter d'éloigner inutilement les utilisateurs de votre application.

3. Bouton de téléchargement

Autorisez les utilisateurs à télécharger des fichiers directement depuis votre application :

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

Explication détaillée :

• st.download_button() crée un bouton qui déclenche le téléchargement d'un fichier lorsque vous cliquez dessus.
• Arguments : libellé du bouton, contenu du fichier, nom du fichier et type MIME.
• Le type MIME spécifie le type de fichier (par exemple, « text/plain » pour .txt, « application/pdf » pour .pdf).

Cas d'utilisation :

• Téléchargement des rapports ou des données générés
• Enregistrement des images ou des graphiques traités
• Exportation du contenu créé par l'utilisateur

Astuce : Vous pouvez générer dynamiquement le contenu d'un fichier en fonction des interactions de l'utilisateur ou des résultats du traitement des données.

Widgets de sélection

4. Case à cocher

Les cases à cocher sont idéales pour basculer entre les options :

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

Explication détaillée :

• st.checkbox() crée une case à cocher commutable.
• Le paramètre value définit l'état initial (Vrai/Faux).

Cas d'utilisation :

• Activer/désactiver des fonctionnalités dans votre application
• Sélection de plusieurs options dans une liste
• Créer des questions simples oui/non

Conseil : Utilisez les cases à cocher pour contrôler la visibilité des autres éléments de votre application afin d'offrir une expérience utilisateur plus dynamique.

5. Boutons radio

Lorsque les utilisateurs doivent sélectionner une option dans une liste :

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}")

Explication détaillée :

• st.radio() crée un ensemble de boutons radio.
• Le premier argument est l'étiquette, suivi d'une liste d'options.
• index spécifie l'option sélectionnée par défaut (basée sur 0).

Cas d'utilisation :

• Choisir entre des options mutuellement exclusives
• Définition des modes ou des thèmes de l'application
• Filtrage des données en fonction des catégories

Conseil : Utilisez les boutons radio lorsque vous disposez d'un petit nombre d'options (généralement 2 à 5) qui s'excluent mutuellement.

6. Sélectionnez la case

Pour les sélections déroulantes :

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}")

Explication détaillée :

• st.selectbox() crée un menu déroulant.
• Semblable aux boutons radio, mais meilleur pour les listes d'options plus longues.
• index définit l'option sélectionnée par défaut.

Cas d'utilisation :

• 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!