mirror of https://github.com/vladmandic/human
added sample image
parent
7beea18dc9
commit
124bd7a7dc
|
@ -6,6 +6,8 @@
|
||||||
|
|
||||||
*Suggestions are welcome!*
|
*Suggestions are welcome!*
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
|
|
|
@ -5,7 +5,8 @@
|
||||||
<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'">
|
<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'">
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<video id="video" playsinline style="display: none"></video>
|
<video id="video" playsinline style="display: none"></video>
|
||||||
|
<image id="image" src="" style="display: none"></video>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
<div id="log"></div>
|
<div id="log">Starting Human library</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -5,15 +5,15 @@ import human from '../dist/human.esm.js';
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
face: {
|
face: {
|
||||||
enabled: false,
|
enabled: true,
|
||||||
detector: { maxFaces: 10, skipFrames: 5, minConfidence: 0.8, iouThreshold: 0.3, scoreThreshold: 0.75 },
|
detector: { maxFaces: 10, skipFrames: 5, minConfidence: 0.8, iouThreshold: 0.3, scoreThreshold: 0.75 },
|
||||||
mesh: { enabled: false },
|
mesh: { enabled: true },
|
||||||
iris: { enabled: false },
|
iris: { enabled: true },
|
||||||
age: { enabled: false, skipFrames: 5 },
|
age: { enabled: true, skipFrames: 5 },
|
||||||
gender: { enabled: false },
|
gender: { enabled: true },
|
||||||
},
|
},
|
||||||
body: { enabled: false, maxDetections: 5, scoreThreshold: 0.75, nmsRadius: 20 },
|
body: { enabled: true, maxDetections: 5, scoreThreshold: 0.75, nmsRadius: 20 },
|
||||||
hand: { enabled: false, skipFrames: 5, minConfidence: 0.8, iouThreshold: 0.3, scoreThreshold: 0.75 },
|
hand: { enabled: true, skipFrames: 5, minConfidence: 0.8, iouThreshold: 0.3, scoreThreshold: 0.75 },
|
||||||
};
|
};
|
||||||
let settings;
|
let settings;
|
||||||
|
|
||||||
|
@ -189,6 +189,7 @@ async function runHumanDetect() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupGUI() {
|
function setupGUI() {
|
||||||
|
settings = QuickSettings.create(10, 10, 'Settings', document.getElementById('main'));
|
||||||
settings.addRange('FPS', 0, 100, 0, 1);
|
settings.addRange('FPS', 0, 100, 0, 1);
|
||||||
settings.addBoolean('Pause', false, (val) => {
|
settings.addBoolean('Pause', false, (val) => {
|
||||||
if (val) document.getElementById('video').pause();
|
if (val) document.getElementById('video').pause();
|
||||||
|
@ -237,7 +238,6 @@ async function setupCanvas() {
|
||||||
const canvas = document.getElementById('canvas');
|
const canvas = document.getElementById('canvas');
|
||||||
canvas.width = video.width;
|
canvas.width = video.width;
|
||||||
canvas.height = video.height;
|
canvas.height = video.height;
|
||||||
settings = QuickSettings.create(10, 10, 'Settings', document.getElementById('main'));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function setupCamera() {
|
async function setupCamera() {
|
||||||
|
@ -257,6 +257,20 @@ async function setupCamera() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
async function runImageDemo() {
|
||||||
|
const image = document.getElementById('image');
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
canvas.width = image.width;
|
||||||
|
canvas.height = image.height;
|
||||||
|
const result = await human.detect(image, config);
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
|
||||||
|
drawFace(result.face);
|
||||||
|
drawBody(result.body);
|
||||||
|
drawHand(result.hand);
|
||||||
|
}
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
await human.tf.setBackend('webgl');
|
await human.tf.setBackend('webgl');
|
||||||
await human.tf.ready();
|
await human.tf.ready();
|
||||||
|
@ -264,6 +278,7 @@ async function main() {
|
||||||
await setupCanvas();
|
await setupCanvas();
|
||||||
await setupGUI();
|
await setupGUI();
|
||||||
runHumanDetect();
|
runHumanDetect();
|
||||||
|
// runImageDemo();
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = main;
|
window.onload = main;
|
||||||
|
|
|
@ -6,7 +6,8 @@
|
||||||
<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'">
|
<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'">
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<video id="video" playsinline style="display: none"></video>
|
<video id="video" playsinline style="display: none"></video>
|
||||||
|
<image id="image" src="" style="display: none"></video>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
<div id="log"></div>
|
<div id="log">Starting Human library</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 100 KiB |
Loading…
Reference in New Issue