微信小程序Web Worker中使用TensorFlow.js报错的解决咨询

问题根源 #

1. TensorFlow.js 3.x版本对全局环境有特定要求，微信小程序Worker的全局对象与主包环境差异较大，默认tfjs包无法直接适配
2. 依赖版本不统一（@tensorflow/tfjs-core3.5.0与@tensorflow/tfjs-backend-cpu3.6.0版本不一致），引发兼容性问题
3. 手动复制主包miniprogram_npm到Worker目录的方式，不符合小程序Worker的npm包加载规范

具体解决步骤 #

1. 统一依赖版本并调整依赖项 #

修改package.json，确保所有tfjs相关依赖版本一致，同时移除不必要的依赖，添加tfjs-wechat适配配置：

{
  "dependencies": {
    "@tensorflow-models/face-landmarks-detection": "^0.0.3",
    "@tensorflow/tfjs-backend-cpu": "^3.5.0",
    "@tensorflow/tfjs-backend-webgl": "^3.5.0",
    "@tensorflow/tfjs-converter": "^3.5.0",
    "@tensorflow/tfjs-core": "^3.5.0",
    "fetch-wechat": "0.0.3",
    "@tensorflow/tfjs-wechat": "0.0.6"
  },
  "miniprogram": {
    "workers": "workers"
  }
}

注意：删除abab、base64-js、text-encoder这类依赖，tfjs-wechat插件已内置适配小程序环境的相关polyfill

2. 正确配置Worker的npm包 #

• 执行npm install后，不要手动复制miniprogram_npm到Worker目录
• 在微信开发者工具中，右键点击Worker目录（如workers/request），选择「构建npm」，工具会自动为Worker环境构建适配的npm包

3. 修改Worker入口文件的tfjs初始化代码 #

在workers/request/index.js中，先通过tfjs-wechat插件适配Worker环境，再导入tfjs：

// 先加载tfjs-wechat的Worker适配文件，补全局环境
require('@tensorflow/tfjs-wechat/dist/worker');

// 导入tfjs核心包
const tf = require('@tensorflow/tfjs-core');
// 加载CPU后端（Worker环境不支持WebGL）
require('@tensorflow/tfjs-backend-cpu');

// 初始化后端
tf.setBackend('cpu');

worker.onMessage(async (res) => {
    console.log("worker 收到的消息: ", res);
    // 示例tfjs计算逻辑
    const tensor = tf.tensor([1,2,3]);
    console.log(tensor.dataSync());
    tensor.dispose();
});

4. 主包创建Worker的代码保持不变 #

const worker = wx.createWorker('workers/request/index.js');
worker.postMessage({
    msg: "hello"
});

5. 处理tr46相关问题 #

tr46是url模块的依赖，小程序Worker环境无需该包。构建后若出现相关报错，可在开发者工具「详情-本地设置」中开启「不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书」，或直接删除构建后miniprogram_npm中的tr46相关文件（优先通过依赖配置避免）

关键注意事项 #

• 微信小程序Worker环境不支持WebGL，只能使用CPU后端进行计算
• 必须通过@tensorflow/tfjs-wechat的Worker适配文件初始化全局环境，否则tfjs无法找到正确的全局对象
• 不要复用主包的npm包，必须单独为Worker目录构建npm

内容的提问来源于stack exchange，提问作者rainbowecho