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函式。

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

3) 接下來可以在小程式的頁面中使用globalData.Paddlejs了，可結合示例程式碼，按照如下步驟完成模型預測：

1. paddlejs例項初始化

2. 載入神經網路模型&預熱

3. 以相簿選擇圖片為例，獲取圖片的畫素資訊作為模型輸入

4. 線上預測計算

5. 對預測結果進行後處理

constapp=getApp();
letpdjs;

Page({
onLoad:function(){
//1.paddlejs例項初始化
pdjs=newapp.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]
});

constme=this;
//2.載入神經網路模型&預熱
pdjs.loadModel().then(res=>{
me.setData({
loaded:true
})
});
}，
chooseImage(){
//3.以相簿選擇圖片為例，獲取圖片的畫素資訊作為模型輸入
constme=this;
wx.chooseImage({
count:1,
sizeType:['original'],
sourceType:['album','camera'],
success(res){
//tempFilePath可以作為img標籤的src屬性顯示圖片
me.getImageInfo(res.tempFilePaths[0]);
}
});
}
getImageInfo(imgPath){
//獲取到圖片的畫素資訊
constme=this;
wx.getImageInfo({
src:imgPath,
success:(imgInfo)=>{
const{
width,
height,
path
}=imgInfo;

constcanvasId='myCanvas';
//獲取頁面中的canvas上下文，tips：canvas設定的寬高要大於選擇的圖片寬高，canvas位置可以絕對定位到視口不可以見
ctx=wx.createCanvasContext(canvasId);
ctx.drawImage(path,0,0,width,height);
ctx.draw(false,()=>{
//API1.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.線上預測計算
constme=this;
pdjs.predict(imgObj,function(data){
//5.對預測結果進行後處理
constmaxItem=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

插播小廣告~~~

百度APP前端智慧化研發團隊招人啦，可以通過百度招聘官網查詢相關職位，或直接發簡歷到[email protected]。

如在使用過程中有問題，可加入Paddle.js愛好者qq群進行交流：583045070。

·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

下載安裝命令

## CPU版本安裝命令
pip install -f https://paddlepaddle.org.cn/pip/oschina/cpu paddlepaddle

## GPU版本安裝命令
pip install -f https://paddlepaddle.org.cn/pip/oschina/gpu paddlepaddle-gpu

>>訪問 PaddlePaddle 官網，瞭解更多相關內容。