new samples gallery and major code folder restructure

CHANGELOG.md

@@ -9,11 +9,13 @@
 
 ## Changelog
 
-### **2.2.3** 2021/09/24 [email protected]
+### **HEAD -> main** 2021/09/24 [email protected]
 
+- new release
 
-### **origin/main** 2021/09/23 [email protected]
+### **2.2.3** 2021/09/24 [email protected]
 
+- optimize model loading
 - support segmentation for nodejs
 - redo segmentation and handtracking
 - prototype handtracking

README.md

@@ -42,6 +42,7 @@ Check out [**Live Demo**](https://vladmandic.github.io/human/demo/index.html) ap
 - [*Live:* **Face Extraction and 3D Rendering**](https://vladmandic.github.io/human/demo/face3d/index.html)
 - [*Live:* **Multithreaded Detection Showcasing Maximum Performance**](https://vladmandic.github.io/human/demo/multithread/index.html)
 - [*Live:* **VR Model with Head, Face, Eye, Body and Hand tracking**](https://vladmandic.github.io/human-vrm/src/human-vrm.html)
+- [Examples galery](https://vladmandic.github.io/human/samples/samples.html)
 
 ## Project pages
 
@@ -75,6 +76,7 @@ Check out [**Live Demo**](https://vladmandic.github.io/human/demo/index.html) ap
 - [**Platform Support**](https://github.com/vladmandic/human/wiki/Platforms)
 - [**Diagnostic and Performance trace information**](https://github.com/vladmandic/human/wiki/Diag)
 - [**List of Models & Credits**](https://github.com/vladmandic/human/wiki/Models)
+- [**Models Download Repository**](https://github.com/vladmandic/human-models)
 - [**Security & Privacy Policy**](https://github.com/vladmandic/human/blob/main/SECURITY.md)
 - [**License & Usage Restrictions**](https://github.com/vladmandic/human/blob/main/LICENSE)
 
@@ -86,51 +88,21 @@ Check out [**Live Demo**](https://vladmandic.github.io/human/demo/index.html) ap
 
 <hr><br>
 
-## Options
-
-All options as presented in the demo application...  
-> [demo/index.html](demo/index.html)  
-
-![Options visible in demo](assets/screenshot-menu.png)
-
-<br>
-
 ## Examples
 
-<br>
-
-**Face Close-up:**  
-![Face](assets/screenshot-face.jpg)
-
-<br>
+Visit [Examples galery](https://vladmandic.github.io/human/samples/samples.html) for more examples  
+<https://vladmandic.github.io/human/samples/samples.html>
 
-**Face under a high angle:**  
-![Angle](assets/screenshot-angle.jpg)
+![samples](assets/samples.jpg)
 
 <br>
 
-**Full Person Details:**  
-![Pose](assets/screenshot-person.jpg)
-
-<br>
-
-**Pose Detection:**  
-![Pose](assets/screenshot-pose.jpg)
-
-<br>
-
-**Body Segmentation and Background Replacement:**  
-![Pose](assets/screenshot-segmentation.jpg)
-
-<br>
-
-**Large Group:**  
-![Group](assets/screenshot-group.jpg)
+## Options
 
-<br>
+All options as presented in the demo application...  
+> [demo/index.html](demo/index.html)  
 
-**VR Model Tracking:**  
-![vrmodel](assets/screenshot-vrm.jpg)
+![Options visible in demo](assets/screenshot-menu.png)
 
 <br>
 
@@ -140,7 +112,9 @@ All options as presented in the demo application...
 
 <br>
 
-**Face Similarity Matching:**  
+## Advanced Examples
+
+1. **Face Similarity Matching:**  
 Extracts all faces from provided input images,  
 sorts them by similarity to selected face  
 and optionally matches detected face with database of known people to guess their names
@@ -150,13 +124,18 @@ and optionally matches detected face with database of known people to guess thei
 
 <br>
 
-**Face3D OpenGL Rendering:**  
+2. **Face3D OpenGL Rendering:**  
 > [demo/face3d](demo/face3d/index.html)
 
 ![Face Matching](assets/screenshot-face3d.jpg)
 
 <br>
 
+3. **VR Model Tracking:**  
+![vrmodel](assets/screenshot-vrm.jpg)
+
+<br>
+
 **468-Point Face Mesh Defails:**  
 (view in full resolution to see keypoints)  
 

demo/nodejs/node-canvas.js

@@ -12,7 +12,7 @@ const Human = require('../../dist/human.node.js'); // this is 'const Human = req
 const config = { // just enable all and leave default settings
   debug: false,
   face: { enabled: true }, // includes mesh, iris, emotion, descriptor
-  hand: { enabled: true },
+  hand: { enabled: true, maxDetected: 2, minConfidence: 0.5, detector: { modelPath: 'handtrack.json' } }, // use alternative hand model
   body: { enabled: true },
   object: { enabled: true },
   gestures: { enabled: true },

package.json

@@ -66,14 +66,14 @@
     "@tensorflow/tfjs-layers": "^3.9.0",
     "@tensorflow/tfjs-node": "^3.9.0",
     "@tensorflow/tfjs-node-gpu": "^3.9.0",
-    "@types/node": "^16.9.6",
+    "@types/node": "^16.10.1",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
     "@vladmandic/build": "^0.5.3",
     "@vladmandic/pilogger": "^0.3.3",
     "canvas": "^2.8.0",
     "dayjs": "^1.10.7",
-    "esbuild": "^0.13.0",
+    "esbuild": "^0.13.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.24.2",

samples/README.md

@@ -2,3 +2,11 @@
 
 Sample Images used by `Human` library demos and automated tests
 Not required for normal funcioning of library
+
+Samples were generated using default configuration without any fine-tuning using command:
+
+```shell
+node test/test-node-canvas.js samples/in/ samples/out/
+```
+
+Samples galery viewer: <https://vladmandic.github.io/human/samples/samples.html>

samples/samples.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Human Examples Gallery</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, shrink-to-fit=yes">
+    <meta name="keywords" content="Human">
+    <meta name="application-name" content="Human">
+    <meta name="description" content="Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>">
+    <meta name="msapplication-tooltip" content="Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>">
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="../manifest.webmanifest">
+    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" href="../../assets/icon.png">
+    <style>
+      @font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('../../assets/lato-light.woff2') }
+      html { font-family: 'Lato', 'Segoe UI'; font-size: 24px; font-variant: small-caps; }
+      body { margin: 24px; background: black; color: white; overflow-x: hidden; overflow-y: auto; text-align: -webkit-center; min-height: 100%; max-height: 100%; }
+      ::-webkit-scrollbar { height: 8px; border: 0; border-radius: 0; }
+      ::-webkit-scrollbar-thumb { background: grey }
+      ::-webkit-scrollbar-track { margin: 3px; }
+      .text { margin: 24px }
+      .strip { display: flex; width: 100%; overflow: auto; }
+      .thumb { height: 150px; margin: 2px; padding: 2px; }
+      .thumb:hover { filter: grayscale(1); background: white; }
+      .image-container { margin: 24px 3px 3px 3px }
+      .image { max-width: -webkit-fill-available; }
+    </style>
+  </head>
+  <body>
+    <div class="text">Human Examples Gallery</div>
+    <div id="strip" class="strip"></div>
+    <div class="image-container">
+      <img id="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="" class="image" />
+    </div>
+    <script>
+      const samples = [
+        'ai-body.jpg', 'ai-upper.jpg',
+        'person-vlado.jpg', 'person-linda.jpg', 'person-celeste.jpg', 'person-tetiana.jpg',
+        'group-1.jpg', 'group-2.jpg', 'group-3.jpg', 'group-4.jpg', 'group-5.jpg', 'group-6.jpg', 'group-7.jpg',
+        'daz3d-brianna.jpg', 'daz3d-chiyo.jpg', 'daz3d-cody.jpg', 'daz3d-drew-01.jpg', 'daz3d-drew-02.jpg', 'daz3d-ella-01.jpg', 'daz3d-ella-02.jpg', 'daz3d-gillian.jpg',
+        'daz3d-hye-01.jpg', 'daz3d-hye-02.jpg', 'daz3d-kaia.jpg', 'daz3d-karen.jpg', 'daz3d-kiaria-01.jpg', 'daz3d-kiaria-02.jpg', 'daz3d-lilah-01.jpg', 'daz3d-lilah-02.jpg',
+        'daz3d-lilah-03.jpg', 'daz3d-lila.jpg', 'daz3d-lindsey.jpg', 'daz3d-megah.jpg', 'daz3d-selina-01.jpg', 'daz3d-selina-02.jpg', 'daz3d-snow.jpg',
+        'daz3d-sunshine.jpg', 'daz3d-taia.jpg', 'daz3d-tuesday-01.jpg', 'daz3d-tuesday-02.jpg', 'daz3d-tuesday-03.jpg', 'daz3d-zoe.jpg', 'daz3d-ginnifer.jpg',
+        'daz3d-_emotions01.jpg', 'daz3d-_emotions02.jpg', 'daz3d-_emotions03.jpg', 'daz3d-_emotions04.jpg', 'daz3d-_emotions05.jpg',
+      ];
+      const image = document.getElementById('image');
+      for (const sample of samples) {
+        const el = document.createElement('img');
+        el.className = 'thumb';
+        el.src = el.title = el.alt = `/samples/in/${sample}`;
+        el.addEventListener('click', () => image.src = image.alt = image.title = el.src.replace('/in/', '/out/'));
+        document.getElementById('strip')?.appendChild(el);
+      }
+    </script> 
+  </body>
+</html>

src/blazeface/coords.ts

@@ -1,3 +1,8 @@
+/**
+ * BlazeFace, FaceMesh & Iris model implementation
+ * See `facemesh.ts` for entry point
+ */
+
 export const MESH_ANNOTATIONS = {
   silhouette: [
     10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288,

src/draw.ts

@@ -3,7 +3,7 @@
  */
 
 import { TRI468 as triangulation } from './blazeface/coords';
-import { mergeDeep, now } from './helpers';
+import { mergeDeep, now } from './util';
 import type { Result, FaceResult, BodyResult, HandResult, ObjectResult, GestureResult, PersonResult } from './result';
 
 /**

src/efficientpose/efficientpose.ts

@@ -1,8 +1,10 @@
 /**
- * EfficientPose Module
+ * EfficientPose model implementation
+ *
+ * Based on: [**EfficientPose**](https://github.com/daniegr/EfficientPose)
  */
 
-import { log, join } from '../helpers';
+import { log, join } from '../util';
 import * as tf from '../../dist/tfjs.esm.js';
 import type { BodyResult } from '../result';
 import type { GraphModel, Tensor } from '../tfjs/types';

src/emotion/emotion.ts

@@ -1,8 +1,10 @@
 /**
- * Emotion Module
+ * Emotion model implementation
+ *
+ * [**Oarriaga**](https://github.com/oarriaga/face_classification)
  */
 
-import { log, join } from '../helpers';
+import { log, join } from '../util';
 import type { Config } from '../config';
 import type { GraphModel, Tensor } from '../tfjs/types';
 import * as tf from '../../dist/tfjs.esm.js';

src/env.ts

@@ -1,6 +1,6 @@
 import * as tf from '../dist/tfjs.esm.js';
 import * as image from './image/image';
-import { mergeDeep } from './helpers';
+import { mergeDeep } from './util';
 
 export type Env = {
   browser: undefined | boolean,

src/face.ts

@@ -1,9 +1,9 @@
 /**
- * Module that analyzes person age
- * Obsolete
+ * Face algorithm implementation
+ * Uses FaceMesh, Emotion and FaceRes models to create a unified pipeline
  */
 
-import { log, now } from './helpers';
+import { log, now } from './util';
 import * as tf from '../dist/tfjs.esm.js';
 import * as facemesh from './blazeface/facemesh';
 import * as emotion from './emotion/emotion';

src/faceres/faceres.ts

@@ -1,10 +1,13 @@
 /**
- * HSE-FaceRes Module
+ * FaceRes model implementation
+ *
  * Returns Age, Gender, Descriptor
  * Implements Face simmilarity function
+ *
+ * Based on: [**HSE-FaceRes**](https://github.com/HSE-asavchenko/HSE_FaceRec_tf)
  */
 
-import { log, join } from '../helpers';
+import { log, join } from '../util';
 import * as tf from '../../dist/tfjs.esm.js';
 import type { Tensor, GraphModel } from '../tfjs/types';
 import type { Config } from '../config';

src/fingerpose/estimator.ts

@@ -1,3 +1,8 @@
+/**
+ * FingerPose algorithm implementation
+ * See `fingerpose.ts` for entry point
+ */
+
 import { Finger, FingerCurl, FingerDirection } from './description';
 
 const options = {

src/fingerpose/gesture.ts

@@ -1,3 +1,8 @@
+/**
+ * FingerPose algorithm implementation
+ * See `fingerpose.ts` for entry point
+ */
+
 export default class Gesture {
   name;
   curls;

src/fingerpose/gestures.ts

@@ -1,3 +1,8 @@
+/**
+ * FingerPose algorithm implementation
+ * See `fingerpose.ts` for entry point
+ */
+
 import { Finger, FingerCurl, FingerDirection } from './description';
 import Gesture from './gesture';
 

src/gesture/gesture.ts

@@ -1,5 +1,5 @@
 /**
- * Gesture detection module
+ * Gesture detection algorithm
  */
 
 import type { GestureResult } from '../result';

src/handpose/anchors.ts

@@ -1,3 +1,8 @@
+/**
+ * HandPose model implementation constants
+ * See `handpose.ts` for entry point
+ */
+
 export const anchors = [
   { x: 0.015625, y: 0.015625 },
   { x: 0.015625, y: 0.015625 },

src/handpose/box.ts

@@ -1,3 +1,8 @@
+/**
+ * HandPose model implementation
+ * See `handpose.ts` for entry point
+ */
+
 import * as tf from '../../dist/tfjs.esm.js';
 
 export function getBoxSize(box) {

src/handpose/handdetector.ts

@@ -1,3 +1,8 @@
+/**
+ * HandPose model implementation
+ * See `handpose.ts` for entry point
+ */
+
 import * as tf from '../../dist/tfjs.esm.js';
 import * as box from './box';
 import * as anchors from './anchors';

src/handpose/handpipeline.ts

@@ -1,3 +1,8 @@
+/**
+ * HandPose model implementation
+ * See `handpose.ts` for entry point
+ */
+
 import * as tf from '../../dist/tfjs.esm.js';
 import * as box from './box';
 import * as util from './util';

src/handpose/handpose.ts

@@ -1,8 +1,10 @@
 /**
- * HandPose module entry point
+ * HandPose model implementation
+ *
+ * Based on: [**MediaPipe HandPose**](https://drive.google.com/file/d/1sv4sSb9BSNVZhLzxXJ0jBv9DqD-4jnAz/view)
  */
 
-import { log, join } from '../helpers';
+import { log, join } from '../util';
 import * as tf from '../../dist/tfjs.esm.js';
 import * as handdetector from './handdetector';
 import * as handpipeline from './handpipeline';

src/handtrack/handtrack.ts

@@ -1,8 +1,12 @@
 /**
- * Hand Detection and Segmentation
+ * HandTrack model implementation
+ *
+ * Based on:
+ * - Hand Detection & Skeleton: [**MediaPipe HandPose**](https://drive.google.com/file/d/1sv4sSb9BSNVZhLzxXJ0jBv9DqD-4jnAz/view)
+ * - Hand Tracking: [**HandTracking**](https://github.com/victordibia/handtracking)
  */
 
-import { log, join } from '../helpers';
+import { log, join } from '../util';
 import * as tf from '../../dist/tfjs.esm.js';
 import type { HandResult } from '../result';
 import type { GraphModel, Tensor } from '../tfjs/types';