Skip to content
This repository has been archived by the owner on Apr 18, 2023. It is now read-only.

Commit

Permalink
Merge pull request #883 from ibelem/posenet-remove-dat.gui.js
Browse files Browse the repository at this point in the history 
[Example] Remove dat.gui.js in Posenet to save 87KB
  • Loading branch information
@ibelem
ibelem authored Jul 4, 2019
2 parents 651931e + dbb4b00 commit a8d5d7b
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 2,632 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ examples/**/*.tflite
examples/**/*.onnx
examples/**/*.bin
examples/**/*.xml
examples/skeleton_detection/model/mobilenet*/*
src/nn/wasm/src/build
.DS_Store
package-lock.json
package-lock.json
107 changes: 100 additions & 7 deletions examples/skeleton_detection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@
<th class='text-center backendtitle'>Backend</th>
<td>
<div class='custom-control custom-switch'>
<input type='checkbox' class='custom-control-input' id='backendswitch'>
<label class='custom-control-label' for='backendswitch'>Dual</label>
<input type='checkbox' class='custom-control-input' id='backendswitch'>
<label class='custom-control-label' for='backendswitch'>Dual</label>
</div>
<div class='g b-polyfill'>
<span id='backendpolyfilltitle'>Polyfill</span>
Expand All @@ -111,7 +111,101 @@
<tr id='option' style='display: none;'>
<th class='text-center'>Option</th>
<td>
<div id='my-gui-container'></div>
<div id="my-gui-container">
<div class="dg main a" id="gui">
<ul class="closed" style="height: auto;">
<li class="cr number">
<div><span class="property-name"
title="Model: The larger the value, the larger the size of the layers, and more accurate the model at the cost of speed.">model</span>
<div class="c">
<select id="sdmodel">
<option value="1">1</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option value="1.01" selected="selected">1.01</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
</li>
<li class="cr number">
<div><span class="property-name"
title="OutputStride: The desired stride for the output decides output dimension of model. The higher the number, the faster the performance but slower the accuracy. ">Stride</span>
<div class="c">
<select id="sdstride">
<option value="8">8</option>
<option value="16" selected="selected">16</option>
<option value="32">32</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
</li>
<li class="cr number">
<div><span class="property-name"
title="ScaleFactor: Scale down the image size before feed it through model, set this number lower to scale down the image and increase the speed when feeding through the network at the cost of accuracy.">Scale</span>
<div class="c">
<select id="scalefactor">
<option value="1">1</option>
<option value="0.25">0.25</option>
<option value="0.5" selected="selected">0.5</option>
<option value="0.75">0.75</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
</li>
<li class="cr number has-slider">
<div><span class="property-name"
title="ScoreThreshold: Score (0.0 ~ 1.0) is the probability of keypoint and pose, set score threshold higher to reduce the number of poses to draw on image and visa versa.">Threshold</span>
<div class="c">
<div><input id="sdscorethreshold" type="text" value="0.15"></div>
</div>
</div>
</li>
<li class="folder">
<div class="dg">
<ul>
<li class="title">Multi Pose Estimation</li>
<li class="cr number has-slider">
<div><span class="property-name"
title="NmsRadius: The minimal distance value (0 ~ 40) between two poses under multiple poses situation. The smaller this value, the poses in image are more concentrated.">Radius</span>
<div class="c">
<div><input id="sdnmsradius" type="number" value="20" min="1" max="40">
</div>
</div>
</div>
</li>
<li class="cr number has-slider">
<div><span class="property-name"
title="MaxDetections: The maximul number (1 ~ 20) of poses to be detected in multiple poses situation.">Detections</span>
<div class="c">
<div><input id="sdmaxdetections" type="number" value="15" min="1" max="20">
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
<li class="cr boolean">
<div><span class="property-name" title="ShowPose">Pose</span>
<div class="c"><input id="sdshowpose" type="checkbox" checked="checked"><label class=""></label></div>
</div>
</li>
<li class="cr boolean">
<div><span class="property-name" title="ShowBoundingBox">Bounding</span>
<div class="c"><input id="sdshowboundingbox" type="checkbox"><label class=""></label></div>
</div>
</li>
<li class="cr boolean">
<div><span class="property-name" title="UseAtrousConvOps">AtrousConv</span>
<div class="c"><input id="sduseatrousconvops" type="checkbox" checked="checked"><label class=""></label></div>
</div>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr class='offload' style='display:none'>
Expand Down Expand Up @@ -218,7 +312,7 @@ <h4>Multiple Pose Estimation</h4>
<label for='input'><svg width='20' height='17' viewBox='0 0 20 17'>
<path
d='M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z' />
</svg>
</svg>
<span>Pick Image</span>
</label>
</div>
Expand Down Expand Up @@ -253,8 +347,8 @@ <h4>Multiple Pose Estimation</h4>
<video id='video' autoplay playsinline hidden></video>
<canvas hidden id='scalevideo' width='640' height='480'></canvas>
<div id='cameraswitcher' class='custom-control custom-switch'>
<input type='checkbox' class='custom-control-input' id='cameraswitch'>
<label class='custom-control-label' for='cameraswitch'>Front-facing</label>
<input type='checkbox' class='custom-control-input' id='cameraswitch'>
<label class='custom-control-label' for='cameraswitch'>Front-facing</label>
</div>
</div>
</div>
Expand Down Expand Up @@ -334,7 +428,6 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
<script src='../static/lib/stickyjs/sticky.js'></script>
<script src='../static/lib/greensock/tweenmax.js'></script>
<script src='../third_party/stats.customized.min.js'></script>
<script src='../third_party/dat.gui.js'></script>

<script src='../../dist/webml-polyfill.js'></script>
<script src='../util/base.js'></script>
Expand Down
75 changes: 2 additions & 73 deletions examples/skeleton_detection/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
let guiState = {
let sdconfig = {
algorithm: 'multi-pose',
model: 1.01,
useAtrousConv: true,
Expand All @@ -13,27 +13,6 @@ let guiState = {
showBoundingBox: false,
};

const gui = new dat.GUI();
gui.domElement.id = 'gui';
const model = gui.add(guiState, 'model', [0.50, 0.75, 1.00, 1.01]);
const outputStride = gui.add(guiState, 'outputStride', [8, 16, 32]);
const scaleFactor = gui.add(guiState, 'scaleFactor', [0.25, 0.5, 0.75, 1.00]).listen();
const scoreThreshold = gui.add(guiState, 'scoreThreshold', 0.0, 1.0);
const multiPoseDetection = gui.addFolder('Multi Pose Estimation');
multiPoseDetection.open();
const nmsRadius = multiPoseDetection.add(guiState.multiPoseDetection, 'nmsRadius', 0.0, 40.0);
const maxDetections = multiPoseDetection.add(guiState.multiPoseDetection, 'maxDetections')
.min(1)
.max(20)
.step(1);
const showPose = gui.add(guiState, 'showPose');
const showBoundingBox = gui.add(guiState, 'showBoundingBox');
const useAtrousConv = gui.add(guiState, 'useAtrousConv');
gui.close();
let customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);
guiState.scoreThreshold = 0.15;

let currentTab = 'image';
let front = true;

Expand All @@ -51,61 +30,11 @@ const inputHeight = 513;
const inputSize = [1, inputWidth, inputHeight, 3];
const videoWidth = 500;
const videoHeight = 500;
const algorithm = gui.add(guiState, 'algorithm', ['single-pose', 'multi-pose']);
let isMultiple = guiState.algorithm;

inputElement.addEventListener('change', () => {
drawResult();
})

model.onFinishChange((model) => {
guiState.model = model;
main(currentTab === 'camera');
});

outputStride.onFinishChange((outputStride) => {
guiState.outputStride = parseInt(outputStride);
main(currentTab === 'camera');
});

scaleFactor.onFinishChange((scaleFactor) => {
guiState.scaleFactor = parseFloat(scaleFactor);
main(currentTab === 'camera');
});

useAtrousConv.onFinishChange((useAtrousConv) => {
guiState.useAtrousConv = useAtrousConv;
main(currentTab === 'camera');
});

scoreThreshold.onChange((scoreThreshold) => {
guiState.scoreThreshold = parseFloat(scoreThreshold);
utils._minScore = guiState.scoreThreshold;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, false);
});

nmsRadius.onChange((nmsRadius) => {
guiState.multiPoseDetection.nmsRadius = parseInt(nmsRadius);
utils._nmsRadius = guiState.multiPoseDetection.nmsRadius;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, true);
});

maxDetections.onChange((maxDetections) => {
guiState.multiPoseDetection.maxDetections = parseInt(maxDetections);
utils._maxDetection = guiState.multiPoseDetection.maxDetections;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, true);
});

showPose.onChange((showPose) => {
guiState.showPose = showPose;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, false);
});

showBoundingBox.onChange((showBoundingBox) => {
guiState.showBoundingBox = showBoundingBox;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, false);
});

const drawImage = (image, canvas, w, h) => {
const ctx = canvas.getContext('2d');
canvas.width = w;
Expand Down Expand Up @@ -205,7 +134,7 @@ const loadVideo = async () => {
const predict = async (video) => {
stats.begin();
const start = performance.now();
let type = guiState.algorithm == 'multi-pose' ? 'multi' : 'single';
let type = sdconfig.algorithm == 'multi-pose' ? 'multi' : 'single';
drawVideo(video, scaleCanvas, utils.scaleWidth, utils.scaleHeight);
await utils.predict(scaleCanvas, type);
drawVideo(video, canvas, video.videoWidth, video.videoHeight);
Expand Down
74 changes: 50 additions & 24 deletions examples/skeleton_detection/ui.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,3 @@
const optionCompact = () => {
for (s of $('#my-gui-container ul li .property-name')) {
if(s.innerText.toLowerCase() == 'model') { s.setAttribute('title', 'Model: The larger the value, the larger the size of the layers, and more accurate the model at the cost of speed.'); }
if(s.innerText.toLowerCase() == 'useatrousconv' || s.innerText == 'useAtrousConv') { s.innerText = 'AtrousConv'; s.setAttribute('title', 'UseAtrousConvOps'); }
if(s.innerText.toLowerCase() == 'outputstride') { s.innerText = 'Stride'; s.setAttribute('title', 'OutputStride: The desired stride for the output decides output dimension of model. The higher the number, the faster the performance but slower the accuracy. '); }
if(s.innerText.toLowerCase() == 'scalefactor') { s.innerText = 'Scale'; s.setAttribute('title', 'ScaleFactor: Scale down the image size before feed it through model, set this number lower to scale down the image and increase the speed when feeding through the network at the cost of accuracy.'); }
if(s.innerText.toLowerCase() == 'scorethreshold') { s.innerText = 'Threshold'; s.setAttribute('title', 'ScoreThreshold: Score is the probability of keypoint and pose, set score threshold higher to reduce the number of poses to draw on image and visa versa.'); }
if(s.innerText.toLowerCase() == 'nmsradius') { s.innerText = 'Radius'; s.setAttribute('title', 'NmsRadius: The minimal distance value between two poses under multiple poses situation. The smaller this value, the poses in image are more concentrated.'); }
if(s.innerText.toLowerCase() == 'maxdetections') { s.innerText = 'Detections'; s.setAttribute('title', 'MaxDetections: The maximul number of poses to be detected in multiple poses situation.'); }
if(s.innerText.toLowerCase() == 'showpose') { s.innerText = 'Pose'; s.setAttribute('title', 'ShowPose'); }
if(s.innerText.toLowerCase() == 'showboundingbox') { s.innerText = 'Bounding'; s.setAttribute('title', 'ShowBoundingBox'); }
}
}

$(document).ready(() => {

if (us == 'camera') {
Expand All @@ -20,14 +6,6 @@ $(document).ready(() => {
currentTab = 'image';
}

$('#my-gui-container ul li select').after('<div class=\'select__arrow\'></div>');
$('#my-gui-container ul li input[type=checkbox]').after('<label class=\'\'></label>');
// $('#my-gui-container ul li .slider').remove();
$('#posenet ul li .c input[type=text]').attr('title', 'Update value by dragging mouse up/down on inputbox');
$('#my-gui-container ul li.string').remove();

optionCompact();

const updateTitleSD = (backend, prefer) => {
let currentprefertext = {
fast: 'FAST_SINGLE_ANSWER',
Expand Down Expand Up @@ -154,7 +132,6 @@ $(document).ready(() => {
}

$('#option').show();
optionCompact();

updateTitleSD(currentBackend, currentPrefer);
strsearch = `?prefer=${currentPrefer}&b=${currentBackend}&s=${us}&d=${ud}`;
Expand Down Expand Up @@ -197,7 +174,6 @@ $(document).ready(() => {
currentBackend = 'WebML';
}
$('#option').show();
optionCompact();

updateTitleSD(currentBackend, currentPrefer);
strsearch = `?prefer=${currentPrefer}&b=${currentBackend}&s=${us}&d=${ud}`;
Expand Down Expand Up @@ -264,6 +240,56 @@ const updateLoadingSD = (loadedSize, totalSize, percentComplete) => {
$('.loading-page .counter h1').html(`${loadedSize}/${totalSize} ${percentComplete}%`);
}

$(document).ready(function(){
$('#sdmodel').change(() => {
sdconfig.model = $('#sdmodel').find('option:selected').attr('value');
main(currentTab === 'camera');
});

$('#sdstride').change(() => {
sdconfig.outputStride = parseInt($('#sdstride').find('option:selected').attr('value'));
main(currentTab === 'camera');
});

$('#scalefactor').change(() => {
sdconfig.scaleFactor = parseFloat($('#scalefactor').find('option:selected').attr('value'));
main(currentTab === 'camera');
});

$('#sdscorethreshold').change(() => {
sdconfig.scoreThreshold = parseFloat($('#sdscorethreshold').val());
utils._minScore = sdconfig.scoreThreshold;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, false);
});

$('#sdnmsradius').change(() => {
sdconfig.multiPoseDetection.nmsRadius = parseInt($('#sdnmsradius').val());
utils._nmsRadius = sdconfig.multiPoseDetection.nmsRadius;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, true);
});

$('#sdmaxdetections').change(() => {
sdconfig.multiPoseDetection.maxDetections = parseInt($('#sdmaxdetections').val());
utils._maxDetection = sdconfig.multiPoseDetection.maxDetections;
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, true);
});

$('#sdshowpose').change(() => {
sdconfig.showPose = $('#sdshowpose').prop('checked');
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, false);
});

$('#sduseatrousconvops').change(() => {
sdconfig.useAtrousConv = $('#sduseatrousconvops').prop('checked');
main(currentTab === 'camera');
});

$('#sdshowboundingbox').change(() => {
sdconfig.showBoundingBox = $('#sdshowboundingbox').prop('checked');
(currentTab === 'camera') ? poseDetectionFrame() : drawResult(false, false);
});
})

$(window).load(() => {
if(currentBackend === 'none' || currentBackend === '') {
showError('No backend selected', 'Please select a backend to start prediction.');
Expand Down
18 changes: 9 additions & 9 deletions examples/skeleton_detection/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,15 @@ class Utils{
async init(backend, prefer, inputSize) {
this.initialized = false;
// single input
this._version = guiState.model;
this._useAtrousConv = guiState.useAtrousConv;
this._outputStride = guiState.outputStride;
this._minScore = guiState.scoreThreshold;
this._scaleFactor = guiState.scaleFactor;
this._version = sdconfig.model;
this._useAtrousConv = sdconfig.useAtrousConv;
this._outputStride = sdconfig.outputStride;
this._minScore = sdconfig.scoreThreshold;
this._scaleFactor = sdconfig.scaleFactor;

// multiple input
this._nmsRadius = guiState.multiPoseDetection.nmsRadius;
this._maxDetection = guiState.multiPoseDetection.maxDetections;
this._nmsRadius = sdconfig.multiPoseDetection.nmsRadius;
this._maxDetection = sdconfig.multiPoseDetection.maxDetections;
this._type = "Multiperson";
let result;

Expand Down Expand Up @@ -200,11 +200,11 @@ class Utils{
const scaleX = canvas.width/this.scaleWidth;
const scaleY = canvas.height/this.scaleHeight;
if (pose.score >= this._minScore) {
if (guiState.showPose) {
if (sdconfig.showPose) {
drawKeypoints(pose.keypoints, this._minScore, ctx, scaleX, scaleY);
drawSkeleton(pose.keypoints, this._minScore, ctx, scaleX, scaleY);
}
if (guiState.showBoundingBox) {
if (sdconfig.showBoundingBox) {
drawBoundingBox(pose.keypoints, ctx, scaleX, scaleY);
}
}
Expand Down
Loading

0 comments on commit a8d5d7b

Please sign in to comment.