2021-11-09 16:39:23 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Human: Face Recognition< / title >
< meta name = "viewport" content = "width=device-width" id = "viewport" >
< 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 = "../manifest.webmanifest" >
< link rel = "shortcut icon" href = "../../favicon.ico" type = "image/x-icon" >
< link rel = "apple-touch-icon" href = "../../assets/icon.png" >
< script src = "./index.js" type = "module" > < / script >
< 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: 16px; font-variant: small-caps; }
2021-11-11 17:30:55 +01:00
body { margin: 0; padding: 16px; background: black; color: white; overflow-x: hidden; width: 100vw; height: 100vh; }
2021-11-09 16:39:23 +01:00
body::-webkit-scrollbar { display: none; }
2021-11-11 23:01:10 +01:00
.button { padding: 2px; cursor: pointer; box-shadow: 2px 2px black; width: 64px; text-align: center; margin-left: 16px; height: 16px; display: none }
2021-11-09 16:39:23 +01:00
< / style >
< / head >
< body >
2021-11-11 17:30:55 +01:00
< canvas id = "canvas" style = "padding: 8px" > < / canvas >
< canvas id = "source" style = "padding: 8px" > < / canvas >
2021-11-09 16:39:23 +01:00
< video id = "video" playsinline style = "display: none" > < / video >
< pre id = "fps" style = "position: absolute; top: 12px; right: 20px; background-color: grey; padding: 8px; box-shadow: 2px 2px black" > < / pre >
< pre id = "log" style = "padding: 8px" > < / pre >
2021-11-11 17:30:55 +01:00
< div id = "match" style = "display: none; padding: 8px" >
< label for = "name" > name:< / label >
< input id = "name" type = "text" value = "" style = "height: 16px; border: none; padding: 2px; margin-left: 8px" >
< span id = "save" class = "button" style = "background-color: royalblue" > save< / span >
< span id = "delete" class = "button" style = "background-color: lightcoral" > delete< / span >
< / div >
< div id = "retry" class = "button" style = "background-color: darkslategray; width: 350px" > retry< / div >
2021-11-09 16:39:23 +01:00
< div id = "status" style = "position: absolute; bottom: 0; width: 100%; padding: 8px; font-size: 0.8rem;" > < / div >
< / body >
< / html >