added cjs builds

README.md

@@ -12,27 +12,57 @@ Forked from **face-api.js** version **0.22.2** released on March 22nd, 2020
 Currently based on **`TensorFlow/JS` 2.6.0**  
 If you want to access `TFJS` classes and methods directly, they are exported as `faceapi.tf`
 
-## Differences
+### Why?
 
-- Updated all type castings for TypeScript type checking to TypeScript 4.1
+Because I needed FaceAPI that does not cause version conflict with newer TFJS 2.0 that I use accross my projects  
-- Typescript build process now targets ES2018 and instead of dual ES5/ES6  
+And since original FaceAPI was open-source, I've released this version as well  
-- Compatible with TensorFlow/JS 2.0+  
+Unfortunately, changes ended up being too large for a simple pull request on original FaceaPI and it ended up being a full-fledged version on its own  
+
+### Differences
+
+- Compatible with `TensorFlow/JS 2.0+`  
+- Updated all type castings for TypeScript type checking to `TypeScript 4.1`  
+- Switched bundling from `UMD` to `ESM` + `CommonJS`  
+  This does require separate process for usage in NodeJS vs Browser, but resulting code is much lighter  
+  Fully tree shakable when imported as an `ESM` module  
+  Browser bundle process uses `ESBuild` instead of `Rollup`  
+- Typescript build process now targets `ES2018` and instead of dual ES5/ES6  
+  Resulting code is clean ES2018 JavaScript without polyfills  
 - Removed old tests, docs, examples  
-- Removed unnecesary package dependencies (karma, jasmine, etc.)  
+- Removed old package dependencies (`karma`, `jasmine`, `babel`, etc.)  
 - Updated all package dependencies  
-- Browser bundle process uses ESBuild instead of Rollup
+- Updated TensorFlow/JS dependencies since backends were removed from `@tensorflow/tfjs-core`  
-- New TensorFlow/JS dependencies since backends were removed from @tensorflow/tfjs-core
+- Updated mobileNetv1 model due to `batchNorm()` dependency  
-- Updated mobileNetv1 model due to batchNorm() dependency
+- Added `version` class that returns JSON object with version of FaceAPI as well as linked TFJS  
-- Fully tree shakable when imported as an ESM module
+- Removed `mtcnn` and `tinyYolov2` models as they were non-functional in latest public version of `Face-API`  
-- Added `version` class that returns JSON object with version of FaceAPI as well as linked TFJS
+  *If there is a demand, I can re-implement them back.*  
-- Removed following models as they are either obsolete or non-functional with tfjs 2.0+
-  - mtcnn: Obsolete
-  - tinyYolov2: Non-functional since weights are missing
 
 Which means valid models are **tinyFaceDetector** and **mobileNetv1**  
 
 ## Installation
 
+Face-API ships with several pre-build versions of the library:
+- `dist/face-api.js`: IIFE format for client-side Browser exeuction
+- `dist/face-api.esm.js`: ESM format for client-side Browser execution with TFJS pre-bundled
+- `dist/face-api.nobundle.js`: ESM format for client-side Browser execution without TFJS and not minified
+- `dist/face-api.cjs`: CommonJS format for server-side NodeJS execution with TFJS pre-bundled
+- `dist/face-api.nobundle.cjs`: CommonJS format for server-side NodeJS execution without TFJS and not minified
+
+Defaults are:
+```json
+{
+  "main": "dist/face-api.cjs",
+  "module": "dist/face-api.esm.js",
+  "browser": "dist/face-api.esm.js",
+}
+```
+
+Reason for additional `nobundle` version is if you want to include a specific version of TFJS and not rely on pre-packaged one  
+`FaceAPI` is compatible with TFJS 2.0+  
+
+Bundled versions are ~1.1MB minified and non-bundled versions are ~169KB non-minified  
+All versions include `sourcemap`
+
 There are several ways to use Face-API: 
 
 ### 1. IIFE script
@@ -46,13 +76,13 @@ Simply download `dist/face-api.js`, include it in your `HTML` file & it's ready
 <script src="dist/face-api.js"><script>
 ``` 
 
-IIFE script auto-registers global namespace `faceapi` within Window object which can be accessed directly from a `<script>` tag or from your JS file.  
+IIFE script bundles TFJS and auto-registers global namespace `faceapi` within Window object which can be accessed directly from a `<script>` tag or from your JS file.  
 
 ### 2. ESM module
 
 *Recommended for usage within Browser*
 
-#### 2.1 Directly
+#### 2.1. Direct Import
 
 To use ESM import directly in a Browser, you must import your script (e.g. `index.js`) with a `type="module"`  
 
@@ -64,18 +94,34 @@ and then in your `index.js`
 ```js
   import * as faceapi from 'dist/face-api.esm.js';
 ```
+or to use non-bundled version:
+```js
+  import * as tf from `https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.6.0/tf.es2017.min.js`; // load tfjs directly from CDN link
+  import * as faceapi from 'dist/face-api.nobundle.js';
+```
 
-#### 2.2 With Bundler
+#### 2.2. With Bundler
 
-Same as above, but expectation is that you'll package your script using a bundler such as `webpack`, `rollup` or `esbuild` in which case, you do not need to import a script as module - that depends on your bundler configuration  
+Same as above, but expectation is that you've installed `@vladmandic/faceapi` package  
+and that you'll package your script using a bundler such as `webpack`, `rollup` or `esbuild`  
+in which case, you do not need to import a script as module - that depends on your bundler configuration  
 
 ```js
-  import * as faceapi from 'dist/face-api.esm.js';
+  import * as faceapi from '@vladmandic/face-api';
+```
+or if your bundler doesn't recognize `recommended` type, force usage with:
+```js
+  import * as faceapi from '@vladmandic/face-api/dist/face-api.esm.js';
+```
+or to use non-bundled version
+```js
+  import * as tf from `@tensorflow/tfjs`;
+  import * as faceapi from '@vladmandic/face-api/dist/face-api.nobundle.js';
 ```
 
 ### 3. NPM module
 
-#### 3.1 Import ESM
+#### 3.1. Import CommonJS
 
 *Recommended for NodeJS projects*
 
@@ -85,31 +131,57 @@ Install with:
 ```
 And then use with:
 ```js
-  import * as faceapi from '@vladmandic/face-api';
+  const faceapi = require('@vladmandic/face-api');
 ```
-Alternatively, if you have issues, force ESM import using 
+or if you want to force CommonJS module instead of relying on `recommended` field:
 ```js
-  import * as faceapi from '@vladmandic/face-api/dist/face-api.esm.js';
+  const faceapi = require('@vladmandic/face-api/dist/face-api.cjs');
+```
+or if you want to use a non-bundled version:
+Install with:
+```shell
+  npm install @tensorflow/tfjs
+  npm install @vladmandic/face-api 
+```
+And then use with:
+```js
+  const tf = require('@tensorflow/tfjs');
+  const faceapi = require('@vladmandic/face-api/dist/face-api.nobundle.cjs');
 ```
 
-#### 3.2. Import Sources
+### 4. Import Sources
 
 *Recommended for complex NodeJS projects that use TFJS for other purposes and not just FaceaPI*
 
 This way you're importing FaceAPI sources directly and not a bundle, so you have to import `@tensorflow/tfjs` explicitly  
 
-3.2.1 For JavaScript projects
+#### 4.1. For Browser with Bundler
+
+##### 4.1.1. For JavaScript projects
 ```js
   import * as tf from '@tensorflow/tfjs';
   import * as faceapi from '@vladmandic/face-api/build/index.js';
 ```
 
-3.2.2 For TypeScript projects
+##### 4.1.2. For TypeScript projects
 ```js
   import * as tf from '@tensorflow/tfjs';
   import * as faceapi from '@vladmandic/face-api/src/index.ts';
 ```
 
+#### 4.2. For NodeJS
+
+##### 4.2.1. For JavaScript projects
+```js
+  const tf = require('@tensorflow/tfjs');
+  const faceapi = require('@vladmandic/face-api/build/index.js');
+```
+
+##### 4.1.2. For TypeScript projects
+```js
+  const tf = require('@tensorflow/tfjs');
+  const faceapi = require('@vladmandic/face-api/src/index.ts');
+```
 
 ## Weights
 
@@ -140,6 +212,7 @@ Which will compile everything in `./src` into `./build` and create both ESM (sta
 ## Documentation
 
 For documentation refer to original project at <https://github.com/justadudewhohacks/face-api.js>  
+For original weighs refer to <https://github.com/justadudewhohacks/face-api.js-models>
 
 ## Example
 

build/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@vladmandic/face-api",
-    "version": "0.7.3",
+    "version": "0.7.4",
     "description": "JavaScript module for Face Detection and Face Recognition Using Tensorflow/JS",
-    "main": "dist/face-api.esm.js",
+    "main": "dist/face-api.cjs",
     "module": "dist/face-api.esm.js",
     "browser": "dist/face-api.esm.js",
     "typings": "build/src/index.d.ts",
@@ -12,9 +12,11 @@
     "type": "module",
     "scripts": {
         "build-esm": "esbuild --bundle --format=esm --target=es2018 --platform=browser --minify --sourcemap --outfile=./dist/face-api.esm.js --log-level=error --tsconfig=./tsconfig.json --external:util --external:string_decoder --external:fs src/index.ts",
+        "build-esm-nobundle": "esbuild --bundle --format=esm --target=es2018 --platform=browser --sourcemap --outfile=./dist/face-api.nobundle.js --log-level=error --tsconfig=./tsconfig.json --external:@tensorflow --external:util --external:string_decoder --external:fs --global-name=faceapi src/index.ts",
         "build-iife": "esbuild --bundle --format=iife --target=es2018 --platform=browser --minify --sourcemap --outfile=./dist/face-api.js --log-level=error --tsconfig=./tsconfig.json --external:util --external:string_decoder --external:fs --global-name=faceapi src/index.ts",
-        "build-nobundle": "esbuild --bundle --format=esm --target=es2018 --platform=browser --minify --sourcemap --outfile=./dist/face-api.nobundle.js --log-level=error --tsconfig=./tsconfig.json --external:@tensorflow --external:util --external:string_decoder --external:fs --global-name=faceapi src/index.ts",
+        "build-node": "esbuild --bundle --format=cjs --target=es2018 --platform=node --minify --sourcemap --outfile=./dist/face-api.cjs --log-level=error --tsconfig=./tsconfig.json src/index.ts",
-        "build": "rimraf build/* dist/* && tsc && npm run build-esm && npm run build-iife && npm run build-nobundle && ls -l dist/"
+        "build-node-nobundle": "esbuild --bundle --format=cjs --target=es2018 --platform=node --sourcemap --outfile=./dist/face-api.nobundle.cjs --external:@tensorflow --log-level=error --tsconfig=./tsconfig.json src/index.ts",
+        "build": "rimraf build/* dist/* && tsc && npm run build-iife && npm run build-esm && npm run build-esm-nobundle && npm run build-node && npm run build-node-nobundle && ls -l dist/"
     },
     "keywords": [
         "tensorflow",

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vladmandic/face-api",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "JavaScript module for Face Detection and Face Recognition Using Tensorflow/JS",
-  "main": "dist/face-api.esm.js",
+  "main": "dist/face-api.cjs",
   "module": "dist/face-api.esm.js",
   "browser": "dist/face-api.esm.js",
   "typings": "build/src/index.d.ts",
@@ -12,9 +12,11 @@
   "type": "module",
   "scripts": {
     "build-esm": "esbuild --bundle --format=esm --target=es2018 --platform=browser --minify --sourcemap --outfile=./dist/face-api.esm.js --log-level=error --tsconfig=./tsconfig.json --external:util --external:string_decoder --external:fs src/index.ts",
+    "build-esm-nobundle": "esbuild --bundle --format=esm --target=es2018 --platform=browser --sourcemap --outfile=./dist/face-api.nobundle.js --log-level=error --tsconfig=./tsconfig.json --external:@tensorflow --external:util --external:string_decoder --external:fs --global-name=faceapi src/index.ts",
     "build-iife": "esbuild --bundle --format=iife --target=es2018 --platform=browser --minify --sourcemap --outfile=./dist/face-api.js --log-level=error --tsconfig=./tsconfig.json --external:util --external:string_decoder --external:fs --global-name=faceapi src/index.ts",
-    "build-nobundle": "esbuild --bundle --format=esm --target=es2018 --platform=browser --minify --sourcemap --outfile=./dist/face-api.nobundle.js --log-level=error --tsconfig=./tsconfig.json --external:@tensorflow --external:util --external:string_decoder --external:fs --global-name=faceapi src/index.ts",
+    "build-node": "esbuild --bundle --format=cjs --target=es2018 --platform=node --minify --sourcemap --outfile=./dist/face-api.cjs --log-level=error --tsconfig=./tsconfig.json src/index.ts",
-    "build": "rimraf build/* dist/* && tsc && npm run build-esm && npm run build-iife && npm run build-nobundle && ls -l dist/"
+    "build-node-nobundle": "esbuild --bundle --format=cjs --target=es2018 --platform=node --sourcemap --outfile=./dist/face-api.nobundle.cjs --external:@tensorflow --log-level=error --tsconfig=./tsconfig.json src/index.ts",
+    "build": "rimraf build/* dist/* && tsc && npm run build-iife && npm run build-esm && npm run build-esm-nobundle && npm run build-node && npm run build-node-nobundle && ls -l dist/"
   },
   "keywords": [
     "tensorflow",

tsconfig.json

@@ -12,7 +12,7 @@
 
     "removeComments": false,
     "preserveConstEnums": true,
-    "emitDecoratorMetadata": false,
+    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "sourceMap": true,
     "declaration": true,