Shulou(Shulou.com)06/02 Report--

How to use Python to build a simple UI, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

With the Streamlit framework, it has never been easier to use the user interface to present Python projects, and you can build browser-based UI using only Python code.

This demo will build UI for the labyrinth solver program.

Streamlit

Streamlit is a Web framework designed for data scientists to easily deploy models and visualization using Python. It runs fast and simple, and the code is beautiful and user-friendly.

They are built-in widgets for user input, such as image uploads, sliders, text input, and other familiar HTML elements such as check boxes and radio buttons. Every time a user interacts with a simplified application, the python script reruns from beginning to end, which is an important concept to keep in mind when considering the different states of the application.

Install Streamlit using pip:

Pip install streamlit

And run streamlit on the python script:

Streamlit run app.py

Use examples

I demonstrated how to build a Python program in my last article

(https://towardsdatascience.com/solving-mazes-with-python-f7a412f2493f), this program will solve the maze of a given image file and start / end position.

Now, I want to turn this program into a single-page Web application where users can upload maze images (or use default maze images), adjust the start and end positions of the maze, and view the final maze solution.

First, create a UI for the image uploader and select the option to use the default image. You can add text output using functions such as st.write () or st.title (), and use the st.file_uploader () function of streamlit to store dynamically uploaded files. Finally, st.checkbox () returns a Boolean value based on whether the user has selected the check box.

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)

Results:

You can then read the default image or uploaded image into the available OpenCV image format.

If use_default_image: opencv_image = cv2.imread (maze5.jpg) elif uploaded_file isnotNone: file_bytes = np.asarray (bytearray (uploaded_file.read ()), dtype=np.uint8) opencv_image = cv2.imdecode (file_bytes, 1)

After uploading an image, you want to display an image marked with a start and an end. The slider will be used to allow the user to relocate these points. The st.sidebar () function adds a sidebar to the page. St.slider () accepts digital input within the defined minimum and maximum values, and you can dynamically define the minimum and maximum values of the slider according to the size of the maze image.

If opencv_image isnotNone: st.subheader (Use the sliders on the left to position the start and endpoints) ststart_x = st.sidebar.slider ("Start X", value=24if use_default_image else50, min_value=0, max_value=opencv_image.shape [1], key= sx) ststart_y = st.sidebar.slider ("Start Y", value=332if use_default_image else100, min_value=0, max_value=opencv_image.shape [0] Key= sy) finish_x = st.sidebar.slider ("Finish X", value=309if use_default_image else100, min_value=0, max_value=opencv_image.shape [1], key= fx) finish_y = st.sidebar.slider ("Finish Y", value=330if use_default_image else100, 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, (0Med 255),-1) cv2.circle (marked_image, (finish_x, finish_y), circle_thickness (255 RGB 0)-1) st.image (marked_image,channels= "RGB", width=800)

Whenever you adjust the slider, the image is quickly re-rendered, and the point changes position.

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

If marked_image isnotNone: 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]) / / 200maze.drawPath (pathed_image,path, path_thickness) st.image (pathed_image,channels= "RGB", width=800)

Streamlit buttons and spinner

Show solved maze

Look, without writing any traditional front-end code, we created a simple UI for the Python image processing application in less than 40 lines of code.

In fact, in addition to being able to digest simple Python code, Streamlit intelligently reruns the necessary parts of the script from top to bottom, regardless of whether the user interacts with the page or changes the script, enabling direct data flow and rapid development, which makes everything easy!

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.