Three Tips to Improve your Streamlit App

Original Source Here

Three Tips to Improve your Streamlit App

Environment and prerequisites

Streamlit is installable on

  • Google colaboratory , or
  • Virtual environment on your local computer (Windows/ MacOS / Linux)

Three tips to tweak your Streamlit app

Streamlit is handy to run with dashboards or machine learning models. Here are a lists of tips on improving your app experience on Streamlit.

Example of Streamlit App done by author

1. Streamlit caching

Using Streamlit caching mechanism is handful to improve speed performance and to suppress warnings in certain cases.

Here is an example of using Streamlit cache:

@st.cache(suppress_st_warning=True, allow_output_mutation=True)

– Suppress warnings via cache

Warnings will pop out when your code contains some bugs. While it is always handy to see the errors, at times when the warnings does not halt app performance, it is good to hide them on the frontend (users see it!)

An example of warning on streamlit (this case will affect running the app though)

– Allow Output Mutations

Streamlit always performs an Output Mutation Check, where a fresh hash of the output is computed and compared to the stored output_hash.

If the two hashes are different, Streamlit will show a Cached Object Mutated warning. This may occur when the function arguments or body change. Setting allow_output_mutation=True disables this step.

2. Customize fonts using Inline CSS

Adding inline CSS can help us apply different font family, color, or even size to a single HTML element

Below is an example to customize font family, size, and even the color to orange by including in streamlit markdown. Below is the example code:

import streamlit as stst.markdown(""" <style> .font {font-size:50px ; font-family: 'Cooper Black'; color: #FF9633;}</style> """, unsafe_allow_html=True)st.markdown('<p class="font">Guess the object Names</p>', unsafe_allow_html=True)

Before and after using CSS to customize text:

Image by author

Alert : Be aware of argument `unsafe_allow_html=True’

When you set unsafe_allow_html to ‘True’ to allow customized CSS, this can be making users’ security on the webpage to become unsafe, particularly on handling cookies.

3. Caution while dealing with large image pixels.

Image by author

DecompressionBombError pops up when the image contains high pixels. When the image pixels pre-set limit is exceeded, Streamlit creates a warning to notify and prevent possible decompression bomb DOS attack.

What you can do:

  1. Compress your image to a smaller sizes before upload it, or
  2. Remove pixel limit by setting Image.MAX_IMAGE_PIXELS = None


Trending AI/ML Article Identified & Digested via Granola by Ramsey Elbasheer; a Machine-Driven RSS Bot

%d bloggers like this: