This project implements a ResNet-34 like architecture using the tensorflow.js core API ([@tensorflow/tfjs-core](https://github.com/tensorflow/tfjs-core)) for realtime face recognition in the browser. The neural net is equivalent to the **FaceRecognizerNet** used in [face-recognition.js](https://github.com/justadudewhohacks/face-recognition.js) and the net used in the [dlib](https://github.com/davisking/dlib/blob/master/examples/dnn_face_recognition_ex.cpp) face recognition example. The weights have been trained by [davisking](https://github.com/davisking) and the model achieves a prediction accuracy of 99.38% on the LFW (Labeled Faces in the Wild) benchmark for face recognition.

``` javascript

const res = await axios.get('face_recognition_model.weights', { responseType: 'arraybuffer' })

const weights = new Float32Array(res.data)

Compute and compare two 150 x 150 sized face images:

const descriptor1 = await net.computeFaceDescriptor(imgData1)

const descriptor2 = await net.computeFaceDescriptor(imgData2)

if (distance < 0.6)

console.log('match')

(function (global, factory) {

typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('crypto')) :

typeof define === 'function' && define.amd ? define(['exports', 'crypto'], factory) :

}(this, (function (exports,crypto) { 'use strict';

crypto = crypto && crypto.hasOwnProperty('default') ? crypto['default'] : crypto;

seedrandom.xor4096 = xor4096;

seedrandom.tychei = tychei;

var seedrandom$1 = /*#__PURE__*/Object.freeze({

});

var MPRandGauss = (function () {

async function initFaceDetectionNet() {

const res = await axios.get('face_detection_model.weights', { responseType: 'arraybuffer' })

const weights = new Float32Array(res.data)

async function initFaceRecognitionNet() {

const res = await axios.get('face_recognition_model.weights', { responseType: 'arraybuffer' })

const weights = new Float32Array(res.data)

async className => {

const descriptors = []

for (let i = 1; i < (numImagesForTraining + 1); i++) {

await fetchImage(getFaceImageUri(className, i))

)

descriptors.push(await net.computeFaceDescriptor(img))

function getBestMatch(descriptorsByClass, queryDescriptor) {

function computeMeanDistance(descriptorsOfClass) {

descriptorsOfClass

.reduce((d1, d2) => d1 + d2, 0)

/ (descriptorsOfClass.length || 1)

)

<script src="axios.min.js"></script>

<script src="commons.js"></script>

<link rel="stylesheet" href="styles.css">

let net

function onIncreaseThreshold() {

$('#minConfidence').val(minConfidence)

updateResults()

}

function onDecreaseThreshold() {

$('#minConfidence').val(minConfidence)

updateResults()

}

canvas.width = width

canvas.height = height

const detections = await net.locateFaces(input, minConfidence)

$('#facesContainer').empty()

faceImages.forEach(canvas => $('#facesContainer').append(canvas))

}

async function onSelectionChanged(uri) {

const imgBuf = await fetchImage(uri)

updateResults()

}

<script src="axios.min.js"></script>

<script src="commons.js"></script>

<link rel="stylesheet" href="styles.css">

let trainDescriptorsByClass = []

function onIncreaseThreshold() {

$('#minConfidence').val(minConfidence)

updateResults()

}

function onDecreaseThreshold() {

$('#minConfidence').val(minConfidence)

updateResults()

}

canvas.width = width

canvas.height = height

const detections = await detectionNet.locateFaces(input, minConfidence)

const detectionsForSize = detections.map(det => det.forSize(width, height))

const descriptors = await Promise.all(faceTensors.map(t => recognitionNet.computeFaceDescriptor(t)))

// free memory for face image tensors after we computed their descriptors

const bestMatch = getBestMatch(trainDescriptorsByClass, descriptor)

const text = `${bestMatch.distance < threshold ? bestMatch.className : 'unkown'} (${bestMatch.distance})`

const { x, y } = detectionsForSize[i].box

})

}

async function onSelectionChanged(uri) {

const imgBuf = await fetchImage(uri)

updateResults()

}

<script src="axios.min.js"></script>

<script src="commons.js"></script>

<link rel="stylesheet" href="styles.css">

let net, result

function onIncreaseThreshold() {

$('#minConfidence').val(minConfidence)

updateResults()

}

function onDecreaseThreshold() {

$('#minConfidence').val(minConfidence)

updateResults()

}

canvas.width = width

canvas.height = height

result = await net.locateFaces(input, minConfidence)

}

async function onSelectionChanged(uri) {

const imgBuf = await fetchImage(uri)

updateResults()

}

<script src="axios.min.js"></script>

<script src="commons.js"></script>

<link rel="stylesheet" href="styles.css">

let net, result

function onIncreaseThreshold() {

$('#minConfidence').val(minConfidence)

}

function onDecreaseThreshold() {

$('#minConfidence').val(minConfidence)

}

function displayTimeStats(timeInMs) {

$('#time').val(`${timeInMs} ms`)

}

async function onPlay(videoEl) {

if(videoEl.paused || videoEl.ended)

return false

const { width, height } = input

const canvas = $('#overlay').get(0)

canvas.width = width

result = await net.locateFaces(input, minConfidence)

displayTimeStats(Date.now() - ts)

setTimeout(() => onPlay(videoEl))

}

<script src="axios.min.js"></script>

<script src="commons.js"></script>

<link rel="stylesheet" href="styles.css">

function displayTimeStats(timeInMs) {

$('#time').val(`${timeInMs} ms`)

}

function displayImage(src) {

async function runFaceRecognition() {

async function next() {

const imgBuf = await fetchImage(getFaceImageUri(classes[currClassIdx], currImageIdx))

const imgEl = $('#face').get(0)

imgEl.src = input.src