2021-09-20 23:17:13 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Human Browser Tests< / title >
< meta http-equiv = "content-type" content = "text/html; charset=utf-8" >
< meta name = "viewport" content = "width=device-width, shrink-to-fit=yes" >
< meta name = "keywords" content = "Human" >
< meta name = "application-name" content = "Human" >
< meta name = "description" content = "Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>" >
< meta name = "msapplication-tooltip" content = "Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>" >
< link rel = "shortcut icon" href = "../../favicon.ico" type = "image/x-icon" >
< link rel = "apple-touch-icon" href = "../../assets/icon.png" >
< style >
@font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('../../assets/lato-light.woff2') }
html { font-family: 'Lato', 'Segoe UI'; font-size: 14px; font-variant: small-caps; }
body { margin: 0; background: black; color: white; }
2021-09-21 03:59:49 +02:00
.canvas { position: absolute; bottom: 10px; right: 10px; width: 256px; height: 256px; z-index: 99; }
.pre { line-height: 150%; }
.events { position: absolute; top: 10px; right: 10px; width: 12rem; height: 1.25rem; background-color: grey; padding: 8px; z-index: 99; }
.state { position: absolute; top: 60px; right: 10px; width: 12rem; height: 1.25rem; background-color: grey; padding: 8px; z-index: 99; }
2021-09-20 23:17:13 +02:00
< / style >
< / head >
< body >
2021-09-21 03:59:49 +02:00
< pre id = "log" class = "pre" > < / pre >
2021-09-20 23:17:13 +02:00
< div id = "events" class = "events" > < / div >
< div id = "state" class = "state" > < / div >
2021-09-21 03:59:49 +02:00
< canvas id = "canvas" class = "canvas" width = 256 height = 256 > < / canvas >
2021-09-20 23:17:13 +02:00
< script type = "module" >
import Human from '../dist/human.esm.js';
const config = {
async: true,
2021-09-21 03:59:49 +02:00
warmup: 'none',
2021-09-20 23:17:13 +02:00
debug: true,
cacheSensitivity: 0,
object: { enabled: true },
}
const backends = ['wasm', 'webgl', 'humangl'];
2021-09-21 03:59:49 +02:00
// const backends = ['wasm', 'wasm'];
2021-09-20 23:17:13 +02:00
// const backends = ['humangl'];
const start = performance.now();
function str(...msg) {
if (!Array.isArray(msg)) return msg;
let line = '';
for (const entry of msg) {
if (typeof entry === 'object') line += JSON.stringify(entry).replace(/"/g, '').replace(/,/g, ', ').replace(/:/g, ': ');
else line += entry;
}
return line + '\n';
}
2021-09-21 03:59:49 +02:00
let last = new Date();
2021-09-20 23:17:13 +02:00
async function log(...msgs) {
2021-09-21 03:59:49 +02:00
const dt = new Date();
const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
const elap = (dt - last).toString().padStart(5, '0');
document.getElementById('log').innerHTML += ts + ' +' + elap + 'ms' + '& nbsp' + str(...msgs);
console.log(ts, elap, ...msgs);
last = dt;
2021-09-20 23:17:13 +02:00
}
async function image(url) {
const el = document.createElement('img');
el.id = 'image';
const loaded = new Promise((resolve) => { el.onload = () => resolve(true) });
el.src = url;
await loaded;
return el;
}
async function wait(time) {
const waiting = new Promise((resolve) => setTimeout(() => resolve(), time));
await waiting;
}
2021-09-21 03:59:49 +02:00
function draw(canvas = null) {
const c = document.getElementById('canvas');
const ctx = c.getContext('2d');
if (canvas) ctx.drawImage(canvas, 0, 0, c.width, c.height);
else ctx.clearRect(0, 0, c.width, c.height);
}
2021-09-20 23:17:13 +02:00
async function events(event) {
document.getElementById('events').innerText = `${Math.round(performance.now() - start)}ms Event: ${event}`;
}
async function main() {
log('human tests');
let res;
let human = new Human(config);
2021-09-21 03:59:49 +02:00
human.events.addEventListener('warmup', () => events('warmup'));
human.events.addEventListener('image', () => events('image'));
human.events.addEventListener('detect', () => events('detect'));
const timer = setInterval(() => { document.getElementById('state').innerText = `State: ${human.state}`; }, 10);
2021-09-20 23:17:13 +02:00
log({ version: human.version });
log({ env: human.env });
log({ config: human.config });
2021-09-21 03:59:49 +02:00
log({ tfjs: human.tf.version.tfjs, backend: human.config.backend });
await human.load();
const models = Object.keys(human.models).map((model) => ({ name: model, loaded: (human.models[model] !== null) }));
log({ models });
2021-09-20 23:17:13 +02:00
for (const backend of backends) {
2021-09-21 03:59:49 +02:00
log();
2021-09-20 23:17:13 +02:00
log('test start:', backend);
human.config.backend = backend;
await human.init();
2021-09-21 03:59:49 +02:00
log({ initialized: human.tf.getBackend() });
log({ memory: human.tf.memory() });
2021-09-20 23:17:13 +02:00
res = await human.validate();
log({ validate: res });
2021-09-21 03:59:49 +02:00
res = await human.warmup({ warmup: 'face'});
draw(res.canvas);
log({ warmup: 'face' });
2021-09-20 23:17:13 +02:00
let img = await image('../../samples/ai-body.jpg');
const input = await human.image(img);
2021-09-21 03:59:49 +02:00
log({ input: input.tensor.shape });
draw(res.canvas);
2021-09-20 23:17:13 +02:00
res = await human.detect(input.tensor);
2021-09-21 03:59:49 +02:00
log({ detect: true });
2021-09-20 23:17:13 +02:00
const interpolated = human.next();
2021-09-21 03:59:49 +02:00
log({ interpolated: true });
2021-09-20 23:17:13 +02:00
const persons = res.persons;
2021-09-21 03:59:49 +02:00
log({ persons: true });
2021-09-20 23:17:13 +02:00
log({ summary: { persons: persons.length, face: res.face.length, body: res.body.length, hand: res.hand.length, object: res.object.length, gesture: res.gesture.length }});
log({ performance: human.performance });
human.tf.dispose(input.tensor);
2021-09-21 03:59:49 +02:00
draw();
2021-09-20 23:17:13 +02:00
img = await image('../../samples/ai-face.jpg');
for (const val of [0, 0.25, 0.5, 0.75, 10]) {
human.performance = {};
const t0 = performance.now();
for (let i = 0; i < 10 ; i + + ) {
2021-09-21 03:59:49 +02:00
res = await human.detect(img, { cacheSensitivity: val, filter: { pixelate: 5 * i }, object: { enabled: false } });
draw(res.canvas);
2021-09-20 23:17:13 +02:00
}
const t1 = performance.now();
log({ benchmark: { time: Math.round((t1 - t0) / 10), cacheSensitivity: val }, performance: human.performance });
2021-09-21 03:59:49 +02:00
await wait(10);
2021-09-20 23:17:13 +02:00
}
2021-09-21 03:59:49 +02:00
draw();
2021-09-20 23:17:13 +02:00
2021-09-21 03:59:49 +02:00
log({ memory: human.tf.memory() });
2021-09-20 23:17:13 +02:00
}
2021-09-21 03:59:49 +02:00
clearInterval(timer);
log();
2021-09-20 23:17:13 +02:00
log('tests complete');
}
main();
< / script >
< / body >
< / html >
