User interface (UI) is the point where a User Interacts with a Machine using Mouse, Keyboard, or even touch screens and other input sources. The goal of an effective user interface is to make the experience of a user very simple and interactive, requiring minimal effort from the user to achieve the maximum desired results. Python being a general-purpose programming language provides packages for almost every task. Let’s see how we can create a User Interface with Python.
By using the Streamlit package in Python, we can easily create a browser-based user interface using Python. In this article, I’ll walk you through how to create a user interface with Python for a maze-solving program.
Using Streamlit for User Interface with Python
Streamlit is a web framework for data scientists to easily deploy models and visualizations using a User Interface using Python. It’s fast and minimalist, but also pretty and user-friendly. Each time a user interacts with the streamlit application, the python script is a rerun from top to bottom, an important concept to keep in mind when examining the different states of your application.
You can easily install Streamlit like we install other packages using a pip command – pip install streamlit. I hope you have installed this package successfully, so now let’s get our hands dirty by exploring the User Interface with Python.
Let’s start by creating the UI for the Image Uploader and the option to use a default image. We can add text output using functions like st.write () or st.title (). We store a dynamically uploaded file using streamlit’s st.file_uploader () function:
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')Code language: Python (python)
We can then play our default or downloaded image in a usable OpenCV image format:
if use_default_image:
opencv_image = cv2.imread('maze.jpg')
elif uploaded_file is not None:
file_bytes = np.asarray(bytearray(uploaded_file.read()), dtype=np.uint8)
opencv_image = cv2.imdecode(file_bytes, 1)Code language: Python (python)Once an image is uploaded, we want to show the marked image with start and endpoints. We will use cursors to allow the user to reposition these points. We can dynamically set the minimum and maximum values ​​for the cursor based on the size of our maze image:
if opencv_image is not None:
st.subheader('Use the sliders on the left to position the start and end points')
start_x = st.sidebar.slider("Start X", value= 24 if use_default_image else 50, min_value=0, max_value=opencv_image.shape[1], key='sx')
start_y = st.sidebar.slider("Start Y", value= 332 if use_default_image else 100, min_value=0, max_value=opencv_image.shape[0], key='sy')
finish_x = st.sidebar.slider("Finish X", value= 309 if use_default_image else 100, min_value=0, max_value=opencv_image.shape[1], key='fx')
finish_y = st.sidebar.slider("Finish Y", value= 330 if use_default_image else 100, min_value=0, max_value=opencv_image.shape[0], key='fy')
marked_image = opencv_image.copy()
circle_thickness=(marked_image.shape[0]+marked_image.shape[0])//2//100 #circle thickness based on img size
cv2.circle(marked_image, (start_x, start_y), circle_thickness, (0,255,0),-1)
cv2.circle(marked_image, (finish_x, finish_y), circle_thickness, (255,0,0),-1)
st.image(marked_image, channels="RGB", width=800)Code language: Python (python)
Each time the user adjusts the sliders, the image is quickly rendered and the points change position. Once the user has finalized the start and end positions, then we can add a button to solve the maze and display the solution:
if marked_image is not None:
if st.button('Solve Maze'):
with st.spinner('Solving your maze'):
path = maze.find_shortest_path(opencv_image,(start_x, start_y),(finish_x, finish_y))
pathed_image = opencv_image.copy()
path_thickness = (pathed_image.shape[0]+pathed_image.shape[0])//200
maze.drawPath(pathed_image, path, path_thickness)
st.image(pathed_image, channels="RGB", width=800)Code language: Python (python)
Also, Read – Sentiment Analysis with Machine Learning.
While creating a User interface with python, streamlit intelligently reruns the necessary parts of your script from top to bottom whenever the user interacts with the page of the script is changed.
This allows for simple data flow and rapid development. I hope you liked this article on User Interface with Python. Feel free to ask your valuable questions in the comments section below. You can also follow me on Medium to learn every topic of Machine Learning.
Also, Read – Data Science Vs. Data Engineering.
