教你如何用Paddle.js开发智能化微信小程序
那么,如何开发一个智能化的微信小程序呢?使用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]
});
});
}
});
下面是酒瓶识别小程序效果展示:
除了上述示例所使用到的模型以外,Paddle.js还支持更多场景,包括不限于手势检测、人像分割、人脸检测等等,这里提供了已经实现的Demo样例:
https://paddlejs.baidu.com/
当然,百度飞桨提供了非常丰富的模型资源库,开发者也可以通过Paddle.js自带的模型转换工具施加魔法将Paddle模型变成Web可用模型,转化方法:
https://github.com/PaddlePaddle/Paddle.js/tree/master/tools/ModelConverter
不过需要您了解的是,Paddle.js目前只支持了有限的一组算子操作,如果您的模型中使用了不支持的算子,那么Paddle.js将运行失败并提示您的模型中有哪些op算子目前还不支持。如果您的模型中存在目前Paddle.js不支持的算子,欢迎在GitHub上提出Issue,让我们知道你需要支持。
目前支持算子列表如下所示:
https://github.com/PaddlePaddle/Paddle.js/blob/master/src/factory/fshader/README.md
·Paddle.js官方文档·
https://github.com/PaddlePaddle/Paddle.js/blob/master/README_cn.md
·Paddle.js GitHub项目地址·
https://github.com/PaddlePaddle/Paddle.js
·PaddleX官网地址·
https://www.paddlepaddle.org.cn/paddle/paddlex
END
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【原创】Java并发编程系列29 | ConcurrentLinkedQueue
- UOS系统安装-配置Qt环境
- C++控制台程序接收、解析参数及被如何调用、调试
- C++11标准常用特性---统一初始化
- QPainter的fillRect函数-QGradient-Preset渐变颜色预设值
- 深度学习|Tensorflow2.0进阶
- Mumble——简介及搭建
- 网站开启HSTS增强安全性
- 形式化分析工具(六):HLPSL Tutorial(Example 4,other)
- Typecho回复可见功能
- 微信小程序开发实战(13):图像组件(image)
- Typecho文章代码高亮功能
- “数据分析师”面试最怕被问到的SQL优化问题(下)
- 普通小程序的订阅消息不再限制时间
- Telnet 配置实验