From 6b92d159aafb9c9e669c4e304d2858d6b1316a0f Mon Sep 17 00:00:00 2001
From: Wanming Lin <wanming.lin@intel.com>
Date: Wed, 8 May 2024 17:07:36 +0800
Subject: [PATCH] Disable fp16 for WebNN Polyfill

Currently WebNN Polyfill doesn't support fp16 data type, just disable
it. Make some minor improvement for the ui BTW.
---
 common/css/style.css            |  4 ++++
 common/utils.js                 | 27 ++++++++++++++++++++++++
 image_classification/index.html |  2 +-
 image_classification/main.js    | 37 ++++++++-------------------------
 4 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/common/css/style.css b/common/css/style.css
index 72564d1e..63096fd8 100644
--- a/common/css/style.css
+++ b/common/css/style.css
@@ -823,4 +823,8 @@ a:hover {
 
 #footer a {
   display: inline-block;
+}
+
+.nowrap {
+  white-space: nowrap;
 }
\ No newline at end of file
diff --git a/common/utils.js b/common/utils.js
index 6e87f07a..fc438d0a 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -561,3 +561,30 @@ 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.
+  for (const modelId of modelIds) {
+    if (models.includes(modelId)) {
+      $(`#${modelId}`).parent().show();
+    } else {
+      $(`#${modelId}`).parent().hide();
+    }
+  }
+}
\ No newline at end of file
diff --git a/image_classification/index.html b/image_classification/index.html
index fc9a0d43..85f3b87f 100644
--- a/image_classification/index.html
+++ b/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">
diff --git a/image_classification/main.js b/image_classification/main.js
index 2e1cbda9..4c33ab6e 100644
--- a/image_classification/main.js
+++ b/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');