2021-03-12 00:26:04 +01:00
<!DOCTYPE html>
< html lang = "en" >
2021-04-04 15:25:18 +02:00
< head >
< title > Human< / 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>" >
2021-05-31 00:45:39 +02:00
< meta name = "theme-color" content = "#000000" >
2021-06-14 14:16:10 +02:00
< link rel = "manifest" href = "../manifest.webmanifest" >
< link rel = "shortcut icon" href = "../../favicon.ico" type = "image/x-icon" >
< link rel = "apple-touch-icon" href = "../../assets/icon.png" >
2021-06-16 21:40:35 +02:00
< script src = "./facematch.js" type = "module" > < / script >
2021-03-12 00:26:04 +01:00
< style >
2021-10-01 17:40:57 +02:00
img { object-fit: contain; }
2021-06-14 14:16:10 +02:00
@font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('../../assets/lato-light.woff2') }
2021-03-13 17:37:16 +01:00
html { font-family: 'Lato', 'Segoe UI'; font-size: 24px; font-variant: small-caps; }
2021-10-01 17:40:57 +02:00
body { margin: 24px; background: black; color: white; overflow: hidden; 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; }
.orig { width: 200px; height: 200px; padding-bottom: 20px; filter: blur(16px); transition : all 0.5s ease; }
.text { margin: 24px; }
.face { width: 128px; height: 128px; margin: 2px; padding: 2px; cursor: grab; transform: scale(1.00); transition : all 0.3s ease; }
.face:hover { filter: grayscale(1); transform: scale(1.08); transition : all 0.3s ease; }
2021-03-12 00:26:04 +01:00
< / style >
< / head >
< body >
2021-03-23 20:24:58 +01:00
< div style = "display: block" >
< div style = "display: flex" >
2021-10-01 17:40:57 +02:00
< div style = "min-width: 400px" >
< div class = "text" id = "title" > < / div >
< canvas id = "orig" class = "orig" > < / canvas >
< div id = "desc" style = "font-size: 0.8rem; text-align: left;" > < / div >
2021-03-23 20:24:58 +01:00
< / div >
< div style = "width: 20px" > < / div >
< div >
2021-10-01 17:40:57 +02:00
< div class = "text" > Input Images< / div >
< div id = "images" style = "display: flex; width: 60vw; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth" > < / div >
2021-03-23 20:24:58 +01:00
< / div >
< / div >
2021-04-25 20:30:40 +02:00
< div id = "list" style = "height: 10px" > < / div >
2021-10-01 17:40:57 +02:00
< div class = "text" > Select person to sort by similarity and get a known face match< / div >
< div id = "faces" style = "height: 50vh; overflow-y: auto" > < / div >
2021-03-23 20:24:58 +01:00
< / div >
2021-03-12 00:26:04 +01:00
< / body >
< / html >
