update demos

.eslintrc.json

@@ -40,6 +40,7 @@
     "@typescript-eslint/triple-slash-reference": "off",
     "@typescript-eslint/no-inferrable-types": "off",
     "camelcase": "off",
+    "class-methods-use-this": "off",
     "dot-notation": "off",
     "func-names": "off",
     "guard-for-in": "off",

CHANGELOG.md

@@ -9,11 +9,14 @@
   
 ## Changelog
   
+### **2.3.5** 2021/10/19 mandic00@live.com
+
+
+### **origin/main** 2021/10/19 snaggadhagga@gmail.com
+
+
 ### **2.3.4** 2021/10/19 mandic00@live.com
 
-
-### **origin/main** 2021/10/19 mandic00@live.com
-
 - minor blazepose optimizations
 - compress samples
 - remove handdetect from default package

demo/facematch/facematch.js

@@ -118,10 +118,10 @@ async function SelectFaceCanvas(face) {
     ctx.fillText(`${current.age}y ${(100 * (current.genderScore || 0)).toFixed(1)}% ${current.gender}`, 4, canvas.height - 6);
     // identify person
     ctx.font = 'small-caps 1rem "Lato"';
-    const start = performance.now();
+    const start = human.now();
     const arr = db.map((rec) => rec.embedding);
     const res = await human.match(current.embedding, arr);
-    time += (performance.now() - start);
+    time += (human.now() - start);
     if (res.similarity > minScore) ctx.fillText(`DB: ${(100 * res.similarity).toFixed(1)}% ${db[res.index].name}`, 4, canvas.height - 30);
   }
 

demo/index.js

@@ -236,16 +236,16 @@ const isLive = (input) => {
 };
 
 // draws processed results and starts processing of a next frame
-let lastDraw = performance.now();
+let lastDraw = 0;
 async function drawResults(input) {
   // await delay(25);
   const result = lastDetectedResult;
   const canvas = document.getElementById('canvas');
 
   // update draw fps data
-  ui.drawFPS.push(1000 / (performance.now() - lastDraw));
+  ui.drawFPS.push(1000 / (human.now() - lastDraw));
   if (ui.drawFPS.length > ui.maxFPSframes) ui.drawFPS.shift();
-  lastDraw = performance.now();
+  lastDraw = human.now();
 
   // draw fps chart
   await menu.process.updateChart('FPS', ui.detectFPS);
@@ -323,7 +323,7 @@ async function drawResults(input) {
     ${warning}<br>
   `;
   ui.framesDraw++;
-  ui.lastFrame = performance.now();
+  ui.lastFrame = human.now();
   // if buffered, immediate loop but limit frame rate although it's going to run slower as JS is singlethreaded
   if (ui.buffered) {
     if (isLive(input)) {

demo/multithread/index.js

@@ -132,10 +132,10 @@ function log(...msg) {
 }
 
 async function drawResults() {
-  start.draw = performance.now();
+  start.draw = human.now();
   const interpolated = human.next(result);
   await human.draw.all(canvas, interpolated);
-  time.draw = Math.round(1 + performance.now() - start.draw);
+  time.draw = Math.round(1 + human.now() - start.draw);
   const fps = Math.round(10 * 1000 / time.main) / 10;
   const draw = Math.round(10 * 1000 / time.draw) / 10;
   document.getElementById('log').innerText = `Human: version ${human.version} | Performance: Main ${time.main}ms Face: ${time.face}ms Body: ${time.body}ms Hand: ${time.hand}ms Object ${time.object}ms | FPS: ${fps} / ${draw}`;
@@ -145,11 +145,11 @@ async function drawResults() {
 async function receiveMessage(msg) {
   result[msg.data.type] = msg.data.result;
   busy[msg.data.type] = false;
-  time[msg.data.type] = Math.round(performance.now() - start[msg.data.type]);
+  time[msg.data.type] = Math.round(human.now() - start[msg.data.type]);
 }
 
 async function runDetection() {
-  start.main = performance.now();
+  start.main = human.now();
   if (!bench) {
     bench = new GLBench(null, { trackGPU: false, chartHz: 20, chartLen: 20 });
     bench.begin();
@@ -159,26 +159,26 @@ async function runDetection() {
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   if (!busy.face) {
     busy.face = true;
-    start.face = performance.now();
+    start.face = human.now();
     workers.face.postMessage({ image: imageData.data.buffer, width: canvas.width, height: canvas.height, config: config.face, type: 'face' }, [imageData.data.buffer.slice(0)]);
   }
   if (!busy.body) {
     busy.body = true;
-    start.body = performance.now();
+    start.body = human.now();
     workers.body.postMessage({ image: imageData.data.buffer, width: canvas.width, height: canvas.height, config: config.body, type: 'body' }, [imageData.data.buffer.slice(0)]);
   }
   if (!busy.hand) {
     busy.hand = true;
-    start.hand = performance.now();
+    start.hand = human.now();
     workers.hand.postMessage({ image: imageData.data.buffer, width: canvas.width, height: canvas.height, config: config.hand, type: 'hand' }, [imageData.data.buffer.slice(0)]);
   }
   if (!busy.object) {
     busy.object = true;
-    start.object = performance.now();
+    start.object = human.now();
     workers.object.postMessage({ image: imageData.data.buffer, width: canvas.width, height: canvas.height, config: config.object, type: 'object' }, [imageData.data.buffer.slice(0)]);
   }
 
-  time.main = Math.round(performance.now() - start.main);
+  time.main = Math.round(human.now() - start.main);
 
   bench.nextFrame();
   requestAnimationFrame(runDetection);

src/human.ts

@@ -260,6 +260,11 @@ export class Human {
   public distance = match.distance;
   public match = match.match;
 
+  /** Utility wrapper for performance.now() */
+  now(): number {
+    return now();
+  }
+
   /** Process input as return canvas and tensor
    *
    * @param input: {@link Input}

src/util/interpolate.ts

@@ -162,7 +162,7 @@ export function calc(newResult: Result, config: Config): Result {
   if (newResult.gesture) bufferedResult.gesture = newResult.gesture as GestureResult[];
 
   // append interpolation performance data
-  const t1 = performance.now();
+  const t1 = now();
   if (newResult.performance) bufferedResult.performance = { ...newResult.performance, interpolate: Math.round(t1 - t0) };
 
   return bufferedResult;

test/browser.html

@@ -114,7 +114,7 @@
           res = await human.warmup({ warmup: 'face'});
           draw(res.canvas);
           log({ warmup: 'face' });
-          let img = await image('../../samples/ai-body.jpg');
+          let img = await image('../../samples/in/ai-body.jpg');
           const input = await human.image(img);
           log({ input: input.tensor.shape });
           draw(res.canvas);
@@ -129,7 +129,7 @@
           human.tf.dispose(input.tensor);
           draw();
 
-          img = await image('../../samples/ai-face.jpg');
+          img = await image('../../samples/in/ai-face.jpg');
           for (const val of [0, 0.25, 0.5, 0.75, 10]) {
             human.performance = {};
             const t0 = performance.now();