Maximizing Streamlit’s Potential: 5 Insider Tips for Creating Stunning Application ⚡

Streamlit is a popular open-source framework that is used to build interactive web applications and data visualizations. It is designed to be simple and intuitive, allowing developers to create complex applications quickly and easily. In this blog, we will explore some hidden tips and tricks for Streamlit that can help you build better and more efficient applications.

“Streamlit is like a magic wand for data scientists, enabling them to create interactive and engaging data visualizations with ease.”

1. Caching with Streamlit

Caching is a powerful feature in Streamlit that can help speed up your application. Caching allows you to store the results of expensive computations so that they can be reused without having to recompute them. This is particularly useful when dealing with large datasets or when performing complex computations.

To use caching in Streamlit, you can use the “@st.cache” decorator. This decorator tells Streamlit to cache the results of the function it decorates. Here is an example:

import streamlit as st

@st.cache
def expensive_computation():
    # Perform some expensive computation
    return result

result = expensive_computation()

In this example, the “expensive_computation()” function is decorated with “@st.cache”. The first time this function is called, it will perform the computation and store the result in the cache. The next time the function is called with the same arguments, Streamlit will retrieve the result from the cache instead of recomputing it.

2. Adding Custom CSS

Streamlit allows you to add custom CSS to your application to change the appearance of the interface. You can use CSS to change the font, colors, layout, and other styling elements of your application.

To add custom CSS to your Streamlit application, you can create a file called “style.css” in the same directory as your Python script. In this file, you can write your custom CSS code. Here is an example:

/* style.css */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333333;
}

h1 {
    color: #008080;
    font-size: 36px;
}

In this example, we have defined two styles: one for the body and one for the h1 heading. To use this custom CSS in your Streamlit application, you can use the “st.markdown()” function with the “unsafe_allow_html=True” parameter. Here is an example:

import streamlit as st

st.markdown("""
    <link rel='stylesheet' href='style.css'>
    <h1>Hello, Streamlit!</h1>
""", unsafe_allow_html=True)

In this example, we have added a link to our custom CSS file in the “st.markdown()” function. We have also added an h1 heading that will use the style defined in our CSS file.

3. Customizing the Page Layout

By default, Streamlit arranges the components of your application in a single column. However, you can customize the layout to display components in multiple columns or rows.

To create a custom layout in Streamlit, you can use the “st.beta_columns()” function. This function creates a specified number of columns and returns a list of elements that you can use to display your components. Here is an example:

import streamlit as st

col1, col2 = st.beta_columns(2)

with col1:
    st.header("Column 1")
    st.text("This is some text in column 1.")

with col2:
    st.header("Column 2")
    st.text("This is some text in column 2.")

In this example, we have created two columns using the “st.beta_columns()” function. We have then used a “with” statement to specify which column we want to display our components in. In each column, we have added a header and some text using the “st.header()” and “st.text()” functions.

You can also use the “st.beta_container()” function to create a container that can hold multiple components. This can be useful for grouping related components together. Here is an example:

import streamlit as st

with st.beta_container():
    st.header("Container 1")
    st.text("This is some text in container 1.")

    st.button("Button 1")

with st.beta_container():
    st.header("Container 2")
    st.text("This is some text in container 2.")

    st.button("Button 2")

In this example, we have created two containers using the “st.beta_container()” function. In each container, we have added a header, some text, and a button.

4. Creating Dynamic Forms

Streamlit allows you to create dynamic forms that update in real-time based on user input. This can be useful for creating interactive applications that respond to user actions.

To create a dynamic form in Streamlit, you can use the “st.form()” function. This function creates a form to which you can add input components. Here is an example:

import streamlit as st

with st.form(key='my_form'):
    name = st.text_input("Enter your name:")
    age = st.slider("Enter your age:", 0, 100, 25)

    submitted = st.form_submit_button("Submit")

if submitted:
    st.write("Name:", name)
    st.write("Age:", age)

In this example, we have created a form using the “st.form()” function. We have added a text input for the user’s name and a slider for the user’s age. We have also added a submit button using the “st.form_submit_button()” function.

When the user submits the form, the code after the form block is executed. In this case, we are displaying the user’s name and age using the “st.write()” function.

5. Displaying Images and Videos

Streamlit allows you to display images and videos in your application using the “st.image()” and “st.video()” functions. These functions can be used to display static images, animated GIFs, and videos.

Here is an example of how to display an image in Streamlit:

import streamlit as st
from PIL import Image

image = Image.open("example.jpg")
st.image(image, caption="Example Image")

In this example, we have opened an image file using the Python Imaging Library (PIL). We have then displayed the image using the “st.image()” function. We have also added a caption to the image using the “caption” parameter.

Here is an example of how to display a video in Streamlit:

import streamlit as st

video_file = open("example.mp4", "rb")
video_bytes = video_file.read()

st.video(video_bytes)

In this example, we have opened a video file and read its contents into a byte string. We have then displayed the video using the “st.video()” function.

In conclusion, Streamlit is a powerful and flexible framework that allows you to build interactive web applications and data visualizations quickly and easily. With these tips and tricks, you can take your Streamlit applications to the next level and create even more powerful and engaging experiences for your users.

References:

Streamlit Documentation:

The official Streamlit documentation is a great place to start learning about the framework. It includes a getting-started guide, tutorials, API references, and examples.

Streamlit Gallery:

The Streamlit Gallery is a collection of example applications built with Streamlit. It is a great resource for inspiration and learning how to use the different features of Streamlit.

Streamlit Cheat Sheet:

This cheat sheet provides a quick reference guide to Streamlit’s most commonly used functions and features.

Streamlit YouTube Channel:

The Streamlit YouTube channel includes tutorials, demos, and talks about using Streamlit.

I hope these resources are helpful in getting started with Streamlit!

Please follow me on medium and let’s connect on Linkedin for stuff like this!