|
| 1 | +# Web Demo介绍 |
| 2 | + |
| 3 | +- [简介](#0) |
| 4 | +- [1. 快速开始](#1) |
| 5 | +- [2. npm包调用](#2) |
| 6 | +- [3. 模型替换](#3) |
| 7 | +- [4. 自定义前后处理参数](#4) |
| 8 | +- [5. 其他](#5) |
| 9 | + |
| 10 | +<a name="0"></a> |
| 11 | +## 简介 |
| 12 | + |
| 13 | +本项目基于[Paddle.js](https://github.com/PaddlePaddle/Paddle.js)在浏览器中实现目标检测，人像分割，OCR，物品分类等计算机视觉任务。 |
| 14 | + |
| 15 | + |
| 16 | +|demo名称|web demo组件|源码目录|npm包| |
| 17 | +|-|-|-|-| |
| 18 | +|人脸检测|[FaceDetection](./web_demo/src/pages/cv/detection/FaceDetection/)| [facedetect](./package/packages/paddlejs-models/facedetect)|[@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect)| |
| 19 | +|螺丝钉检测|[ScrewDetection](./web_demo/src/pages/cv/detection/ScrewDetection)| [detect](./package/packages/paddlejs-models/detect)|[@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect)| |
| 20 | +|人像分割背景替换|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|[humanseg](./package/packages/paddlejs-models/humanseg)|[@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg)| |
| 21 | +|手势识别AI猜丁壳|[GestureRecognition](./web_demo/src/pages/cv/recognition/GestureRecognition)|[gesture](./package/packages/paddlejs-models/gesture)|[@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture)| |
| 22 | +|1000种物品识别|[ItemIdentification](./web_demo/src/pages/cv/recognition/ItemIdentification)|[mobilenet](./package/packages/paddlejs-models/mobilenet)|[@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet)| |
| 23 | +|文本检测|[TextDetection](./web_demo/src/pages/cv/ocr/TextDetection)|[ocrdetection](./package/packages/paddlejs-models/ocrdetection)|[@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet)| |
| 24 | +|文本识别|[TextRecognition](./web_demo/src/pages/cv/ocr/TextRecognition)|[ocr](./package/packages/paddlejs-models/ocr)|[@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr)| |
| 25 | + |
| 26 | + |
| 27 | +<a name="1"></a> |
| 28 | +## 1. 快速开始 |
| 29 | + |
| 30 | +本节介绍如何在浏览器中直接运行官方demo。 |
| 31 | + |
| 32 | +**1. 安装Node.js** |
| 33 | + |
| 34 | +从`Node.js`官网https://nodejs.org/en/download/ 下载适合自己平台的`Node.js`安装包并安装。 |
| 35 | + |
| 36 | +**2. 安装demo依赖并启动** |
| 37 | +在`./web_demo`目录下执行如下指令： |
| 38 | + |
| 39 | +``` |
| 40 | +# 安装依赖 |
| 41 | +npm install |
| 42 | +# 启动demo |
| 43 | +npm run dev |
| 44 | +``` |
| 45 | + |
| 46 | +在浏览器中打开网址 `http://localhost:5173/main/index.html` 即可快速体验在浏览器中运行计算机视觉任务。 |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | +<a name="2"></a> |
| 51 | +## 2. npm包调用 |
| 52 | + |
| 53 | +本节介绍npm包的使用方式，每个demo均提供简单易用的接口，用户只需初始化上传图片即可获得结果，使用步骤如下： |
| 54 | +1. 调用模块 |
| 55 | +2. 初始化模型 |
| 56 | +3. 传入输入，执行预测 |
| 57 | + |
| 58 | +以 OCR 为例，在前端项目中，`@paddle-js-models/ocr`包的使用方式如下： |
| 59 | + |
| 60 | +``` |
| 61 | +// 1. 调用ocr模块 |
| 62 | +import * as ocr from '@paddle-js-models/ocr'; |
| 63 | +
|
| 64 | +// 2. 初始化ocr模型 |
| 65 | +await ocr.init(); |
| 66 | +
|
| 67 | +// 3. 传入HTMLImageElement类型的图像作为输入并获得结果 |
| 68 | +const res = await ocr.recognize(img); |
| 69 | +
|
| 70 | +// 打印OCR模型得到的文本坐标以及文本内容 |
| 71 | +console.log(res.text); |
| 72 | +console.log(res.points); |
| 73 | +``` |
| 74 | + |
| 75 | +<a name="3"></a> |
| 76 | +## 3. 模型替换 |
| 77 | + |
| 78 | +由于前端环境和计算资源限制，在前端部署深度学习模型时，我们对模型的性能有着更严格的要求，简单来说，模型需要足够轻量化。理论上模型的输入shape越小、模型大小越小，则对应的模型的flops越小，在前端运行也能更流畅。经验总结，使用`Paddle.js`部署的模型存储尽量不超过*5M*，实际情况根据硬件和计算资源情况决定。 |
| 79 | + |
| 80 | +在实际应用中，常常根据垂类的场景定制化模型，官方的demo支持修改传入参数替换模型。 |
| 81 | + |
| 82 | +以OCR demo为例，[ocr.init()函数](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/package/packages/paddlejs-models/ocr/src/index.ts#L52)中，包含默认初始化的模型链接，如果要替换模型参考下述步骤。 |
| 83 | + |
| 84 | +步骤1：将模型转成js格式： |
| 85 | +``` |
| 86 | +# 安装paddlejsconverter |
| 87 | +pip3 install paddlejsconverter |
| 88 | +# 转换模型格式，输入模型为inference模型 |
| 89 | +paddlejsconverter --modelPath=./inference.pdmodel --paramPath=./inference.pdiparams --outputDir=./ --useGPUOpt=True |
| 90 | +# 注意：useGPUOpt 选项默认不开启，如果模型用在 gpu backend（webgl/webgpu），则开启 useGPUOpt，如果模型运行在（wasm/plain js）则不要开启。 |
| 91 | +``` |
| 92 | + |
| 93 | +导出成功后，本地目录下会出现 `model.json chunk_1.dat`等文件，分别是对应js模型的网络结构、模型参数二进制文件。 |
| 94 | + |
| 95 | +步骤2：将导出的js模型上传到支持跨域访问的服务器，服务器的CORS配置参考下图： |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +步骤3：修改代码替换默认的模型。以OCR demo为例，修改OCR web demo中[模型初始化代码](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L64)，即 |
| 100 | + |
| 101 | +``` |
| 102 | +await ocr.init(); |
| 103 | +修改为： |
| 104 | +await ocr.init({modelPath: "https://js-models.bj.bcebos.com/PaddleOCR/PP-OCRv3/ch_PP-OCRv3_det_infer_js_960/model.json"}); # 第一个参数传入新的文本检测字典类型参数 |
| 105 | +``` |
| 106 | + |
| 107 | +重新在demo目录下执行下述命令，即可体验新的模型效果。 |
| 108 | +``` |
| 109 | +npm run dev |
| 110 | +``` |
| 111 | + |
| 112 | +<a name="4"></a> |
| 113 | +## 4. 自定义前后处理参数 |
| 114 | + |
| 115 | +**自定义前处理参数** |
| 116 | + |
| 117 | +在不同计算机视觉任务中，不同的模型可能有不同的预处理参数，比如mean,std,keep_ratio等参数，替换模型后也需要对预处理参数进行修改。paddle.js发布的npm包中提供了自定义预处理参数的简单方案。只需要在调用模型初始化函数时，传入自定义的参数即可。 |
| 118 | + |
| 119 | +``` |
| 120 | +# 默认参数初始化 |
| 121 | +await model.init(); |
| 122 | +
|
| 123 | +自定义参数初始化 |
| 124 | +const Config = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5], keepratio: false}; |
| 125 | +await model.init(Config); |
| 126 | +``` |
| 127 | + |
| 128 | +以OCR文本检测demo为例，修改模型前处理的mean和std参数，只需要在模型初始化时传入自定义的mean和std参数。 |
| 129 | +``` |
| 130 | +await ocr.init(); |
| 131 | +修改为： |
| 132 | +const detConfig = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5]}; |
| 133 | +await ocr.init(detConfig); # 第一个参数传入新的文本检测模型链接 |
| 134 | +``` |
| 135 | + |
| 136 | +**自定义后处理参数** |
| 137 | + |
| 138 | +同理，paddle.js发布的npm包也提供了后处理参数的自定义方案。 |
| 139 | + |
| 140 | +``` |
| 141 | +# 默认参数运行 |
| 142 | +await model.predict(); |
| 143 | +
|
| 144 | +# 自定义后处理参数 |
| 145 | +const postConfig = {thresh: 0.5}; |
| 146 | +await model.predict(Config); |
| 147 | +``` |
| 148 | + |
| 149 | +以OCR文本检测 demo为例，修改文本检测后处理的参数实现扩大文本检测框的效果，修改OCR web demo中执行[模型预测代码](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L99)，即： |
| 150 | + |
| 151 | +``` |
| 152 | +const res = await ocr.recognize(img, { canvas: canvas.value }); |
| 153 | +修改为： |
| 154 | +// 定义超参数，将unclip_ratio参数从1.5 增大为3.5 |
| 155 | +const detConfig = {shape: 960, thresh: 0.3, box_thresh: 0.6, unclip_ratio:3.5}; |
| 156 | +const res = await ocr.recognize(img, { canvas: canvas.value }, detConfig); |
| 157 | +``` |
| 158 | + |
| 159 | +注：不同的任务有不同的后处理参数，详细参数参考npm包中的API。 |
| 160 | + |
| 161 | +<a name="5"></a> |
| 162 | +## 5. 其他 |
| 163 | + |
| 164 | +`Paddle.js`转换后的模型不仅支持浏览器中使用，也可以在百度小程序和微信小程序环境下运行。 |
| 165 | + |
| 166 | +|名称|目录| |
| 167 | +|-|-| |
| 168 | +|OCR文本检测| [ocrdetecXcx](./mini_program/ocrdetectXcx/) | |
| 169 | +|OCR文本识别| [ocrXcx](./mini_program/ocrXcx/) | |
| 170 | +|目标检测| coming soon | |
| 171 | +|图像分割| coming soon | |
| 172 | +|物品分类| coming soon | |
0 commit comments