本文转载自公众号《核心阅读》（ID：AI_Discovery）。使用Streamlit框架，使用用户界面显示Python项目从未如此简单，您可以仅使用Python代码构建基于浏览器的UI。该演示将为迷宫求解器程序构建UI。StreamlitStreamlit是一个Web框架，专为数据科学家设计，可以使用Python轻松部署模型和可视化。它速度快，体积小，代码美观且用户友好。它们是用于用户输入的内置小部件，例如图像上传、滑块、文本输入和其他熟悉的HTML元素，例如复选框和单选按钮。每当用户与简化的应用程序交互时，python脚本都会从头到尾重新运行，这是在考虑应用程序的不同状态时要牢记的一个重要概念。使用pip安装Streamlit：Pipinstallstreamlit并在python脚本上运行streamlit：Streamlitrunapp.py使用示例我在之前的文章中演示了构建Python程序（https://towardsdatascience.com/solving-mazes-with-python-f7a412f2493f），该程序将解决一个给定图像文件和开始/结束位置的迷宫。现在，我想把这个程序变成一个单页Web应用程序，用户可以在其中上传迷宫图像（或使用默认的迷宫图像），调整迷宫的开始和结束位置，并查看最终的迷宫解决方案。首先，为图像上传器创建UI并选择使用默认图像的选项。可以使用st.write()或st.title()等函数添加文本输出，并且可以使用streamlit的st.file_uploader()函数存储动态上传的文件。最后，st.checkbox()将根据用户是否选中复选框返回一个布尔值。importstreamlitassstimportcv2importmatplotlib.pyplotaspltimportnumpyasnpimportmazest.title(MazeSolver)uploaded_file=st.file_uploader("Chooseanimage",["jpg","jpeg","png"])#imageuploaderst.write(Or)use_default_image=st.checkbox(Usedefaultmaze)结果，其中可以将默认图像或上传的图像读取为可用的OpenCV图像格式。ifuse_default_image:opencv_image=cv2.imread(maze5.jpg)elifuploaded_fileisnotNone:file_bytes=np.asarray(bytearray(uploaded_file.read()),dtype=np.uint8)opencv_image=cv2.imdecode(file_bytes,1)上传图片后，to显示标有起点和终点的图像。滑块将用于允许用户重新定位这些点。st.sidebar()函数为页面添加侧边栏，st.slider()接受定义的最小值和最大值内的数字输入，可以根据滑块的大小动态定义滑块的最小值和最大值迷宫图像值。ifopencv_imageisnotNone:st.subheader(Usetheslidersonthelefttopositionthestartandendpoints)ststart_x=st.sidebar.slider("StartX",value=24ifuse_default_imageelse50,min_value=0,max_value=opencv_image.shape[1],key=sx)ststart_y=st.sidebar.slider("StartY",value=332ifuse_default_imageelse100,min_value=0,max_value=opencv_image.shape[0],key=sy)finish_x=st.sidebar.slider("FinishX",value=309ifuse_default_imageelse100,min_value=0,max_value=opencv_image.shape[1],key=fx)finish_y=st.sidebar.slider("FinishY",value=330ifuse_default_imageelse100,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#circlethicknessbasedonimgsizecv2.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()调用显示图像。ifmarked_imageisnotNone:ifst.button(SolveMaze):withst.spinner(Solvingyourmaze):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)Streamlitbuttonsandspinnersshowthesolvedmazeandvoila,没有编写任何传统的前端代码，我们用不到40行代码为Python图像处理应用程序创建了一个简单的UI。事实上，除了能够消化简单的Python代码外，无论是用户与页面交互还是更改脚本，Streamlit都会自上而下智能地重新运行脚本中必要的部分，可以实现数据的直接流转和快速开发，它让一切变得简单！
