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 相关文章推荐
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
Openlayers绘制地图标注
Sep 28 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 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
python实现音乐下载的统计
2018/06/20 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
opencv python图像梯度实例详解
2020/02/04 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
期末考试复习计划
2015/01/19 职场文书
音乐教师个人总结
2015/02/06 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
Mysql数据库命令大全
2021/05/26 MySQL