ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

PaddleSeg Web 端基础预测功能测试指南:基于 Jest-Puppeteer 的 Paddle.js 推理 e2e 测试全流程解析

2026/9/27 7:51:42 拓冰建站 浏览量
PaddleSeg Web 端基础预测功能测试指南:基于 Jest-Puppeteer 的 Paddle.js 推理 e2e 测试全流程解析 人工智能计算机视觉预训练【免费下载链接】PaddleSegEasy-to-use image segmentation library with awesome pre-trained model zoo, supporting wide-range of practical tasks in Semantic Segmentation, Interactive Segmentation, Panoptic Segmentation, Image Matting, 3D Segmentation, etc.项目地址https://gitcode.com/gh_mirrors/pa/PaddleSeg点击查看免费下载本篇技术指南以 test_tipc/docs/test_infer_js.md 为核心脉络系统讲解 PaddleSeg 如何在 Web 端完成「模型导出 → 静态图转换 → Paddle.js 前端推理 → 浏览器内逐像素比对」的端到端e2e测试闭环。读者将掌握 TIPCTest Infra Plus CI体系中js_infer模式的完整用法环境准备、两条核心测试命令、paddlejs prepare与paddlejs infer test两大阶段的设计原理以及如何替换测试模型、如何理解 2% 精度阈值的判定逻辑并顺带看懂仓库中 Jest、Puppeteer、paddlejsconverter等工具的实际落地方式。一、Web 端测试要解决什么问题PaddleSeg 的模型可以部署到多种端侧环境Web 端浏览器是其中非常特殊的一类它没有 Python 运行时只能依赖 Paddle.jsPaddle 的 JavaScript 推理引擎在浏览器中加载转换后的模型完成推理。这意味着模型在 PC 端训练与验证表现良好并不代表它在浏览器端能正确运行——模型结构、权重格式、推理算子在 JS 引擎中的兼容性都需要单独验证。PaddleSeg 在 TIPC 体系中为 Web 端设计了专门的 e2e 测试核心思路非常直接用 Puppeteer 操作真实 Chrome 浏览器模拟用户打开页面、加载模型、执行推理的完整流程用 Jest 组织测试断言将推理输出与预先准备的期望结果做逐像素对比当差异比例不超过2%时判定测试通过从而以机器可验证的方式确认「Web 端推理结果与预期一致」。测试链路中涉及的两大框架文档也给出了明确定位Puppeteer一个 Node 库通过 DevTools 协议提供高级 API 来控制 Chromium 或 ChromeJest一个 JavaScript 测试框架用于保证任何 JavaScript 代码的正确性。整个 Web 测试模块的代码都集中在 test_tipc/web 目录下包括测试页面、测试用例和两份配置文件。二、环境准备Node 与 npmWeb 端测试完全运行在 Node 生态中因此前置条件只有 Node.js 及其自带的包管理器 npm。安装 Node包含 npm从 Node.js 官网下载对应平台的安装包文档推荐使用官网渠道版本以官网最新稳定版为准。安装完成后在命令行中依次执行两条命令确认环境# 显示所安装 node 版本号即表示成功安装 node -v # npm 随着 node 一起安装一般无需额外安装 # 显示所安装 npm 版本号即表示成功安装 npm -v这两条命令同样也是 prepare_js.sh 脚本启动时的前置校验逻辑——脚本通过type node与type npm判断命令是否存在任一缺失都会打印红色提示并直接退出# 判断是否安装了 node if ! type node /dev/null 21; then echo -e \033[31m node 未安装 \033[0m exit fi也就是说如果你希望prepare_js.sh一次跑通务必先完成 Node 环境的安装与验证。三、快速上手两条命令完成 Web 推理测试环境就绪后Web 测试只需要两条命令分别在paddlejs prepare与paddlejs infer test两个阶段执行# ① web 测试环境准备下载模型、导出静态图、转换 Paddle.js 模型、安装依赖 bash test_tipc/prepare_js.sh js_infer # ② web 推理测试启动本地服务 浏览器内推理 逐像素比对 bash test_tipc/test_infer_js.sh其中第一条命令必须传入模式参数js_infer。在 prepare_js.sh 中可以看到脚本对模式做了严格校验非js_infer会提示 Please change mode to js_infer 并退出MODE$1 # js_infer MODE, load model file and convert model to js_infer if [ ${MODE} ! js_infer ]; then echo Please change mode to js_infer exit fi第二条命令的实现也非常简洁test_infer_js.sh 的核心只有一行——切换到test_tipc/web目录后用项目本地安装的 Jest 按配置启动测试cd test_tipc/web # run humanseg test in chrome ./node_modules/.bin/jest --config ./jest.config.js四、paddlejs prepare从 Paddle 模型到浏览器可加载模型4.1 六步流程总览文档将paddlejs prepare阶段拆解为六个步骤prepare_js.sh的实现与之一一对应判断 node、npm 是否安装对应脚本开头的两段type校验下载测试模型当前默认模型为ppseg_lite_portrait_398x224人体肖像分割轻量模型如需替换直接修改脚本中的模型下载链接与模型包名即可导出模型为静态图模型保存到test_tipc/web/models/pphumanseg_lite转换模型将model.pdmodel、model.pdiparams转换为 Paddle.js 可加载的model.json与chunk.dat安装最新版本 humanseg SDKpaddlejs-models/humanseglatest安装测试环境依赖puppeteer、jest、jest-puppeteer若检测到已安装则跳过二次安装。4.2 模型下载与静态图导出脚本中用两个变量固定了模型名与保存路径替换模型时只需同步修改这两处以及第 2 步的下载地址saved_model_namepphumanseg_lite model_pathtest_tipc/web/models/下载并解压官方预训练模型包后调用 PaddleSeg 的导出工具tools/export.py将动态图模型导出为固定输入形状的静态图推理模型。这一步骤的参数直接决定了 Web 端模型的行为python3 tools/export.py \ --config configs/pp_humanseg_lite/pp_humanseg_lite_export_398x224.yml \ --model_path test_tipc/web/models/ppseg_lite_portrait_398x224/model.pdparams \ --save_dir $model_path$saved_model_name/ \ --input_shape 1 3 224 398 \ --without_argmax --with_softmax关键参数说明--config指定模型配置文件。这里使用的是 configs/pp_humanseg_lite/pp_humanseg_lite_export_398x224.yml它定义了PPHumanSegLite网络结构、num_classes: 2背景 前景、align_corners: False验证阶段将输入 Resize 到[398, 224]与--input_shape 1 3 224 398batch1、3 通道、高 224、宽 398保持一致--model_path预训练权重路径model.pdparams--save_dir静态图模型输出目录即test_tipc/web/models/pphumanseg_lite/--input_shape固定静态图输入形状Web 推理时输入必须严格匹配--without_argmax导出时去掉 argmax 后处理将原始 logits 保留在输出中交由前端处理--with_softmax导出时叠加 softmax得到归一化的概率输出便于前端直接绘制分割结果。4.3 模型转换paddlejsconverter静态图模型无法被浏览器直接加载需要借助 Paddle.js 官方转换工具paddlejsconverter完成格式转换pip3 install paddlejsconverter # convert inference model to web model: model.json、chunk_1.dat paddlejsconverter \ --modelPath$model_path$saved_model_name/model.pdmodel \ --paramPath$model_path$saved_model_name/model.pdiparams \ --outputDir$model_path$saved_model_name/转换产物是 Paddle.js 推理时真正加载的两个文件描述网络结构的model.json与存放权重的chunk.dat。它们被输出到test_tipc/web/models/pphumanseg_lite/目录下与 index.test.js 中加载模型的路径./models/pphumanseg_lite/model.json相对应。4.4 依赖安装策略prepare_js.sh在依赖安装上做了两处刻意设计humanseg SDK 永远装最新版直接执行npm install paddlejs-models/humanseglatest确保测试始终覆盖最新 SDK 行为测试框架依赖按需安装先通过npm list --dept 0检查puppeteer与jest是否已存在两者都在则跳过安装否则一次性安装jest jest-puppeteer puppeteerif [ npm list --dept 0 | grep puppeteer | wc -l -ne 0 ] [ npm list --dept 0 | grep jest | wc -l -ne 0 ]; then echo -e \033[32m Dependencies have installed \033[0m else echo -e \033[33m Installing dependencies ... \033[0m npm install jest jest-puppeteer puppeteer echo -e \033[32m Dependencies installed completely.!~ \033[0m fi脚本结尾会删除package-lock.json避免锁文件干扰后续依赖安装的可复现性。五、paddlejs infer test浏览器中的推理与逐像素比对5.1 本地静态服务Web 端推理需要一个可访问的页面。jest-puppeteer插件内置的 server 能力在 jest-puppeteer.config.js 中配置——用 Python 的 HTTP 模块在 9811 端口启动本地静态服务将test_tipc/web目录作为站点根目录module.exports { launch: { headless: false, // 有头模式可肉眼观察 Chrome 中的推理过程 product: chrome }, browserContext: default, server: { command: python3 -m http.server 9811, port: 9811, launchTimeout: 10000, debug: true } };Jest 启动时会自动拉起该服务测试结束后自动关闭全程无需手工干预。5.2 测试页面与期望图测试页 index.html 的布局非常朴素但直击要害页面左侧展示原始输入图human.jpg右侧展示期望输出图seg.png即官方预先推理好的标准分割结果并准备一块用于绘制推理结果的 canvas页面底部通过script直接加载paddlejs-models/humanseg的浏览器构建产物div classtest div classitem img idhuman src./imgs/human.jpg/ div origin img /div /div div classitem img idseg src./imgs/seg.png/ div expect img /div /div /div canvas idback_canvas/canvas script src./node_modules/paddlejs-models/humanseg/lib/index.js/script5.3 测试用例逐像素比对误差不超过 2%核心断言逻辑位于 index.test.js 中。测试通过page.evaluate在浏览器真实环境里执行推理脚本完成「加载模型 → 对输入图推理 → 绘制分割结果 → 与期望图逐像素对比」的完整链路beforeAll中通过page.goto(PATH)打开测试页PATH由 jest.config.js 中的globals注入值为http://localhost:9811在页面上下文中取到human输入图、seg期望图和back_canvas结果画布将期望图seg绘制到临时 canvas准备取其像素数据通过paddlejs[humanseg]拿到 SDK 实例调用humanseg.load(true, false, ./models/pphumanseg_lite/model.json)加载转换后的模型调用humanseg.getGrayValue(human)对输入图推理得到灰度分割数据再调用humanseg.drawHumanSeg(data, back_canvas)将分割结果绘制到画布分别读取结果画布与期望图的ImageData逐通道逐像素比较统计不一致的像素数占总像素数的比例diffPixelsNum / backImageData.length断言该比例不超过expectedMAP 0.02即逐像素精度误差不超过 2%视为测试通过。const expectedMAP 0.02; await expect(mAP).toBeLessThanOrEqual(expectedMAP);这里的 0.02 阈值并非随意设定浏览器端的 softmax/绘制浮点计算与 Python 端存在微小的数值差异2% 的容差既能容忍这类合法误差又能灵敏地捕获模型结构损坏、权重加载错误、推理算子异常等实质性故障。5.4 Jest 配置要点jest.config.js 中值得关注的配置项包括preset: jest-puppeteer直接复用 jest-puppeteer 预设自动获得page、browser等全局对象globals.PATH注入测试页地址供测试用例中的page.goto使用testRegex: .(.)\\.test\\.(js|ts)$自动发现*.test.js类测试文件testTimeout: 50000将单个用例超时放宽到 50 秒为浏览器启动、模型加载与推理预留充分时间testURL: http://localhost:9898/Jest 环境的默认 URLtransform: { ^.\\.js$: babel-jest }启用 babel 转译保证现代 JS 语法在 Node 中可执行。六、如何替换测试模型以自定义分割模型为例文档明确指出prepare_js.sh当前默认使用ppseg_lite_portrait_398x224替换模型只需修改对应模型链接和模型包名。具体需要同步修改的位点有模型下载地址prepare_js.sh中wget一行换成目标模型的官方发布包地址模型包名/目录名脚本解压时依赖包名ppseg_lite_portrait_398x224解压出的权重路径model.pdparams也会随之变化导出配置--config换成目标模型的 yml如人体分割可参考 configs/pp_humanseg_lite 下的其他配置输入形状--input_shape必须与目标模型的导出配置、以及 index.test.js 中 SDK 加载方式匹配期望图替换 test_tipc/web/imgs 下的human.jpg输入与seg.png期望结果并保证两张图尺寸一致否则逐像素比对会因画布大小不同而失真。需要注意index.test.js中调用的是 humanseg SDK 的getGrayValue/drawHumanSeg接口若替换为其他任务类型的模型如通用语义分割还需要同步更换对应的 Paddle.js 任务 SDK 与测试脚本逻辑。七、与 TIPC 体系的关联Web 端测试是 PaddleSeg TIPCTest Infra Plus CI完整矩阵中的一环。在 test_tipc 目录下与之平行的还有test_inference_cpp.md、test_serving_infer_python.md、test_paddle2onnx.md等测试文档覆盖 C 推理、Serving 服务、ONNX 导出等多种部署形态而prepare_js.sh与test_infer_js.sh的组合则专门保障「Paddle 模型 → 浏览器推理」这条 Web 部署链路的可靠性。从执行链路回看整个设计可以提炼出这套方案的三个核心价值真实环境验证推理发生在真实 Chrome 中而非 Node 模拟环境能暴露 WebGL/WebAssembly 算子兼容性问题结果可量化逐像素比对 2% 阈值把「Web 端跑得对不对」变成可自动判定的布尔结论适合接入 CI 流水线流程可复用prepare与infer test两段式设计让「换模型重测」的成本降到最低只需改动脚本顶部的模型信息。八、常见问题排查建议node: command not found/npm: command not found说明 Node 未安装或未加入 PATH回到「环境准备」一节完成安装并用node -v、npm -v验证prepare 阶段 wget 失败多为网络原因确认能访问模型下载地址后重试模型包已存在时脚本会因-nc参数跳过重复下载测试超时testTimeoutChrome 首次启动、模型首次下载加载较慢可适当调大 jest.config.js 中的testTimeout逐像素比对失败mAP 0.02优先检查导出参数--without_argmax --with_softmax是否保留、--input_shape是否与配置一致、期望图seg.png是否被替换为与当前模型推理结果匹配的标准输出端口占用9811 端口被占用会导致静态服务起不来修改 jest-puppeteer.config.js 中server.command与port为其他端口并同步更新 jest.config.js 中的PATH。至此从环境准备、两条核心命令到模型导出转换、浏览器推理与逐像素判定的完整机制都已打通。对照 test_tipc/web 下的源码文件即可在本地完整复现并二次开发这套 Web 端基础预测功能测试。赞分享人工智能计算机视觉预训练【免费下载链接】PaddleSegEasy-to-use image segmentation library with awesome pre-trained model zoo, supporting wide-range of practical tasks in Semantic Segmentation, Interactive Segmentation, Panoptic Segmentation, Image Matting, 3D Segmentation, etc.项目地址https://gitcode.com/gh_mirrors/pa/PaddleSeg点击查看免费下载相关推荐react-diagrams 端到端E2E测试方案基于 Puppeteer Jest 的图编辑器自动化测试实战指南react diagrams 端到端E2E测试方案基于 Puppeteer Jest 的图编辑器自动化测试实战指南 本篇技术指南以项目文档 testiUI组件前端PaddleOCR TIPC Linux 端基础训练预测功能测试指南test_train_inference_python.sh 全流程解析PaddleOCR TIPC Linux 端基础训练预测功能测试指南test_train_inference_python.sh 全流程解析 导读 本文围绕人工智能计算机视觉OCR深度学习大模型RAGSpectrum 后端测试指南基于 Jest 与 GraphQL 的数据库级 e2e 测试实战Spectrum 后端测试指南基于 Jest 与 GraphQL 的数据库级 e2e 测试实战 Spectrum 是一个构建在 React、GraphQL 与后端前端即时通讯社交上一篇3步解决Layui util.on()事件委托冲突下一篇3分钟定位Layui下拉菜单动态渲染显示异常深度排查创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考