Use preferredInputLayout to select model for different backends (#328)

Author: Honry

common/utils.js

@@ -432,13 +432,10 @@ export function permuteData(array, dims, axes) {
   return [permutedData, shape];
 }
 
-export function getDefaultLayout(deviceType) {
-  if (deviceType.indexOf('cpu') != -1) {
-    return 'nhwc';
-  } else if (deviceType.indexOf('gpu') != -1 ||
-             deviceType.indexOf('npu') != -1) {
-    return 'nchw';
-  }
+export async function getDefaultLayout(deviceType) {
+  const context = await navigator.ml.createContext({deviceType});
+  const limits = context.opSupportLimits();
+  return limits.preferredInputLayout ?? 'nchw';
 }
 
 /**

face_recognition/main.js

@@ -54,7 +54,8 @@ $('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') {
     await stopCamRender();
   }
-  layout = utils.getDefaultLayout($(e.target).attr('id'));
+  [backend, deviceType] = $(e.target).attr('id').split('_');
+  layout = await utils.getDefaultLayout(deviceType);
   await main();
 });
 
@@ -296,8 +297,6 @@ function constructNetObject(type) {
 async function main() {
   try {
     if (fdModelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     const [numRuns, powerPreference] = utils.getUrlParams();
@@ -359,7 +358,7 @@ async function main() {
           utils.sizeOfShape(frInputOptions.inputShape)));
       for (let i = 0; i < numRuns; i++) {
         if (numRuns > 1) {
-          // clear all predicted embeddings for benckmarking
+          // clear all predicted embeddings for benchmarking
           targetEmbeddings = null;
           searchEmbeddings = null;
         }

facial_landmark_detection/main.js

@@ -50,7 +50,8 @@ $('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') {
     await stopCamRender();
   }
-  layout = utils.getDefaultLayout($(e.target).attr('id'));
+  [backend, deviceType] = $(e.target).attr('id').split('_');
+  layout = await utils.getDefaultLayout(deviceType);
   await main();
 });
 
@@ -232,8 +233,6 @@ function constructNetObject(type) {
 async function main() {
   try {
     if (fdModelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     const [numRuns, powerPreference] = utils.getUrlParams();

image_classification/main.js

@@ -98,18 +98,17 @@ $('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') {
     await stopCamRender();
   }
-  const backendId = $(e.target).attr('id');
-  layout = utils.getDefaultLayout(backendId);
-  [backend, deviceType] = backendId.split('_');
+  [backend, deviceType] = $(e.target).attr('id').split('_');
+  layout = await utils.getDefaultLayout(deviceType);
   // Only show the supported models for each deviceType. Now fp16 nchw models
   // are only supported on gpu/npu.
-  if (backendId == 'webnn_gpu') {
+  if (deviceType == 'gpu') {
     ui.handleBtnUI('#float16Label', false);
     ui.handleBtnUI('#float32Label', false);
     ui.handleBtnUI('#uint8Label', true);
     $('#float32').click();
     utils.displayAvailableModels(modelList, modelIds, deviceType, dataType);
-  } else if (backendId == 'webnn_npu') {
+  } else if (deviceType == 'npu') {
     ui.handleBtnUI('#float16Label', false);
     ui.handleBtnUI('#float32Label', true);
     ui.handleBtnUI('#uint8Label', true);

object_detection/main.js

@@ -68,16 +68,15 @@ $('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') {
     await stopCamRender();
   }
-  const backendId = $(e.target).attr('id');
-  layout = utils.getDefaultLayout(backendId);
-  [backend, deviceType] = backendId.split('_');
+  [backend, deviceType] = $(e.target).attr('id').split('_');
+  layout = await utils.getDefaultLayout(deviceType);
   // Only show the supported models for each deviceType. Now fp16 nchw models
   // are only supported on gpu/npu.
-  if (backendId == 'webnn_gpu') {
+  if (deviceType == 'gpu') {
     ui.handleBtnUI('#float16Label', false);
     ui.handleBtnUI('#float32Label', false);
     utils.displayAvailableModels(modelList, modelIds, deviceType, dataType);
-  } else if (backendId == 'webnn_npu') {
+  } else if (deviceType == 'npu') {
     ui.handleBtnUI('#float16Label', false);
     ui.handleBtnUI('#float32Label', true);
     $('#float16').click();

semantic_segmentation/main.js

@@ -53,7 +53,8 @@ $('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') {
     await stopCamRender();
   }
-  layout = utils.getDefaultLayout($(e.target).attr('id'));
+  [backend, deviceType] = $(e.target).attr('id').split('_');
+  layout = await utils.getDefaultLayout(deviceType);
   await main();
 });
 
@@ -326,8 +327,6 @@ function constructNetObject(type) {
 export async function main() {
   try {
     if (modelName === '') return;
-    [backend, deviceType] =
-        $('input[name="backend"]:checked').attr('id').split('_');
     ui.handleClick(disabledSelectors, true);
     if (isFirstTimeLoad) $('#hint').hide();
     let start;