欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

如何用Paddle.js開發(fā)智能化微信小程序 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們在追求其視覺表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營銷的便利,運(yùn)營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

如何用Paddle.js開發(fā)智能化微信小程序

發(fā)表時(shí)間:2021-1-11

發(fā)布人:葵宇科技

瀏覽次數(shù):67

早在今年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ù)測:

  1. paddlejs實(shí)例初始化
  2. 加載神經(jīng)網(wǎng)絡(luò)模型&預(yù)熱
  3. 以相冊選擇圖片為例,獲取圖片的像素信息作為模型輸入
  4. 在線預(yù)測計(jì)算
  5. 對預(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

相關(guān)案例查看更多