新闻中心

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

2025-07-18
浏览次数：次
返回列表
本项目介绍如何从零开始搭建一个基于PaddlePaddle的图像分割模型的Web应用。模型将以PaddleSeg训练的模型为例，以此讲解Paddle模型在Web上的一种应用方式。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

从零开始，搭建基于paddlepaddle图像分割模型的web应用 -

1. 项目简介

本项目介绍如何从零开始搭建一个基于PaddlePaddle的图像分割模型的Web应用。模型将以PaddleSeg训练的模型为例，以此讲解Paddle模型在Web上的一种应用方式。

1.1 模型部署

模型训练好后就需要完成模型的部署了。这是模型落地的一项重要工作。

目前Paddle模型部署有如图1所示的几种不同方式。

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

图1 Paddle模型部署的几种方式

本项目所用方式类似于第二种Paddle Serving的方式，但是又不借助于Paddle Serving，而是采用更加直观简易的方式，只用于跑通流程，实际生产中需要做进一步开发。

1.2 Web应用

基于BS架构的Web应用是一种非常流行的模型部署方式。Web应用具有迭代更新简单快捷，用户使用方便等优点。

Web应用系统的搭建分为前端开发和后端开发两部分。其中前端开发负责浏览器端的界面设计、实现和用户交互的逻辑实现。后端开发负责服务器端的逻辑开发及对用户请求的响应实现。Web前后端的关系如图2所示。

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

图2 Web前后端关系示意图

2. Web前端开发

本项目的前端开发基于HTML、CSS和J*aScript实现。由于目的是讲解开发流程，这里并没有采用前端的开发框架，例如Vue、React、Angular等。在实际中可以根据需要采用适合自己的解决方案。本项目的Web应用页面包括如下几个方面：

2.1. 主页。

项目主页如图3所示。

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

图3 项目主页

2.2. 上传图片页面。

上传图片的页面如图4所示。用户可以在该页面上上传需要图像分割的图片。

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

图4 上传图片页面

2.3. 预测成功页面。

预测成功的页面如图5所示。用户可以在该页面点击分割结果的超链接。

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

图5 预测成功的页面

2.4. 预测失败页面。

预测失败的页面如图6所示。如果预测过程不能顺利进行，用户将看到该预测失败的页面。

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

美图云修 美图云修

商业级AI影像处理工具

美图云修 50 查看详情 美图云修

图6 预测失败的页面

2.5. 预测结果的图片。

预测结果的展示页面如图7所示。用户可以在该页面上看到预测结果的图片。

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

图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应用程序。

从零开始，搭建基于PaddlePaddle图像分割模型的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 s*ed_files \ --model_path ./model.pdparams \ --s*e_dir s*ed_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/s*e
<!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>                 @@##@@             </div>             <div>                 @@##@@             </div>         </div>              <h3><a href="/">Back to Homepage</a></h3>     </div> </body> </html>
从零开始，搭建基于PaddlePaddle图像分割模型的Web应用从零开始，搭建基于PaddlePaddle图像分割模型的Web应用

以上就是从零开始，搭建基于PaddlePaddle图像分割模型的Web应用的详细内容，更多请关注其它相关文章！


# 表单  # 企业网站推广威訫hfqjwl做词  # 黄石seo搜索推广地址  # 抚顺seo优化多少钱  # 网站界面优化建议有哪些  # 邯郸关键词排名提升公司  # 商家网络营销推广系统  # 产品营销推广的计划书  # 安阳seo快速排名  # 鹿泉网站优化哪家好  # 成华企业网站建设  # 解压缩  # 用户可以  # 自己的  # 美图  # css  # 后端  # 如图  # 所示  # 中文网  # 从零开始  # type  # fig  # udio  # red  # ai  # 浏览器  # python  # vue 


相关栏目： 【 行业资讯67740 】 【 技术百科0 】 【 网络运营39195 】


相关推荐： 电脑如何查看固态硬盘  cron表达式在线工具有哪些  typescript数据怎么写  如何创建sql命令  j*a对数组怎么使用  meet是什么意思  课程伴侣电脑怎么登录  如何安装大华固态硬盘  苹果ipad爱奇艺怎么投屏到电视  如何进入cmd命令行  linux如何安装yum命令  东芝固态硬盘如何保修  如何显示固态硬盘  一年多少周  固态硬盘如何显示  镜像ao3链接入口  360n7锁屏壁纸怎么固定  单片机怎么定义字符长度  vs如何输入命令行参数  j*a map数组怎么取值  如何安装m.2固态硬盘  皓影混动仪表盘上power是什么意思  什么是域名解析地址  如何看固态硬盘型号  5g手机4g卡怎么没有网络  如何用ftp连接命令行  单片机显存怎么设置最佳  如何ping测试命令  虽千万人吾往矣什么意思  vi命令如何使用方法  typescript书籍哪个好  manager是什么意思  新版路由器如何设置路由命令  如何把一个命令后台运行  为什么有的夸克带电  手机拍电脑屏幕有条纹怎么解决  充电器上的power是什么意思  win7如何打开命令行窗口  市盈率ttm是什么意思  怎么用win7系统盘重装系统  春运辅助抢票怎么抢  哪些框架支持typescript  夸克前缀后缀什么意思啊  苹果的type-c接口是什么  恋爱软件免费聊天不收费的有哪些  手机的nfc是什么功能是什么意思  soup是什么意思  内在市盈率是什么意思  sql isnull函数如何使用  如何激活固态硬盘 

上一篇：利用AI语言转视频打造“0剪辑0配音”的内容输出系统
下一篇：浅析 Swin Transformer

搜索