如何使用Python构建简单的UI?

云栖号资讯:【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!

如何使用Python构建简单的UI?

借助Streamlit框架,使用用户界面展示Python项目P d W ? Z j Q v变得前所未有的简单,你可以仅仅使用Python代码来构建基于浏览器的UI。

本次演示将为迷宫求解器W E + N程序构建UI。

Streamlit

Streamlit是一种Web框架,旨在供数u , J ~ l ] m据科学家使用Python轻松部署模型和可视化。它运行速度y J B @ 8 l ; ` c既快又简约,代码既漂亮又对用户友好。

它们是有用于用户输入的内置小部件,例如图像上载、滑块、文本输入,以及其他熟悉的HTML元素(例如复选框和单选按钮)。每当用户与简化] g T f的应用程序进行交互时,python脚本就会从头到尾重新运行,这是在考虑应用程序的不同状态时要记住的重要概念。

使用pip安装Streamlit:

Pip install strea[ f } w 1 (mlit

并在python脚本上运行streamlit:

Streamlit run app.py2  2 + H D S v {

使用例子

我在上一篇文章中演示E & w k p W Z构建了一个Python程序,该程序将解决给定图像文件和起始/结束位置的迷宫。

现在,我希望将此程序变成一个单页Web应用程序,用户可以在其中上传迷宫图像(或使用默认迷宫图像),调整迷宫的开始和结束位置,并查看最终解决的迷宫。

首先,为图像上传器创建UI,并选择使用默认图像的选项。可以使用st.write()或st.title()之类的函数添加文本输出,使用streamlit的st.file_uploader()函数存储动态上传的文件。最后,j V 8 ? F _st.checkbox()将根据用户是否已选中复选框返回- . d W ?一个布尔值。

import streamlit as sT A ut
import cv2
import matplotlib.pyplot as plt
import nump| 3 o K : @y as np
import maze
st.title( Maze Solver )
uploaded_file = st.file_uploader("Choose an image", ["jpg","jpeg","png"]) #iC ` 6 1 `mage uploa6 { p J hdeS W x Dr
st.write( Or )
use_default_ima9 5 x ~ 3 8ge = st.checkbox( Use default maze )

结果:

如何使用Python构建简单的UI?

然后,可以将默认图像或上传的图像读取为可用的OpenCV图像格式。

if use_default_image:
opencv_image = cv2.imread( maze5.jpg )
elif uploaded_file isnotNone:
file_bytes = np.asT x L S xarray(bytearray(uploaded_file.read()), dtype=np.uint8)
opencv_W X j / Z T Cimage = cv2.imdecode(file_bytes, 1)

上载图像后,要显示标记有z P 5 # A !起点和终点的图像。将使用滑块允许用户重新定位这些点。st.sidebar()函数在页面上添加了一个侧边栏,st.slider()在定义的最小值和最大值内d J ! U D i接受数字输入,你可以根据迷宫图像的大小动态定义滑块的最小值和最大值。

if opencv_image isnott r ~None:
st.subheader( Use the slidd % K O ( . 3 -ers on the left to position the start and endpoints )
start_x = st.sidebar.slider("Start X3 5 g ; y ; 9 3", value=24if use_default_image  elsee [ Q @ _ Q 1 -50, min_value=0, max_value=opencv_$ r r 9 r G 7 /imv C ! { a q % dage.shape[1], key= sx )
start_y = st.sidebar.slider(m u N { H"Start Y", valueO D 3 & 5 p = $=332if use_default_image  else100, min_value=0, max_value=opencv_image.sB E 9 z ) k ghape[0], key= sy )
finish_x? M Y 7 _  ? = st.sidebar.slider("Finish X", value=309if use_default_image  else100, min_] [ M 6 , n 1 p 1value=0, max_value=opencv_image.shape[1], key= fx )
finish6 G ! D 1 1_r z { j qy = st.sidebar.slider(U + e & { x P O ["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_ima$ w 0 4 ~ =ge.shape[0]+marked_image.shape[0])//2//100#circle thickness based on img size
cv2.circle(marked_H 1 X z 5 #image,(start_x, start. T + r T ? `_J z Ky), circle_thickN &  VnL 4 U $ + Fess, (0,255,0),-1)
cv2.circle(marked_image,(finish_x, finish_y), circle_thickness, (255,0,0),-1)
st.image(m$ N barked_image,channels="RGB", width=800)

如何使用Python构建简单的UI?

每当用户调整? 7 ; n [ K L 0 L滑块时,图像都会快速重新渲染,并且点会更改位置。

一旦R ` + ( l r用户确定了开始位置和结束位置,[ [ A就需要一个按钮来解决迷宫并显示解决方案。仅在其子进程运行时显示st.spinner()元素,并且使* D O # R用st.image()调用S U f 8 7 k oM } 7 5 Z W示图像。

if marked_image isnotN+ Y 8one:
if st.button( Solve Maze ):
with st.spinner- E X ( Solving your maze ):
path = maze.find_shortest_path(= ) d i | ] @ [opencvf = }_image,(start_x,start_y),(finish_x, finish_y))
pathed_image = opencv_image.copy()
path_thickness = (pathed_image.shape[0]+pathed_image.shape[5 ( : } 6 . g M 10])//200
maze.drawPath(pathed_image,path, path_thickness)
st.image(pag s hthed_image,channels="RGB",k l X S D width=800)

如何使用Python构建简单的UI?

Streamlit按钮和微调器

如何使用Python构建简单的UI?

显示解x ` I f 决的迷宫

瞧瞧,不需要编写任何传统的前端代码,我们用不到40行代码为Python图像处理应用程序创建了一个简单的UI} N f

如何使用Python构建简单的UI?

事实上, Streamlit除了能够消化简单的Python代码之外,3 X O R 8无论用户与页面进行交互还是更改了脚本,Streamlit都会从上至下智能地重新运行脚本的必要部分,s W d t这样可以实现直接1 * N - Q的数据流和快速开发,它让一切变得简单!

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.2 $ % m : 7com/live

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-07-28
本文作者:读芯术
本文来自:“读芯术公j e 8 t J - ^ n r众号”8 v N 2 m ,了解相关信息可以关注“读芯术”