github: tfjs-wechat-posenet tf-wechat-blazeface

小程序新建项目

微信开发工具-》项目-》新建项目-》不使用云服务-》确定

安装tersorflow相关包

npm init

创建package.json

npm install

{
  "name": "mini-app-tf",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "@tensorflow-models/posenet": "^2.2.2",
    "@tensorflow/tfjs-backend-webgl": "3.5.0",
    "@tensorflow/tfjs-converter": "3.5.0",
    "@tensorflow/tfjs-core": "3.5.0",
    "fetch-wechat": "0.0.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

构建npm

微信开发工具-》工具-》构建npm

配置tfjsPlugin

var fetchWechat = require('fetch-wechat');
var tf = require('@tensorflow/tfjs-core');
var webgl = require('@tensorflow/tfjs-backend-webgl');
var plugin = requirePlugin('tfjsPlugin');

//app.js
App({
  // expose localStorage handler
  globalData: {localStorageIO: plugin.localStorageIO},
  onLaunch: function () {
    plugin.configPlugin({
      // polyfill fetch function
      fetchFunc: fetchWechat.fetchFunc(),
      // inject tfjs runtime
      tf,
      // inject webgl backend
      webgl,
      // provide webgl canvas
      canvas: wx.createOffscreenCanvas()
    });

    console.log(tf.tensor([1,2,3,4]).print())
  }
});

加载模型并运行

  async onReady() {
    console.log('create canvas context for #image...');
    setTimeout(() => {
      this.ctx = wx.createCanvasContext(CANVAS_ID);
      console.log('ctx', this.ctx);
    }, 500);

    this.posenet();//加载模型

    // Start the camera API to feed the captured images to the models.
    // @ts-ignore the ts definition for this method is worng.
    const context = wx.createCameraContext(this);
    let count = 0;
    const listener = (context).onCameraFrame((frame) => {
      count++;
      if (count === 3) {//3 frame一传
        this.executePosenet(frame);
        count = 0;
      }
    });
    listener.start();
  },