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 相关文章推荐
JavaScript运动减速效果实例分析
Aug 04 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
react-router实现按需加载
May 09 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
js实现json数组分组合并操作示例
Feb 12 Javascript
js微信分享接口调用详解
Jul 23 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
微信小程序使用 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python简单实现获取当前时间
2016/08/27 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python实现的购物车功能示例
2018/02/11 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
见习报告的格式
2014/11/04 职场文书
2014年会计工作总结
2014/11/27 职场文书
工会工作个人总结
2015/03/03 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android