侧边栏
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Paddle.js微信小程序Demo

English | 简体中文

Paddle.js微信小程序Demo

<a name="1"></a>

1.简介

本目录下包含文本检测、文本识别小程序demo，通过使用 Paddle.js 以及 Paddle.js微信小程序插件 完成在小程序上利用用户终端算力实现文本检测框选效果。

<a name="2"></a>

2. 项目启动

<a name="21"></a>

2.1 准备工作

详情参考:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)

<a name="22"></a>

2.2 启动步骤

1. 克隆Demo代码

git clone https://github.com/PaddlePaddle/FastDeploy
cd FastDeploy/examples/application/js/mini_program

2. 进入小程序目录，安装依赖

# 运行文本识别demo，进入到ocrXcx目录
cd ./ocrXcx && npm install
# 运行文本检测demo，进入到ocrdetectXcx目录
# cd ./ocrdetectXcx && npm install

3. 微信小程序导入代码

打开微信开发者工具 —> 导入 —> 选定目录，输入相关信息

4. 添加 Paddle.js微信小程序插件

小程序管理界面 —> 设置 —> 第三方设置 —> 插件管理 —> 添加插件 —> 搜索 wx7138a7bb793608c3 并添加
参考文档

5. 构建依赖

点击开发者工具中的菜单栏：工具 —> 构建 npm

原因：node_modules 目录不会参与编译、上传和打包中，小程序想要使用 npm 包必须走一遍“构建 npm”的过程，构建完成会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。*
参考文档

<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

// 引入 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. 常见问题