fix bug in async ops and change imports

demo/browser.js

@@ -2,10 +2,10 @@ import Human from '../dist/human.esm.js';
 import draw from './draw.js';
 import Menu from './menu.js';
 
-const human = new Human();
-
 const userConfig = {}; // add any user configuration overrides
 
+const human = new Human(userConfig);
+
 // ui options
 const ui = {
   baseColor: 'rgba(173, 216, 230, 0.3)', // 'lightblue' with light alpha channel
@@ -134,7 +134,7 @@ async function setupCamera() {
   const constraints = {
     audio: false,
     video: {
-      facingMode: (ui.facing ? 'user' : 'environment'),
+      facingMode: ui.facing ? 'user' : 'environment',
       resizeMode: ui.crop ? 'crop-and-scale' : 'none',
       width: { ideal: window.innerWidth },
       height: { ideal: window.innerHeight },

src/age/age.js

@@ -1,4 +1,4 @@
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf, loadGraphModel } from '../tf.js';
 import * as profile from '../profile.js';
 
 const models = {};
@@ -10,7 +10,7 @@ const zoom = [0, 0]; // 0..1 meaning 0%..100%
 
 async function load(config) {
   if (!models.age) {
-    models.age = await tf.loadGraphModel(config.face.age.modelPath);
+    models.age = await loadGraphModel(config.face.age.modelPath);
     // eslint-disable-next-line no-console
     console.log(`Human: load model: ${config.face.age.modelPath.match(/\/(.*)\./)[1]}`);
   }

src/emotion/emotion.js

@@ -1,4 +1,4 @@
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf, loadGraphModel } from '../tf.js';
 import * as profile from '../profile.js';
 
 const annotations = ['angry', 'disgust', 'fear', 'happy', 'sad', 'surpise', 'neutral'];
@@ -13,7 +13,7 @@ const scale = 1; // score multiplication factor
 
 async function load(config) {
   if (!models.emotion) {
-    models.emotion = await tf.loadGraphModel(config.face.emotion.modelPath);
+    models.emotion = await loadGraphModel(config.face.emotion.modelPath);
     // eslint-disable-next-line no-console
     console.log(`Human: load model: ${config.face.emotion.modelPath.match(/\/(.*)\./)[1]}`);
   }

src/gender/gender.js

@@ -1,4 +1,4 @@
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf, loadGraphModel } from '../tf.js';
 import * as profile from '../profile.js';
 
 const models = {};
@@ -12,7 +12,7 @@ const rgb = [0.2989, 0.5870, 0.1140]; // factors for red/green/blue colors when
 
 async function load(config) {
   if (!models.gender) {
-    models.gender = await tf.loadGraphModel(config.face.gender.modelPath);
+    models.gender = await loadGraphModel(config.face.gender.modelPath);
     alternative = models.gender.inputs[0].shape[3] === 1;
     // eslint-disable-next-line no-console
     console.log(`Human: load model: ${config.face.gender.modelPath.match(/\/(.*)\./)[1]}`);

src/hand/box.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  * =============================================================================
  */
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf } from '../tf.js';
 
 function getBoxSize(box) {
   return [

src/hand/handdetector.js

@@ -15,7 +15,7 @@
  * =============================================================================
  */
 
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf } from '../tf.js';
 import * as box from './box';
 
 class HandDetector {

src/hand/handpipeline.js

@@ -15,7 +15,7 @@
  * =============================================================================
  */
 
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf } from '../tf.js';
 import * as box from './box';
 import * as util from './util';
 

src/hand/handpose.js

@@ -16,7 +16,7 @@
  */
 // https://storage.googleapis.com/tfjs-models/demos/handpose/index.html
 
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { loadGraphModel } from '../tf.js';
 import * as handdetector from './handdetector';
 import * as pipeline from './handpipeline';
 import * as anchors from './anchors';
@@ -69,8 +69,8 @@ exports.HandPose = HandPose;
 
 async function load(config) {
   const [handDetectorModel, handPoseModel] = await Promise.all([
-    tf.loadGraphModel(config.detector.modelPath, { fromTFHub: config.detector.modelPath.includes('tfhub.dev') }),
+    loadGraphModel(config.detector.modelPath, { fromTFHub: config.detector.modelPath.includes('tfhub.dev') }),
-    tf.loadGraphModel(config.skeleton.modelPath, { fromTFHub: config.skeleton.modelPath.includes('tfhub.dev') }),
+    loadGraphModel(config.skeleton.modelPath, { fromTFHub: config.skeleton.modelPath.includes('tfhub.dev') }),
   ]);
   const detector = new handdetector.HandDetector(handDetectorModel, config.inputSize, anchors.anchors);
   const pipe = new pipeline.HandPipeline(detector, handPoseModel, config.inputSize);

src/human.js

@@ -1,5 +1,4 @@
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf, setWasmPaths } from './tf.js';
-import { setWasmPaths } from '@tensorflow/tfjs-backend-wasm/dist/index.js';
 import * as facemesh from './face/facemesh.js';
 import * as age from './age/age.js';
 import * as gender from './gender/gender.js';
@@ -131,12 +130,12 @@ class Human {
         this.models.posenet,
         this.models.handpose,
       ] = await Promise.all([
-        this.models.age || age.load(this.config),
+        this.config.face.age.enabled ? this.models.age || age.load(this.config) : null,
-        this.models.gender || gender.load(this.config),
+        this.config.face.gender.enabled ? this.models.gender || gender.load(this.config) : null,
-        this.models.emotion || emotion.load(this.config),
+        this.config.face.emotion.enabled ? this.models.emotion || emotion.load(this.config) : null,
-        this.models.facemesh || facemesh.load(this.config.face),
+        this.config.face.enabled ? this.models.facemesh || facemesh.load(this.config.face) : null,
-        this.models.posenet || posenet.load(this.config),
+        this.config.body.enabled ? this.models.posenet || posenet.load(this.config) : null,
-        this.models.handpose || handpose.load(this.config.hand),
+        this.config.hand.enabled ? this.models.handpose || handpose.load(this.config.hand) : null,
       ]);
     } else {
       if (this.config.face.enabled && !this.models.facemesh) this.models.facemesh = await facemesh.load(this.config.face);

src/image.js

@@ -1,4 +1,4 @@
-import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { tf } from './tf.js';
 import * as fxImage from './imagefx.js';
 
 // internal temp canvases

src/tf.js

@@ -0,0 +1,19 @@
+// monolithic: bundle 3.4M
+import * as tf from '@tensorflow/tfjs/dist/tf.es2017.js';
+import { setWasmPaths } from '@tensorflow/tfjs-backend-wasm/dist/index.js';
+
+const loadGraphModel = tf.loadGraphModel;
+export { tf, setWasmPaths, loadGraphModel };
+
+// modular: bundle 4.2M
+/*
+import * as tf from '@tensorflow/tfjs-core/dist/tf-core.es2017.js';
+import { loadGraphModel } from '@tensorflow/tfjs-converter/dist/tf-converter.es2017.js';
+import * as tfCPU from '@tensorflow/tfjs-backend-cpu/dist/tf-backend-cpu.es2017.js';
+import * as tfWebGL from '@tensorflow/tfjs-backend-webgl/dist/tf-backend-webgl.es2017.js';
+import { setWasmPaths, version_wasm } from '@tensorflow/tfjs-backend-wasm/dist/index.js';
+
+const version = { core: tf.version, cpu: tfCPU.version_cpu, webgl: tfWebGL.version_webgl, wasm: version_wasm };
+
+export { tf, setWasmPaths, loadGraphModel, version };
+*/