How To Create Ui Design In Python

Building a Simple UI with Python

Showcasing a Python project with a user interface has never been easier. With the Streamlit framework you can build a browser-based UI using only Python code. In this demo, we will be building the UI for a maze solver program described in detail in a previous article.

Streamlit

Streamlit is a web framework intended for data scient i sts to easily deploy models and visualizations using Python. It is fast and minimalistic but also pretty and user-friendly. There are built-in widgets for user input like image-uploading, sliders, text input, and other familiar HTML elements like checkboxes and radio buttons. Whenever a user interacts with the streamlit application, the python script is re-run from top to bottom, an important concept to keep in mind when considering different states of your app.

You can install Streamlit with pip:

          pip install streamlit

And run streamlit on a python script:

          streamlit run app.py

Use Case

In the previous demo, we built a Python program that will solve a maze given an image file and starting/ending locations. We would like to turn this program into a single-page web app where a user can upload a maze image (or use a default maze image), adjust the maze start and end locations, and see the final solved maze.

First, let's create the UI for the image uploader and the option to use a default image. We can add text outputs using functions like st.write() or st.title(). We store a dynamically uploaded file using streamlit's st.file_uploader() function. Finally, st.checkbox() will return a boolean based on whether the user has selected the checkbox.

The result:

We can then read our default or uploaded image into a usable OpenCV image format.

Once an image is uploaded, we want to show the image marked up with starting and ending points. We will use sliders to allow the user to reposition these points. The st.sidebar() function adds a sidebar to the page and st.slider() takes numerical input within a defined minimum and maximum. We can define slider minimum and maximum values dynamically based on the size of our maze image.

Whenever the user adjusts the sliders, the image is quickly re-rendered and the points change position.

Once the user has finalized the start and end positions, we want a button to solve the maze and display the solution. The st.spinner() element is displayed only while its child process is running, and the st.image() call is used to display an image.

Summary

In less than 40 lines of code we have created a simple UI for a Python image processing app. We did not need to write any traditional front-end code. Besides Streamlit's ability to digest simple Python code, Streamlit intelligently re-runs the necessary parts of your script from top to bottom whenever the user interacts with the page or the script is changed. This allows for straightforward data flow and rapid development.