建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。
創(chuàng)新互聯(lián)公司科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供成都電信服務(wù)器托管，高防物理服務(wù)器租用，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。
借助Streamlit框架，使用用戶界面展示Python項(xiàng)目變得前所未有的簡單，你可以僅僅使用Python代碼來構(gòu)建基于瀏覽器的UI。
本次演示將為迷宮求解器程序構(gòu)建UI。
Streamlit
Streamlit是一種Web框架，旨在供數(shù)據(jù)科學(xué)家使用Python輕松部署模型和可視化。它運(yùn)行速度既快又簡約，代碼既漂亮又對(duì)用戶友好。
它們是有用于用戶輸入的內(nèi)置小部件，例如圖像上載、滑塊、文本輸入，以及其他熟悉的HTML元素(例如復(fù)選框和單選按鈕)。每當(dāng)用戶與簡化的應(yīng)用程序進(jìn)行交互時(shí)，python腳本就會(huì)從頭到尾重新運(yùn)行，這是在考慮應(yīng)用程序的不同狀態(tài)時(shí)要記住的重要概念。
使用pip安裝Streamlit：
- Pip install streamlit
并在python腳本上運(yùn)行streamlit：
- Streamlit run app.py
使用例子
我在上一篇文章中演示構(gòu)建了一個(gè)Python程序
(https://towardsdatascience.com/solving-mazes-with-python-f7a412f2493f)，該程序?qū)⒔鉀Q給定圖像文件和起始/結(jié)束位置的迷宮。
現(xiàn)在，我希望將此程序變成一個(gè)單頁Web應(yīng)用程序，用戶可以在其中上傳迷宮圖像(或使用默認(rèn)迷宮圖像)，調(diào)整迷宮的開始和結(jié)束位置，并查看最終解決的迷宮。
首先，為圖像上傳器創(chuàng)建UI，并選擇使用默認(rèn)圖像的選項(xiàng)。可以使用st.write()或st.title()之類的函數(shù)添加文本輸出，使用streamlit的st.file_uploader()函數(shù)存儲(chǔ)動(dòng)態(tài)上傳的文件。最后，st.checkbox()將根據(jù)用戶是否已選中復(fù)選框返回一個(gè)布爾值。
- 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 )
結(jié)果：
然后，可以將默認(rèn)圖像或上傳的圖像讀取為可用的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)
上載圖像后，要顯示標(biāo)記有起點(diǎn)和終點(diǎn)的圖像。將使用滑塊允許用戶重新定位這些點(diǎn)。st.sidebar()函數(shù)在頁面上添加了一個(gè)側(cè)邊欄，st.slider()在定義的最小值和最大值內(nèi)接受數(shù)字輸入，你可以根據(jù)迷宮圖像的大小動(dòng)態(tài)定義滑塊的最小值和最大值。
- 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)
每當(dāng)用戶調(diào)整滑塊時(shí)，圖像都會(huì)快速重新渲染，并且點(diǎn)會(huì)更改位置。
一旦用戶確定了開始位置和結(jié)束位置，就需要一個(gè)按鈕來解決迷宮并顯示解決方案。僅在其子進(jìn)程運(yùn)行時(shí)顯示st.spinner()元素，并且使用st.image()調(diào)用顯示圖像。
- 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按鈕和微調(diào)器
顯示解決的迷宮
瞧瞧，不需要編寫任何傳統(tǒng)的前端代碼，我們用不到40行代碼為Python圖像處理應(yīng)用程序創(chuàng)建了一個(gè)簡單的UI。
事實(shí)上， Streamlit除了能夠消化簡單的Python代碼之外，無論用戶與頁面進(jìn)行交互還是更改了腳本，Streamlit都會(huì)從上至下智能地重新運(yùn)行腳本的必要部分，這樣可以實(shí)現(xiàn)直接的數(shù)據(jù)流和快速開發(fā)，它讓一切變得簡單!
當(dāng)前標(biāo)題：如何使用Python構(gòu)建簡單的UI？
文章位置：http://www.5511xx.com/article/dpiscoh.html
