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 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
服装设计专业自荐书范文
2013/12/30 职场文书
网络工程师职业规划
2014/02/10 职场文书
英文演讲稿开场白
2014/08/25 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
农业项目合作意向书
2015/05/08 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Go 内联优化让程序员爱不释手
2022/06/21 Golang