如何使用Python構建簡單的UI

如何使用Python構建簡單的UI，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

借助Streamlit框架，使用用戶界面展示Python項目變得前所未有的簡單，你可以僅僅使用Python代碼來構建基于瀏覽器的UI。

本次演示將為迷宮求解器程序構建UI。

Streamlit

Streamlit是一種Web框架，旨在供數據科學家使用Python輕松部署模型和可視化。它運行速度既快又簡約，代碼既漂亮又對用戶友好。

它們是有用于用戶輸入的內置小部件，例如圖像上載、滑塊、文本輸入，以及其他熟悉的HTML元素(例如復選框和單選按鈕)。每當用戶與簡化的應用程序進行交互時，python腳本就會從頭到尾重新運行，這是在考慮應用程序的不同狀態時要記住的重要概念。

使用pip安裝Streamlit：

Pip install streamlit

并在python腳本上運行streamlit：

Streamlit run app.py

使用例子

我在上一篇文章中演示構建了一個Python程序

(https://towardsdatascience.com/solving-mazes-with-python-f7a412f2493f)，該程序將解決給定圖像文件和起始/結束位置的迷宮。

現在，我希望將此程序變成一個單頁Web應用程序，用戶可以在其中上傳迷宮圖像(或使用默認迷宮圖像)，調整迷宮的開始和結束位置，并查看最終解決的迷宮。

首先，為圖像上傳器創建UI，并選擇使用默認圖像的選項。可以使用st.write()或st.title()之類的函數添加文本輸出，使用streamlit的st.file_uploader()函數存儲動態上傳的文件。最后，st.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 )

結果：

然后，可以將默認圖像或上傳的圖像讀取為可用的OpenCV圖像格式。

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)

上載圖像后，要顯示標記有起點和終點的圖像。將使用滑塊允許用戶重新定位這些點。st.sidebar()函數在頁面上添加了一個側邊欄，st.slider()在定義的最小值和最大值內接受數字輸入，你可以根據迷宮圖像的大小動態定義滑塊的最小值和最大值。

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, (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)

每當用戶調整滑塊時，圖像都會快速重新渲染，并且點會更改位置。

一旦用戶確定了開始位置和結束位置，就需要一個按鈕來解決迷宮并顯示解決方案。僅在其子進程運行時顯示st.spinner()元素，并且使用st.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])//200                     maze.drawPath(pathed_image,path, path_thickness)                     st.image(pathed_image,channels="RGB", width=800)

Streamlit按鈕和微調器

顯示解決的迷宮

瞧瞧，不需要編寫任何傳統的前端代碼，我們用不到40行代碼為Python圖像處理應用程序創建了一個簡單的UI。

事實上，  Streamlit除了能夠消化簡單的Python代碼之外，無論用戶與頁面進行交互還是更改了腳本，Streamlit都會從上至下智能地重新運行腳本的必要部分，這樣可以實現直接的數據流和快速開發，它讓一切變得簡單!

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。