3 Tips to Customize your Streamlit App

Published in

Python in Plain English

3 min readJun 4, 2021

Streamlit is installable on either Google Colab or a 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. This article focuses on 3 tips to improving your app experience on Streamlit:

Caching
Customized CSS
Dealing with large image pixels

1. Streamlit caching

Cache, in a form of key-value store, is important when it comes to loading texts or images. Using Streamlit caching mechanism helps to improve speed performance and to suppress warnings in certain cases.

Snippets to add @st.cache decorator before a defined function:

@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!)

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 st.cache(allow_output_mutation=True) halts this step.

2. Customize fonts using Inline CSS

An inline CSS comes with <style> attribute of an HTML element. Adding inline CSS can help us apply different font family, color, or even size to a single HTML element.

Below is an example to apply Cooper Black font family in orange and larger size, by including inline CSS in streamlit markdown.

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:

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.

Further references: Allow HTML (again!) in st.write/st.markdown — but with kwarg toggle · Issue #152 · streamlit/streamlit · GitHub

3. Caution while dealing with large image pixels.

If you are using Pillow package with your streamlit app to deal with pictures, there are chances where you will encounter DecompressionBombError, which warns that the image contains high pixels higher than PIL.Image.open limit.