[wasm] Add wasm and new models to the benchmark page

tfjs-core/benchmarks/index.html

@@ -87,25 +87,28 @@ <h2>TensorFlow.js Model Benchmark</h2>
   <script src="https://unpkg.com/@tensorflow/tfjs-core@latest/dist/tf-core.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-layers@latest/dist/tf-layers.js"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-converter@latest/dist/tf-converter.js"></script>
+  <script src="https://unpkg.com/@tensorflow/tfjs-backend-wasm@latest/dist/tf-backend-wasm.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet@1.0.0/dist/posenet.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet@2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2"></script>
   <script src="./modelConfig.js"></script>
   <script src="./util.js"></script>
   <script>
     'use strict';
 
     const state = {
       numRuns: 50,
-      benchmark: 'mobilenet',
+      benchmark: 'mobilenet_v2',
       run: (v) => {
         runBenchmark();
       },
+      backend: 'wasm',
     };
 
     const modalDiv = document.getElementById('modal-msg');
     const timeTable = document.querySelector('#timings tbody');
     const envDiv = document.getElementById('env');
-    let model, isAsync, predict, chartWidth;
+    let model, predict, chartWidth;
 
     async function showMsg(message) {
       if (message != null) {
@@ -155,7 +158,9 @@ <h2>TensorFlow.js Model Benchmark</h2>
       }
 
       if (res instanceof tf.Tensor) {
+        const tmp = res;
         res = await res.data();
+        tmp.dispose();
       }
 
       const elapsed = performance.now() - start;
@@ -168,7 +173,6 @@ <h2>TensorFlow.js Model Benchmark</h2>
       const start = performance.now();
       model = await benchmark.load();
       predict = benchmark.predictFunc();
-      isAsync = model.executor != null && model.executor.isControlFlowModel;
 
       const elapsed = performance.now() - start;
       await showMsg(null);
@@ -214,7 +218,9 @@ <h2>TensorFlow.js Model Benchmark</h2>
         }
 
         if (res instanceof tf.Tensor) {
+          const tmp = res;
           res = await res.data();
+          tmp.dispose();
         }
 
         times.push(performance.now() - start);
@@ -247,7 +253,9 @@ <h2>TensorFlow.js Model Benchmark</h2>
       }
 
       if (res instanceof tf.Tensor) {
+        const tmp = res;
         res = await res.data();
+        tmp.dispose();
       }
       const elapsed = performance.now() - start;
       await showMsg(null);
@@ -300,7 +308,9 @@ <h2>TensorFlow.js Model Benchmark</h2>
       }
 
       if (res instanceof tf.Tensor) {
+        const tmp = res;
         res = await res.data();
+        tmp.dispose();
       }
 
       await showMsg(null);
@@ -337,17 +347,17 @@ <h2>TensorFlow.js Model Benchmark</h2>
     async function onPageLoad() {
       var gui = new dat.gui.GUI();
 
-      await tf.ready();
+      await tf.setBackend(state.backend);
 
       gui.add(state, 'numRuns');
-      gui.add(state, 'benchmark', ['', ...Object.keys(benchmarks)]);
+      gui.add(state, 'benchmark', Object.keys(benchmarks));
+      gui.add(state, 'backend', ['wasm', 'webgl', 'cpu']).onChange(backend => {
+        tf.setBackend(backend);
+      });
       gui.add(state, 'run');
 
       showVersions();
       await showEnvironment();
-
-      // Run first benchmark by default on page load.
-      runBenchmark();
     }
 
     onPageLoad();

tfjs-core/benchmarks/modelConfig.js

@@ -72,29 +72,48 @@ const sentences = [
 ];
 
 const benchmarks = {
-  'mobilenet': {
+  'mobilenet_v2': {
     load: async () => {
-      const url =
-          'https://tfhub.dev/google/imagenet/mobilenet_v2_100_224/classification/2'
-      return tf.loadGraphModel(url, {fromTFHub: true});
+      const url = 'https://storage.googleapis.com/learnjs-data/mobilenet_v2_100_fused/model.json';
+      return tf.loadGraphModel(url);
     },
     predictFunc: () => {
       const zeros = tf.zeros([1, 224, 224, 3]);
-      return (model) => {
-        if (isAsync) {
-          return model.executeAsync(zeros);
-        }
-        return model.predict(zeros);
-      }
+      return model => model.predict(zeros);
     }
   },
+  'mesh_128': {
+    load: async () => {
+      const url =
+          'https://storage.googleapis.com/learnjs-data/mesh_128_shift30_fixed_batch/model.json';
+      return tf.loadGraphModel(url);
+    },
+    predictFunc: () => {
+      const zeros = tf.zeros([1, 128, 128, 3]);
+      return model => {
+        return model.predict(zeros)[0];
+      };
+    },
+  },
+  'face_detector': {
+    load: async () => {
+      const url = 'https://storage.googleapis.com/learnjs-data/face_detector_front/model.json';
+      return tf.loadGraphModel(url);
+    },
+    predictFunc: () => {
+      const zeros = tf.zeros([1, 128, 128, 3]);
+      return model => {
+        return model.predict(zeros);
+      };
+    },
+  },
   'USE - batchsize 30': {
     load: async () => {
       return use.load();
     },
     predictFunc: () => {
       const sentences30 = sentences.slice(0, 30);
-      return async (model) => {
+      return async model => {
         const res = await model.embed(sentences30);
         return await res.data();
       }
@@ -107,7 +126,7 @@ const benchmarks = {
     predictFunc: () => {
       let nextIdx = 0;
 
-      return async () => {
+      return async model => {
         const next = [sentences[(nextIdx % sentences.length)]];
         const res = await model.embed(next);
         nextIdx += 1;
@@ -117,34 +136,40 @@ const benchmarks = {
   },
   'posenet': {
     load: async () => {
-      const imageBucket =
-          'https://storage.googleapis.com/tfjs-models/assets/posenet/';
-
-      async function loadImage(imagePath) {
-        const image = new Image();
-        const promise = new Promise((resolve, reject) => {
-          image.crossOrigin = '';
-          image.onload = () => {
-            resolve(image);
-          };
-        });
-
-        image.src = `${imageBucket}${imagePath}`;
-        return promise;
+      const model = await posenet.load();
+      model.image = await loadImage('tennis_standing.jpg');
+      return model;
+    },
+    predictFunc: () => {
+      return async model => {
+        return model.estimateSinglePose(model.image);
       }
-
-      const posenetModel = await posenet.load();
-      const image = await loadImage('tennis_standing.jpg');
-
-      posenetModel.benchmarkImage = image;
-      return posenetModel;
+    }
+  },
+  'bodypix': {
+    load: async () => {
+      const model = await bodyPix.load();
+      model.image = await loadImage('tennis_standing.jpg');
+      return model;
     },
     predictFunc: () => {
-      return async (model) => {
-        const image = model.benchmarkImage;
-        const pose = await model.estimateSinglePose(image);
-        return pose;
+      return async model => {
+        return model.segmentPerson(model.image);
       }
     }
   },
 };
+
+const imageBucket = 'https://storage.googleapis.com/tfjs-models/assets/posenet/';
+async function loadImage(imagePath) {
+  const image = new Image();
+  const promise = new Promise((resolve, reject) => {
+    image.crossOrigin = '';
+    image.onload = () => {
+      resolve(image);
+    };
+  });
+
+  image.src = `${imageBucket}${imagePath}`;
+  return promise;
+}

tfjs-core/src/profiler.ts

@@ -87,7 +87,10 @@ export class Logger {
     let inputShapesDescription = '';
 
     for (const name in inputs) {
-      const inputShape = inputs[name].shape;
+      const input = inputs[name];
+      // The input might be a non-tensor (e.g HTMLImageElement), in which case
+      // we claim the output shape as input shape.
+      const inputShape = input.shape || result.shape;
       const inputRank = inputShape.length;
       inputShapesDescription +=
           `${name}: ${inputRank}D ${inputRank > 0 ? inputShape : ''} `;