Disable fp16 for WebNN Polyfill (webmachinelearning#235)

Currently WebNN Polyfill doesn't support fp16 data type, just disable
it. Make some minor improvement for the ui BTW.

Author: Honry

common/css/style.css

@@ -823,4 +823,8 @@ a:hover {
 
 #footer a {
   display: inline-block;
+}
+
+.nowrap {
+  white-space: nowrap;
 }

common/utils.js

@@ -561,3 +561,32 @@ export function getDefaultLayout(deviceType) {
     }
   }
 }
+
+/**
+ * Display available models based on device type and data type.
+ * @param {Object} modelList list of available models.
+ * @param {Array} modelIds list of model ids.
+ * @param {String} deviceType 'cpu', 'gpu' or 'npu'.
+ * @param {String} dataType 'float32', 'float16', or ''.
+ */
+export function displayAvailableModels(
+    modelList, modelIds, deviceType, dataType) {
+  let models = [];
+  if (dataType == '') {
+    models = models.concat(modelList[deviceType]['float32']);
+    models = models.concat(modelList[deviceType]['float16']);
+  } else {
+    models = models.concat(modelList[deviceType][dataType]);
+  }
+  // Remove duplicate ids.
+  models = [...new Set(models)];
+  // Display available models.
+  // eslint-disable-next-line no-unused-vars
+  for (const modelId of modelIds) {
+    if (models.includes(modelId)) {
+      $(`#${modelId}`).parent().show();
+    } else {
+      $(`#${modelId}`).parent().hide();
+    }
+  }
+}

image_classification/index.html

@@ -66,7 +66,7 @@
         </div> -->
         <div class="row mb-2 align-items-center">
           <div class="col-1 col-md-1">
-            <span>Data Type</span>
+            <span class="nowrap">Data Type</span>
           </div>
           <div class="col-md-auto">
             <div class="btn-group-toggle" data-toggle="buttons" id="dataTypeBtns">

image_classification/main.js

@@ -81,26 +81,6 @@ async function fetchLabels(url) {
   return data.split('\n');
 }
 
-function displayAvailableModels(modelList, deviceType, dataType) {
-  let models = [];
-  if (dataType == '') {
-    models = models.concat(modelList[deviceType]['float32']);
-    models = models.concat(modelList[deviceType]['float16']);
-  } else {
-    models = models.concat(modelList[deviceType][dataType]);
-  }
-  // Remove duplicate ids.
-  models = [...new Set(models)];
-  // Display available models.
-  for (const model of modelIds) {
-    if (models.includes(model)) {
-      $(`#${model}`).parent().show();
-    } else {
-      $(`#${model}`).parent().hide();
-    }
-  }
-}
-
 $(document).ready(async () => {
   $('.icdisplay').hide();
   if (await utils.isWebNN()) {
@@ -114,24 +94,25 @@ $('#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('_');
+  const backendId = $(e.target).attr('id');
+  layout = utils.getDefaultLayout(backendId);
+  [backend, deviceType] = backendId.split('_');
   // Only show the supported models for each deviceType. Now fp16 nchw models
   // are only supported on gpu/npu.
-  if (deviceType == 'gpu') {
+  if (backendId == 'webnn_gpu') {
     ui.handleBtnUI('#float16Label', false);
     ui.handleBtnUI('#float32Label', false);
-    displayAvailableModels(modelList, deviceType, dataType);
-  } else if (deviceType == 'npu') {
+    utils.displayAvailableModels(modelList, modelIds, deviceType, dataType);
+  } else if (backendId == 'webnn_npu') {
     ui.handleBtnUI('#float16Label', false);
     ui.handleBtnUI('#float32Label', true);
     $('#float16').click();
-    displayAvailableModels(modelList, deviceType, 'float16');
+    utils.displayAvailableModels(modelList, modelIds, deviceType, 'float16');
   } else {
     ui.handleBtnUI('#float16Label', true);
     ui.handleBtnUI('#float32Label', false);
     $('#float32').click();
-    displayAvailableModels(modelList, deviceType, 'float32');
+    utils.displayAvailableModels(modelList, modelIds, deviceType, 'float32');
   }
 
   // Uncheck selected model
@@ -163,7 +144,7 @@ $('#modelBtns .btn').on('change', async (e) => {
 
 $('#dataTypeBtns .btn').on('change', async (e) => {
   dataType = $(e.target).attr('id');
-  displayAvailableModels(modelList, deviceType, dataType);
+  utils.displayAvailableModels(modelList, modelIds, deviceType, dataType);
   // Uncheck selected model
   if (modelId != '') {
     $(`#${modelId}`).parent().removeClass('active');