Skip to content

Commit

Permalink
Finish the patch
Browse files Browse the repository at this point in the history
  • Loading branch information
@reillyeon
reillyeon committed Nov 11, 2023
1 parent 7efa458 commit 0b5d5d0
Show file tree
Hide file tree
Showing 19 changed files with 99 additions and 125 deletions.
25 changes: 6 additions & 19 deletions common/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,17 +199,12 @@ export function getMedianValue(array) {
(array[array.length / 2 - 1] + array[array.length / 2]) / 2;
}

// Set tf.js backend based WebNN's 'MLDeviceType' option
export async function setPolyfillBackend(device) {
// Simulate WebNN's device selection using various tf.js backends.
// MLDeviceType: ['default', 'webgl', 'webgpu', 'cpu']
// 'default' or 'webgl': tfjs-backend-webgl, 'webgpu': tfjs-backend-webgpu,
// 'cpu': tfjs-backend-wasm
if (!device) device = 'webgpu';
// Use 'webgl' by default for better performance.
// Set tf.js backend
export async function setPolyfillBackend(backend) {
if (!backend) backend = 'webgpu';
// Use 'webgpu' by default for better performance.
// Note: 'wasm' backend may run failed on some samples since
// some ops aren't supported on 'wasm' backend at present
const backend = device === 'cpu' ? 'wasm' : device;
const context = await navigator.ml.createContext();
const tf = context.tf;
if (tf) {
Expand Down Expand Up @@ -240,13 +235,6 @@ export async function setPolyfillBackend(device) {
`WebNN-polyfill</a> with tf.js ${tf.version_core} ` +
`<b>${backendInfo}</b> backend.`, 'info');
}
switch (device) {
case 'webgl':
case 'webgpu':
return 'gpu';
default:
return 'cpu';
}
}

// Get url params
Expand Down Expand Up @@ -285,7 +273,7 @@ export function getUrlParams() {
}

// Set backend for using WebNN-polyfill or WebNN
export async function setBackend(backend, device) {
export async function setBackend(backend, device, polyfillBackend) {
const webnnPolyfillId = 'webnn_polyfill';
const webnnNodeId = 'webnn_node';
const webnnPolyfillElem = document.getElementById(webnnPolyfillId);
Expand All @@ -312,7 +300,7 @@ export async function setBackend(backend, device) {
// Create WebNN-polyfill script
await loadScript(webnnPolyfillUrl, webnnPolyfillId);
}
return await setPolyfillBackend(device);
await setPolyfillBackend(polyfillBackend);
} else if (backend === 'webnn') {
// For Electron
if (isElectron()) {
Expand All @@ -334,7 +322,6 @@ export async function setBackend(backend, device) {
addAlert(`WebNN is not supported!`, 'warning');
}
}
return device;
} else {
addAlert(`Unknown backend: ${backend}`, 'warning');
}
Expand Down
6 changes: 3 additions & 3 deletions face_recognition/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@
<div class="col-md-auto">
<div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
<input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
</label>
<label class="btn btn-outline-info custom" name="webnn">
<input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
Expand Down
22 changes: 10 additions & 12 deletions face_recognition/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,17 @@ let buildTime = 0;
let computeTime = 0;
let fdOutputs;
let frOutputs;
let deviceType = '';
let lastdeviceType = '';
let backend = '';
let lastBackend = '';
let deviceType = '';
const disabledSelectors = ['#tabs > li', '.btn'];

$(document).ready(async () => {
$('.icdisplay').hide();
if (await utils.isWebNN()) {
$('#webnn_cpu').click();
} else {
$('#polyfill_cpu').click();
$('#polyfill_cpu_wasm').click();
}
});

Expand Down Expand Up @@ -275,22 +274,21 @@ function constructNetObject(type) {
async function main() {
try {
if (fdModelName === '') return;
[backend, deviceType] =
$('input[name="backend"]:checked').attr('id').split('_');
backend = $('input[name="backend"]:checked').attr('id');
ui.handleClick(disabledSelectors, true);
if (isFirstTimeLoad) $('#hint').hide();
const [numRuns, powerPreference, numThreads] = utils.getUrlParams();
let start;
// Only do load() and build() when model first time loads,
// there's new model choosed, backend changed or device changed
if (isFirstTimeLoad || fdInstanceType !== fdModelName + layout ||
lastdeviceType != deviceType || lastBackend != backend) {
if (lastdeviceType != deviceType || lastBackend != backend) {
// Set backend and device
await utils.setBackend(backend, deviceType);
lastdeviceType = lastdeviceType != deviceType ?
deviceType : lastdeviceType;
lastBackend = lastBackend != backend ? backend : lastBackend;
lastBackend != backend) {
if (lastBackend != backend) {
let backendType;
let polyfillType;
[backendType, deviceType, polyfillType] = backend.split('_');
await utils.setBackend(backendType, deviceType, polyfillType);
lastBackend = backend;
}
if (frInstance !== null) {
// Call dispose() to and avoid memory leak
Expand Down
6 changes: 3 additions & 3 deletions facial_landmark_detection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@
<div class="col-md-auto">
<div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
<input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
</label>
<label class="btn btn-outline-info custom" name="webnn">
<input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
Expand Down
22 changes: 10 additions & 12 deletions facial_landmark_detection/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,17 @@ let buildTime = 0;
let computeTime = 0;
let fdOutputs;
let fldOutputs;
let deviceType = '';
let lastdeviceType = '';
let backend = '';
let lastBackend = '';
let deviceType = '';
const disabledSelectors = ['#tabs > li', '.btn'];

$(document).ready(async () => {
$('.icdisplay').hide();
if (await utils.isWebNN()) {
$('#webnn_cpu').click();
} else {
$('#polyfill_cpu').click();
$('#polyfill_cpu_wasm').click();
}
});

Expand Down Expand Up @@ -210,22 +209,21 @@ function constructNetObject(type) {
async function main() {
try {
if (fdModelName === '') return;
[backend, deviceType] =
$('input[name="backend"]:checked').attr('id').split('_');
backend = $('input[name="backend"]:checked').attr('id');
ui.handleClick(disabledSelectors, true);
if (isFirstTimeLoad) $('#hint').hide();
const [numRuns, powerPreference, numThreads] = utils.getUrlParams();
let start;
// Only do load() and build() when model first time loads,
// there's new model choosed, backend changed or device changed
if (isFirstTimeLoad || fdInstanceType !== fdModelName + layout ||
lastdeviceType != deviceType || lastBackend != backend) {
if (lastdeviceType != deviceType || lastBackend != backend) {
// Set backend and device
await utils.setBackend(backend, deviceType);
lastdeviceType = lastdeviceType != deviceType ?
deviceType : lastdeviceType;
lastBackend = lastBackend != backend ? backend : lastBackend;
lastBackend != backend) {
if (lastBackend != backend) {
let backendType;
let polyfillType;
[backendType, deviceType, polyfillType] = backend.split('_');
await utils.setBackend(backendType, deviceType, polyfillType);
lastBackend = backend;
}
if (fldInstance !== null) {
// Call dispose() to and avoid memory leak
Expand Down
6 changes: 3 additions & 3 deletions image_classification/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@
<div class="col-md-auto">
<div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
<input type="radio" name="backend" id="polyfill_cpu_wasm_wasm" autocomplete="off">Wasm (CPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
</label>
<label class="btn btn-outline-info custom" name="webnn">
<input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
Expand Down
24 changes: 11 additions & 13 deletions image_classification/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,9 @@ let buildTime = 0;
let computeTime = 0;
let inputOptions;
let outputBuffer;
let deviceType = '';
let lastdeviceType = '';
let backend = '';
let lastBackend = '';
let deviceType = '';
const disabledSelectors = ['#tabs > li', '.btn'];

async function fetchLabels(url) {
Expand All @@ -45,7 +44,7 @@ $(document).ready(async () => {
if (await utils.isWebNN()) {
$('#webnn_cpu').click();
} else {
$('#polyfill_cpu').click();
$('#polyfill_cpu_wasm').click();
}
});

Expand Down Expand Up @@ -205,23 +204,22 @@ function constructNetObject(type) {
async function main() {
try {
if (modelName === '') return;
[backend, deviceType] =
$('input[name="backend"]:checked').attr('id').split('_');
backend = $('input[name="backend"]:checked').attr('id');
ui.handleClick(disabledSelectors, true);
if (isFirstTimeLoad) $('#hint').hide();
let start;
const [numRuns, powerPreference, numThreads] = utils.getUrlParams();

// Only do load() and build() when model first time loads,
// there's new model choosed, backend changed or device changed
// there's new model choosed or backend changed
if (isFirstTimeLoad || instanceType !== modelName + layout ||
lastdeviceType != deviceType || lastBackend != backend) {
if (lastdeviceType != deviceType || lastBackend != backend) {
// Set backend and device
await utils.setBackend(backend, deviceType);
lastdeviceType = lastdeviceType != deviceType ?
deviceType : lastdeviceType;
lastBackend = lastBackend != backend ? backend : lastBackend;
lastBackend != backend) {
if (lastBackend != backend) {
let backendType;
let polyfillType;
[backendType, deviceType, polyfillType] = backend.split('_');
await utils.setBackend(backendType, deviceType, polyfillType);
lastBackend = backend;
}
if (netInstance !== null) {
// Call dispose() to and avoid memory leak
Expand Down
6 changes: 3 additions & 3 deletions lenet/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@
<div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
<span class='mr-3'>Backend</span>
<label class="btn btn-outline-info" name="polyfill">
<input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
<input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
</label>
<label class="btn btn-outline-info" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
</label>
<label class="btn btn-outline-info" name="webnn">
<input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
Expand Down
4 changes: 2 additions & 2 deletions lenet/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ function clearResult() {
}

async function main() {
const [backend, deviceType] =
const [backend, deviceType, polyfillType] =
$('input[name="backend"]:checked').attr('id').split('_');
await utils.setBackend(backend, deviceType);
await utils.setBackend(backend, deviceType, polyfillType);
drawNextDigitFromMnist();
const pen = new Pen(visualCanvas);
const weightUrl = '../test-data/models/lenet_nchw/weights/lenet.bin';
Expand Down
6 changes: 3 additions & 3 deletions nsnet2/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@
<div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
<span class='mr-3'>Backend</span>
<label class="btn btn-outline-info" name="polyfill">
<input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
<input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
</label>
<label class="btn btn-outline-info" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
</label>
<label class="btn btn-outline-info" name="webnn">
<input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
Expand Down
4 changes: 2 additions & 2 deletions nsnet2/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,9 @@ browseButton.onclick = () => {

export async function main() {
try {
let [backend, deviceType] =
let [backend, deviceType, polyfillType] =
$('input[name="backend"]:checked').attr('id').split('_');
deviceType = await setBackend(backend, deviceType);
deviceType = await setBackend(backend, deviceType, polyfillType);
// Handle frames parameter.
const searchParams = new URLSearchParams(location.search);
let frames = parseInt(searchParams.get('frames'));
Expand Down
6 changes: 3 additions & 3 deletions object_detection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@
<div class="col-md-auto">
<div class="btn-group-toggle" data-toggle="buttons" id="backendBtns">
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_cpu" autocomplete="off">Wasm (CPU)
<input type="radio" name="backend" id="polyfill_cpu_wasm" autocomplete="off">Wasm (CPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgl_gpu" autocomplete="off">WebGL (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgl" autocomplete="off">WebGL (GPU)
</label>
<label class="btn btn-outline-info custom" name="polyfill">
<input type="radio" name="backend" id="polyfill_webgpu" autocomplete="off">WebGPU (GPU)
<input type="radio" name="backend" id="polyfill_gpu_webgpu" autocomplete="off">WebGPU (GPU)
</label>
<label class="btn btn-outline-info custom" name="webnn">
<input type="radio" name="backend" id="webnn_cpu" autocomplete="off">WebNN (CPU)
Expand Down
22 changes: 10 additions & 12 deletions object_detection/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,9 @@ let buildTime = 0;
let computeTime = 0;
let inputOptions;
let outputs;
let deviceType = '';
let lastdeviceType = '';
let backend = '';
let lastBackend = '';
let deviceType = '';
const disabledSelectors = ['#tabs > li', '.btn'];

async function fetchLabels(url) {
Expand All @@ -43,7 +42,7 @@ $(document).ready(async () => {
if (await utils.isWebNN()) {
$('#webnn_cpu').click();
} else {
$('#polyfill_cpu').click();
$('#polyfill_cpu_wasm').click();
}
});

Expand Down Expand Up @@ -177,8 +176,7 @@ function constructNetObject(type) {
async function main() {
try {
if (modelName === '') return;
[backend, deviceType] =
$('input[name="backend"]:checked').attr('id').split('_');
backend = $('input[name="backend"]:checked').attr('id');
ui.handleClick(disabledSelectors, true);
if (isFirstTimeLoad) $('#hint').hide();
let start;
Expand All @@ -187,13 +185,13 @@ async function main() {
// Only do load() and build() when model first time loads,
// there's new model choosed, backend changed or device changed
if (isFirstTimeLoad || instanceType !== modelName + layout ||
lastdeviceType != deviceType || lastBackend != backend) {
if (lastdeviceType != deviceType || lastBackend != backend) {
// Set backend and device
await utils.setBackend(backend, deviceType);
lastdeviceType = lastdeviceType != deviceType ?
deviceType : lastdeviceType;
lastBackend = lastBackend != backend ? backend : lastBackend;
lastBackend != backend) {
if (lastBackend != backend) {
let backendType;
let polyfillType;
[backendType, deviceType, polyfillType] = backend.split('_');
await utils.setBackend(backendType, deviceType, polyfillType);
lastBackend = backend;
}
if (netInstance !== null) {
// Call dispose() to and avoid memory leak
Expand Down
Loading

0 comments on commit 0b5d5d0

Please sign in to comment.