从零开始，搭建基于PaddlePaddle图像分割模型的Web应用

以下是基于PaddlePaddle（PaddleSeg）搭建图像分割Web应用的完整流程，涵盖模型部署、前后端开发及测试全流程：

本项目采用BS架构，前端基于HTML/CSS/JavaScript实现基础页面，后端使用Flask框架处理图像分割请求。核心流程为：用户上传图片→后端调用PaddleSeg模型预测→返回分割结果→前端展示。

1. 部署方式选择采用简化版Paddle Serving方案，直接通过Python脚本调用PaddleSeg模型，避免复杂的服务化配置。实际生产环境建议使用Paddle Serving或Paddle Inference优化性能。

2. 模型准备

   下载预训练模型（如PSPNet）：!unzip -q data/data79814/PaddleSeg.zip -d work

   模型文件需包含：

   model.pdparams（模型参数）

   pspnet.yml（配置文件）

前端包含4个核心页面，均使用原生HTML/CSS实现：

1. 主页（index.html）

   功能：项目介绍、导航至上传页面

   关键代码：<h1>Image Segmentation Demo</h1><a href="/upload">Upload Image</a>

2. 上传页面（upload.html）

   功能：文件选择与提交

   关键代码：<form action="/predict" method="post" enctype="multipart/form-data"> <input type="大坦森file" name="img" accept="image/*"> <button type="submit">Upload</button></form>

3. 结果页面（result.html）

   功能：展示原图与分割结果对比

   关键代码：<div id="result"> <img src="saved_files/img.png" width="300"> <img src="saved_imgs/pseudo_color_prediction/img.png" width="300"></div>

4. 状态页面（success/fail.html）

   成功页：提供结果查看链接

   失败页：显示错误信息

1. 环境配置

   pip install Flask -i
   https://mirror.baidu.com/pypi/simple

2. 核心路由实现

   根路由（/）：返回主页

   上传路由（/upload）：渲染上传页面

   预测路由（/predict）：@app.route('/predict', methods=['POST'])def predict(): if 'img' not in request.files: return render_template('fail.html', message="No file uploaded") file = request.files['img'] # 保存文件并调信闷用预测脚本 os.system(f"python work/PaddleSeg/predict.py --image_path {file_path} --model_path ./model.pdparams") return render_template('success.html')

3. 预测脚本（predict.py）

   from PaddleSeg.core import predictimport argparseparser = argparse.ArgumentParser()parser.add_argument('--image_path', type=str)parser.add_argument('--model_path', type=str)args = parser.parse_args()predict( model_path=args.model_path, image_path=args.image_path, save_dir='saved_imgs', config_file='pspnet.yml')

1. 启动命令

   export FLASK_APP=app.pyflask run --host=0.0.0.0 --port=5000

2. 本地测试

   访问

   http://127.0.0.1:5000

   上传图片后自动跳转至结果页

3. AI Studio测试（通过curl）

   启动服务后执行：curl -F "img=@/home/aistudio/test.png"

   http://127.0.0.1:5000/predictcurl
   http://127.0.0.1:5000/result

1. 跨域问题在Flask中添加CORS支持：

   from flask_cors import CORSapp = Flask(__name__)CORS(app)

2. 大文件上传限制修改Flask配置：

   app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 16MB

3. 异步处理优化使用Celery实现预测任务异步化，避免前端长时间等待。

1. 模型服务化

   使用Paddle Serving部署高性能服务

   启用gRPC协议提升吞吐量

2. 前端框架升级替换为Vue/React实现动态交互，例如：

   实时预览上传图片

   多图批量处理

3. 容器化部署

   FROM python:3.8COPY . /appWORKDIR /appRUN pip install -r requirements.txtCMD ["flask", "run", "--host=0.0.0.0"]

通过以上步骤，可快速搭建一个基础图像分割Web应用。实际开发中需根据需求扩展功能，如添加用户认证、支持更多模型格式等。