Logo

dev-resources.site

for different kinds of informations.

Streamlit Part 8: Status Elements

Published at
12/2/2024
Categories
python
streamlit
webdev
tutorial
Author
jamesbmour
Categories
4 categories in total
python
open
streamlit
open
webdev
open
tutorial
open
Author
10 person written this
jamesbmour
open
Streamlit Part 8: Status Elements

Welcome back to Streamlit Part 8: Status Elements! In this installment, we'll dive into the various status elements Streamlit offers to enhance the user experience in your app by providing visual feedback during operations.

If you haven't already, you'll want to import Streamlit as st, configure your page, and lay out the framework to follow along. Run the app by typing streamlit run app.py in your terminal, and let's get started.

Implementing Progress Bars

The first status element we'll look at is the progress bar. This is a great way to visually indicate the progress of a long-running task, like data processing or a complex computation.

To create a progress bar in Streamlit:

  1. Define some text to be displayed alongside the progress bar.
  2. Use st.progress() to initialize it.
  3. Create a for-loop to simulate progress, adding a sleep delay to visualize the updates.
progress_text = "Operation in progress. Please wait."
my_bar = st.progress(value=0, text=progress_text)

for percent_complete in range(100):
    time.sleep(0.01)
    my_bar.progress(percent_complete + 1, text=progress_text)

time.sleep(0.5)
my_bar.empty()  # Clears the progress bar

Enter fullscreen mode Exit fullscreen mode

To make the app interactive, consider adding a Rerun button that reloads the app so users can re-run the progress bar.

st.button("Rerun")

Enter fullscreen mode Exit fullscreen mode

Exploring Status and Success Elements

Next up is the success bar. This can be used to show a successful outcome or completion of an operation.

st.success("This is a status message!", icon="โœ…")

Enter fullscreen mode Exit fullscreen mode

Itโ€™s a simple but effective way to show users when things go smoothly!

Using Spinners for Operations

A spinner is a great way to indicate that something is running in the background. This is especially useful when you want to keep users informed without blocking the interface.

with st.spinner("In progress..."):
    time.sleep(1.5)

st.success("Done!")

Enter fullscreen mode Exit fullscreen mode

This code will display a spinner while the time.sleep() function runs, then show a success message when finished.

Handling Errors and Warnings

To handle error scenarios or warnings, you can use st.error() and st.warning() respectively. These functions make it very easy to communicate issues clearly.

st.error("This is an error message!")
st.warning("This is a warning message!")

Enter fullscreen mode Exit fullscreen mode

They display red and yellow messages, making it easy for users to differentiate between errors and warnings.

Displaying Info and Exceptions

For general information, use st.info(). It's useful for providing informative messages during interactions.

st.info("This is an info message!")

Enter fullscreen mode Exit fullscreen mode

Additionally, if you need to display exceptions (for debugging purposes), use st.exception(). This can be handy when you want users or developers to understand why something has gone wrong.

try:
    raise Exception("This is an exception!")
except Exception as e:
    st.exception(e)

Enter fullscreen mode Exit fullscreen mode

This will show the full traceback, providing valuable context during development.

Fun with Balloons and Snow

Streamlit also offers some whimsical features to add fun effects to your app. You can use balloons and snow to add a bit of celebration or a seasonal touch!

  • Balloons:
bbtn = st.button("Click me to display balloons")
if bbtn:
    st.balloons()

Enter fullscreen mode Exit fullscreen mode
  • Snow:
snow_btn = st.button("Click me to display snow")
if snow_btn:
    st.snow()

Enter fullscreen mode Exit fullscreen mode

These effects are purely visual, but they can add a fun flair to your app for special occasions.

Conclusion and Next Steps

Thatโ€™s it for Streamlit Part 8: Status Elements! These elements can help keep your users informed about whatโ€™s happening behind the scenes and make the overall experience more interactive.

I hope you enjoyed this tutorial! See you in the next installment!


๐Ÿ”— Get the Code: GitHub - jamesbmour/blog_tutorials
๐Ÿ”— Related Streamlit Tutorials:JustCodeIt
๐Ÿป Support my work: Buy Me a Coffee

streamlit Article's
30 articles in total
Favicon
Introducing GenAI Tweet Creator: Your AI-Powered Tweeting Assistant using Streamlit
Favicon
How to code a title in streamlit
Favicon
Interactive DataFrame Management with Streamlit Fragments ๐Ÿš€
Favicon
Streamlit Part 10: Page Navigation Simplified
Favicon
Streamlit Part 8: Status Elements
Favicon
IELTS Writing Task Generator
Favicon
Unlocking Knowledge!
Favicon
Build Your YouTube Video Transcriber with Streamlit & Youtube API's ๐Ÿš€
Favicon
Streamlit app
Favicon
Building an Interactive Budget Calculator with Streamlit ๐Ÿš€
Favicon
Building an Interactive Quiz App with Streamlit ๐Ÿš€
Favicon
Building a Streamlit Inventory Management App with Fragment Decorators ๐Ÿš€
Favicon
Building a Voice Transcription and Translation App with OpenAI Whisper and Streamlit
Favicon
Multi-Modality and Image Gen in a 1.3B Model!๐Ÿ”ฎ
Favicon
๐Ÿ–ผ๏ธ Build an Image Converter WebApp Using Python and Streamlit
Favicon
AI Agents: Transforming Ideas into Action, Collaboratively
Favicon
Simulating the Monty Hall problem using Streamlit
Favicon
Build a containerized AI Agent with watsonx.ai & CrewAI (and Streamlit) and Podman
Favicon
Streamlit Part 4: Mastering Media Elements - Logos, Images, Videos, and Audio
Favicon
Streamlit Part 7: Build a Chat Interface
Favicon
Stress Testing VLMs: Multi QnA and Description Tasks
Favicon
Building a Document Retrieval & Q&A System with OpenAI and Streamlit
Favicon
Streamlit Part 6: Mastering Layouts
Favicon
Building internal AI tools with Streamlit
Favicon
Streamlit Part 5: Mastering Data Visualization and Chart Types
Favicon
Making a Webapp is so EASY with Streamlit
Favicon
Building a Multi-Turn-Assistant Application using Llama, Claude and GPT4o
Favicon
Building a Document QA with Streamlit & OpenAI
Favicon
Building an ๐Ÿ OpenAI SWARM ๐Ÿ” Web Scraping and Content Analysis Streamlit Web App with ๐Ÿ‘ฅ Multi-Agent Systems
Favicon
Introduction to Using Generative AI Models: Create Your Own Chatbot ๐Ÿค–๐Ÿ’ฌ

Featured ones: