[Model] add Paddle.js web demo (#392)

* add application include paddle.js web demo and xcx * cp PR #5 * add readme * fix comments and link * fix xcx readme * fix Task 1 * fix bugs * refine readme * delete ocrxcx readme * refine readme * fix bugs * delete old readme * 200px to 300px * revert 200px to 300px Co-authored-by: Jason <jiangjiajun@baidu.com>
2025-10-06 17:17:14 +08:00 · 2022-10-20 17:01:38 +08:00
parent 587ffd4caf
commit 0a22979c35
302 changed files with 63930 additions and 0 deletions
--- a/examples/application/js/mini_program/README.md
+++ b/examples/application/js/mini_program/README.md
@@ -0,0 +1,126 @@
+
+# Paddle.js微信小程序Demo
+
+- [1.简介](#1)
+- [2. 项目启动](#2)
+  * [2.1 准备工作](#21)
+  * [2.2 启动步骤](#22)
+  * [2.3 效果展示](#23)
+- [3. 模型推理pipeline](#3)
+- [4. 常见问题](#4)
+
+<a name="1"></a>
+## 1.简介
+
+
+本目录下包含文本检测、文本识别小程序demo，通过使用 [Paddle.js](https://github.com/PaddlePaddle/Paddle.js) 以及 [Paddle.js微信小程序插件](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3&token=956931339&lang=zh_CN) 完成在小程序上利用用户终端算力实现文本检测框选效果。
+
+<a name="2"></a>
+## 2. 项目启动
+
+<a name="21"></a>
+### 2.1 准备工作
+* [申请微信小程序账号](https://mp.weixin.qq.com/)
+* [微信小程序开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
+* 前端开发环境准备：node、npm
+* 小程序管理后台配置服务器域名，或打开开发者工具【不校验合法域名】 
+
+详情参考:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)
+
+<a name="22"></a>
+### 2.2 启动步骤
+
+#### **1. 克隆Demo代码**
+```sh
+git clone https://github.com/PaddlePaddle/FastDeploy
+cd FastDeploy/examples/application/js/mini_program
+```
+
+#### **2. 进入小程序目录，安装依赖**
+
+```sh
+# 运行文本识别demo，进入到ocrXcx目录
+cd ./ocrXcx && npm install
+# 运行文本检测demo，进入到ocrdetectXcx目录
+# cd ./ocrdetectXcx && npm install
+```
+
+#### **3. 微信小程序导入代码**
+打开微信开发者工具 --> 导入 --> 选定目录，输入相关信息
+
+#### **4. 添加 Paddle.js微信小程序插件**
+小程序管理界面 --> 设置 --> 第三方设置 --> 插件管理 --> 添加插件 --> 搜索 `wx7138a7bb793608c3` 并添加  
+[参考文档](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
+
+#### **5. 构建依赖**
+点击开发者工具中的菜单栏：工具 --> 构建 npm
+
+原因：node_modules 目录不会参与编译、上传和打包中，小程序想要使用 npm 包必须走一遍“构建 npm”的过程，构建完成会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。*  
+[参考文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
+
+<a name="23"></a>
+### 2.3 效果展示
+
+<img src="https://user-images.githubusercontent.com/43414102/157648579-cdbbee61-9866-4364-9edd-a97ac0eda0c1.png" width="300px">
+
+<a name="3"></a>
+## 3. 模型推理pipeline
+
+```typescript
+// 引入 paddlejs 和 paddlejs-plugin，注册小程序环境变量和合适的 backend
+import * as paddlejs from '@paddlejs/paddlejs-core';
+import '@paddlejs/paddlejs-backend-webgl';
+const plugin = requirePlugin('paddlejs-plugin');
+plugin.register(paddlejs, wx);
+
+// 初始化推理引擎
+const runner = new paddlejs.Runner({modelPath, feedShape, mean, std}); 
+await runner.init();
+
+// 获取图像信息
+wx.canvasGetImageData({
+    canvasId: canvasId,
+    x: 0,
+    y: 0,
+    width: canvas.width,
+    height: canvas.height,
+    success(res) {
+        // 推理预测
+        runner.predict({
+            data: res.data,
+            width: canvas.width,
+            height: canvas.height,
+        }, function (data) {
+            // 获取推理结果
+            console.log(data)
+        });
+    }
+});
+```
+
+<a name="4"></a>
+## 4. 常见问题
+### 4.1 出现报错 `Invalid context type [webgl2] for Canvas#getContext`
+
+可以不管，不影响正常代码运行和demo功能
+
+### 4.2 预览看不到结果
+
+建议尝试真机调试
+
+### 4.3 微信开发者工具出现黑屏，然后出现超多报错
+
+重启微信开发者工具
+
+### 4.4 模拟和真机调试结果不一致；模拟检测不到文本等
+
+可以以真机为准；
+
+模拟检测不到文本等可以尝试随意改动下代码（增删换行等）再点击编译
+
+
+### 4.5 手机调试或运行时出现 长时间无反应等提示
+
+请继续等待，模型推理需要一定时间
+
+