mirror of https://github.com/vladmandic/human
76 lines
5.2 KiB
HTML
76 lines
5.2 KiB
HTML
<!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">
|
|
<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">
|
|
<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: 24px; font-variant: small-caps; }
|
|
body { margin: 24px; background: black; color: white; overflow-x: auto; overflow-y: auto; text-align: -webkit-center; min-height: 100%; max-height: 100%; }
|
|
::-webkit-scrollbar { height: 8px; border: 0; border-radius: 0; }
|
|
::-webkit-scrollbar-thumb { background: grey }
|
|
::-webkit-scrollbar-track { margin: 3px; }
|
|
.text { margin: 24px }
|
|
.strip { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; }
|
|
.thumb { height: 180px; margin: 2px; padding: 2px; cursor: grab; }
|
|
.thumb:hover { filter: grayscale(1); transform: scale(1.08); transition : all 0.3s ease; }
|
|
.image-container { margin: 24px 3px 3px 3px; cursor: nwse-resize; }
|
|
.image-zoomwidth { max-width: 94vw; }
|
|
.image-zoomheight { max-height: 70vh; }
|
|
.image-zoomfull { max-height: -webkit-fill-available; }
|
|
.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 }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="text">Human Examples Gallery</div>
|
|
<div id="strip" class="strip"></div>
|
|
<div class="image-container">
|
|
<img id="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="" class="image-zoomwidth" />
|
|
<div class="arrow" id="arrow-left" style="left: 10px"><</div>
|
|
<div class="arrow" id="arrow-right" style="right: 10px">></div>
|
|
</div>
|
|
<script>
|
|
const samples = [
|
|
'ai-body.jpg', 'ai-upper.jpg',
|
|
'person-carolina.jpg', 'person-celeste.jpg', 'person-leila1.jpg', 'person-leila2.jpg', 'person-lexi.jpg', 'person-linda.jpg', 'person-nicole.jpg', 'person-tasia.jpg',
|
|
'person-tetiana.jpg', 'person-vlado1.jpg', 'person-vlado5.jpg', 'person-vlado.jpg', 'person-christina.jpg', 'person-lauren.jpg',
|
|
'group-1.jpg', 'group-2.jpg', 'group-3.jpg', 'group-4.jpg', 'group-5.jpg', 'group-6.jpg', 'group-7.jpg',
|
|
'daz3d-brianna.jpg', 'daz3d-chiyo.jpg', 'daz3d-cody.jpg', 'daz3d-drew-01.jpg', 'daz3d-drew-02.jpg', 'daz3d-ella-01.jpg', 'daz3d-ella-02.jpg', 'daz3d-gillian.jpg',
|
|
'daz3d-hye-01.jpg', 'daz3d-hye-02.jpg', 'daz3d-kaia.jpg', 'daz3d-karen.jpg', 'daz3d-kiaria-01.jpg', 'daz3d-kiaria-02.jpg', 'daz3d-lilah-01.jpg', 'daz3d-lilah-02.jpg',
|
|
'daz3d-lilah-03.jpg', 'daz3d-lila.jpg', 'daz3d-lindsey.jpg', 'daz3d-megah.jpg', 'daz3d-selina-01.jpg', 'daz3d-selina-02.jpg', 'daz3d-snow.jpg',
|
|
'daz3d-sunshine.jpg', 'daz3d-taia.jpg', 'daz3d-tuesday-01.jpg', 'daz3d-tuesday-02.jpg', 'daz3d-tuesday-03.jpg', 'daz3d-zoe.jpg', 'daz3d-ginnifer.jpg',
|
|
'daz3d-_emotions01.jpg', 'daz3d-_emotions02.jpg', 'daz3d-_emotions03.jpg', 'daz3d-_emotions04.jpg', 'daz3d-_emotions05.jpg',
|
|
];
|
|
const image = document.getElementById('image');
|
|
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');
|
|
document.getElementById('arrow-left').addEventListener('click', () => strip.scrollLeft -= strip.offsetWidth);
|
|
document.getElementById('arrow-right').addEventListener('click', () => strip.scrollLeft += strip.offsetWidth);
|
|
for (const sample of samples) {
|
|
const el = document.createElement('img');
|
|
el.className = 'thumb';
|
|
el.src = el.title = el.alt = `/samples/in/${sample}`;
|
|
el.addEventListener('click', (evt) => {
|
|
image.src = image.alt = image.title = el.src.replace('/in/', '/out/');
|
|
strip.scrollLeft = evt.target.offsetLeft - window.innerWidth / 2 + evt.target.offsetWidth / 2;
|
|
});
|
|
strip.appendChild(el);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|