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

2024-10-02 20:33:24

通常情况下，微信小程序追求的是短小精悍，即开即用，用完即走，适用于一些简单的应用场景。然而，随着微信小程序开放能力的提高，人们发现用微信小程序可以实现越来越多的功能，小程序也越来越复杂，越来越庞大起来。这个可以从小程序的大小限制的变化看出，最开始小程序的大小限制为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小程序支持模型缓存请关注我们其它相关文章！

微信小程序数据缓存实现方法详解

微信小程序可以通过wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)对本地缓存进行设置.获取和清理.本地缓存最大为10MB. wx.setStorage()---------异步设置缓存微信官方给出的属性 OBJECT参数说明: 参数类型必填说明 key String 是本地缓存中的指定的 key data Object/String
微信小程序本地缓存数据增删改查实例详解

微信小程序本地缓存数据增删改查实例详解数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt
微信小程序之数据缓存的实例详解

微信小程序之数据缓存的实例详解前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty
微信小程序中网络请求缓存的解决方法

需求提交小程序审核时,有一个体验测评,产品让我们根据小程序的体验测评报告去优化小程序. 其中有一项是网络请求的优化,给我们出了很大的难题. 文档中是这样解释的:3分钟以内同一个url请求不出现两次回包大于128KB且一模一样的内容看到这个问题的时候,首先想到的是在响应头上加上cache-control,经过测试发现小程序并不支持网路请求缓存.搜索发现官方明确答复,小程序不支持网络请求缓存:wx.request不支持http缓存既然官方不支持网络请求缓存,那只能自己想办法解决这个问题了. 先
微信小程序缓存过期时间的使用详情

关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储相应的api---------- wx.setStorage(OBJECT) wx.getStorage(OBJECT) wx.getStorageInfo(OBJECT) w
小程序清理本地缓存的方法

1.wx.clearStorage接口函数,这个函数不需要参数,可以清理本地的所有缓存. 清除前: 清除后: 2.wx.clearStorageSync接口函数,这个函数用于同步清理本地数据缓存,该接口同样也没有参数. 清除前: 清除后: 3.wx.removeStorage接口函数:这个接口函数用于从本地缓存中异步删除指定key对应内容清除前: 清除后: 4.wx.removeStorageSync接口函数:这个函数用于从本地缓存中同步删除指定key对应的内容清除前: 清除后: 以上就是本
微信小程序-详解数据缓存

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储
TensorFlow.js 微信小程序插件开始支持模型缓存的方法

通常情况下,微信小程序追求的是短小精悍,即开即用,用完即走,适用于一些简单的应用场景.然而,随着微信小程序开放能力的提高,人们发现用微信小程序可以实现越来越多的功能,小程序也越来越复杂,越来越庞大起来.这个可以从小程序的大小限制的变化看出,最开始小程序的大小限制为1M,后来限制为2M,最新微信又给小程序提供了分包加载机制,开发者将小程序划分成不同的子包,用户在使用时按需进行加载,所有分包大小限制提高到8M. 虽然小程序的大小限制已经大大提升,但对于小程序开发者而言,仍然捉襟见肘.随便几个图片资源
微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名类型默认值说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE
微信小程序web-view不支持打开非业务域名https //XXXX 请重新配置的解决办法

目录发现问题解决方法总结发现问题微信小程序提供web-view,可以在小程序中加载网页我在微信公众平台中的开发管理—>开发设置中对于服务器域名中的request合法域名进行了正确设置,但是在微信开发者工具中仍然无法跳转网页,显示不支持打开非业务域名https //XXXX 请重新配置解决方法网上查找了很久资料,后来在官方文档中发现了问题所在,配置服务器域名是不够的,需要管理后台中配置业务域名官方介绍文档在这里但是还有一个最大的问题,个人类型的小程序暂不支持使用 orz 我的小
微信小程序利用co处理异步流程的方法教程

本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍: co co是一个基于ES6 Generator特性实现的[异步流程同步化]写法的工具库. co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法: function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () {
微信小程序实现页面跳转传值的方法

微信小程序实现页面跳转传值的方法比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js Page({ data: { id:'' }, onLoad: function (options){ var that = this; that.setD
详解微信小程序获取当前时间及日期的方法

获取当前时间首先,在要获取时间的.js文件中加载util.js文件然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u
微信小程序实现滑动切换自定义页码的方法分析

本文实例讲述了微信小程序实现滑动切换自定义页码的方法.分享给大家供大家参考,具体如下: 效果如下: 这里三个图片使用了swiper组件进行轮播,下方的页码数字1.2.3会随着图片的切换变动位置在微信小程序中我们是无法操作dom的,那么 var div = document.getElementById('id'); div.setAttribute("class", "className"); 这种方式实现. 然后我们可以考虑使用hidden或者wx:if的方式,
详解微信小程序的不同函数调用的几种方法

一.调取参数直接调取当前js中的方法, 调取参数that.bindViewTap(); 二.跳转页面 navigateTo: function () { wx.navigateTo({ url: '../page4/page4' }); }, 全局变量使用方法 a.js var app = getApp() Page({ data: { hex1: [], })} //设置全局变量 if (hex1 != null) { app.globalData.hex1 = hex1; } b.js 接
微信小程序如何刷新当前界面的实现方法

在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下微信小程序刷新当前界面的几种方法. 方法一:this.onLoad() 使用方法:在操作函数中调用this.onLoad()或that.onLoad()(有时候this的作用域不够的时候需要定义that = this). 适用场景:本次操作对页面onLoad函数所携带的各种参数没有影响.这时候我们在
微信小程序整合使用富文本编辑器的方法详解

本文实例讲述了微信小程序整合使用富文本编辑器的方法.分享给大家供大家参考,具体如下: 使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse 具体使用步骤: 1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除 2. 在.js文件中引入WxParse模块 var WxParse= require('../../../wxParse/wxParse.js'); 3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入 @i

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

相关推荐

随机推荐