TensorFlow.js 微信小程序插件開始支持模型緩存的方法
通常情況下,微信小程序追求的是短小精悍,即開即用,用完即走,適用于一些簡(jiǎn)單的應(yīng)用場(chǎng)景。然而,隨著微信小程序開放能力的提高,人們發(fā)現(xiàn)用微信小程序可以實(shí)現(xiàn)越來越多的功能,小程序也越來越復(fù)雜,越來越龐大起來。這個(gè)可以從小程序的大小限制的變化看出,最開始小程序的大小限制為1M,后來限制為2M,最新微信又給小程序提供了分包加載機(jī)制,開發(fā)者將小程序劃分成不同的子包,用戶在使用時(shí)按需進(jìn)行加載,所有分包大小限制提高到8M。
雖然小程序的大小限制已經(jīng)大大提升,但對(duì)于小程序開發(fā)者而言,仍然捉襟見肘。隨便幾個(gè)圖片資源、js庫就可能導(dǎo)致小程序超重,尤其對(duì)于人工智能小程序而言,更是如此?,F(xiàn)在的深度學(xué)習(xí)模型,動(dòng)輒幾十M,多則一兩百M(fèi)。這個(gè)時(shí)候開發(fā)人員就需要進(jìn)行取舍,選擇那些模型規(guī)模小,但精度不那么高的模型。比如圖片分類,我們就不要選擇Inception V3或ResNet之類的超大規(guī)模模型,而是選擇針對(duì)移動(dòng)設(shè)備優(yōu)化的MobileNet,也能取得不錯(cuò)的效果。
不過即使是MobileNet,其模型大小也有好幾M,對(duì)于精簡(jiǎn)小程序大小仍是一個(gè)很大的負(fù)擔(dān)。一種解決方案是從網(wǎng)絡(luò)加載模型,不增加小程序的體積,但這并不是一個(gè)完美的解決方案,畢竟每次推導(dǎo)都需要從網(wǎng)絡(luò)下載模型,會(huì)有一定的網(wǎng)絡(luò)延遲。在前端開發(fā)中,為了保持系統(tǒng)的流暢,通常會(huì)采用一些緩存技巧來避免每次從網(wǎng)絡(luò)加載圖片、JS等文件。那能否將模型也作為資源緩存起來呢?
Google團(tuán)隊(duì)顯然也意識(shí)到了這種需求,先是在TensorFlow.js中增加了對(duì)tfjs模型緩存的支持。最近,TensorFlow.js 微信小程序插件也得到了更新,支持微信小程序模型緩存。
模型緩存利用了微信小程序的storage接口,需要注意微信小程序?qū)torage的限制:同一個(gè)微信用戶,同一個(gè)小程序 storage 上限為 10MB。storage 以用戶維度隔離,同一臺(tái)設(shè)備上,A 用戶無法讀取到 B 用戶的數(shù)據(jù);不同小程序之間也無法互相讀寫數(shù)據(jù)。所以我們只能選用小于10M的模型。
啟用模型緩存也非常簡(jiǎn)單,步驟如下:
修改app.json文件,將tfjsPlugin的版本修改為0.0.8.
"plugins": {
"tfjsPlugin": {
"version": "0.0.8",
"provider": "wx6afed118d9e81df9"
}
}
在app.js中提供localStorageHandler函數(shù).
var fetchWechat = require('fetch-wechat');
var tf = require('@tensorflow/tfjs-core');
var plugin = requirePlugin('tfjsPlugin');
//app.js
App({
// expose localStorage handler
globalData: {localStorageIO: plugin.localStorageIO},
...
});
在模型加載時(shí)加入localStorageHandler邏輯。
const LOCAL_STORAGE_KEY = 'mobilenet_model';
export class MobileNet {
private model: tfc.GraphModel;
constructor() { }
async load() {
const localStorageHandler = getApp().globalData.localStorageIO(LOCAL_STORAGE_KEY);
try {
this.model = await tfc.loadGraphModel(localStorageHandler);
} catch (e) {
this.model =
await tfc.loadGraphModel(MODEL_URL);
this.model.save(localStorageHandler);
}
}
和瀏覽器緩存機(jī)制有點(diǎn)不同的是,只有在代碼包被清理的時(shí)候本地緩存才會(huì)被清理。如果需要處理緩存,可以通過 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync,wx.removeStorage/wx.removeStorageSync 對(duì)本地緩存進(jìn)行讀寫和清理。
以上就是TensorFlow.js 微信小程序插件開始支持模型緩存的方法的詳細(xì)內(nèi)容,更多關(guān)于TensorFlow小程序支持模型緩存請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
利用a標(biāo)簽自動(dòng)解析URL分析網(wǎng)址實(shí)例
a標(biāo)簽也和window.location一樣,也有這樣屬性,因此可以利用它來分析網(wǎng)址,下面的實(shí)例代碼,大家可以看看2014-10-10
JavaScript報(bào)錯(cuò):Uncaught ReferenceError: XYZ is&
在 JavaScript 編程中,“Uncaught ReferenceError: XYZ is not defined” 是一種常見的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖使用一個(gè)未聲明的變量或標(biāo)識(shí)符時(shí),故本文給大家介紹了JavaScript報(bào)錯(cuò):Uncaught ReferenceError: XYZ is not defined的解決方法,需要的朋友可以參考下2024-07-07
JavaScript中window.open()打開新窗口的藝術(shù)與陷阱
這篇文章主要介紹了JavaScript中window.open()打開新窗口的藝術(shù)與陷阱,詳細(xì)解釋了其基本用法、參數(shù)、兼容性以及背后的瀏覽器策略,通過本文可以更好地掌握如何在前端開發(fā)中使用window.open(),需要的朋友可以參考下2025-11-11
詳解Webpack + ES6 最新環(huán)境搭建與配置
這篇文章主要介紹了詳解Webpack + ES6 最新環(huán)境搭建與配置,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
用javascript替換URL中的參數(shù)值示例代碼
本篇文章主要是對(duì)用javascript替換URL中的參數(shù)值示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01
js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
JS判斷不同分辨率調(diào)用不同的CSS樣式文件實(shí)現(xiàn)思路及測(cè)試代碼
最近看一個(gè)網(wǎng)站,發(fā)現(xiàn)顯示器不同的分辨率,樣式文件調(diào)用的也不一樣,于是很好奇研究并寫了一個(gè),經(jīng)測(cè)試感覺還不錯(cuò),感興趣的你可以來看看哦2013-01-01

