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>" >
< 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-03-24 16:08:49 +01:00
< script src = "./facematch.js" type = "module" > < / script >
2021-03-12 00:26:04 +01:00
< style >
@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-03-15 17:14:48 +01:00
body { margin: 0; background: black; color: white; overflow-x: hidden; }
2021-03-12 00:26:04 +01:00
img { object-fit: contain; }
2021-03-13 17:26:53 +01:00
.face { width: 128px; height: 128px; }
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" >
< div >
Selected Face< br >
2021-03-24 16:08:49 +01:00
< canvas id = "orig" style = "width: 200px; height: 200px; padding: 20px" > < / canvas >
2021-03-23 20:24:58 +01:00
< / div >
< div style = "width: 20px" > < / div >
< div >
Sample Images< br >
2021-03-24 16:08:49 +01:00
< div id = "images" style = "display: flex; flex-wrap: wrap; width: 85vw" > < / div >
2021-03-23 20:24:58 +01:00
< / div >
< span id = "desc" style = "visibility: hidden; font-size: 0.4rem;" > < / span > < br >
< / div >
< div style = "height: 10px" > < / div >
Extracted Faces - click on a face to sort by similarity and get a known face match:< br >
< div id = "faces" > < / div >
< / div >
2021-03-12 00:26:04 +01:00
< / body >
< / html >