早在今年5月百度飛槳聯(lián)手百度APP技術(shù)團(tuán)隊(duì)開源了飛槳前端推理引擎Paddle.js,一時(shí)間國內(nèi)Web開發(fā)的小伙伴們歡欣鼓舞,畢竟是國內(nèi)首個開源的機(jī)器學(xué)習(xí)Web在線預(yù)測方案。
GitHub項(xiàng)目地址:
https://github.com/PaddlePaddle/Paddle.js
這款Web前端AI方案相對于Native應(yīng)用,有著開發(fā)使用簡單、部署方便等優(yōu)勢,而且推理速度也完全能夠滿足實(shí)時(shí)性的在線預(yù)測場景需要。前期還推出了Paddle.js的在線直播課程,手把手的教Web開發(fā)的同學(xué)們使用Web智能化的能力。
前端變化風(fēng)起云涌,不會點(diǎn)AI都不好意思說自己是個時(shí)髦的前端開發(fā)者,趕快點(diǎn)開看看吧。Paddle.js AI快車道直播的錄播地址:
https://www.bilibili.com/video/BV1gZ4y1H7UA?p=6
Paddle.js 插件+微信小程序= 懂AI的微信小程序
在Web前端開發(fā)領(lǐng)域,自然少不了微信小程序的身影。相對于網(wǎng)頁等形式的Web開發(fā)來說,微信小程序有著自身的一些優(yōu)勢,那么是否可以非常簡單的在微信小程序中使用Web智能化的能力呢?百度Paddle.js開發(fā)團(tuán)隊(duì)非常關(guān)注前端小伙伴的訴求,在這個夏天為同學(xué)們推出了Paddle.js微信小程序插件,讓微信小程序中使用AI能力變得So easy!
Paddle.js 微信小程序插件有什么神奇的功效?
它抹平了微信小程序與h5在canvas、fetch等api上的差異。微信小程序由渲染層和邏輯層兩個線程管理,渲染層的界面使用 WebView 進(jìn)行渲染;邏輯層專注運(yùn)行 JavaScript 代碼。通過簡單的插件引入,即可在微信小程序中使用Paddle.js的能力高效地進(jìn)行AI模型預(yù)測。
采用插件方式非常便捷,小程序開發(fā)者可直接在小程序內(nèi)使用插件,無需重復(fù)開發(fā)。但是插件不能獨(dú)立運(yùn)行,必須嵌入在其他小程序中才能被用戶使用;而第三方小程序在使用插件時(shí),也無法看到插件的代碼。因此,插件適合用來封裝自己的功能或服務(wù),提供給第三方小程序進(jìn)行展示和使用。
首先,無論是Web網(wǎng)頁還是微信小程序,想要實(shí)現(xiàn)在線AI能力都需要加載訓(xùn)練好的神經(jīng)網(wǎng)絡(luò)模型,飛槳提供了強(qiáng)大和內(nèi)容豐富的模型庫,供廣大開發(fā)者選擇。
接下來先一起看一看,智能化的微信小程序是什么效果吧!
01 Paddle.js實(shí)例1:人臉框選小程序
圖中是一個利用Paddle.js插件實(shí)現(xiàn)的頭部框選小程序,是在小程序端進(jìn)行計(jì)算的,由于Web端的算力日趨強(qiáng)大,用戶Web端計(jì)算不僅可以節(jié)省服務(wù)端的計(jì)算壓力,而且可以提供非??焖俚膶?shí)時(shí)響應(yīng),所以在小程序中做視頻流的實(shí)時(shí)人臉框選任務(wù)已成為可能。

02 Paddle.js實(shí)例2:校名識別小程序
圖中是利用Paddle.js實(shí)現(xiàn)的校名識別小程序,輸入不同的高校圖片能夠快速檢測出學(xué)校名稱結(jié)果,而且這些圖片并沒有上傳到服務(wù)端,既可以快速地得到計(jì)算結(jié)果又沒有將用戶信息上傳到服務(wù)端,Web AI能夠很好的保護(hù)用戶的隱私。
Paddle.js微信小程序插件怎么用?
那么,如何開發(fā)一個智能化的微信小程序呢?使用Paddle.js插件只需要3個步驟:在開發(fā)者的小程序中添加插件,引入插件代碼包,最后使用插件。
1. 添加插件
在使用插件前,首先要在微信小程序的管理后臺“設(shè)置-第三方服務(wù)-插件管理”中添加插件。開發(fā)者可登錄小程序管理后臺,通過appid: wx7138a7bb793608c3或者插件名稱(paddlejs)查找插件并添加。本插件無需申請,添加后可直接使用。
2. 引入插件代碼包
用插件前,需要在微信小程序的 app.json 中聲明需要使用的插件,例如plugins 定義段中可以包含Paddle.js插件聲明,每個插件聲明以一個使用者自定義的插件引用名作為標(biāo)識,并指明插件的 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里調(diào)用插件的register函數(shù)。
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了,可結(jié)合示例代碼,按照如下步驟完成模型預(yù)測:
- paddlejs實(shí)例初始化
- 加載神經(jīng)網(wǎng)絡(luò)模型&預(yù)熱
- 以相冊選擇圖片為例,獲取圖片的像素信息作為模型輸入
- 在線預(yù)測計(jì)算
- 對預(yù)測結(jié)果進(jìn)行后處理
const app = getApp(); let pdjs; Page({ onLoad: function () { // 1. paddlejs實(shí)例初始化 pdjs = new app.globalData.Paddlejs({ // 網(wǎng)絡(luò)模型地址 modelPath: 'https://paddlejs.cdn.bcebos.com/models/wine/', // 分片參數(shù)文件數(shù)目 fileCount: 3, // 模型輸入shape feedShape: { fw: 224, fh: 224 }, // 模型輸出shape fetchShape: [1, 40, 1, 1], // 以下三個參數(shù)為輸入處理所需參數(shù) // 輸入縮放容器大小 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. 加載神經(jīng)網(wǎng)絡(luò)模型&預(yù)熱 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標(biāo)簽的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設(shè)置的寬高要大于選擇的圖片寬高,canvas位置可以絕對定位到視口不可以見 ctx = wx.createCanvasContext(canvasId); ctx.drawImage(path, 0, 0, width, height); ctx.draw(false, () => { // API 1.9.0 獲取圖像數(shù)據(jù) 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. 在線預(yù)測計(jì)算 const me = this; pdjs.predict(imgObj, function (data) { // 5. 對預(yù)測結(jié)果進(jìn)行后處理 const maxItem = pdjs.utils.getMaxItem(data); me.setData({ result: maps[maxItem.index] }); }); } });
下面是酒瓶識別小程序效果展示:
除了上述示例所使用到的模型以外,Paddle.js還支持更多場景,包括不限于手勢檢測、人像分割、人臉檢測等等,這里提供了已經(jīng)實(shí)現(xiàn)的Demo樣例:
https://paddlejs.baidu.com/
當(dāng)然,百度飛槳提供了非常豐富的模型資源庫,開發(fā)者也可以通過Paddle.js自帶的模型轉(zhuǎn)換工具施加魔法將Paddle模型變成Web可用模型,轉(zhuǎn)化方法:
https://github.com/PaddlePaddle/Paddle.js/tree/master/tools/ModelConverter
不過需要您了解的是,Paddle.js目前只支持了有限的一組算子操作,如果您的模型中使用了不支持的算子,那么Paddle.js將運(yùn)行失敗并提示您的模型中有哪些op算子目前還不支持。如果您的模型中存在目前Paddle.js不支持的算子,歡迎在GitHub上提出Issue,讓我們知道你需要支持。
目前支持算子列表如下所示:
https://github.com/PaddlePaddle/Paddle.js/blob/master/src/factory/fshader/README.md