added example

2020-08-27 08:58:00 -04:00 · 2020-08-27 08:58:00 -04:00 · 5d43985e1c
parent b6e0e314f6
commit 5d43985e1c
9 changed files with 216 additions and 10 deletions
--- a/README.md
+++ b/README.md
@ -1,15 +1,15 @@
 # FaceAPI

+## Note
+
+This is updated **face-api.js** with latest available tensorflow/js as original face-api.js is not compatible with **tfjs 2.0+**.  
+If original repository is updated, this one will become obsolete.
+
 Forked from **face-api.js** version **0.22.2** released on March 22nd, 2020  

 - <https://github.com/justadudewhohacks/face-api.js>  
 - <https://www.npmjs.com/package/face-api.js>  

-## Note
-
-I don't plan to maintain a separate distribution of **face-api.js**, this is only a temporary repository to use latest available face-api with latest available tensorflow/js as original face-api.js is not compatible with **tfjs 2.0+**.  
-If original repository is updated, this one will become obsolete.
-
 ## Differences

 - Removed tests, docs, examples  
@ -19,23 +19,43 @@ If original repository is updated, this one will become obsolete.
 - Removed unnecesary package dependencies (karma, jasmine, etc.)  
 - Updated Typescript build process to target ES2018 instead of dual ES5/ES6  
 - Changed browser bundle process to use ESBuild instead of Rollup
- Updated dependencies to @tensorflow/tfjs since backends were removed from @tensorflow/tfjs-core
+- Updated TFJS dependencies since backends were removed from @tensorflow/tfjs-core
 - Updated mobileNetv1 model due to batchNorm() dependency
 - Removed following models as they are either obsolete or non-functional with tfjs 2.0+
  - mtcnn: Mostly obsolete
  - tinyYolov2: Non-functional since weights are missing

 Which means valid models are **tinyFaceDetector** and **mobileNetv1**  
+Due to reduced code and changed build process, resulting bundle is about **>5x smaller** than the original!  

-Due to reduced code and changed build process, resulting bundle is about **2x smaller** than the original!  
+## Installation
+
+**Imporant!**: This version of **face-api** does not embedd full version of **tfjs** to enable dynamic loading of different versions of tfjs as well as to enable reusability of tfjs for different purposes. *Load tfjs explicitly before loading face-api.*  
+
+For example as ESM script:
+
+```html
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.3.0/tf.es2017.js"></script>
+  <script src="/dist/face-api.js"></script> <!-- full version / 960KB -->
+  <script src="/dist/face-api.min.js"></script> <!-- minified version / 320KB -->
+```
+
+or as NPM module:
+
+```js
+  # npm install @tensorflow/tfjs @vladmandic/face-api
+  
+  const tf = require('@tensorflow/tfjs');
+  const faceapi = require('@vladmandic/face-api');
+```

 ## Weights

-Pretrained models are includes in `./weights` and uplodaed using GIT LFS support.
+Pretrained models are includes in `./weights`.

 ## Build

-Both `./build` and `./dist` folders are included by default, so no need for build during install.
+Both **`./build`** (used by `import` or `require`) and **`./dist`** (used by `<script src...>`) folders are included by default, so no need for build during install.
 However, if you want to rebuild use:

 ```shell
@ -46,4 +66,10 @@ Which will compile everything in `./src` into `./build` and create both standard

 ## Documentation

-For documentation refer to original project  
+For documentation refer to original project at <https://github.com/justadudewhohacks/face-api.js>  
+
+## Example
+
+Single new example that uses both models as well as all of the extensions is included in `/example/index.html`  
+
+![alt text](example/screenshot.png)
--- a/example/index.html
+++ b/example/index.html
@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>OpenImages Test</title>
+    <meta http-equiv="content-type">
+    <meta content="text/html">
+    <meta charset="UTF-8">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.3.0/tf.es2017.js" integrity="sha512-86mDh7XD/1SzFWCS4UwRHiIN8jak+8wHL4ird70XnjlLTrWsFbYCAez10OeivKcbvhAG1HC3qm2RlJrM3lnIqA==" crossorigin="anonymous"></script>
+    <script src="/dist/face-api.js"></script>
+    <style>
+      body { font-family: monospace; background: black; color: white; font-size: 16px; line-height: 22px; margin: 0; }
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <script>
+      /* global faceapi */ // face-api is loaded via <script src> in a <head> section
+      /* tfjs should be loaded explicitly and is not embedded inside facepi.js to keep size small and allow reusability */
+
+      // configuration options
+      const modelPath = '/weights'; // relative path to model that will be loaded using http
+      const imgSize = 512; // maximum image size in pixels
+      const minScore = 0.1; // minimum score
+      const maxResults = 5; // maximum number of results to return
+      const samples = ['/example/sample (1).jpg', '/example/sample (2).jpg', '/example/sample (3).jpg', '/example/sample (4).jpg', '/example/sample (5).jpg', '/example/sample (6).jpg']; // sample images to be loaded using http
+
+      // helper function to pretty-print json object to string
+      function str(json) {
+        let text = '<font color="lightblue">';
+        text += JSON.stringify(json).replace(/{|}|"|\[|\]/g, '').replace(/,/g, ', ');
+        text += '</font>';
+        return text;
+      }
+
+      // helper function to print strings to html document as a log
+      function log(...txt) {
+        // eslint-disable-next-line no-console
+        console.log(...txt);
+        document.getElementById('log').innerHTML += `<br>${txt}`;
+      }
+
+      // helper function to draw detected faces
+      function faces(name, title, id, data) {
+        // create canvas to draw on
+        const img = document.getElementById(id);
+        const canvas = document.createElement('canvas');
+        canvas.style.position = 'absolute';
+        canvas.style.left = `${img.offsetLeft}px`;
+        canvas.style.top = `${img.offsetTop}px`;
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext('2d');
+        // draw title
+        ctx.font = '1rem sans-serif';
+        ctx.fillStyle = 'black';
+        ctx.fillText(name, 2, 15);
+        ctx.fillText(title, 2, 35);
+        for (const person of data) {
+          // draw box around each face
+          ctx.lineWidth = 3;
+          ctx.strokeStyle = 'deepskyblue';
+          ctx.fillStyle = 'deepskyblue';
+          ctx.globalAlpha = 0.4;
+          ctx.beginPath();
+          ctx.rect(person.detection.box.x, person.detection.box.y, person.detection.box.width, person.detection.box.height);
+          ctx.stroke();
+          ctx.globalAlpha = 1;
+          ctx.fillText(`${Math.round(100 * person.genderProbability)}% ${person.gender}`, person.detection.box.x, person.detection.box.y - 18);
+          ctx.fillText(`${Math.round(person.age)} years`, person.detection.box.x, person.detection.box.y - 2);
+          // draw face points for each face
+          ctx.fillStyle = 'lightblue';
+          ctx.globalAlpha = 0.5;
+          const pointSize = 2;
+          for (const pt of person.landmarks.positions) {
+            ctx.beginPath();
+            ctx.arc(pt.x, pt.y, pointSize, 0, 2 * Math.PI);
+            ctx.fill();
+          }
+        }
+        // add canvas to document
+        document.body.appendChild(canvas);
+      }
+
+      // helper function to draw processed image and its results
+      function print(title, img, data) {
+        // eslint-disable-next-line no-console
+        console.log('Results:', title, img, data);
+        const el = new Image();
+        el.id = Math.floor(Math.random() * 100000);
+        el.src = img;
+        el.width = imgSize;
+        el.onload = () => faces(img, title, el.id, data);
+        document.body.appendChild(el);
+        // document.getElementById('log').innerHTML += `<img id="${id}" src="${img}" height=${imgSize}></img>`;
+        // document.getElementById(el.id).addEventListener('load', () => faces(img, title, image.id, data));
+        // setTimeout(() => faces(img, title, id, data), 1000);
+      }
+
+      // loads image and draws it on resized canvas so we alwys have correct image size regardless of source
+      async function image(url) {
+        return new Promise((resolve) => {
+          const img = new Image();
+          // wait until image is actually loaded
+          img.addEventListener('load', () => {
+            // resize image so larger axis is not bigger than limit
+            const ratio = 1.0 * img.height / img.width;
+            img.width = ratio <= 1 ? imgSize : 1.0 * imgSize / ratio;
+            img.height = ratio >= 1 ? imgSize : 1.0 * imgSize * ratio;
+            // create canvas and draw loaded image
+            const canvas = document.createElement('canvas');
+            canvas.height = img.height;
+            canvas.width = img.width;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, img.width, img.height);
+            // return generated canvas to be used by tfjs during detection
+            resolve(canvas);
+          });
+          // load image
+          img.src = url;
+        });
+      }
+
+      async function main() {
+        await faceapi.nets.tinyFaceDetector.load(modelPath);
+        await faceapi.nets.ssdMobilenetv1.load(modelPath);
+        await faceapi.nets.ageGenderNet.load(modelPath);
+        await faceapi.nets.faceLandmark68Net.load(modelPath);
+        await faceapi.nets.faceRecognitionNet.load(modelPath);
+        await faceapi.nets.faceExpressionNet.load(modelPath);
+        const optionsTinyFace = new faceapi.TinyFaceDetectorOptions({ inputSize: imgSize, scoreThreshold: minScore });
+        const optionsSSDMobileNet = new faceapi.SsdMobilenetv1Options({ minConfidence: minScore, maxResults });
+
+        // initialize tfjs
+        await faceapi.tf.setBackend('webgl');
+        await faceapi.tf.enableProdMode();
+        faceapi.tf.ENV.set('DEBUG', false);
+        log('FaceAPI Test');
+        log(`TensorFlow/JS Version: ${faceapi.tf.version_core} Backend ${faceapi.tf.getBackend()}`);
+        log(`TF Flags: ${str(faceapi.tf.ENV.flags)}`);
+        const engine = await faceapi.tf.engine();
+        log(`TF Engine State: ${str(engine.state)}`);
+        // loop through all images and try to process them
+        log(`Start processing: ${samples.length} images ...<br>`);
+        for (const img of samples) {
+          // new line
+          document.body.appendChild(document.createElement('br'));
+          // load and resize image
+          const canvas = await image(img);
+          try {
+            // actual model execution
+            const dataTinyYolo = await faceapi
+              .detectAllFaces(canvas, optionsTinyFace)
+              .withFaceLandmarks()
+              .withFaceExpressions()
+              .withFaceDescriptors()
+              .withAgeAndGender();
+            // print results to screen
+            print('TinyFace Detector', img, dataTinyYolo);
+            // actual model execution
+            const dataSSDMobileNet = await faceapi
+              .detectAllFaces(canvas, optionsSSDMobileNet)
+              .withFaceLandmarks()
+              .withFaceExpressions()
+              .withFaceDescriptors()
+              .withAgeAndGender();
+            // print results to screen
+            print('SSD MobileNet', img, dataSSDMobileNet);
+          } catch (err) {
+            log(`Image: ${img} Error during processing ${str(err)}`);
+            // eslint-disable-next-line no-console
+            console.error(err);
+          }
+        }
+      }
+
+      // start processing as soon as page is loaded
+      window.onload = main;
+    </script>
+  </body>
+</html>
--- a/example/sample
+++ b/example/sample
--- a/example/sample
+++ b/example/sample
--- a/example/sample
+++ b/example/sample
--- a/example/sample
+++ b/example/sample
--- a/example/sample
+++ b/example/sample
--- a/example/sample
+++ b/example/sample
--- a/example/screenshot.png
+++ b/example/screenshot.png