2020-08-27 14:58:00 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>OpenImages Test</title>
|
|
|
|
|
<meta http-equiv="content-type">
|
|
|
|
|
<meta content="text/html">
|
|
|
|
|
<meta charset="UTF-8">
|
2020-10-11 18:41:17 +02:00
|
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.6.0/tf.min.js"></script> -->
|
|
|
|
|
<script src="../dist/face-api.js"></script>
|
2020-08-27 14:58:00 +02:00
|
|
|
<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
|
2020-08-27 15:17:39 +02:00
|
|
|
const modelPath = 'https://vladmandic.github.io/face-api/model/'; // path to model folder that will be loaded using http
|
2020-08-27 14:58:00 +02:00
|
|
|
const imgSize = 512; // maximum image size in pixels
|
|
|
|
|
const minScore = 0.1; // minimum score
|
|
|
|
|
const maxResults = 5; // maximum number of results to return
|
2020-08-27 15:09:24 +02:00
|
|
|
const samples = ['sample (1).jpg', 'sample (2).jpg', 'sample (3).jpg', 'sample (4).jpg', 'sample (5).jpg', 'sample (6).jpg']; // sample images to be loaded using http
|
2020-08-27 14:58:00 +02:00
|
|
|
|
|
|
|
|
// helper function to pretty-print json object to string
|
|
|
|
|
function str(json) {
|
|
|
|
|
let text = '<font color="lightblue">';
|
2020-10-11 18:41:17 +02:00
|
|
|
text += json ? JSON.stringify(json).replace(/{|}|"|\[|\]/g, '').replace(/,/g, ', ') : '';
|
2020-08-27 14:58:00 +02:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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() {
|
2020-08-27 15:24:54 +02:00
|
|
|
// initialize tfjs
|
|
|
|
|
log('FaceAPI Test');
|
2020-10-11 18:41:17 +02:00
|
|
|
window.tf = faceapi.tf;
|
2020-08-27 15:24:54 +02:00
|
|
|
await faceapi.tf.setBackend('webgl');
|
|
|
|
|
await faceapi.tf.enableProdMode();
|
|
|
|
|
await faceapi.tf.ENV.set('DEBUG', false);
|
2020-10-11 18:41:17 +02:00
|
|
|
await faceapi.tf.ready();
|
|
|
|
|
|
2020-09-09 15:50:10 +02:00
|
|
|
// check version
|
2020-10-11 18:41:17 +02:00
|
|
|
log(`Version: TensorFlow/JS ${str(faceapi.tf?.version_core || '(not loaded)')} FaceAPI ${str(faceapi?.version || '(not loaded)')} Backend: ${str(faceapi.tf?.getBackend() || '(not loaded)')}`);
|
|
|
|
|
log(`Flags: ${JSON.stringify(faceapi.tf.ENV.flags)}`);
|
2020-08-27 15:24:54 +02:00
|
|
|
|
|
|
|
|
// load face-api models
|
|
|
|
|
log('Loading FaceAPI models');
|
2020-08-27 14:58:00 +02:00
|
|
|
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 });
|
|
|
|
|
|
2020-09-09 15:50:10 +02:00
|
|
|
// check tf engine state
|
2020-08-27 14:58:00 +02:00
|
|
|
const engine = await faceapi.tf.engine();
|
|
|
|
|
log(`TF Engine State: ${str(engine.state)}`);
|
2020-08-27 15:24:54 +02:00
|
|
|
|
2020-08-27 14:58:00 +02:00
|
|
|
// 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>
|
