企业官网建设流程全解析

• 人工智能
• 计算机视觉
• 预训练

本文基于 PaddleSeg 仓库中 FastDeploy 语义分割方向的 Web 部署文档（deploy/fastdeploy/semantic_segmentation/web/README.md），系统讲解如何在浏览器端使用 Paddle.js 前端推理引擎部署 PP-HumanSeg v1 人像分割模型：从运行 deploy/web/example 官方示例，到load/getGrayValue/drawMask/drawHumanSeg/blurBackground五个 JS 接口的完整参数说明。读完本文，你可以直接在本地起一个可交互的人像分割 Web Demo，并掌握替换背景、提取二值蒙版、背景虚化等前端可视化能力的调用方式。

1. 模型版本与前端部署定位

PaddleSeg 仓库中该部署文档明确标注，Web 端使用的 PP-HumanSeg v1 模型对应PP-HumanSeg Release/2.6版本，即 contrib/PP-HumanSeg 目录下的发布模型。

前端部署的核心链路是：

1. 模型侧：将 PP-HumanSeg 导出为可在浏览器加载的 Web 模型（默认模型地址为humanseg_398x224_fuse_activation/model.json，即输入分辨率 398x224 的融合激活模型）；
2. 运行时侧：使用前端推理引擎Paddle.js及其 WebGL 计算后端，通过浏览器 GPU 加速完成推理；
3. 应用侧：封装好的 npm 包humanseg暴露 JS 接口，业务代码无需关心推理引擎与计算方案的集成细节。

从仓库中的导出配置 configs/pp_humanseg_lite/pp_humanseg_lite_export_398x224.yml 可以印证 Web 模型的前处理规格：

model: type: PPHumanSegLite align_corners: False num_classes: 2 val_dataset: type: Dataset dataset_root: data/mini_supervisely val_path: data/mini_supervisely/val.txt num_classes: 2 transforms: - type: Resize target_size: [398, 224] - type: Normalize mode: val

可以看到 Web 模型对应的正是PPHumanSegLite结构、二分类（人像/背景）、Resize到 398x224 加Normalize的标准预处理流程——这与 JS 接口load()默认配置中的mean: [0.5, 0.5, 0.5]、std: [0.5, 0.5, 0.5]以及默认模型路径中的398x224分辨率完全对应。

2. 快速上手：运行 PaddleSeg 官方 Web Demo

仓库提供了可直接运行的 Web 示例 deploy/web/example，其使用说明与 docs/deployment/web/web.md 中的 Web 部署文档一致（deploy/web/README.md 也指向了该文档）。

2.1 环境要求

• 安装 Node.js，并在命令行执行node -v验证安装成功；
• 示例基于 webpack + TypeScript 构建，依赖均通过 npm 安装，无需额外配置浏览器环境（仅需支持 WebGL 的现代浏览器）。

2.2 运行步骤

# 进入 PaddleSeg 仓库中的 Web 示例目录并安装依赖 cd deploy/web/example/ && npm install # 启动开发服务器 npm run dev # 访问 http://0.0.0.0:8866/ 体验人像分割与背景处理

端口与地址来自示例的构建配置 deploy/web/example/webpack.config.js：devServer指定host: '0.0.0.0'、port: 8866，npm run dev即执行webpack-dev-server（见 deploy/web/example/package.json 中 scripts 配置）。

2.3 依赖与构建结构

从 deploy/web/example/package.json 可以看到 Web 侧的关键依赖组合：

"dependencies": { "@paddlejs-mediapipe/opencv": "^1.0.0", "@paddlejs-models/humanseg": "^0.0.8", "@paddlejs/paddlejs-backend-webgl": "^1.0.1", "@paddlejs/paddlejs-core": "^2.0.1" }

• @paddlejs-models/humanseg：PP-HumanSeg 的模型封装包，业务代码直接 import 即可，无需单独引入推理引擎与计算方案；
• @paddlejs/paddlejs-backend-webgl+@paddlejs/paddlejs-core：底层推理引擎与 WebGL GPU 加速计算方案（由 humanseg 包封装依赖）；
• @paddlejs-mediapipe/opencv：提供浏览器端 OpenCV 能力，供图像画布处理使用。

2.4 示例代码流程解析

示例入口 deploy/web/example/index.ts 展示了完整的前端推理调用链：

import * as humanseg from '@paddlejs-models/humanseg'; async function load() { await humanseg.load(); document.getElementById('loading')!.style.display = 'none'; } load(); async function run(input) { const { data } = await humanseg.getGrayValue(input); humanseg.drawHumanSeg(canvas1, data); // 人像替换背景，画到 canvas1 humanseg.drawMask(canvas2, data, true); // 二值蒙版（深色模式），画到 canvas2 }

流程说明：

1. 加载阶段：页面加载时立即调用humanseg.load()初始化推理引擎、下载并构建网络、完成模型预热（warm-up），加载完成后隐藏index.html中的loading遮罩层（见 deploy/web/example/index.html，页面包含两个输出画布demo1/demo2和一个文件选择框uploadImg）；
2. 推理阶段：用户通过文件选择框上传图片，示例用FileReader.readAsDataURL将文件读入<img>元素，onload后触发run(img)；
3. 可视化阶段：getGrayValue(input)返回的{ data }即分割灰度值序列，随后分别传给drawHumanSeg（把分割出的人像合成到传入画布携带的背景上，实现背景替换）和drawMask（绘制人像/背景二值蒙版，第三个参数dark控制是否使用深色模式）。

3. PP-HumanSeg v1 JS 接口参考

以下接口说明完整继承自 deploy/fastdeploy/semantic_segmentation/web/README.md。文档原文给出的调用骨架如下：

import * as humanSeg from "@paddle-js-models/humanseg"; # Load and initialise model await humanSeg.load(Config); # Portrait segmentation const res = humanSeg.getGrayValue(input) # Extract the binary map of portrait and background humanSeg.drawMask(res) # Visualization function for background replacement humanSeg.drawHumanSeg(res) # Blur background humanSeg.blurBackground(res)

各函数参数与返回值说明：

3.1 load(Config)

• Config (dict)：PP-Humanseg 模型配置参数，默认值为：

{ modelpath: 'https://paddlejs.bj.bcebos.com/models/fuse/humanseg/humanseg_398x224_fuse_activation/model.json', mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5], enableLightModel: false }

参数含义：

load负责完成推理引擎初始化：下载人像分割 Web 模型、按模型结构与参数文件生成神经网络、并完成模型预热，因此应放在页面早期以await方式等待其完成（参考 deploy/web/example/index.ts 中load()先行执行并在完成后隐藏加载遮罩的写法）。

3.2 getGrayValue(input)

• input (HTMLImageElement | HTMLVideoElement | HTMLCanvasElement)：输入图像，支持图片、视频帧或画布元素，因此该接口同样可用于视频流场景；
• 返回分割灰度值序列（data），仓库示例中通过const { data } = await humanseg.getGrayValue(input)解构获取，作为后续三个可视化函数的输入。

3.3 drawMask(seg_values)

• seg_values (number[])：一般为getGrayValue的计算结果；
• 绘制人像与背景的二值蒙版到传入的 canvas 元素上；仓库示例中额外传入了第三个参数true（深色模式）：humanseg.drawMask(canvas2, data, true)（见 deploy/web/example/index.ts 第 27 行与 docs/deployment/web/web.md 的 API 说明）。

3.4 drawHumanSeg(seg_values)

• seg_values (number[])：一般为getGrayValue的计算结果；
• 用于替换背景的可视化函数：传入携带背景信息的 canvas 元素与分割结果，分割出的人像会被合成绘制到该画布上。

3.5 blurBackground(seg_values)

• seg_values (number[])：一般为getGrayValue的计算结果；
• 背景虚化：在分割结果上对背景区域施加模糊效果，保留人像清晰，常用于人像美化的视频/图像处理场景。

4. 实践要点与注意事项

1. npm 包名差异：关联文档接口示例中 import 的是@paddle-js-models/humanseg，而仓库可运行示例 deploy/web/example 实际依赖的是@paddlejs-models/humanseg（0.0.8 版本，见 deploy/web/example/package.json）。两者为不同时期发布的封装包，接入时以你所安装版本对应文档为准；仓库示例代码（index.ts）采用@paddlejs-models/humanseg且经过示例工程验证，可作为最稳妥的参考实现。
2. 异步调用：load与getGrayValue均为async接口，必须await其完成后再进行后续绘制；模型下载与预热耗时取决于网络与设备性能，建议像示例一样提供加载状态提示。
3. 运行环境：推理依赖 WebGL 加速的浏览器端 GPU 计算方案，建议在支持 WebGL 的桌面/移动浏览器（文档以 macOS Chrome 为验证环境）上运行；npm run dev启动后访问http://0.0.0.0:8866/（端口由 webpack.config.js 固定配置）。
4. 自定义模型：若需使用自行训练的 PP-HumanSeg 模型，可参照 configs/pp_humanseg_lite 下的导出配置（398x224、Normalize）完成导出，再将load(Config)的modelpath指向自导出的 Web 模型文件，同时保持mean/std与导出侧预处理一致。
5. 能力边界：该前端方案面向二分类人像分割（num_classes: 2，见导出配置），输出为灰度值序列，适用于人像替换背景、蒙版提取、背景虚化等人像处理类前端功能；多类别语义分割的 Web 部署需要另行适配模型与后处理。

5. 参考文件索引

• 人工智能
• 计算机视觉
• 预训练