当微信小程序遇上TensorFlow - 本地缓存模型

从明天开始，我开始休年假，准备去云南逛一逛，估计这段时间又无法更新公众号，还请大家谅解。

在《当微信小程序遇上TensorFlow - tensorflow.js篇》一文中，我介绍了在微信小程序中使用TensorFlow.js，有朋友可能注意到，小程序每次都需要从网络加载模型。虽然tensorflow.js官方声称利用了浏览器的缓存技术，并不会每次都从网络下载。但在微信小程序中，使用的是wx.request接口下载文件，测试下来发现，似乎没有缓存机制。虽然小程序号称即用即走，但每次都需要从网络下载模型，完全体现不出端推断的优点，况且深度学习模型通常也不小，通常有好几M。那我们能否将模型存储到本地呢？

查阅tfjs的文档，在浏览器中，提供了几种本地存储的方式：

1. 将模型保存到浏览器的local storage，后续可以从local storage加载
2. 将模型保存到浏览器的IndexDB，然后从IndexDB加载
3. 将模型通过下载方式保存到本地，然后可以通过文件上载方式加载模型

微信小程序支持两种形式的本地存储：数据缓存和本地文件。为此，我参考了 browser_files.ts 的实现，实现了微信小程序平台下的本地文件存储 mp_files.ts 。具体代码可以参考：https://github.com/mogoweb/wechat-tfjs-core

实现上并没什么特别的难度，但是栽在微信小程序的坑里，爬了好几天才找到原因。具体说来就是 FileSystemManager.readFile(Object object) 这个接口，不要想当然的认为将 encoding 设为 binary，就会返回 ArrayBuffer 类型数据，文档对 encoding 参数的说明是：

指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容

所以为了以二进制字节读取文件内容，千万不要传 encoding 参数，否则永远返回的是 string 类型数据。

至于模型保存，可以参考如下代码，为此我为小程序定义了一个 mp:// 前缀：

const save_model = async model => {

  const saveResult = await model.save('mp://' + wx.env.USER_DATA_PATH + '/mymodel');
  console.log(saveResult);
}

加载模型，文件路径请指定正确的json和权重文件，无需加上 mp:// 前缀：

const load_model = async () => {

  let model_files = [wx.env.USER_DATA_PATH + '/mymodel.json', wx.env.USER_DATA_PATH + '/mymodel.weights.bin'];
  var model = await tf.loadLayersModel(tf.io.mpFiles(model_files));
  return model;
}

示例代码可以参考：https://github.com/mogoweb/wechat-tfjs-examples

需要注意的是，微信小程序对于本地文件总大小有10M的限制，所以这种方法只适合比较小的模型，如果那种几十M的深度学习模型，还是尽量部署到服务器。毕竟小程序的初衷就是小巧、轻便，如果过重，就背离了小程序的设计理念。