ambiser
/
human
mirror of https://github.com/vladmandic/human
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add live hints to demo

pull/134/head
Vladimir Mandic 2021-06-02 17:29:50 -04:00
parent b05cb22062
commit 4be6fbc545
2 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -64,6 +64,7 @@
.icon { width: 180px; text-align: -webkit-center; text-align: -moz-center; filter: grayscale(1); } .icon { width: 180px; text-align: -webkit-center; text-align: -moz-center; filter: grayscale(1); }
.icon:hover { background: #505050; filter: grayscale(0); } .icon:hover { background: #505050; filter: grayscale(0); }
.hint { opacity: 0; transition-duration: 0.5s; transition-property: opacity; font-style: italic; position: fixed; top: 5rem; padding: 8px; margin: 8px; box-shadow: 0 0 2px 2px #303030; }
</style> </style>
</head> </head>
<body> <body>
@ -91,6 +92,7 @@
<div id="similarity"></div> <div id="similarity"></div>
</div> </div>
<div id="samples-container" class="samples-container"></div> <div id="samples-container" class="samples-container"></div>
<div id="hint" class="hint"></div>
<div id="log" class="log"></div> <div id="log" class="log"></div>
</body> </body>
</html> </html>

44
demo/index.js
View File

@ -90,6 +90,7 @@ const ui = {
drawWarmup: false, // debug only, should warmup image processing be displayed on startup drawWarmup: false, // debug only, should warmup image processing be displayed on startup
drawThread: null, // internl, perform draw operations in a separate thread drawThread: null, // internl, perform draw operations in a separate thread
detectThread: null, // internl, perform detect operations in a separate thread detectThread: null, // internl, perform detect operations in a separate thread
hintsThread: null, // internal, draw random hints
framesDraw: 0, // internal, statistics on frames drawn framesDraw: 0, // internal, statistics on frames drawn
framesDetect: 0, // internal, statistics on frames detected framesDetect: 0, // internal, statistics on frames detected
bench: true, // show gl fps benchmark window bench: true, // show gl fps benchmark window
@ -102,20 +103,8 @@ const ui = {
webRTCStream: 'reowhite', webRTCStream: 'reowhite',
// sample images // sample images
compare: '../assets/sample-me.jpg', // base image for face compare compare: '../samples/ai-face.jpg', // base image for face compare
/* samples: [],
samples: [
'../assets/sample6.jpg',
'../assets/sample1.jpg',
'../assets/sample4.jpg',
'../assets/sample5.jpg',
'../assets/sample3.jpg',
'../assets/sample2.jpg',
],
*/
samples: [
'../private/daz3d/daz3d-kiaria-02.jpg',
],
}; };
const pwa = { const pwa = {
@ -127,6 +116,17 @@ const pwa = {
cacheOther: false, cacheOther: false,
}; };
// hints
const hints = [
'for optimal performance disable unused modules',
'with modern gpu best backend is webgl otherwise select wasm backend',
'you can process images by dragging and dropping them in browser window',
'video input can be webcam or any other video source',
'check out other demos such as face-matching and face-3d',
'you can edit input image or video on-the-fly using filters',
'library status messages are logged in browser console',
];
// global variables // global variables
const menu = {}; const menu = {};
let worker; let worker;
@ -430,6 +430,7 @@ function runHumanDetect(input, canvas, timestamp) {
log('memory', human.tf.engine().memory()); log('memory', human.tf.engine().memory());
return; return;
} }
if (ui.hintsThread) clearInterval(ui.hintsThread);
if (ui.useWorker) { if (ui.useWorker) {
// get image data from video as we cannot send html objects to webworker // get image data from video as we cannot send html objects to webworker
const offscreen = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(canvas.width, canvas.height) : document.createElement('canvas'); const offscreen = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(canvas.width, canvas.height) : document.createElement('canvas');
@ -470,6 +471,7 @@ async function processImage(input, title) {
const image = new Image(); const image = new Image();
image.onerror = async () => status('image loading error'); image.onerror = async () => status('image loading error');
image.onload = async () => { image.onload = async () => {
if (ui.hintsThread) clearInterval(ui.hintsThread);
ui.interpolated = false; // stop interpolating results if input is image ui.interpolated = false; // stop interpolating results if input is image
status(`processing image: ${title}`); status(`processing image: ${title}`);
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
@ -739,6 +741,18 @@ async function dragAndDrop() {
}); });
} }
async function drawHints() {
const hint = document.getElementById('hint');
ui.hintsThread = setInterval(() => {
const rnd = Math.trunc(Math.random() * hints.length);
hint.innerText = 'hint: ' + hints[rnd];
hint.style.opacity = 1;
setTimeout(() => {
hint.style.opacity = 0;
}, 4500);
}, 5000);
}
async function pwaRegister() { async function pwaRegister() {
if (!pwa.enabled) return; if (!pwa.enabled) return;
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
@ -789,6 +803,8 @@ async function main() {
document.documentElement.style.setProperty('--icon-size', ui.iconSize); document.documentElement.style.setProperty('--icon-size', ui.iconSize);
drawHints();
// sanity check for webworker compatibility // sanity check for webworker compatibility
if (typeof Worker === 'undefined' || typeof OffscreenCanvas === 'undefined') { if (typeof Worker === 'undefined' || typeof OffscreenCanvas === 'undefined') {
ui.useWorker = false; ui.useWorker = false;