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. In this demo, we will be building a UI for a maze solver program, described in detail in a previous article.

Streamlit

Streamlit is a web framework intended for data scientists 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.

import streamlit as st
import cv2
import matplotlib.pyplot as plt
import numpy as np
import maze

st.title('Maze Solver')
uploaded_file = st.file_uploader("Choose an image", ["jpg","jpeg","png"]) #image uploader
st.write('Or')
use_default_image = st.checkbox('Use default maze')

#programming #coding #ui #data-science #python