本项目介绍如何从零开始搭建一个基于PaddlePaddle的图像分割模型的Web应用。模型将以PaddleSeg训练的模型为例，以此讲解Paddle模型在Web上的一种应用方式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
1. 项目简介
本项目介绍如何从零开始搭建一个基于PaddlePaddle的图像分割模型的Web应用。模型将以PaddleSeg训练的模型为例，以此讲解Paddle模型在Web上的一种应用方式。1.1 模型部署
模型训练好后就需要完成模型的部署了。这是模型落地的一项重要工作。
目前Paddle模型部署有如图1所示的几种不同方式。
图1 Paddle模型部署的几种方式
本项目所用方式类似于第二种Paddle Serving的方式，但是又不借助于Paddle Serving，而是采用更加直观简易的方式，只用于跑通流程，实际生产中需要做进一步开发。
1.2 Web应用
基于BS架构的Web应用是一种非常流行的模型部署方式。Web应用具有迭代更新简单快捷，用户使用方便等优点。
Web应用系统的搭建分为前端开发和后端开发两部分。其中前端开发负责浏览器端的界面设计、实现和用户交互的逻辑实现。后端开发负责服务器端的逻辑开发及对用户请求的响应实现。Web前后端的关系如图2所示。
图2 Web前后端关系示意图
2. Web前端开发
本项目的前端开发基于HTML、CSS和JavaScript实现。由于目的是讲解开发流程，这里并没有采用前端的开发框架，例如Vue、React、Angular等。在实际中可以根据需要采用适合自己的解决方案。本项目的Web应用页面包括如下几个方面：
2.1. 主页。
项目主页如图3所示。
图3 项目主页
2.2. 上传图片页面。
上传图片的页面如图4所示。用户可以在该页面上上传需要图像分割的图片。
图4 上传图片页面
2.3. 预测成功页面。
预测成功的页面如图5所示。用户可以在该页面点击分割结果的超链接。
图5 预测成功的页面
2.4. 预测失败页面。
预测失败的页面如图6所示。如果预测过程不能顺利进行，用户将看到该预测失败的页面。
图6 预测失败的页面
2.5. 预测结果的图片。
预测结果的展示页面如图7所示。用户可以在该页面上看到预测结果的图片。
图7 预测结果展示页面
以上就是本项目中的前端页面，对应的具体页面代码可在flask文件夹中找到。
3. Web后端开发
本项目后端采用Flask框架实现。
3.1 安装Flask
安装前可以根据需要决定是否用conda或virtualenv创建自己的虚拟环境。然后可以使用如下命令安装：
$ pip install Flask
In [ ]
!pip install Flask -i https://mirror.baidu.com/pypi/simple
3.2 开发Flask工程
Flask是基于python的一个Web后端框架，我们只需要根据不同的前端页面配置好不同的路由和根据不同的路由实现不同的逻辑功能就可以了。具体实现可以fork后见代码细节。这里解压缩事先开发好的代码。
In [ ]
## 解压缩PaddleSeg !unzip -q data/data79814/PaddleSeg.zip -d work
In [ ]
## 解压缩flask代码 !unzip -q data/data79814/flask.zip -d flask
3.3 启动Flask应用
我们只需要在Flask工程目录下运行如下命令就可以了。其中的app.py就是我们的flask入口程序了。
$ export FLASK_APP=app.py $ flask run
由于notebook中启动server后就没有进程进行其它操作了，这里我们在终端启动flask程序,如下图8所示。这样，我们就启动了一个入口地址为http://127.0.0.1:5000/的Web应用程序。
图8 Flask服务器启动示意图
3.4 测试图像分割效果
我们访问入口页面http://127.0.0.1:5000/，然后按照提示完成图片的上传，稍等片刻，就可以看到图像分割的结果了，如上面的图7所示。
3.5 在AI Studio中测试图像分割效果
由于AI Studio中无法访问Web应用，我们通过终端termianl启动我们的Flask应用后，可以使用curl命令测试我们的图像分割结果，如下所示。
3.5.1 先在AI Studio中直接测试下
In [1]
## 开始预测并保存预测后的图片 %cd flask !python /home/aistudio/work/PaddleSeg/predict.py --image_path saved_files \ --model_path ./model.pdparams \ --save_dir saved_imgs \ --crop_size 512 512 \ --config pspnet.yml
3.5.2 通过curl测试Flask应用
In [8]
## 启动分割 !curl -F "img=@/home/aistudio/img.png" http://127.0.0.1:5000/save
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>success</title> <style> div { margin: 20vh auto; text-align: center; } </style> </head> <body> <div> <h2>Segmentation Successful!</h2> <h3><a href="/result">View Result</a></h3> <h3><a href="/">Back to Homepage</a></h3> </div> </body> </html>In [9]
## 查看结果 !curl http://127.0.0.1:5000/result
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>result</title> <style> div { margin: 10vh auto; text-align: center; } #result { width: 700px; display: flex; justify-content: space-around; } </style> </head> <body> <div> <h2>Segmentation Result!</h2> <div id="result"> <div> <img src="saved_files/img.png", width="300" alt="segmentation image"> </div> <div> <img src="saved_imgs/pseudo_color_prediction/img.png", width="300" alt="segmentation result"> </div> </div> <h3><a href="/">Back to Homepage</a></h3> </div> </body> </html> 
