Skip to content

Commit 172cf64

Browse files
Merge pull request justadudewhohacks#51 from justadudewhohacks/mtcnn
Mtcnn
2 parents c3cfe31 + ad62d76 commit 172cf64

File tree

201 files changed

+5779
-1471
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

201 files changed

+5779
-1471
lines changed

README.md

Lines changed: 87 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ Check out my article **[face-api.js — JavaScript API for Face Recognition
88

99
* **[Running the Examples](#running-the-examples)**
1010
* **[About the Package](#about-the-package)**
11-
* **[Face Detection](#about-face-detection)**
11+
* **[Face Detection - SSD Mobilenet v1](#about-face-detection-ssd)**
12+
* **[Face Detection & 5 Point Face Landmarks - MTCNN](#about-face-detection-mtcnn)**
1213
* **[Face Recognition](#about-face-recognition)**
13-
* **[Face Landmark Detection](#about-face-landmark-detection)**
14+
* **[68 Point Face Landmark Detection](#about-face-landmark-detection)**
1415
* **[Usage](#usage)**
1516
* **[Loading the Models](#usage-load-models)**
16-
* **[Face Detection](#usage-face-detection)**
17+
* **[Face Detection - SSD Mobilenet v1](#usage-face-detection-ssd)**
18+
* **[Face Detection & 5 Point Face Landmarks - MTCNN](#usage-face-detection-mtcnn)**
1719
* **[Face Recognition](#usage-face-recognition)**
18-
* **[Face Landmark Detection](#usage-face-landmark-detection)**
20+
* **[68 Point Face Landmark Detection](#usage-face-landmark-detection)**
1921
* **[Full Face Detection and Recognition Pipeline](#usage-full-face-detection-and-recognition-pipeline)**
2022

2123
## Examples
@@ -38,8 +40,14 @@ Check out my article **[face-api.js — JavaScript API for Face Recognition
3840

3941
### Live Video Face Detection
4042

43+
**SSD Mobilenet v1**
44+
4145
![preview_video-facedetection](https://user-images.githubusercontent.com/31125521/41238649-bbf10046-6d96-11e8-9041-1de46c6adccd.jpg)
4246

47+
**MTCNN**
48+
49+
![preview_mtcnn_video](https://user-images.githubusercontent.com/31125521/42725487-857adfd4-8784-11e8-8de2-4faae81e7ea2.jpg)
50+
4351
### Face Alignment
4452

4553
![preview_face_alignment](https://user-images.githubusercontent.com/31125521/41526994-1a690818-72e6-11e8-8f3c-d2cf31fe517b.jpg)
@@ -60,14 +68,22 @@ Browse to http://localhost:3000/.
6068

6169
## About the Package
6270

63-
<a name="about-face-detection"></a>
71+
<a name="about-face-detection-ssd"></a>
6472

65-
### Face Detection
73+
### Face Detection - SSD Mobilenet v1
6674

67-
For face detection, this project implements a SSD (Single Shot Multibox Detector) based on MobileNetV1. The neural net will compute the locations of each face in an image and will return the bounding boxes together with it's probability for each face.
75+
For face detection, this project implements a SSD (Single Shot Multibox Detector) based on MobileNetV1. The neural net will compute the locations of each face in an image and will return the bounding boxes together with it's probability for each face. This face detector is aiming towards obtaining high accuracy in detecting face bounding boxes instead of low inference time.
6876

6977
The face detection model has been trained on the [WIDERFACE dataset](http://mmlab.ie.cuhk.edu.hk/projects/WIDERFace/) and the weights are provided by [yeephycho](https://github.com/yeephycho) in [this](https://github.com/yeephycho/tensorflow-face-detection) repo.
7078

79+
<a name="about-face-detection-mtcnn"></a>
80+
81+
### Face Detection & 5 Point Face Landmarks - MTCNN
82+
83+
MTCNN (Multi-task Cascaded Convolutional Neural Networks) represents an alternative to SSD Mobilenet v1, which offers much more room for configuration and is able to achieve much lower processing times. MTCNN is a 3 stage cascaded CNN, which simultanously returns 5 face landmark points along with the bounding boxes and scores for each face. By limiting the minimum size of faces expected in an image, MTCNN allows you to process frames from your webcam in realtime. Additionally with 2MB, the size of the weights file is only a third of the size of the quantized SSD Mobilenet v1 model (~6MB).
84+
85+
MTCNN has been presented in the paper [Joint Face Detection and Alignment using Multi-task Cascaded Convolutional Networks](https://kpzhang93.github.io/MTCNN_face_detection_alignment/paper/spl.pdf) by Zhang et al. and the model weights are provided in the official [repo](https://github.com/kpzhang93/MTCNN_face_detection_alignment) of the MTCNN implementation.
86+
7187
<a name="about-face-recognition"></a>
7288

7389
### Face Recognition
@@ -78,7 +94,7 @@ The neural net is equivalent to the **FaceRecognizerNet** used in [face-recognit
7894

7995
<a name="about-face-landmark-detection"></a>
8096

81-
### Face Landmark Detection
97+
### 68 Point Face Landmark Detection
8298

8399
This package implements a CNN to detect the 68 point face landmarks for a given face image.
84100

@@ -113,6 +129,7 @@ await faceapi.loadFaceDetectionModel('/models')
113129
// accordingly for the other models:
114130
// await faceapi.loadFaceLandmarkModel('/models')
115131
// await faceapi.loadFaceRecognitionModel('/models')
132+
// await faceapi.loadMtcnnModel('/models')
116133
```
117134

118135
As an alternative, you can also create instance of the neural nets:
@@ -122,12 +139,14 @@ const net = new faceapi.FaceDetectionNet()
122139
// accordingly for the other models:
123140
// const net = new faceapi.FaceLandmarkNet()
124141
// const net = new faceapi.FaceRecognitionNet()
142+
// const net = new faceapi.Mtcnn()
125143

126144
await net.load('/models/face_detection_model-weights_manifest.json')
127145
// await net.load('/models/face_landmark_68_model-weights_manifest.json')
128146
// await net.load('/models/face_recognition_model-weights_manifest.json')
147+
// await net.load('/models/mtcnn_model-weights_manifest.json')
129148

130-
// or simply
149+
// or simply load all models
131150
await net.load('/models')
132151
```
133152

@@ -145,9 +164,9 @@ const weights = new Float32Array(res.data)
145164
net.load(weights)
146165
```
147166

148-
<a name="usage-face-detection"></a>
167+
<a name="usage-face-detection-ssd"></a>
149168

150-
### Face Detection
169+
### Face Detection - SSD Mobilenet v1
151170

152171
Detect faces and get the bounding boxes and scores:
153172

@@ -178,6 +197,62 @@ You can also obtain the tensors of the unfiltered bounding boxes and scores for
178197
const { boxes, scores } = await net.forward('myImg')
179198
```
180199

200+
<a name="usage-face-detection-mtcnn"></a>
201+
202+
### Face Detection & 5 Point Face Landmarks - MTCNN
203+
204+
Detect faces and get the bounding boxes and scores:
205+
206+
``` javascript
207+
// defaults parameters shown:
208+
const forwardParams = {
209+
// number of scaled versions of the input image passed through the CNN
210+
// of the first stage, lower numbers will result in lower inference time,
211+
// but will also be less accurate
212+
maxNumScales: 10,
213+
// scale factor used to calculate the scale steps of the image
214+
// pyramid used in stage 1
215+
scaleFactor: 0.709,
216+
// the score threshold values used to filter the bounding
217+
// boxes of stage 1, 2 and 3
218+
scoreThresholds: [0.6, 0.7, 0.7],
219+
// mininum face size to expect, the higher the faster processing will be,
220+
// but smaller faces won't be detected
221+
minFaceSize: 20
222+
}
223+
224+
const results = await faceapi.mtcnn(document.getElementById('myImg'), forwardParams)
225+
```
226+
227+
Alternatively you can also specify the scale steps manually:
228+
229+
``` javascript
230+
const forwardParams = {
231+
scaleSteps: [0.4, 0.2, 0.1, 0.05]
232+
}
233+
234+
const results = await faceapi.mtcnn(document.getElementById('myImg'), forwardParams)
235+
```
236+
237+
Finally you can draw the returned bounding boxes and 5 Point Face Landmarks into a canvas:
238+
239+
``` javascript
240+
const minConfidence = 0.9
241+
242+
if (results) {
243+
results.forEach(({ faceDetection, faceLandmarks }) => {
244+
245+
// ignore results with low confidence score
246+
if (faceDetection.score < minConfidence) {
247+
return
248+
}
249+
250+
faceapi.drawDetection('overlay', faceDetection)
251+
faceapi.drawLandmarks('overlay', faceLandmarks)
252+
})
253+
}
254+
```
255+
181256
<a name="usage-face-recognition"></a>
182257

183258
### Face Recognition
@@ -265,7 +340,7 @@ const fullFaceDescriptions = await faceapi.allFaces(input, minConfidence)
265340
const fullFaceDescription0 = fullFaceDescriptions[0]
266341
console.log(fullFaceDescription0.detection) // bounding box & score
267342
console.log(fullFaceDescription0.landmarks) // 68 point face landmarks
268-
console.log(fullFaceDescription0.descriptor) // face descriptors
343+
console.log(fullFaceDescription0.descriptor) // face descriptor
269344

270345
```
271346

build/FaceDetection.d.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Rect } from './Rect';
2+
import { Dimensions } from './types';
3+
export declare class FaceDetection {
4+
private _score;
5+
private _box;
6+
private _imageWidth;
7+
private _imageHeight;
8+
constructor(score: number, relativeBox: Rect, imageDims: Dimensions);
9+
readonly score: number;
10+
readonly box: Rect;
11+
readonly imageWidth: number;
12+
readonly imageHeight: number;
13+
readonly relativeBox: Rect;
14+
getScore(): number;
15+
getBox(): Rect;
16+
getImageWidth(): number;
17+
getImageHeight(): number;
18+
getRelativeBox(): Rect;
19+
forSize(width: number, height: number): FaceDetection;
20+
}

build/FaceDetection.js

Lines changed: 68 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/FaceDetection.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/FaceLandmarks.d.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Point } from './Point';
2+
import { Dimensions } from './types';
3+
export declare class FaceLandmarks {
4+
protected _imageWidth: number;
5+
protected _imageHeight: number;
6+
protected _shift: Point;
7+
protected _faceLandmarks: Point[];
8+
constructor(relativeFaceLandmarkPositions: Point[], imageDims: Dimensions, shift?: Point);
9+
getShift(): Point;
10+
getImageWidth(): number;
11+
getImageHeight(): number;
12+
getPositions(): Point[];
13+
getRelativePositions(): Point[];
14+
}

build/FaceLandmarks.js

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/FaceLandmarks.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/FullFaceDescription.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { FaceDetection } from './faceDetectionNet/FaceDetection';
2-
import { FaceLandmarks } from './faceLandmarkNet/FaceLandmarks';
1+
import { FaceDetection } from './FaceDetection';
2+
import { FaceLandmarks68 } from './faceLandmarkNet/FaceLandmarks68';
33
export declare class FullFaceDescription {
44
private _detection;
55
private _landmarks;
66
private _descriptor;
7-
constructor(_detection: FaceDetection, _landmarks: FaceLandmarks, _descriptor: Float32Array);
7+
constructor(_detection: FaceDetection, _landmarks: FaceLandmarks68, _descriptor: Float32Array);
88
readonly detection: FaceDetection;
9-
readonly landmarks: FaceLandmarks;
9+
readonly landmarks: FaceLandmarks68;
1010
readonly descriptor: Float32Array;
1111
forSize(width: number, height: number): FullFaceDescription;
1212
}

build/FullFaceDescription.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/NetInput.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { Point } from './Point';
33
import { TResolvedNetInput } from './types';
44
export declare class NetInput {
55
private _inputs;
6+
private _canvases;
67
private _isManaged;
78
private _isBatchInput;
89
private _inputDimensions;
910
private _paddings;
10-
constructor(inputs: tf.Tensor4D | Array<TResolvedNetInput>, isBatchInput?: boolean);
11+
constructor(inputs: tf.Tensor4D | Array<TResolvedNetInput>, isBatchInput?: boolean, keepCanvases?: boolean);
1112
readonly inputs: tf.Tensor3D[];
13+
readonly canvases: HTMLCanvasElement[];
1214
readonly isManaged: boolean;
1315
readonly isBatchInput: boolean;
1416
readonly batchSize: number;

0 commit comments

Comments
 (0)