From 2e680ddc2bfb81ac78491efd02ffe0de5e3b2e25 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Sat, 17 Oct 2020 06:30:00 -0400
Subject: [PATCH] refactored package file layout

---
 README.md                                 |  18 +-
 src/config.js => config.js                |   0
 demo/{demo-esm.js => browser.js}          |   3 +-
 demo/demo-iife.html                       | 422 ----------------------
 demo/index.html                           |  27 ++
 demo/{demo-node.js => node.js}            |   2 +-
 demo/{demo-esm-webworker.js => worker.js} |   0
 favicon.ico                               | Bin 0 -> 5063 bytes
 package.json                              |  15 +-
 src/index.js                              |   2 +-
 10 files changed, 42 insertions(+), 447 deletions(-)
 rename src/config.js => config.js (100%)
 rename demo/{demo-esm.js => browser.js} (99%)
 delete mode 100644 demo/demo-iife.html
 create mode 100644 demo/index.html
 rename demo/{demo-node.js => node.js} (98%)
 rename demo/{demo-esm-webworker.js => worker.js} (100%)
 create mode 100644 favicon.ico

diff --git a/README.md b/README.md
index b15f6f0f..c84b8c0c 100644
--- a/README.md
+++ b/README.md
@@ -41,8 +41,7 @@ There are multiple ways to use `Human` library, pick one that suits you:
 - `dist/human.js`: IIFE format minified bundle with TFJS for Browsers
 - `dist/human.esm.js`: ESM format minified bundle with TFJS for Browsers
 - `dist/human.esm-nobundle.js`: ESM format non-minified bundle without TFJS for Browsers
-- `dist/human.cjs`: CommonJS format minified bundle with TFJS for NodeJS
-- `dist/human-nobundle.cjs`: CommonJS format non-minified bundle without TFJS for NodeJS
+- `dist/human.cjs`: CommonJS format non-minified bundle without TFJS for NodeJS
 
 All versions include `sourcemap`
 
@@ -116,21 +115,13 @@ Entry point is bundle in CJS format `dist/human.node.js`
 You also need to install and include `tfjs-node` or `tfjs-node-gpu` in your project so it can register an optimized backend  
 
 Install with:
-```shell
-  npm install @vladmandic/human
-```
-And then use with:
-```js
-  const human = require('@vladmandic/human'); // points to @vladmandic/human/dist/human.cjs
-```
-or
 ```shell
   npm install @vladmandic/human @tensorflow/tfjs-node
 ```
 And then use with:
 ```js
   const tf = require('@tensorflow/tfjs-node'); // can also use '@tensorflow/tfjs-node-gpu' if you have environment with CUDA extensions
-  const human = require('@vladmandic/human/dist/human-nobundle.cjs');
+  const human = require('@vladmandic/human'); // points to @vladmandic/human/dist/human.cjs
 ```
 
 
@@ -164,11 +155,10 @@ If your application resides in a different folder, modify `modelPath` property i
 Demos are included in `/demo`:
 
 Browser:
-- `demo-esm`: Full demo using Browser with ESM module, includes selectable backends and webworkers
-- `demo-iife`: Older demo using Browser with IIFE module
+- `index.html`, `browser.js`, `worker.js`: Full demo using Browser with ESM module, includes selectable backends and webworkers
 
 NodeJS:
-- `demo-node`: Demo using NodeJS with CJS module  
+- `node.js`: Demo using NodeJS with CJS module  
   This is a very simple demo as althought `Human` library is compatible with NodeJS execution  
   and is able to load images and models from local filesystem,  
 
diff --git a/src/config.js b/config.js
similarity index 100%
rename from src/config.js
rename to config.js
diff --git a/demo/demo-esm.js b/demo/browser.js
similarity index 99%
rename from demo/demo-esm.js
rename to demo/browser.js
index 7a505050..a178d1e3 100644
--- a/demo/demo-esm.js
+++ b/demo/browser.js
@@ -11,6 +11,7 @@ const ui = {
   columns: 3,
   busy: false,
   facing: 'user',
+  worker: 'worker.js',
 };
 
 const config = {
@@ -243,7 +244,7 @@ function webWorker(input, image, canvas) {
   if (!worker) {
     // create new webworker and add event handler only once
     log('Creating worker thread');
-    worker = new Worker('demo-esm-webworker.js', { type: 'module' });
+    worker = new Worker(ui.worker, { type: 'module' });
     // after receiving message from webworker, parse&draw results and send new frame for processing
     worker.addEventListener('message', (msg) => drawResults(input, msg.data, canvas));
   }
diff --git a/demo/demo-iife.html b/demo/demo-iife.html
deleted file mode 100644
index 0296c31c..00000000
--- a/demo/demo-iife.html
+++ /dev/null
@@ -1,422 +0,0 @@
-<head>
-  <script src="https://cdn.jsdelivr.net/npm/quicksettings@latest/quicksettings.min.js"></script>
-  <script src="../dist/human.js"></script>
-</head>
-<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'">
-  <div id="main">
-    <video id="video" playsinline style="display: none"></video>
-    <image id="image" src="" style="display: none"></video>
-    <canvas id="canvas"></canvas>
-    <div id="log">Starting Human library</div>
-  </div>
-  <script>
-    /* global QuickSettings */
-
-    const ui = {
-      baseColor: 'rgba(255, 200, 255, 0.3)',
-      baseLabel: 'rgba(255, 200, 255, 0.8)',
-      baseFont: 'small-caps 1.2rem "Segoe UI"',
-      baseLineWidth: 16,
-    };
-
-    const config = {
-      backend: 'webgl',
-      console: true,
-      face: {
-        enabled: true,
-        detector: { maxFaces: 10, skipFrames: 10, minConfidence: 0.5, iouThreshold: 0.3, scoreThreshold: 0.7 },
-        mesh: { enabled: true },
-        iris: { enabled: true },
-        age: { enabled: true, skipFrames: 10 },
-        gender: { enabled: true },
-        emotion: { enabled: true, minConfidence: 0.5, useGrayscale: true },
-      },
-      body: { enabled: true, maxDetections: 10, scoreThreshold: 0.7, nmsRadius: 20 },
-      hand: { enabled: true, skipFrames: 10, minConfidence: 0.5, iouThreshold: 0.3, scoreThreshold: 0.7 },
-    };
-    let settings;
-    let worker;
-    let timeStamp;
-    const fps = [];
-
-    function str(...msg) {
-      if (!Array.isArray(msg)) return msg;
-      let line = '';
-      for (const entry of msg) {
-        if (typeof entry === 'object') line += JSON.stringify(entry).replace(/{|}|"|\[|\]/g, '').replace(/,/g, ', ');
-        else line += entry;
-      }
-      return line;
-    }
-
-    const log = (...msg) => {
-      // eslint-disable-next-line no-console
-      if (config.console) console.log(...msg);
-    };
-
-    async function drawFace(result, canvas) {
-      if (!result) return;
-      const ctx = canvas.getContext('2d');
-      ctx.strokeStyle = ui.baseColor;
-      ctx.font = ui.baseFont;
-      for (const face of result) {
-        ctx.fillStyle = ui.baseColor;
-        ctx.lineWidth = ui.baseLineWidth;
-        ctx.beginPath();
-        if (settings.getValue('Draw Boxes')) {
-          ctx.rect(face.box[0], face.box[1], face.box[2], face.box[3]);
-        }
-        const labelAgeGender = `${face.gender || ''} ${face.age || ''}`;
-        const labelIris = face.iris ? `iris: ${face.iris}` : '';
-        const labelEmotion = face.emotion && face.emotion[0] ? `emotion: ${Math.trunc(100 * face.emotion[0].score)}% ${face.emotion[0].emotion}` : '';
-        ctx.fillStyle = ui.baseLabel;
-        ctx.fillText(`${Math.trunc(100 * face.confidence)}% face ${labelAgeGender} ${labelIris} ${labelEmotion}`, face.box[0] + 2, face.box[1] + 22);
-        ctx.stroke();
-        ctx.lineWidth = 1;
-        if (face.mesh) {
-          if (settings.getValue('Draw Points')) {
-            for (const point of face.mesh) {
-              ctx.fillStyle = `rgba(${127.5 + (2 * point[2])}, ${127.5 - (2 * point[2])}, 255, 0.5)`;
-              ctx.beginPath();
-              ctx.arc(point[0], point[1], 2, 0, 2 * Math.PI);
-              ctx.fill();
-            }
-          }
-          if (settings.getValue('Draw Polygons')) {
-            for (let i = 0; i < human.facemesh.triangulation.length / 3; i++) {
-              const points = [
-                human.facemesh.triangulation[i * 3 + 0],
-                human.facemesh.triangulation[i * 3 + 1],
-                human.facemesh.triangulation[i * 3 + 2],
-              ].map((index) => face.mesh[index]);
-              const path = new Path2D();
-              path.moveTo(points[0][0], points[0][1]);
-              for (const point of points) {
-                path.lineTo(point[0], point[1]);
-              }
-              path.closePath();
-              ctx.strokeStyle = `rgba(${127.5 + (2 * points[0][2])}, ${127.5 - (2 * points[0][2])}, 255, 0.3)`;
-              ctx.stroke(path);
-              if (settings.getValue('Fill Polygons')) {
-                ctx.fillStyle = `rgba(${127.5 + (2 * points[0][2])}, ${127.5 - (2 * points[0][2])}, 255, 0.3)`;
-                ctx.fill(path);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    async function drawBody(result, canvas) {
-      if (!result) return;
-      const ctx = canvas.getContext('2d');
-      ctx.fillStyle = ui.baseColor;
-      ctx.strokeStyle = ui.baseColor;
-      ctx.font = ui.baseFont;
-      ctx.lineWidth = ui.baseLineWidth;
-      for (const pose of result) {
-        if (settings.getValue('Draw Points')) {
-          for (const point of pose.keypoints) {
-            ctx.beginPath();
-            ctx.arc(point.position.x, point.position.y, 2, 0, 2 * Math.PI);
-            ctx.fill();
-          }
-        }
-        if (settings.getValue('Draw Polygons')) {
-          const path = new Path2D();
-          let part;
-          // torso
-          part = pose.keypoints.find((a) => a.part === 'leftShoulder');
-          path.moveTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightShoulder');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightHip');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'leftHip');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'leftShoulder');
-          path.lineTo(part.position.x, part.position.y);
-          // legs
-          part = pose.keypoints.find((a) => a.part === 'leftHip');
-          path.moveTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'leftKnee');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'leftAnkle');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightHip');
-          path.moveTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightKnee');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightAnkle');
-          path.lineTo(part.position.x, part.position.y);
-          // arms
-          part = pose.keypoints.find((a) => a.part === 'leftShoulder');
-          path.moveTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'leftElbow');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'leftWrist');
-          path.lineTo(part.position.x, part.position.y);
-          // arms
-          part = pose.keypoints.find((a) => a.part === 'rightShoulder');
-          path.moveTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightElbow');
-          path.lineTo(part.position.x, part.position.y);
-          part = pose.keypoints.find((a) => a.part === 'rightWrist');
-          path.lineTo(part.position.x, part.position.y);
-          // draw all
-          ctx.stroke(path);
-        }
-      }
-    }
-
-    async function drawHand(result, canvas) {
-      if (!result) return;
-      const ctx = canvas.getContext('2d');
-      ctx.font = ui.baseFont;
-      ctx.lineWidth = ui.baseLineWidth;
-      window.result = result;
-      for (const hand of result) {
-        if (settings.getValue('Draw Boxes')) {
-          ctx.lineWidth = ui.baseLineWidth;
-          ctx.beginPath();
-          ctx.fillStyle = ui.baseColor;
-          ctx.rect(hand.box[0], hand.box[1], hand.box[2], hand.box[3]);
-          ctx.fillStyle = ui.baseLabel;
-          ctx.fillText('hand', hand.box[0] + 2, hand.box[1] + 22, hand.box[2]);
-          ctx.stroke();
-        }
-        if (settings.getValue('Draw Points')) {
-          for (const point of hand.landmarks) {
-            ctx.fillStyle = `rgba(${127.5 + (2 * point[2])}, ${127.5 - (2 * point[2])}, 255, 0.5)`;
-            ctx.beginPath();
-            ctx.arc(point[0], point[1], 2, 0, 2 * Math.PI);
-            ctx.fill();
-          }
-        }
-        if (settings.getValue('Draw Polygons')) {
-          const addPart = (part) => {
-            for (let i = 1; i < part.length; i++) {
-              ctx.lineWidth = ui.baseLineWidth;
-              ctx.beginPath();
-              ctx.strokeStyle = `rgba(${127.5 + (2 * part[i][2])}, ${127.5 - (2 * part[i][2])}, 255, 0.5)`;
-              ctx.moveTo(part[i - 1][0], part[i - 1][1]);
-              ctx.lineTo(part[i][0], part[i][1]);
-              ctx.stroke();
-            }
-          };
-          addPart(hand.annotations.indexFinger);
-          addPart(hand.annotations.middleFinger);
-          addPart(hand.annotations.ringFinger);
-          addPart(hand.annotations.pinky);
-          addPart(hand.annotations.thumb);
-          addPart(hand.annotations.palmBase);
-        }
-      }
-    }
-
-    async function drawResults(input, result, canvas) {
-      // update fps
-      settings.setValue('FPS', Math.round(1000 / (performance.now() - timeStamp)));
-      fps.push(1000 / (performance.now() - timeStamp));
-      if (fps.length > 20) fps.shift();
-      settings.setValue('FPS', Math.round(10 * fps.reduce((a, b) => a + b) / fps.length) / 10);
-
-      // eslint-disable-next-line no-use-before-define
-      requestAnimationFrame(() => runHumanDetect(input, canvas)); // immediate loop
-
-      // draw image from video
-      const ctx = canvas.getContext('2d');
-      ctx.drawImage(input, 0, 0, input.width, input.height, 0, 0, canvas.width, canvas.height);
-      // draw all results
-      drawFace(result.face, canvas);
-      drawBody(result.body, canvas);
-      drawHand(result.hand, canvas);
-      // update log
-      const engine = await human.tf.engine();
-      const memory = `${engine.state.numBytes.toLocaleString()} bytes ${engine.state.numDataBuffers.toLocaleString()} buffers ${engine.state.numTensors.toLocaleString()} tensors`;
-      const gpu = engine.backendInstance ? `GPU: ${engine.backendInstance.numBytesInGPU.toLocaleString()} bytes` : '';
-      document.getElementById('log').innerText = `
-        TFJS Version: ${human.tf.version_core} | Backend: ${human.tf.getBackend()} | Memory: ${memory} ${gpu}
-        Performance: ${str(result.performance)} | Object size: ${(str(result)).length.toLocaleString()} bytes
-      `;
-    }
-
-    // simple wrapper for worker.postmessage that creates worker if one does not exist
-    function webWorker(input, image, canvas) {
-      if (!worker) {
-        // create new webworker and add event handler only once
-        log('Creating worker thread');
-        worker = new Worker('demo-esm-webworker.js', { type: 'module' });
-        // after receiving message from webworker, parse&draw results and send new frame for processing
-        worker.addEventListener('message', (msg) => drawResults(input, msg.data, canvas));
-      }
-      // pass image data as arraybuffer to worker by reference to avoid copy
-      worker.postMessage({ image: image.data.buffer, width: canvas.width, height: canvas.height, config }, [image.data.buffer]);
-    }
-
-    async function runHumanDetect(input, canvas) {
-      const live = input.srcObject ? ((input.srcObject.getVideoTracks()[0].readyState === 'live') && (input.readyState > 2) && (!input.paused)) : false;
-      timeStamp = performance.now();
-      // perform detect if live video or not video at all
-      if (live || !(input instanceof HTMLVideoElement)) {
-        if (settings.getValue('Use Web Worker')) {
-          // get image data from video as we cannot send html objects to webworker
-          const offscreen = new OffscreenCanvas(canvas.width, canvas.height);
-          const ctx = offscreen.getContext('2d');
-          ctx.drawImage(input, 0, 0, input.width, input.height, 0, 0, canvas.width, canvas.height);
-          const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
-          // perform detection in worker
-          webWorker(input, data, canvas);
-        } else {
-          let result = {};
-          try {
-            // perform detection
-            result = await human.detect(input, config);
-          } catch (err) {
-            log('Error during execution:', err.message);
-          }
-          drawResults(input, result, canvas);
-        }
-      }
-    }
-
-    function setupUI() {
-      // add all variables to ui control panel
-      settings = QuickSettings.create(10, 10, 'Settings', document.getElementById('main'));
-      const style = document.createElement('style');
-      // style.type = 'text/css';
-      style.innerHTML = `
-        .qs_main { font: 1rem "Segoe UI"; }
-        .qs_label { font: 0.8rem "Segoe UI"; }
-        .qs_title_bar { display: none; }
-        .qs_content { background: darkslategray; }
-        .qs_container { background: transparent; color: white; margin: 6px; padding: 6px; }
-        .qs_checkbox_label { top: 2px; }
-        .qs_button { width: -webkit-fill-available; font: 1rem "Segoe UI"; cursor: pointer; }
-      `;
-      document.getElementsByTagName('head')[0].appendChild(style);
-      settings.addButton('Play/Pause', () => {
-        const video = document.getElementById('video');
-        const canvas = document.getElementById('canvas');
-        if (!video.paused) {
-          document.getElementById('log').innerText = 'Paused ...';
-          video.pause();
-        } else {
-          document.getElementById('log').innerText = 'Starting Human Library ...';
-          video.play();
-        }
-        runHumanDetect(video, canvas);
-      });
-      settings.addDropDown('Backend', ['webgl', 'wasm', 'cpu'], async (val) => config.backend = val.value);
-      settings.addHTML('title', 'Enabled Models'); settings.hideTitle('title');
-      settings.addBoolean('Face Detect', config.face.enabled, (val) => config.face.enabled = val);
-      settings.addBoolean('Face Mesh', config.face.mesh.enabled, (val) => config.face.mesh.enabled = val);
-      settings.addBoolean('Face Iris', config.face.iris.enabled, (val) => config.face.iris.enabled = val);
-      settings.addBoolean('Face Age', config.face.age.enabled, (val) => config.face.age.enabled = val);
-      settings.addBoolean('Face Gender', config.face.gender.enabled, (val) => config.face.gender.enabled = val);
-      settings.addBoolean('Face Emotion', config.face.emotion.enabled, (val) => config.face.emotion.enabled = val);
-      settings.addBoolean('Body Pose', config.body.enabled, (val) => config.body.enabled = val);
-      settings.addBoolean('Hand Pose', config.hand.enabled, (val) => config.hand.enabled = val);
-      settings.addHTML('title', 'Model Parameters'); settings.hideTitle('title');
-      settings.addRange('Max Objects', 1, 20, 5, 1, (val) => {
-        config.face.detector.maxFaces = parseInt(val);
-        config.body.maxDetections = parseInt(val);
-      });
-      settings.addRange('Skip Frames', 1, 20, config.face.detector.skipFrames, 1, (val) => {
-        config.face.detector.skipFrames = parseInt(val);
-        config.face.emotion.skipFrames = parseInt(val);
-        config.face.age.skipFrames = parseInt(val);
-        config.hand.skipFrames = parseInt(val);
-      });
-      settings.addRange('Min Confidence', 0.1, 1.0, config.face.detector.minConfidence, 0.05, (val) => {
-        config.face.detector.minConfidence = parseFloat(val);
-        config.face.emotion.minConfidence = parseFloat(val);
-        config.hand.minConfidence = parseFloat(val);
-      });
-      settings.addRange('Score Threshold', 0.1, 1.0, config.face.detector.scoreThreshold, 0.05, (val) => {
-        config.face.detector.scoreThreshold = parseFloat(val);
-        config.hand.scoreThreshold = parseFloat(val);
-        config.body.scoreThreshold = parseFloat(val);
-      });
-      settings.addRange('IOU Threshold', 0.1, 1.0, config.face.detector.iouThreshold, 0.05, (val) => {
-        config.face.detector.iouThreshold = parseFloat(val);
-        config.hand.iouThreshold = parseFloat(val);
-      });
-      settings.addHTML('title', 'UI Options'); settings.hideTitle('title');
-      settings.addBoolean('Use Web Worker', false);
-      settings.addBoolean('Draw Boxes', true);
-      settings.addBoolean('Draw Points', true);
-      settings.addBoolean('Draw Polygons', true);
-      settings.addBoolean('Fill Polygons', true);
-      settings.addHTML('line1', '<hr>'); settings.hideTitle('line1');
-      settings.addRange('FPS', 0, 100, 0, 1);
-    }
-
-    async function setupCanvas(input) {
-      // setup canvas object to same size as input as camera resolution may change
-      const canvas = document.getElementById('canvas');
-      canvas.width = input.width;
-      canvas.height = input.height;
-      return canvas;
-    }
-
-    // eslint-disable-next-line no-unused-vars
-    async function setupCamera() {
-      log('Setting up camera');
-      // setup webcam. note that navigator.mediaDevices requires that page is accessed via https
-      const video = document.getElementById('video');
-      if (!navigator.mediaDevices) {
-        document.getElementById('log').innerText = 'Video not supported';
-        return null;
-      }
-      const stream = await navigator.mediaDevices.getUserMedia({
-        audio: false,
-        video: { facingMode: 'user', width: window.innerWidth, height: window.innerHeight },
-      });
-      video.srcObject = stream;
-      return new Promise((resolve) => {
-        video.onloadedmetadata = () => {
-          video.width = video.videoWidth;
-          video.height = video.videoHeight;
-          video.play();
-          video.pause();
-          resolve(video);
-        };
-      });
-    }
-
-    // eslint-disable-next-line no-unused-vars
-    async function setupImage() {
-      const image = document.getElementById('image');
-      image.width = window.innerWidth;
-      image.height = window.innerHeight;
-      return new Promise((resolve) => {
-        image.onload = () => resolve(image);
-        image.src = 'sample.jpg';
-      });
-    }
-
-    async function main() {
-      log('Human starting ...');
-
-      // setup ui control panel
-      await setupUI();
-      // setup webcam
-      const input = await setupCamera();
-      // or setup image
-      // const input = await setupImage();
-      // setup output canvas from input object
-      await setupCanvas(input);
-
-      const msg = `Human ready: version: ${human.version} TensorFlow/JS version: ${human.tf.version_core}`;
-      document.getElementById('log').innerText = msg;
-      log(msg);
-
-      // run actual detection. if input is video, it will run in a loop else it will run only once
-      // runHumanDetect(video, canvas);
-    }
-
-    window.onload = main;
-    window.onresize = main;
-  </script>
-</body>
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 00000000..d49c24cf
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Human</title>
+  <meta http-equiv="content-type">
+  <meta content="text/html">
+  <meta charset="UTF-8">
+  <meta name="description" content="3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction & Emotion Prediction; Author: Vladimir Mandic <mandic00@live.com>">
+  <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.1, maximum-scale=4.0, shrink-to-fit=yes, user-scalable=yes">
+  <meta name="theme-color" content="black"/>
+  <meta name="application-name" content="Human">
+  <meta name="msapplication-tooltip" content="Human: AI-powered 3D Human Detection">
+  <link rel="manifest" href="../dist/human.esm.json">
+  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
+    <!-- <script src="../assets/tf.min.js"></script> -->
+    <!-- <script src="../assets/tf-backend-wasm.min.js"></script> -->
+    <script src="../assets/quicksettings.js"></script>
+    <script src="./browser.js" type="module"></script>
+  </head>
+  <body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'; font-size: 16px; font-variant: small-caps; overflow-x: hidden">
+    <video id="video" playsinline style="display: none"></video>
+    <image id="image" src="" style="display: none"></video>
+    <canvas id="canvas"></canvas>
+    <div id="samples" style="display: flex; flex-wrap: wrap"></div>
+    <div id="log" style="position: fixed; bottom: 0">Human library</div>
+  </body>
+</html>
diff --git a/demo/demo-node.js b/demo/node.js
similarity index 98%
rename from demo/demo-node.js
rename to demo/node.js
index 5771a989..a1232ea1 100644
--- a/demo/demo-node.js
+++ b/demo/node.js
@@ -59,7 +59,7 @@ async function detect(input, output) {
   image.dispose();
   logger.log(result);
   // Draw detected data and save processed image
-  logger.log('Saving:', output);
+  logger.log('TODO Saving:', output);
 }
 
 async function main() {
diff --git a/demo/demo-esm-webworker.js b/demo/worker.js
similarity index 100%
rename from demo/demo-esm-webworker.js
rename to demo/worker.js
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1cbc04490dd7488fa515a98e243c113ac220d2f6
GIT binary patch
literal 5063
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
D<0%g1

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index d3e89390..fc6fd969 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.3.5",
   "description": "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
   "sideEffects": false,
-  "main": "dist/human-nobundle.cjs",
+  "main": "dist/human.cjs",
   "module": "dist/human.esm.js",
   "browser": "dist/human.esm.js",
   "author": "Vladimir Mandic <mandic00@live.com>",
@@ -37,14 +37,13 @@
     "rimraf": "^3.0.2"
   },
   "scripts": {
-    "start": "node --trace-warnings --trace-uncaught --no-deprecation demo/demo-node.js",
+    "start": "node --trace-warnings --trace-uncaught --no-deprecation demo/node.js",
     "lint": "eslint src/*.js demo/*.js",
-    "build-iife": "esbuild --bundle --platform=browser --sourcemap --target=esnext --format=iife --minify --external:fs --global-name=human --outfile=dist/human.js src/index.js",
-    "build-esm-bundle": "esbuild --bundle --platform=browser --sourcemap --target=esnext --format=esm --minify --external:fs --outfile=dist/human.esm.js src/index.js",
-    "build-esm-nobundle": "esbuild --bundle --platform=browser --sourcemap --target=esnext --format=esm --minify --external:@tensorflow --external:fs --outfile=dist/human.esm-nobundle.js src/index.js",
-    "build-node-bundle": "esbuild --bundle --platform=node --sourcemap --target=esnext --format=cjs --minify --outfile=dist/human.cjs src/index.js",
-    "build-node-nobundle": "esbuild --bundle --platform=node --sourcemap --target=esnext --format=cjs --external:@tensorflow --outfile=dist/human-nobundle.cjs src/index.js",
-    "build": "rimraf dist/* && npm run build-iife && npm run build-esm-bundle && npm run build-esm-nobundle && npm run build-node-bundle && npm run build-node-nobundle && ls -l dist/",
+    "build-iife": "esbuild --bundle --platform=browser --sourcemap --target=esnext --format=iife --minify --external:fs --global-name=human --metafile=dist/human.json --outfile=dist/human.js src/index.js",
+    "build-esm-bundle": "esbuild --bundle --platform=browser --sourcemap --target=esnext --format=esm --minify --external:fs --metafile=dist/human.esm.json --outfile=dist/human.esm.js src/index.js",
+    "build-esm-nobundle": "esbuild --bundle --platform=browser --sourcemap --target=esnext --format=esm --minify --external:@tensorflow --external:fs --metafile=dist/human.esm-nobundle.json --outfile=dist/human.esm-nobundle.js src/index.js",
+    "build-node": "esbuild --bundle --platform=node --sourcemap --target=esnext --format=cjs --external:@tensorflow --metafile=dist/human.cjs.json --outfile=dist/human.cjs src/index.js",
+    "build": "rimraf dist/* && npm run build-iife && npm run build-esm-bundle && npm run build-esm-nobundle && npm run build-node && ls -l dist/",
     "update": "npm update --depth 20 && npm dedupe && npm prune && npm audit",
     "changelog": "node changelog.js"
   },
diff --git a/src/index.js b/src/index.js
index 2456104d..a6b10a79 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ const ssrnet = require('./ssrnet/ssrnet.js');
 const emotion = require('./emotion/emotion.js');
 const posenet = require('./posenet/posenet.js');
 const handpose = require('./handpose/handpose.js');
-const defaults = require('./config.js').default;
+const defaults = require('../config.js').default;
 const app = require('../package.json');
 
 let config;