早在今年5月百度飛槳聯手百度APP技術團隊開源了飛槳前端推理引擎Paddle.js，一時間國內Web開發的小夥伴們歡欣鼓舞，畢竟是國內首個開源的機器學習Web在線預測方案。php
GitHub項目地址：html
https://github.com/PaddlePaddle/Paddle.js前端
這款Web前端AI方案相對於Native應用，有着開發使用簡單、部署方便等優點，並且推理速度也徹底可以知足實時性的在線預測場景須要。前期還推出了Paddle.js的在線直播課程，手把手的教Web開發的同窗們使用Web智能化的能力。git
前端變化風起雲涌，不會點AI都很差意思說本身是個時髦的前端開發者，趕快點開看看吧。Paddle.js AI快車道直播的錄播地址:github
https://www.bilibili.com/video/BV1gZ4y1H7UA?p=6npm
下載安裝命令
## 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
Paddle.js 插件+微信小程序= 懂AI的微信小程序
在Web前端開發領域，天然少不了微信小程序的身影。相對於網頁等形式的Web開發來講，微信小程序有着自身的一些優點，那麼是否能夠很是簡單的在微信小程序中使用Web智能化的能力呢？百度Paddle.js開發團隊很是關注前端小夥伴的訴求，在這個夏天爲同窗們推出了Paddle.js微信小程序插件，讓微信小程序中使用AI能力變得So easy！json
Paddle.js 微信小程序插件有什麼神奇的功效？canvas
它抹平了微信小程序與h5在canvas、fetch等api上的差別。微信小程序由渲染層和邏輯層兩個線程管理，渲染層的界面使用 WebView 進行渲染；邏輯層專一運行 JavaScript 代碼。經過簡單的插件引入，便可在微信小程序中使用Paddle.js的能力高效地進行AI模型預測。小程序
採用插件方式很是便捷，小程序開發者可直接在小程序內使用插件，無需重複開發。可是插件不能獨立運行，必須嵌入在其餘小程序中才能被用戶使用；而第三方小程序在使用插件時，也沒法看到插件的代碼。所以，插件適合用來封裝本身的功能或服務，提供給第三方小程序進行展現和使用。微信小程序
首先，不管是Web網頁仍是微信小程序，想要實如今線AI能力都須要加載訓練好的神經網絡模型，飛槳提供了強大和內容豐富的模型庫，供廣大開發者選擇。
接下來先一塊兒看一看，智能化的微信小程序是什麼效果吧！
01Paddle.js實例1：人臉框選小程序
圖中是一個利用Paddle.js插件實現的頭部框選小程序，是在小程序端進行計算的，因爲Web端的算力日趨強大，用戶Web端計算不只能夠節省服務端的計算壓力，並且能夠提供很是快速的實時響應，因此在小程序中作視頻流的實時人臉框選任務已成爲可能。
Paddle.js實例2：校名識別小程序
圖中是利用Paddle.js實現的校名識別小程序，輸入不一樣的高校圖片可以快速檢測出學校名稱結果，並且這些圖片並無上傳到服務端，既能夠快速地獲得計算結果又沒有將用戶信息上傳到服務端，Web AI可以很好的保護用戶的隱私。
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
插播小廣告~~~
百度APP前端智能化研發團隊招人啦，能夠經過百度招聘官網查詢相關職位，或直接發簡歷到wangqun@baidu.com。
如在使用過程當中有問題，可加入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