教你如何用Paddle.js开发智能化微信小程序

用户1386409

发布于 2020-08-21 07:25:04

2.3K00

代码可运行

文章被收录于专栏：PaddlePaddlePaddlePaddle

运行总次数：0

代码可运行

那么，如何开发一个智能化的微信小程序呢？使用Paddle.js插件只需要3个步骤：在开发者的小程序中添加插件，引入插件代码包，最后使用插件。

1. 添加插件

在使用插件前，首先要在微信小程序的管理后台“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台，通过appid: wx7138a7bb793608c3或者插件名称（paddlejs）查找插件并添加。本插件无需申请，添加后可直接使用。

2. 引入插件代码包

用插件前，需要在微信小程序的 app.json 中声明需要使用的插件，例如plugins 定义段中可以包含Paddle.js插件声明，每个插件声明以一个使用者自定义的插件引用名作为标识，并指明插件的 appid 和需要使用的版本号。

代码示例：

{
...
"plugins": {
 "paddlejs-plugin": {
   "version": "0.0.2",
   "provider": "wx7138a7bb793608c3"
 }
}
...
}

3. 小程序代码中使用插件（以酒瓶识别为例）

1) 使用npm包引入paddle.js插件, 微信小程序使用npm包的方法可参见文档：

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

{
    "name": "yourProject",
    "version": "0.0.1",
    "main": "dist/index.js",
    "license": "ISC",
    "dependencies": {
        "paddlejs": "^1.0.7"，
    }
}

2) 在app.js的onLaunch里调用插件的register函数。

const paddlejs = require('paddlejs');
const plugin = requirePlugin("paddlejs-plugin");
//app.js
App({
  globalData: {
    Paddlejs: paddlejs.runner
  },
  onLaunch: function () {
    plugin.register(paddlejs, wx);
  }
});

3) 接下来可以在小程序的页面中使用globalData.Paddlejs了，可结合示例代码，按照如下步骤完成模型预测：

paddlejs实例初始化
加载神经网络模型&预热
以相册选择图片为例，获取图片的像素信息作为模型输入
在线预测计算
对预测结果进行后处理

const app = getApp();
let pdjs;

Page({
    onLoad: function () {
        // 1. paddlejs实例初始化
        pdjs = new app.globalData.Paddlejs({

            // 网络模型地址
            modelPath: 'https://paddlejs.cdn.bcebos.com/models/wine/', 

            // 分片参数文件数目
            fileCount: 3,

            // 模型输入shape
            feedShape: {
                fw: 224,
                fh: 224
            },

            // 模型输出shape
            fetchShape: [1, 40, 1, 1],

            // 以下三个参数为输入处理所需参数
            // 输入缩放容器大小
            scale: 256,

            // 输入裁剪容器大小
            targetSize: {
                height: 224,
                width: 224
            },     

            // 均值&方差
            mean: [0.485, 0.456, 0.406],
            std: [0.229, 0.224, 0.225]
        });

        const me = this;
        // 2. 加载神经网络模型&预热
        pdjs.loadModel().then(res => {
            me.setData({
                loaded: true
            })
        });
    }，
    chooseImage() {
        // 3. 以相册选择图片为例，获取图片的像素信息作为模型输入
        const me = this;
        wx.chooseImage({
            count: 1,
            sizeType: ['original'],
            sourceType: ['album', 'camera'],
            success(res) {
                // tempFilePath可以作为img标签的src属性显示图片
                me.getImageInfo(res.tempFilePaths[0]);
            }
        });
    }
    getImageInfo(imgPath) {
        // 获取到图片的像素信息
        const me = this;
        wx.getImageInfo({
            src: imgPath,
            success: (imgInfo) => {
                const {
                    width,
                    height,
                    path
                } = imgInfo;

                const canvasId = 'myCanvas';
                // 获取页面中的canvas上下文，tips：canvas设置的宽高要大于选择的图片宽高，canvas位置可以绝对定位到视口不可以见
                ctx = wx.createCanvasContext(canvasId);
                ctx.drawImage(path, 0, 0, width, height);
                ctx.draw(false, () => {
                    // API 1.9.0 获取图像数据
                    wx.canvasGetImageData({
                        canvasId: canvasId,
                        x: 0,
                        y: 0,
                        width: width,
                        height: height,
                        success(res) {
                            me.predict({
                                data: res.data,
                                width: width,
                                height: height
                            });
                        }
                    });
                });
            }
        });
    },
    predict(imgObj) {
        // 4. 在线预测计算
        const me = this;
        pdjs.predict(imgObj, function (data) {
            // 5. 对预测结果进行后处理
            const maxItem = pdjs.utils.getMaxItem(data);
            me.setData({
                result: maps[maxItem.index]
            });
        });
    }
});