Discover Streamlit - Building a quick GUI

Ndominutti
3 min readMar 8, 2021

--

Photo by goodfon on wallhere

Have you ever worked in a data project that involves periodic updates made by non-technical users? Have you ever tried to make the Tkinter GUI look cool with no luck at it? If you answered yes to this two questions, you can relate to this post.

Some weeks ago at my job I ran into a problem, I had to prototype and deliver -in a very little time- a GUI for an updating flow that involved a webscrapping + data processing pipeline to feed several dashboards developed on PowerBI. This GUI should be ready to plug and play for a group of non-technical users, and it must meet two main requirements:

  • it should have an engaging and easy-to-follow UI/UX
  • it should run all the process locally

I had used Tkinter in another projects before, but this time I was looking for something cooler. The problem? I didn’t had time to deal with HTML, CSS & Javascript myself, luckily Streamlit came to my rescue.

As the developement team mentions on the project’s web “Streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science.” And I can tell you, it’s really easy to use and it rocks! 🤘

So, let see how to create a really simple begginer Streamlit app:

Before we start we should install streamlit, I did it using pip

pip install streamlit

Now we can think about our GUI, first of all I want my app to have an image as a background, and I can make it possible thanks to Streamlit’s markdown feature

To visualize the code running, we call streamlit to run our .py file

streamlit run YourFile.py

You will have now something like this runing in your localhost:8501

Then, we can add some text and require some files inputs from the user

One cool fact: streamlit has the power to update everytime we change the code without having to run it again

Applying these adjustments, we will now have this layout running

Finally we might want to add a ‘run’ button, and it’s at simple as this

And, after 3 minutes, we will end up with a GUI like this one

Then, I would catch the submit response, check for the uploaded file’s name and run the process.

Further useful ideas for a robust UX/UI:

  • Add a progressbar to show the user that the app is working OK when some process is running (check this link)
  • A sidebarwith selectboxcan be added to deploy another sections in the same GUI (check this link)

On my side, I ended up designing a multi-process GUI with a sidebar on it and creating an .exe file with PyInstaller to launch the app, so the end user can make the updates completely code-free.

Posibilities are up to your creativity.

--

--

Ndominutti
Ndominutti

Written by Ndominutti

Machine Learning Developer with 3+ years experience in building data-driven solution on +5 industries as e-commerce, health care & CPG

No responses yet