pull/293/head
Vladimir Mandic 2021-03-13 11:37:16 -05:00
parent d373f8e121
commit 53aea1a9ad
3 changed files with 8 additions and 6 deletions

View File

@ -3,8 +3,9 @@ import Human from '../src/human';
import Menu from './menu.js'; import Menu from './menu.js';
import GLBench from './gl-bench.js'; import GLBench from './gl-bench.js';
// const userConfig = { backend: 'webgl' }; // add any user configuration overrides const userConfig = { backend: 'webgl' }; // add any user configuration overrides
/*
const userConfig = { const userConfig = {
backend: 'wasm', backend: 'wasm',
async: false, async: false,
@ -15,6 +16,7 @@ const userConfig = {
gesture: { enabled: false }, gesture: { enabled: false },
body: { enabled: false, modelPath: '../models/blazepose.json' }, body: { enabled: false, modelPath: '../models/blazepose.json' },
}; };
*/
const human = new Human(userConfig); const human = new Human(userConfig);

View File

@ -16,7 +16,7 @@
<script src="./embedding.js" type="module"></script> <script src="./embedding.js" type="module"></script>
<style> <style>
@font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('../assets/lato-light.woff2') } @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: 20px; font-variant: small-caps; } html { font-family: 'Lato', 'Segoe UI'; font-size: 24px; font-variant: small-caps; }
body { margin: 0; background: black; color: white; overflow-x: hidden; scrollbar-width: none; } body { margin: 0; background: black; color: white; overflow-x: hidden; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; } body::-webkit-scrollbar { display: none; }
img { object-fit: contain; } img { object-fit: contain; }
@ -26,7 +26,7 @@
<body> <body>
<br>Sample Images: <br>Sample Images:
<div id="images"></div> <div id="images"></div>
<br>Selected Face (Enhanced)<br> <br>Selected Face (Enhanced):<br>
<canvas id="orig" style="width: 200px; height: 200px;"></canvas> <canvas id="orig" style="width: 200px; height: 200px;"></canvas>
<br><br>Extracted Faces - click on a face to sort by simmilarity:<br> <br><br>Extracted Faces - click on a face to sort by simmilarity:<br>
<div id="faces"></div> <div id="faces"></div>

View File

@ -52,16 +52,16 @@ async function analyze(face) {
const canvases = document.getElementsByClassName('face'); const canvases = document.getElementsByClassName('face');
for (const canvas of canvases) { for (const canvas of canvases) {
// calculate simmilarity from selected face to current one in the loop // calculate simmilarity from selected face to current one in the loop
const res = human.simmilarity(face.embedding, all[canvas.tag.sample][canvas.tag.face].embedding, 3); const res = human.simmilarity(face.embedding, all[canvas.tag.sample][canvas.tag.face].embedding, 2);
// draw the canvas and simmilarity score // draw the canvas and simmilarity score
canvas.title = res; canvas.title = res;
await human.tf.browser.toPixels(all[canvas.tag.sample][canvas.tag.face].tensor, canvas); await human.tf.browser.toPixels(all[canvas.tag.sample][canvas.tag.face].tensor, canvas);
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.font = 'small-caps 1rem "Lato"'; ctx.font = 'small-caps 1rem "Lato"';
ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillText(`${(100 * res).toFixed(1)}%`, 3, 19); ctx.fillText(`${(100 * res).toFixed(1)}%`, 3, 23);
ctx.fillStyle = 'rgba(255, 255, 255, 1)'; ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillText(`${(100 * res).toFixed(1)}%`, 4, 20); ctx.fillText(`${(100 * res).toFixed(1)}%`, 4, 24);
} }
// sort all faces by simmilarity // sort all faces by simmilarity