update

CHANGELOG.md

@@ -9,8 +9,10 @@ Repository: **<git+https://github.com/vladmandic/human.git>**
 
 ## Changelog
 
-### **HEAD -> main** 2021/04/18 mandic00@live.com
+### **HEAD -> main** 2021/04/19 mandic00@live.com
 
+- added demo load image from http
+- mobile demo optimization and iris gestures
 - full test run
 - full rebuild
 - new look

demo/index.js

@@ -7,9 +7,10 @@ import Menu from './helpers/menu.js';
 import GLBench from './helpers/gl-bench.js';
 import webRTC from './helpers/webrtc.js';
 
-// const userConfig = { backend: 'webgl' }; // add any user configuration overrides
+const userConfig = {};
 let human;
 
+/*
 const userConfig = {
   backend: 'humangl',
   async: false,
@@ -18,7 +19,7 @@ const userConfig = {
   videoOptimized: false,
   filter: {
     enabled: true,
-    flip: true,
+    flip: false,
   },
   face: { enabled: true,
     mesh: { enabled: true },
@@ -33,6 +34,7 @@ const userConfig = {
   // body: { enabled: true, modelPath: 'efficientpose.json' },
   // object: { enabled: true },
 };
+*/
 
 // ui options
 const ui = {

demo/node.js

@@ -94,7 +94,7 @@ async function detect(input) {
   if (result && result.body && result.body.length > 0) {
     for (let i = 0; i < result.body.length; i++) {
       const body = result.body[i];
-      log.data(`  Body: #${i} score:${body.score}`);
+      log.data(`  Body: #${i} score:${body.score} landmarks:${body.keypoints?.length || body.landmarks?.length}`);
     }
   } else {
     log.data('  Body: N/A');

server/build.log

@@ -83,3 +83,20 @@
 2021-04-19 09:25:24 INFO:  Generate types: ["src/human.ts"] 
 2021-04-19 09:25:30 INFO:  Update Change log: ["/home/vlado/dev/human/CHANGELOG.md"] 
 2021-04-19 09:25:30 INFO:  Generate TypeDocs: ["src/human.ts"] 
+2021-04-19 16:18:26 INFO:  @vladmandic/human version 1.6.0 
+2021-04-19 16:18:26 INFO:  User: vlado Platform: linux Arch: x64 Node: v15.7.0 
+2021-04-19 16:18:26 INFO:  Build: file startup all type: production config: {"minifyWhitespace":true,"minifyIdentifiers":true,"minifySyntax":true,"sourcemap":true,"bundle":true,"metafile":true,"target":"es2018"} 
+2021-04-19 16:18:26 STATE: Build for: node type: tfjs: {"imports":1,"importBytes":39,"outputBytes":733,"outputFiles":"dist/tfjs.esm.js"} 
+2021-04-19 16:18:27 STATE: Build for: node type: node: {"imports":46,"importBytes":548010,"outputBytes":305576,"outputFiles":"dist/human.node.js"} 
+2021-04-19 16:18:27 STATE: Build for: nodeGPU type: tfjs: {"imports":1,"importBytes":43,"outputBytes":737,"outputFiles":"dist/tfjs.esm.js"} 
+2021-04-19 16:18:27 STATE: Build for: nodeGPU type: node: {"imports":46,"importBytes":548014,"outputBytes":305584,"outputFiles":"dist/human.node-gpu.js"} 
+2021-04-19 16:18:27 STATE: Build for: nodeWASM type: tfjs: {"imports":1,"importBytes":81,"outputBytes":783,"outputFiles":"dist/tfjs.esm.js"} 
+2021-04-19 16:18:27 STATE: Build for: nodeWASM type: node: {"imports":46,"importBytes":548060,"outputBytes":305628,"outputFiles":"dist/human.node-wasm.js"} 
+2021-04-19 16:18:27 STATE: Build for: browserNoBundle type: tfjs: {"imports":1,"importBytes":2488,"outputBytes":1394,"outputFiles":"dist/tfjs.esm.js"} 
+2021-04-19 16:18:27 STATE: Build for: browserNoBundle type: esm: {"imports":46,"importBytes":548671,"outputBytes":305575,"outputFiles":"dist/human.esm-nobundle.js"} 
+2021-04-19 16:18:27 STATE: Build for: browserBundle type: tfjs: {"modules":1262,"moduleBytes":4068263,"imports":7,"importBytes":2488,"outputBytes":1097287,"outputFiles":"dist/tfjs.esm.js"} 
+2021-04-19 16:18:28 STATE: Build for: browserBundle type: iife: {"imports":46,"importBytes":1644564,"outputBytes":1399008,"outputFiles":"dist/human.js"} 
+2021-04-19 16:18:28 STATE: Build for: browserBundle type: esm: {"imports":46,"importBytes":1644564,"outputBytes":1398966,"outputFiles":"dist/human.esm.js"} 
+2021-04-19 16:18:28 INFO:  Generate types: ["src/human.ts"] 
+2021-04-19 16:18:32 INFO:  Update Change log: ["/home/vlado/dev/human/CHANGELOG.md"] 
+2021-04-19 16:18:32 INFO:  Generate TypeDocs: ["src/human.ts"] 

src/image/image.ts

@@ -14,6 +14,7 @@ let fx;
 export function process(input, config): { tensor: typeof tf.Tensor | null, canvas: OffscreenCanvas | HTMLCanvasElement } {
   let tensor;
   if (!input) throw new Error('Human: Input is missing');
+  // sanity checks since different browsers do not implement all dom elements
   if (
     !(input instanceof tf.Tensor)
     && !(typeof Image !== 'undefined' && input instanceof Image)
@@ -28,9 +29,11 @@ export function process(input, config): { tensor: typeof tf.Tensor | null, canva
     throw new Error('Human: Input type is not recognized');
   }
   if (input instanceof tf.Tensor) {
+    // if input is tensor, use as-is
     if (input.shape && input.shape.length === 4 && input.shape[0] === 1 && input.shape[3] === 3) tensor = tf.clone(input);
     else throw new Error(`Human: Input tensor shape must be [1, height, width, 3] and instead was ${input.shape}`);
   } else {
+    // check if resizing will be needed
     const originalWidth = input['naturalWidth'] || input['videoWidth'] || input['width'] || (input['shape'] && (input['shape'][1] > 0));
     const originalHeight = input['naturalHeight'] || input['videoHeight'] || input['height'] || (input['shape'] && (input['shape'][2] > 0));
     let targetWidth = originalWidth;
@@ -43,6 +46,8 @@ export function process(input, config): { tensor: typeof tf.Tensor | null, canva
       targetHeight = maxSize;
       targetWidth = targetHeight * originalWidth / originalHeight;
     }
+
+    // create our canvas and resize it if needed
     if (config.filter.width > 0) targetWidth = config.filter.width;
     else if (config.filter.height > 0) targetWidth = originalWidth * (config.filter.height / originalHeight);
     if (config.filter.height > 0) targetHeight = config.filter.height;
@@ -54,20 +59,22 @@ export function process(input, config): { tensor: typeof tf.Tensor | null, canva
       if (inCanvas?.height !== targetHeight) inCanvas.height = targetHeight;
     }
 
+    // draw input to our canvas
     const ctx = inCanvas.getContext('2d');
     if (input instanceof ImageData) {
       ctx.putImageData(input, 0, 0);
     } else {
-      if (!config.filter.flip) {
-        ctx.drawImage(input, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas?.width, inCanvas?.height);
-      } else {
+      if (config.filter.flip && typeof ctx.translate !== 'undefined') {
         ctx.translate(originalWidth, 0);
         ctx.scale(-1, 1);
         ctx.drawImage(input, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas?.width, inCanvas?.height);
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.setTransform(1, 0, 0, 1, 0, 0); // resets transforms to defaults
+      } else {
+        ctx.drawImage(input, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas?.width, inCanvas?.height);
       }
     }
 
+    // imagefx transforms using gl
     if (config.filter.enabled) {
       if (!fx || !outCanvas || (inCanvas.width !== outCanvas.width) || (inCanvas?.height !== outCanvas?.height)) {
         outCanvas = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(inCanvas?.width, inCanvas?.height) : document.createElement('canvas');
@@ -118,6 +125,8 @@ export function process(input, config): { tensor: typeof tf.Tensor | null, canva
       outCanvas = inCanvas;
       if (fx) fx = null;
     }
+
+    // create tensor from image
     let pixels;
     if (outCanvas.data) { // if we have data, just convert to tensor
       const shape = [outCanvas.height, outCanvas.width, 3];

typedoc/interfaces/config.html

@@ -360,7 +360,7 @@
 				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
 					<a name="filter" class="tsd-anchor"></a>
 					<h3>filter</h3>
-					<div class="tsd-signature tsd-kind-icon">filter<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>blur<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>brightness<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>contrast<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>enabled<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>hue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>kodachrome<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>negative<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>pixelate<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>polaroid<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>return<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>saturation<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>sepia<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>sharpness<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>technicolor<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>vintage<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span></div>
+					<div class="tsd-signature tsd-kind-icon">filter<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>blur<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>brightness<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>contrast<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>enabled<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>flip<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>hue<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>kodachrome<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>negative<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>pixelate<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>polaroid<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>return<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>saturation<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>sepia<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>sharpness<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>technicolor<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>vintage<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">; </span>width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span></div>
 					<aside class="tsd-sources">
 					</aside>
 					<div class="tsd-comment tsd-typography">
@@ -401,6 +401,14 @@
 							<li class="tsd-parameter">
 								<h5>enabled<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5>
 							</li>
+							<li class="tsd-parameter">
+								<h5>flip<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Flip input as mirror image</p>
+									</div>
+								</div>
+							</li>
 							<li class="tsd-parameter">
 								<h5>height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></h5>
 								<div class="tsd-comment tsd-typography">

types/config.d.ts

@@ -52,6 +52,8 @@ export interface Config {
         height: number;
         /** Return processed canvas imagedata in result */
         return: boolean;
+        /** Flip input as mirror image */
+        flip: boolean;
         /** Range: -1 (darken) to 1 (lighten) */
         brightness: number;
         /** Range: -1 (reduce contrast) to 1 (increase contrast) */

wiki

@@ -1 +1 @@
-Subproject commit ffe0a307e50a6f5f14f14cd01ce9e11647746ca3
+Subproject commit 97aef7ac17b481de7768c8540a2207f61adb635b