2021-09-25 17:51:15 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Human Examples Gallery< / 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>" >
< meta name = "theme-color" content = "#000000" >
2021-09-26 01:14:03 +02:00
< link rel = "manifest" href = "../demo/manifest.webmanifest" >
< link rel = "shortcut icon" href = "../favicon.ico" type = "image/x-icon" >
< link rel = "apple-touch-icon" href = "../assets/icon.png" >
2021-09-25 17:51:15 +02:00
< style >
2021-12-28 15:40:32 +01:00
@font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('../assets/lato-light.woff2') }
2021-09-25 17:51:15 +02:00
html { font-family: 'Lato', 'Segoe UI'; font-size: 24px; font-variant: small-caps; }
2021-09-26 01:14:03 +02:00
body { margin: 24px; background: black; color: white; overflow-x: auto; overflow-y: auto; text-align: -webkit-center; min-height: 100%; max-height: 100%; }
2021-09-25 17:51:15 +02:00
::-webkit-scrollbar { height: 8px; border: 0; border-radius: 0; }
::-webkit-scrollbar-thumb { background: grey }
::-webkit-scrollbar-track { margin: 3px; }
.text { margin: 24px }
2021-09-26 01:14:03 +02:00
.strip { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; }
2021-09-28 23:07:34 +02:00
.thumb { height: 180px; margin: 2px; padding: 2px; cursor: grab; }
2021-09-26 01:14:03 +02:00
.thumb:hover { filter: grayscale(1); transform: scale(1.08); transition : all 0.3s ease; }
2021-09-28 23:07:34 +02:00
.image-container { margin: 24px 3px 3px 3px; cursor: nwse-resize; }
2021-09-26 01:14:03 +02:00
.image-zoomwidth { max-width: 94vw; }
.image-zoomheight { max-height: 70vh; }
.image-zoomfull { max-height: -webkit-fill-available; }
2021-09-28 23:07:34 +02:00
.arrow { font-size: 2rem; font-weight: bolder; background: grey; border-radius: 4px; position: fixed; top: 140px; opacity: 65%; cursor: pointer; }
.arrow:hover { background: white; color: grey }
2021-09-25 17:51:15 +02:00
< / style >
< / head >
< body >
< div class = "text" > Human Examples Gallery< / div >
< div id = "strip" class = "strip" > < / div >
< div class = "image-container" >
2021-09-26 01:14:03 +02:00
< img id = "image" src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt = "" class = "image-zoomwidth" / >
2021-09-28 23:07:34 +02:00
< div class = "arrow" id = "arrow-left" style = "left: 10px" > < < / div >
< div class = "arrow" id = "arrow-right" style = "right: 10px" > > < / div >
2021-09-25 17:51:15 +02:00
< / div >
< script >
const samples = [
2022-01-15 15:11:04 +01:00
'ai-body.jpg',
'ai-face.jpg',
'ai-upper.jpg',
'person-celeste.jpg',
'person-christina.jpg',
'person-lauren.jpg',
'person-lexi.jpg',
'person-linda.jpg',
'person-nicole.jpg',
'person-tasia.jpg',
'person-tetiana.jpg',
'person-vlado.jpg',
'person-vlado1.jpg',
'person-vlado5.jpg',
'group-1.jpg',
'group-2.jpg',
'group-3.jpg',
'group-4.jpg',
'group-5.jpg',
'group-6.jpg',
'group-7.jpg',
'stock-emotions-a-1.jpg.jpg',
'stock-emotions-a-2.jpg.jpg',
'stock-emotions-a-3.jpg.jpg',
'stock-emotions-a-4.jpg.jpg',
'stock-emotions-a-5.jpg.jpg',
'stock-emotions-a-6.jpg.jpg',
'stock-emotions-a-7.jpg.jpg',
'stock-emotions-a-8.jpg.jpg',
'stock-emotions-b-1.jpg.jpg',
'stock-emotions-b-2.jpg.jpg',
'stock-emotions-b-3.jpg.jpg',
'stock-emotions-b-4.jpg.jpg',
'stock-emotions-b-5.jpg.jpg',
'stock-emotions-b-6.jpg.jpg',
'stock-emotions-b-7.jpg.jpg',
'stock-emotions-b-8.jpg.jpg',
'stock-group-1.jpg.jpg',
'stock-group-2.jpg.jpg',
'stock-models-1.jpg.jpg',
'stock-models-10.jpg.jpg',
'stock-models-11.jpg.jpg',
'stock-models-12.jpg.jpg',
'stock-models-13.jpg.jpg',
'stock-models-14.jpg.jpg',
'stock-models-15.jpg.jpg',
'stock-models-16.jpg.jpg',
'stock-models-2.jpg.jpg',
'stock-models-3.jpg.jpg',
'stock-models-4.jpg.jpg',
'stock-models-5.jpg.jpg',
'stock-models-6.jpg.jpg',
'stock-models-7.jpg.jpg',
'stock-models-8.jpg.jpg',
'stock-models-9.jpg.jpg',
'stock-teen-1.jpg.jpg',
'stock-teen-2.jpg.jpg',
'stock-teen-3.jpg.jpg',
'stock-teen-4.jpg.jpg',
'stock-teen-5.jpg.jpg',
'stock-teen-6.jpg.jpg',
'stock-teen-7.jpg.jpg',
'stock-teen-8.jpg.jpg',
'solvay1927.jpg',
'cgi-model-1.jpg',
'cgi-model-10.jpg',
'cgi-model-11.jpg',
'cgi-model-12.jpg',
'cgi-model-13.jpg',
'cgi-model-14.jpg',
'cgi-model-15.jpg',
'cgi-model-18.jpg',
'cgi-model-19.jpg',
'cgi-model-2.jpg',
'cgi-model-20.jpg',
'cgi-model-21.jpg',
'cgi-model-22.jpg',
'cgi-model-23.jpg',
'cgi-model-24.jpg',
'cgi-model-25.jpg',
'cgi-model-26.jpg',
'cgi-model-27.jpg',
'cgi-model-28.jpg',
'cgi-model-29.jpg',
'cgi-model-3.jpg',
'cgi-model-30.jpg',
'cgi-model-31.jpg',
'cgi-model-33.jpg',
'cgi-model-34.jpg',
'cgi-model-4.jpg',
'cgi-model-5.jpg',
'cgi-model-6.jpg',
'cgi-model-7.jpg',
'cgi-model-8.jpg',
'cgi-model-9.jpg',
'cgi-multiangle-1.jpg',
'cgi-multiangle-10.jpg',
'cgi-multiangle-11.jpg',
'cgi-multiangle-2.jpg',
'cgi-multiangle-3.jpg',
'cgi-multiangle-4.jpg',
'cgi-multiangle-6.jpg',
'cgi-multiangle-7.jpg',
'cgi-multiangle-8.jpg',
'cgi-multiangle-9.jpg',
2021-09-25 17:51:15 +02:00
];
const image = document.getElementById('image');
2021-09-26 01:14:03 +02:00
image.addEventListener('click', () => {
if (image.classList.contains('image-zoomwidth')) image.className = 'image-zoomheight';
else if (image.classList.contains('image-zoomheight')) image.className = 'image-zoomfull';
else if (image.classList.contains('image-zoomfull')) image.className = 'image-zoomwidth';
});
const strip = document.getElementById('strip');
2021-09-28 23:07:34 +02:00
document.getElementById('arrow-left').addEventListener('click', () => strip.scrollLeft -= strip.offsetWidth);
document.getElementById('arrow-right').addEventListener('click', () => strip.scrollLeft += strip.offsetWidth);
2021-09-25 17:51:15 +02:00
for (const sample of samples) {
const el = document.createElement('img');
el.className = 'thumb';
2021-12-28 13:03:02 +01:00
el.src = `./in/${sample}`;
el.title = el.src;
el.alt = el.src;
2021-09-26 01:14:03 +02:00
el.addEventListener('click', (evt) => {
2021-12-28 13:03:02 +01:00
image.src = el.src.replace('/in/', '/out/');
image.alt = image.src;
image.title = image.src;
2021-09-26 01:14:03 +02:00
strip.scrollLeft = evt.target.offsetLeft - window.innerWidth / 2 + evt.target.offsetWidth / 2;
});
strip.appendChild(el);
2021-09-25 17:51:15 +02:00
}
< / script >
< / body >
< / html >
