From 4175eb55655805cdad341fbdadd3b58a28738bf3 Mon Sep 17 00:00:00 2001
From: Wanming Lin <wanming.lin@intel.com>
Date: Mon, 25 Sep 2023 11:04:03 +0800
Subject: [PATCH] Hide Layout options

Since current implementation status haven't support both NHWC and NCHW
input layout well, disable layout options temporarily, and target WebNN
CPU backend to NHWC layout models, WebNN GPU backend to NCHW layout
models by default.
---
 face_recognition/index.html          |  4 ++--
 face_recognition/main.js             | 19 +++++++++++++------
 facial_landmark_detection/index.html |  4 ++--
 facial_landmark_detection/main.js    | 19 +++++++++++++------
 image_classification/index.html      |  4 ++--
 image_classification/main.js         | 17 ++++++++++++-----
 semantic_segmentation/index.html     |  4 ++--
 semantic_segmentation/main.js        | 19 +++++++++++++------
 8 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/face_recognition/index.html b/face_recognition/index.html
index 01f87b5c..dd8db030 100644
--- a/face_recognition/index.html
+++ b/face_recognition/index.html
@@ -46,7 +46,7 @@
             </div>
           </div>
         </div>
-        <div class="row mb-2 align-items-center">
+        <!-- <div class="row mb-2 align-items-center">
           <div class="col-1 wider-col">
             <span>Layout</span>
           </div>
@@ -60,7 +60,7 @@
               </label>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="row mb-2 align-items-center">
           <div class="col-1 wider-col">
             <span>FaceRecognition</span>
diff --git a/face_recognition/main.js b/face_recognition/main.js
index 04d497cc..6d335e78 100644
--- a/face_recognition/main.js
+++ b/face_recognition/main.js
@@ -49,8 +49,15 @@ $(document).ready(async () => {
   }
 });
 
-$('#backendBtns .btn').on('change', async () => {
+$('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+  if ($(e.target).attr('id').indexOf('cpu') != -1) {
+    layout = 'nhwc';
+  } else if (($(e.target).attr('id').indexOf('gpu') != -1)) {
+    layout = 'nchw';
+  } else {
+    throw new Error('Unknown backend');
+  }
   await main();
 });
 
@@ -60,11 +67,11 @@ $('#fdModelBtns .btn').on('change', async (e) => {
   await main();
 });
 
-$('#layoutBtns .btn').on('change', async (e) => {
-  layout = $(e.target).attr('id');
-  if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
-  await main();
-});
+// $('#layoutBtns .btn').on('change', async (e) => {
+//   layout = $(e.target).attr('id');
+//   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+//   await main();
+// });
 
 // Click trigger to do inference with <img> element
 $('#img').click(async () => {
diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
index 5ed86fcc..7f0f8ea1 100644
--- a/facial_landmark_detection/index.html
+++ b/facial_landmark_detection/index.html
@@ -46,7 +46,7 @@
             </div>
           </div>
         </div>
-        <div class="row mb-2 align-items-center">
+        <!-- <div class="row mb-2 align-items-center">
           <div class="col-1 wider-col">
             <span>Layout</span>
           </div>
@@ -60,7 +60,7 @@
               </label>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="row mb-2 align-items-center">
           <div class="col-1 wider-col">
             <span>FacialLandmark</span>
diff --git a/facial_landmark_detection/main.js b/facial_landmark_detection/main.js
index 3e801bf2..ddcaf85c 100644
--- a/facial_landmark_detection/main.js
+++ b/facial_landmark_detection/main.js
@@ -45,8 +45,15 @@ $(document).ready(async () => {
   }
 });
 
-$('#backendBtns .btn').on('change', async () => {
+$('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+  if ($(e.target).attr('id').indexOf('cpu') != -1) {
+    layout = 'nhwc';
+  } else if (($(e.target).attr('id').indexOf('gpu') != -1)) {
+    layout = 'nchw';
+  } else {
+    throw new Error('Unknown backend');
+  }
   await main();
 });
 
@@ -56,11 +63,11 @@ $('#fdModelBtns .btn').on('change', async (e) => {
   await main();
 });
 
-$('#layoutBtns .btn').on('change', async (e) => {
-  layout = $(e.target).attr('id');
-  if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
-  await main();
-});
+// $('#layoutBtns .btn').on('change', async (e) => {
+//   layout = $(e.target).attr('id');
+//   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+//   await main();
+// });
 
 // Click trigger to do inference with <img> element
 $('#img').click(async () => {
diff --git a/image_classification/index.html b/image_classification/index.html
index 991e1cce..30f7e033 100644
--- a/image_classification/index.html
+++ b/image_classification/index.html
@@ -46,7 +46,7 @@
             </div>
           </div>
         </div>
-        <div class="row mb-2 align-items-center">
+        <!-- <div class="row mb-2 align-items-center">
           <div class="col-1 col-md-1">
             <span>Layout</span>
           </div>
@@ -60,7 +60,7 @@
               </label>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="row align-items-center">
           <div class="col col-md-1">
             <span>Model</span>
diff --git a/image_classification/main.js b/image_classification/main.js
index 2a65b3ec..fde5d34e 100644
--- a/image_classification/main.js
+++ b/image_classification/main.js
@@ -51,6 +51,13 @@ $(document).ready(async () => {
 
 $('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+  if ($(e.target).attr('id').indexOf('cpu') != -1) {
+    layout = 'nhwc';
+  } else if (($(e.target).attr('id').indexOf('gpu') != -1)) {
+    layout = 'nchw';
+  } else {
+    throw new Error('Unknown backend');
+  }
   await main();
 });
 
@@ -60,11 +67,11 @@ $('#modelBtns .btn').on('change', async (e) => {
   await main();
 });
 
-$('#layoutBtns .btn').on('change', async (e) => {
-  layout = $(e.target).attr('id');
-  if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
-  await main();
-});
+// $('#layoutBtns .btn').on('change', async (e) => {
+//   layout = $(e.target).attr('id');
+//   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+//   await main();
+// });
 
 // Click trigger to do inference with <img> element
 $('#img').click(async () => {
diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
index 172cb38f..b05b0c1a 100644
--- a/semantic_segmentation/index.html
+++ b/semantic_segmentation/index.html
@@ -46,7 +46,7 @@
             </div>
           </div>
         </div>
-        <div class="row mb-2 align-items-center">
+        <!-- <div class="row mb-2 align-items-center">
           <div class="col-1 col-md-1">
             <span>Layout</span>
           </div>
@@ -60,7 +60,7 @@
               </label>
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="row mb-2 align-items-center">
           <div class="col-1 col-md-1">
             <span>Model</span>
diff --git a/semantic_segmentation/main.js b/semantic_segmentation/main.js
index 3bde23fb..b21c33d0 100644
--- a/semantic_segmentation/main.js
+++ b/semantic_segmentation/main.js
@@ -47,8 +47,15 @@ $(window).on('load', () => {
   loadRenderUI();
 });
 
-$('#backendBtns .btn').on('change', async () => {
+$('#backendBtns .btn').on('change', async (e) => {
   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+  if ($(e.target).attr('id').indexOf('cpu') != -1) {
+    layout = 'nhwc';
+  } else if (($(e.target).attr('id').indexOf('gpu') != -1)) {
+    layout = 'nchw';
+  } else {
+    throw new Error('Unknown backend');
+  }
   await main();
 });
 
@@ -58,11 +65,11 @@ $('#modelBtns .btn').on('change', async (e) => {
   await main();
 });
 
-$('#layoutBtns .btn').on('change', async (e) => {
-  layout = $(e.target).attr('id');
-  if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
-  await main();
-});
+// $('#layoutBtns .btn').on('change', async (e) => {
+//   layout = $(e.target).attr('id');
+//   if (inputType === 'camera') utils.stopCameraStream(rafReq, stream);
+//   await main();
+// });
 
 // Click trigger to do inference with <img> element
 $('#img').click(async () => {