如何在浏览器中运行深度学习模型Paddle.js 浏览器端 AI 推理完整实战指南【免费下载链接】Paddle.jsPaddle.js is a web project for Baidu PaddlePaddle, which is an open source deep learning framework running in the browser. Paddle.js can either load a pre-trained model, or transforming a model from paddle-hub with model transforming tools provided by Paddle.js. It could run in every browser with WebGL/WebGPU/WebAssembly supported. It could also run in Baidu Smartprogram and WX miniprogram.项目地址: https://gitcode.com/gh_mirrors/pa/Paddle.js想做浏览器端 AI 推理却不想写后端、不想租服务器、更不想让用户安装任何东西Paddle.js 正是为这个场景而生的开源推理引擎它把深度学习模型直接装进网页靠 WebGL / WebGPU / WebAssembly 做本地加速打开页面就能跑分类、检测、人像分割。本文从痛点讲到实战再讲到性能调优带你完整走一遍浏览器运行深度学习模型的落地流程。文章导读先看它解决了什么问题再花 5 分钟跑通一个 Demo最后掌握 4 个避坑要点和 2 个进阶提速玩法。一、一个让人又爱又恨的需求网页里的 AI 能力想象这样一个场景产品经理丢过来一个需求——给我们的官网加个功能用户上传一张图立刻告诉他这是什么物体。你第一反应是什么搭 Python 后端 TensorFlow Serving得买服务器、配环境、做高并发还要处理模型文件的安全问题。用第三方 API数据要出站隐私难保障按调用量计费接口说改版就改版。让用户装 App推广成本高网页用户根本不会配合。更现实的问题是视频流、摄像头、实时处理这类需求数据往返一次服务器延迟就上去了。推理越快数据越不该离开用户设备。所以前端能不能自己算就成了绕不开的课题。这就是 Paddle.js 想替你解决的困境不搭后端、不传数据、纯浏览器本地推理。二、Paddle.js 是什么一张网页搞定深度推理Paddle.js 是百度飞桨PaddlePaddle的 Web 方向子项目定位是运行在浏览器中的开源深度学习框架。你只需要一个网页环境它就能完成加载模型 → 前处理 → 推理 → 输出结果的完整链路。它和同类工具相比差异化亮点主要有三个多后端加速按设备选方案WebGL 算子最全日常首选WebGPU 面向未来性能上限更高WebAssembly 用于不支持 GPU 的环境还有 CPU 与 Node.js 方案兜底。跨端覆盖广桌面 Chrome/Safari/Firefox 可用手机浏览器可用甚至能跑进百度小程序和微信小程序。生态自带模型前置处理官方提供模型转换工具把飞桨训练好的模型一键转成浏览器友好的格式不需要你手写算子。一句话总结它把AI 能力从服务器端挪到了浏览器端用户点开页面即用无需安装任何东西。三、能力清单Paddle.js 能为你做哪几件事能力一句话说明典型场景️ 图像分类输入图片输出 Top-1 类别物品识别、相册打标签 人像分割逐像素分离人像支持背景替换视频会议换背景、直播特效 文本检测与识别OCR定位文字区域并识别内容票据录入、身份证识别✋ 手势与关键点识别识别手部动作与关键点体感交互、教学评分 人脸检测输出人脸框与关键点自拍美颜、考勤打卡 模型转换飞桨模型 → 浏览器模型自训模型上线的必经步骤以上能力大多以独立模型 SDK如paddlejs-models/mobilenet、paddlejs-models/humanseg的形式发布API 极简拿来就能用。四、5 分钟跑通第一个浏览器端推理 Demo第一步搭建最小前端工程不需要复杂的构建链一个 Vite 或 Webpack 项目即可。安装两个核心依赖npm install paddlejs/paddlejs-core paddlejs/paddlejs-backend-webgl提醒paddlejs/paddlejs-core是推理引擎本体必须同时引入一个后端否则运行时报无可用后端。WebGL 后端是目前算子支持最全的方案推荐首选。第二步初始化引擎并加载模型新建main.js写最小可运行片段import { Runner } from paddlejs/paddlejs-core; import paddlejs/paddlejs-backend-webgl; const runner new Runner({ modelPath: /model/mobilenetv2, // model.json 所在目录 feedShape: { fw: 256, fh: 256 }, // 模型输入宽高 fill: #fff // 缩放填充色 }); await runner.init(); // 下载模型并预热modelPath既支持http://网络地址也支持本地静态目录指向包含model.json与权重文件的文件夹即可。第三步喂入图片拿到预测结果const res await runner.predict(document.getElementById(img)); console.log(res); // 长度为类别数的概率数组对 mobilenetv2 这类分类模型输出是一个概率数组取最大值下标即可映射到类别名称。到这里你的第一个浏览器端 AI 推理已经跑通了。第四步用现成模型 SDK 直接落地效果如果不想手搓推理细节直接用封装好的模型包更省事。以图像分类为例import * as mobilenet from paddlejs-models/mobilenet; await mobilenet.load({ path: /model/mobilenetv2 }); const label await mobilenet.classify(imageEl); // 直接返回类别名 console.log(label); // 例如 banana预期效果上传一张水果图页面控制台立即输出对应类别全程无后端请求。项目仓库中packages/paddlejs-models/mobilenet/demo/提供了完整可运行示例。五、避坑指南新手最常见的 4 个坑坑 1只引了 core忘了引后端报没有可用计算方案这是出现频率最高的问题。paddlejs-core只负责推理流程编排真正的算子计算要由paddlejs-backend-webgl等后端包提供。引完 core 务必随手引一个后端。坑 2直接用原生飞桨模型格式不兼容Paddle.js 需要浏览器友好的模型格式model.json 权重二进制。飞桨训练产物请先用官方转换工具处理pip install paddlejsconverter paddlejsconverter \ --modelPath./mobilenet \ --paramPath./params \ --outputDir./modeljs \ --useGPUOptTrue注意useGPUOpt仅在模型跑 WebGL/WebGPU 后端时开启跑 wasm 或纯 JS 后端请关闭否则转换结果会异常。坑 3feedShape与模型输入尺寸对不上feedShape.fw/fh必须匹配模型实际输入张量。宽高填错通常不报错但输出结果是垃圾数据。确认方法看模型model.json里的 input shape或直接参照模型 README 中标注的尺寸如 humanseg 默认 398×224。坑 4本地打开页面时模型加载失败跨域用file://直接打开 HTML 通常读不到本地模型目录。解决办法起一个本地静态服务如npx serve .再从http://localhost访问页面。坑 5老设备/老浏览器上 WebGL 不可用建议在上手前先确认目标浏览器支持 WebGL 2.0再决定是否开启 GPU 管线等高级特性。六、进阶玩法从能跑到跑得快玩法一打开 WebGL 性能开关Paddle.js 内置了多个性能 flag一行代码即可开启向量化、低精度纹理等加速import { env } from paddlejs/paddlejs-core; env.set(webgl_pack_channel, true); // 卷积打包向量化计算 env.set(webgl_force_half_float_texture, true); // 特征图用半精度纹理前者能让符合条件的卷积算子走 packing shader 做向量化后者用HALF_FLOAT减少显存与带宽消耗模型越大收益越明显。官方建议逐项开启、分别对比帧率找到最适合自己设备的组合。玩法二GPU 全流程管线实现实时人像背景替换人像分割常见的痛点是前处理 推理 后处理全在 CPU 上绕一圈帧率上不去。Paddle.js 支持把整条链路搬到 GPU预处理改成 shader推理结果直接渲染进WebGL2RenderingContext后处理在纹理上完成。以paddlejs-models/humanseg为例切换到 GPU 版本import * as humanseg from paddlejs-models/humanseg/lib/index_gpu; await humanseg.load(); const { data } await humanseg.getGrayValue(videoEl); // 背景替换把分割出来的人像贴到新背景上 humanseg.drawHumanSeg(data, outCanvas, bgCanvas); // 背景虚化只需两个参数 humanseg.drawHumanSeg(data, blurCanvas);下图左侧是原始视频帧右侧是分割后人像叠加到新背景的效果。整个流程全部在 GPU 上完成适合视频流、直播等实时场景。更多探索方向Web Worker 中跑推理避免主线程卡顿参考packages/paddlejs-examples/webglWorker/示例。自定义算子与模型结构改造paddlejs/paddlejs-core提供registerOp接口可通过plugins配置对模型拓扑做增删改如裁剪冗余层提速。七、资源与生态从这里开始你的下一步推理引擎核心packages/paddlejs-core/—— 想深入引擎机制从这里的Runner、runner.ts、opFactory/源码看起。计算后端packages/paddlejs-backend-webgl/、webgpu/、wasm/、cpu/—— 按设备选择计算方案算子支持列表在各包src/ops/中。现成模型 SDKpackages/paddlejs-models/下的 humanseg、mobilenet、ocr、facedetect、gesture 等均有独立 demo。上手示例packages/paddlejs-examples/里的 humanStream、ocr、mobilenet、clasGame克隆即可本地运行git clone https://gitcode.com/gh_mirrors/pa/Paddle.js cd Paddle.js cd packages/paddlejs-examples/humanseg npm install npm run dev下一步建议先跑通paddlejs-examples/mobilenet这个最小示例把加载模型 → 推理 → 输出的链路吃透再换到humanseg体验实时视频流处理。遇到问题欢迎到项目 Issue 区提问也可以加入官方 QQ 交流群群号见仓库 README和社区一起讨论浏览器端 AI 推理的更多玩法。【免费下载链接】Paddle.jsPaddle.js is a web project for Baidu PaddlePaddle, which is an open source deep learning framework running in the browser. Paddle.js can either load a pre-trained model, or transforming a model from paddle-hub with model transforming tools provided by Paddle.js. It could run in every browser with WebGL/WebGPU/WebAssembly supported. It could also run in Baidu Smartprogram and WX miniprogram.项目地址: https://gitcode.com/gh_mirrors/pa/Paddle.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考