Make your Streamlit App Look Better

(A Comprehensive Guide for Customizing your Streamlit Web App)

Introduction

Web applications are a great way of showcasing your projects, whether a machine learning model you want to deploy or your interactive Portfolio that you wish to send to recruiters. And like myself, many other data scientists really on libraries like “Streamlit” to effortlessly create data-driven web apps.

But I have seen many people using the same streamlit default theme without any personalization in their app to the point that an app used to predict cancer looks precisely the same as one trying to classify cats and dogs.

So, in this article, I will take you through some easy customizations that anyone can implement in their apps to make them look aesthetically pleasing and user-friendly. By the end of this article, you’ll be able to give new life to your old default streamlit apps.

Streamlit

For the uninitiated, Streamlit is an open-source app framework in Python language. It helps us create web apps for data science and machine learning in a short amount of time.

If you are trying to figure out how to use streamlit to develop web apps, my apologies, this article will not cover that. Instead, I will add links to some pieces that I found helpful from which you can learn to create and deploy streamlit apps.

StreamLit - Data Scientist’s tool for developing web apps

Customizations

Before looking at the code for the customizations, assume that I have already imported the streamlit library as follows

Importing the Streamlit Library

Also, I will take an example web app to show you what the customizations will look like. The app that I will use is called “Surge Price Prediction”.

Surge Price Prediction App with default settings

Now, you have your streamlit app developed. But it looks plain and simple, and you have already seen many apps with the same white and red theme, the centre-aligned text, and the same theme buttons. What to do?

1. Horizontal Radio Button

Buttons are essential to streamlit as they let the user give inputs and enable interactions. One such button commonly used to represent categorical data is the radio button.

Code

Default Button

Vertical Button (Default)

By default, the radio buttons are vertical, and as you can see in the image, it takes up a lot of space which makes the website longer. Anything more than five buttons with 3–4 options, and you have to scroll down to see a complete application, which is not user-friendly.

We can change this layout by adding a “horizontal” argument in the code for each radio button. This will force the radio button to have horizontal options and save space.

New Code

Horizontal Radio Button

Horizontal Button

2. Wide Application Layout

Now, pay attention to the whole app. Can you see the white spaces on either side of the button? Wasted space, right?

Wasted Space in the browser window

We can have a better-looking layout where the entire browser area is utilised. We only need to add a line of code that will specify the layout as “wide” at the beginning of the code.

Code to add

New Layout(Wide)

Wide Layout

Doing this will save a lot of space, and the website will look more full. Though it is more of a personal preference, choose whatever suits your needs.

3. Multiple Columns

Again looking at the whole app, we can see that the content only goes from top to bottom or the website is entirely vertical. This looks monotonous and gets boring rather quickly. So we can spice it up by introducing some columns (horizontal elements).

Base syntax to add columns

Using this, you can have as many columns as you want on your website. I’ll add two columns, and let’s see how the app looks after that.

App with Two Columns(Looks Compact, right?)

4. Title and App Icon

This is straightforward enough. We can also add titles and icons to our website.

Default Title

Default Title and Icon

Code snippet to add title

Customized Title

To add an image, first, you need to save the image file in the same directory as your streamlit app script. After that, all you have to do is load that image using PIL and pass the image object to the st.set_page_config() method.

Code Snippet

New Icon And Title

5. Remove the Menu Button and Streamlit Icon

Another little thing that I feel is mandatory for any streamlit app is to remove the default Main-menu option(three dashes at the top right-hand corner) and also the footer note (‘Made with Streamlit’).

Menu and Footer (Default)

To do this, you must add some boiler code at the start of your app.

Code to add

6. Theme Customization

This is the section where we will discuss the colour scheme of Streamlit. First, take a look at the default colour scheme.

Default White and Red Theme

Now, to change the theme colour, you first have to create a file named “config.toml” and save it inside the directory named “.streamlit” and place this directory in the same directory as your python script for the streamlit app.

To do this, you can follow these steps.

1. First, create a directory named “.streamlit” within the directory that contains the python script for your web app (here, my python script is called SurgeApplication.py)
2. Create a “config.toml” file inside the directory “.streamlit”

A Visual Representation

Visual Representation of the desired structure

Now, you must add colour codes of different elements inside the config.toml, and your app will automatically update upon the next run.

Some elements that you can add inside the config file

1. “primaryColor”: Primary accent for interactive elements
2. “backgroundColor”: Background color
3. “secondaryBackgroundColor”: Background colour of the sidebar and interactive widgets
4. “textColor”: Color used for text

You can use “Hex Codes” to have precise colour choices.

An example of config.toml file

Once you create and save the config.toml file in the right location, re-run your web app, and the colours will update.

Our Custom Theme

Our Custom Theme

Conclusion

• So, we covered all the customization options in the streamlit library, from Button formats to colour schemes. Now you can truly create a unique web application.
• Congratulations, Try and use some of these customization techniques to give your old streamlit app a refreshing look and see how you can improve the user experience through such changes in the UI of a website.
• Follow me for more upcoming Data Science, Machine Learning, and artificial intelligence articles.

Final Thoughts and Closing Comments

There are some vital points many people fail to understand while they pursue their Data Science or AI journey. If you are one of them and looking for a way to counterbalance these cons, check out the certification programs provided by INSAID on their website. If you liked this story, I recommend you to go with the Global Certificate in Data Science & AI because this one will cover your foundations, machine learning algorithms, and deep neural networks (basic to advance).