TensorFlow.js 微信小程序插件开始支持模型缓存的方法


Posted in Javascript onFebruary 21, 2020

通常情况下,微信小程序追求的是短小精悍,即开即用,用完即走,适用于一些简单的应用场景。然而,随着微信小程序开放能力的提高,人们发现用微信小程序可以实现越来越多的功能,小程序也越来越复杂,越来越庞大起来。这个可以从小程序的大小限制的变化看出,最开始小程序的大小限制为1M,后来限制为2M,最新微信又给小程序提供了分包加载机制,开发者将小程序划分成不同的子包,用户在使用时按需进行加载,所有分包大小限制提高到8M。

虽然小程序的大小限制已经大大提升,但对于小程序开发者而言,仍然捉襟见肘。随便几个图片资源、js库就可能导致小程序超重,尤其对于人工智能小程序而言,更是如此。现在的深度学习模型,动辄几十M,多则一两百M。这个时候开发人员就需要进行取舍,选择那些模型规模小,但精度不那么高的模型。比如图片分类,我们就不要选择Inception V3或ResNet之类的超大规模模型,而是选择针对移动设备优化的MobileNet,也能取得不错的效果。

不过即使是MobileNet,其模型大小也有好几M,对于精简小程序大小仍是一个很大的负担。一种解决方案是从网络加载模型,不增加小程序的体积,但这并不是一个完美的解决方案,毕竟每次推导都需要从网络下载模型,会有一定的网络延迟。在前端开发中,为了保持系统的流畅,通常会采用一些缓存技巧来避免每次从网络加载图片、JS等文件。那能否将模型也作为资源缓存起来呢?

Google团队显然也意识到了这种需求,先是在TensorFlow.js中增加了对tfjs模型缓存的支持。最近,TensorFlow.js 微信小程序插件也得到了更新,支持微信小程序模型缓存。

模型缓存利用了微信小程序的storage接口,需要注意微信小程序对storage的限制:同一个微信用户,同一个小程序 storage 上限为 10MB。storage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据;不同小程序之间也无法互相读写数据。所以我们只能选用小于10M的模型。

启用模型缓存也非常简单,步骤如下:

修改app.json文件,将tfjsPlugin的版本修改为0.0.8.

"plugins": {
 "tfjsPlugin": {
  "version": "0.0.8",
  "provider": "wx6afed118d9e81df9"
 }
}

在app.js中提供localStorageHandler函数.

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},
 ...
});

在模型加载时加入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);
  }
 }

和浏览器缓存机制有点不同的是,只有在代码包被清理的时候本地缓存才会被清理。如果需要处理缓存,可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync,wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理。

另外需要注意的是,当前tfjs模型托管在tfhub上,需要翻墙访问。项目中的说明文件也提及了这个问题,给出了解决方案,但那是针对以前托管在谷歌云上的模型,建立了中国国内用户可以访问到的镜像。耐心等待吧,相信Google的开发人员会解决tfhub的镜像问题的。

以上就是TensorFlow.js 微信小程序插件开始支持模型缓存的方法的详细内容,更多关于TensorFlow小程序支持模型缓存请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
JS实现判断移动端PC端功能
Feb 21 #Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 #Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 #Javascript
纯js实现无缝滚动功能代码实例
Feb 21 #Javascript
vue中实现动态生成二维码的方法
Feb 21 #Javascript
JS如何把字符串转换成json
Feb 21 #Javascript
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php实现分页工具类分享
2014/01/09 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
研发工程师的岗位职责
2013/11/18 职场文书
工作个人的自我评价
2014/01/14 职场文书
国际贸易专业求职信
2014/06/04 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
公务员政审材料
2014/12/23 职场文书
邀请书格式范文
2015/02/02 职场文书
小学生手册家长意见
2015/06/03 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技