Add the OpenVINO.js framework

examples/image_classification/ImageClassificationExample.js

@@ -20,6 +20,9 @@ class ImageClassificationExample extends BaseCameraExample {
       case 'OpenCV.js':
         runner = new ImageClassificationOpenCVRunner();
         break;
+      case 'OpenVINO.js':
+        runner = new ImageClassificationOpenVINORunner();
+        break;
     }
     runner.setProgressHandler(updateLoadingProgressComponent);
     return runner;
@@ -34,6 +37,7 @@ class ImageClassificationExample extends BaseCameraExample {
         labelClasses = getTopClasses(output.tensor, output.labels, 3, deQuantizeParams);
         break;
       case 'OpenCV.js':
+      case 'OpenVINO.js':
         labelClasses = getTopClasses(output.tensor, output.labels, 3);
         break;
     }

examples/image_classification/ImageClassificationOpenVINORunner.js

@@ -0,0 +1,17 @@
+class ImageClassificationOpenVINORunner extends OpenVINORunner {
+  constructor() {
+    super();
+  }
+
+  /** @override */
+  _getOutputTensor = () => {
+    const postSoftmax = this._postOptions.softmax || false;
+    let outputTensor;
+    if(postSoftmax) {
+      outputTensor = softmax(this._output);
+    } else {
+      outputTensor = this._output;
+    }
+    return outputTensor;
+  };
+}

examples/image_classification/index.html

@@ -119,6 +119,15 @@
               <label id='l-opencvjsthreadssimd' for='opencvjsthreadssimd'>Threads+SIMD</label>
             </td>
           </tr>
+          <tr class="openvinojsbackend", style="display:none;">
+            <th class='text-center'>Backend</th>
+            <td>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojscpu' value='CPU'>
+              <label id='l-openvinojscpu' for='openvinojscpu' class='checked'>CPU</label>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojsgpu' value='GPU'>
+              <label id='l-openvinojsgpu' for='openvinojsgpu'>GPU</label>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -371,6 +380,15 @@ <h5 class="modal-title" id="modaltitle">Subgraphs Summary</h5>
     </div>
   </div>
 
+  <script>
+      try {
+        window.nodeRequire = require;
+        delete window.exports;
+        delete window.module;
+      } catch(e) {
+        console.log("Node module is not supported");
+      }
+  </script>
   <script src='../static/lib/jquery/jquery.min.js'></script>
   <script src='../static/lib/jquery/jquery-migrate-3.0.1.min.js'></script>
   <script src='../static/lib/superfish/superfish.min.js'></script>
@@ -390,6 +408,7 @@ <h5 class="modal-title" id="modaltitle">Subgraphs Summary</h5>
   <script src='../util/BaseRunner.js'></script>
   <script src='../util/WebNNRunner.js'></script>
   <script src='../util/OpenCVRunner.js'></script>
+  <script src='../util/OpenVINORunner.js'></script>
   <script src='../util/BaseApp.js'></script>
   <script src='../util/BaseExample.js'></script>
   <script src='../util/BaseCameraExample.js'></script>
@@ -408,6 +427,7 @@ <h5 class="modal-title" id="modaltitle">Subgraphs Summary</h5>
   <script src='../util/caffe2/Caffe2ModelUtils.js'></script>
   <script src='../util/caffe2/Caffe2ModelImporter.js'></script>
   <script src='ImageClassificationOpenCVRunner.js'></script>
+  <script src='ImageClassificationOpenVINORunner.js'></script>
   <script src='ImageClassificationExample.js'></script>
   <script src='main.js'></script>
 

examples/image_classification/main.js

@@ -1,6 +1,7 @@
 const example = new ImageClassificationExample({model: imageClassificationModels});
 
 let specialoffer = () => {
+  //http://localhost:8080/examples/image_classification_opencv/?prefer=none&b=WASM&m=resnet50_v1_openvino&s=image&d=0&f=WebNN
   let f = parseSearchParams('f')
   let url = location.href.replace('image_classification/', 'image_classification_opencv/')
   let urlimg = url.replace('s=camera', 's=image')
@@ -27,6 +28,11 @@ $(document).ready(() => {
   $('#frameworkWebNN').click(function() {
     $('#opencvspecial').hide()
   })
+
+  $('#frameworkOpenVINOjs').click(function() {
+    $('#opencvspecial').hide()
+  })
+
 });
 
 $(window).load(() => {

examples/index.html

@@ -496,6 +496,15 @@ <h3>
     </svg>
   </a>
 
+  <script>
+    try {
+      window.nodeRequire = require;
+      delete window.exports;
+      delete window.module;
+    } catch(e) {
+      console.log("Node module is not supported");
+    }
+  </script>
   <script src='static/lib/jquery/jquery.min.js'></script>
   <script src='static/lib/jquery/jquery-migrate-3.0.1.min.js'></script>
   <script src='static/lib/superfish/superfish.min.js'></script>

examples/semantic_segmentation/SemanticSegmentationExample.js

@@ -149,6 +149,9 @@ class SemanticSegmentationExample extends BaseCameraExample {
       case 'OpenCV.js':
         runner = new SemanticSegmentationOpenCVRunner();
         break;
+      case 'OpenVINO.js':
+        runner = new SemanticSegmentationOpenVINORunner();
+        break;
     }
     runner.setProgressHandler(updateLoadingProgressComponent);
     return runner;

examples/semantic_segmentation/SemanticSegmentationOpenVINORunner.js

@@ -0,0 +1,16 @@
+class SemanticSegmentationOpenVINORunner extends OpenVINORunner {
+    constructor() {
+        super();
+    }
+
+    /** @override */
+    _getOutputTensorTypedArray = () => {
+        return Int32Array;
+    };
+
+    /** @override */
+    _getOutputTensor = () => {
+        let outputTensor = this._output;
+        return outputTensor;
+    };
+}

examples/semantic_segmentation/index.html

@@ -119,6 +119,15 @@
               <label id='l-opencvjsthreadssimd' for='opencvjsthreadssimd'>Threads+SIMD</label>
             </td>
           </tr>
+          <tr class="openvinojsbackend", style="display:none;">
+            <th class='text-center'>Backend</th>
+            <td>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojscpu' value='CPU'>
+              <label id='l-openvinojscpu' for='openvinojscpu' class='checked'>CPU</label>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojsgpu' value='GPU'>
+              <label id='l-openvinojsgpu' for='openvinojsgpu'>GPU</label>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -390,6 +399,15 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
     </div>
   </div>
 
+  <script>
+      try {
+        window.nodeRequire = require;
+        delete window.exports;
+        delete window.module;
+      } catch(e) {
+        console.log("Node module is not supported");
+      }
+  </script>
   <script src='../static/lib/jquery/jquery.min.js'></script>
   <script src='../static/lib/jquery/jquery-migrate-3.0.1.min.js'></script>
   <script src='../static/lib/superfish/superfish.min.js'></script>
@@ -411,6 +429,7 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
   <script src='../util/BaseRunner.js'></script>
   <script src='../util/WebNNRunner.js'></script>
   <script src='../util/OpenCVRunner.js'></script>
+  <script src='../util/OpenVINORunner.js'></script>
   <script src='../util/BaseApp.js'></script>
   <script src='../util/BaseExample.js'></script>
   <script src='../util/BaseCameraExample.js'></script>
@@ -436,6 +455,7 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
   <script src='SemanticSegmentationRunner.js'></script>
   <script src='SemanticSegmentationExample.js'></script>
   <script src='SemanticSegmentationOpenCVRunner.js'></script>
+  <script src='SemanticSegmentationOpenVINORunner.js'></script>
   <script src='main.js'></script>
 
 

examples/speech_commands/SpeechCommandsExample.js

@@ -33,7 +33,15 @@ class SpeechCommandsExample extends BaseMircophoneExample {
 
   /** @override */
   _createRunner = () => {
-    const runner = new WebNNRunner();
+    let runner;
+    switch (this._currentFramework) {
+      case 'WebNN':
+        runner = new WebNNRunner();
+        break;
+      case 'OpenVINO.js':
+        runner = new OpenVINORunner();
+        break;
+    }
     runner.setProgressHandler(updateLoadingProgressComponent);
     return runner;
   };

examples/speech_commands/index.html

@@ -109,6 +109,15 @@
               </div>
             </td>
           </tr>
+          <tr class="openvinojsbackend", style="display:none;">
+            <th class='text-center'>Backend</th>
+            <td>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojscpu' value='CPU'>
+              <label id='l-openvinojscpu' for='openvinojscpu' class='checked'>CPU</label>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojsgpu' value='GPU'>
+              <label id='l-openvinojsgpu' for='openvinojsgpu'>GPU</label>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -402,6 +411,16 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
       </div>
     </div>
   </div>
+
+  <script>
+      try {
+        window.nodeRequire = require;
+        delete window.exports;
+        delete window.module;
+      } catch(e) {
+        console.log("Node module is not supported");
+      }
+  </script>
   <script src='../static/lib/jquery/jquery.min.js'></script>
   <script src='../static/lib/jquery/jquery-migrate-3.0.1.min.js'></script>
   <script src='../static/lib/superfish/superfish.min.js'></script>
@@ -420,6 +439,7 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
   <script src='../util/modelZoo.js'></script>
   <script src='../util/BaseRunner.js'></script>
   <script src='../util/WebNNRunner.js'></script>
+  <script src='../util/OpenVINORunner.js'></script>
   <script src='../util/BaseApp.js'></script>
   <script src='../util/BaseExample.js'></script>
   <script src='../util/BaseMircophoneExample.js'></script>

examples/speech_recognition/SpeechRecognitionExample.js

@@ -19,7 +19,15 @@ class SpeechRecognitionExample extends BaseMircophoneExample {
 
   /** @override */
   _createRunner = () => {
-    const runner = new SpeechRecognitionRunner();
+    let runner;
+    switch (this._currentFramework) {
+      case 'WebNN':
+        runner = new SpeechRecognitionRunner();
+        break;
+      case 'OpenVINO.js':
+        runner = new SpeechRecognitionOpenVINORunner();
+        break;
+    }
     runner.setProgressHandler(updateLoadingProgressComponent);
     return runner;
   };

examples/speech_recognition/SpeechRecognitionOpenVINORunner.js

@@ -0,0 +1,22 @@
+class SpeechRecognitionOpenVINORunner extends OpenVINORunner {
+  constructor() {
+    super();
+  }
+
+  _getInputTensor = (input) => {
+    let infer_req = this._execNet.createInferRequest();
+    const input_blob = infer_req.getBlob(this._inputInfo.name());
+    const input_data = new Float32Array(input_blob.wmap());
+
+    for(let index = 0; index < input.length; index++) {
+      input_data[index] = input[index];
+    }
+    input_blob.unmap();
+    this._inferReq = infer_req;
+  };
+
+  _getOutputTensor = () => {
+    let outputTensor = this._output;
+    return outputTensor;
+  };
+}

examples/speech_recognition/index.html

@@ -109,6 +109,15 @@
               </div>
             </td>
           </tr>
+          <tr class="openvinojsbackend", style="display:none;">
+            <th class='text-center'>Backend</th>
+            <td>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojscpu' value='CPU'>
+              <label id='l-openvinojscpu' for='openvinojscpu' class='checked'>CPU</label>
+              <input type='radio' name='openvinojsbackend' class='d-none' id='openvinojsgpu' value='GPU'>
+              <label id='l-openvinojsgpu' for='openvinojsgpu'>GPU</label>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -302,6 +311,16 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
       </div>
     </div>
   </div>
+
+  <script>
+      try {
+        window.nodeRequire = require;
+        delete window.exports;
+        delete window.module;
+      } catch(e) {
+        console.log("Node module is not supported");
+      }
+  </script>
   <script src='../static/lib/jquery/jquery.min.js'></script>
   <script src='../static/lib/jquery/jquery-migrate-3.0.1.min.js'></script>
   <script src='../static/lib/superfish/superfish.min.js'></script>
@@ -320,6 +339,7 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
   <script src='../util/modelZoo.js'></script>
   <script src='../util/BaseRunner.js'></script>
   <script src='../util/WebNNRunner.js'></script>
+  <script src='../util/OpenVINORunner.js'></script>
   <script src='../util/BaseApp.js'></script>
   <script src='../util/BaseExample.js'></script>
   <script src='../util/BaseMircophoneExample.js'></script>
@@ -330,6 +350,7 @@ <h5 class='modal-title' id='modaltitle'>Subgraphs Summary</h5>
   <script src='../util/openvino/OpenVINOModelImporter.js'></script>
 
   <script src='SpeechRecognitionRunner.js'></script>
+  <script src='SpeechRecognitionOpenVINORunner.js'></script>
   <script src='SpeechRecognitionExample.js'></script>
   <script src='main.js'></script>
 

examples/static/js/ui.common.js

@@ -176,7 +176,7 @@ const singleModelTable = (modelList, category) => {
 const setModelComponents = (models, selectedModelIdStr) => {
   $('.model').remove();
   let formatTypes = [];
-
+  console.log(models);
   for (let [category, modelList] of Object.entries(models)) {
     let formats = singleModelTable(modelList, category);
     formatTypes.push(...formats);
@@ -226,6 +226,18 @@ const updateOpenCVJSBackendComponentsStyle = (selectedBackend) => {
   $('#l-opencvjs' + _selectedBackend).addClass('checked');
 };
 
+const updateOpenVINOJSBackendComponentsStyle = (selectedBackend) => {
+  const _selectedBackend = selectedBackend.toLocaleLowerCase().replace(' ', '');
+  $('.openvinojsbackend input').attr('disabled', false);
+  $('.openvinojsbackend label').removeClass('cursordefault');
+  $('#openvinojsbackend' + _selectedBackend).attr('disabled', true);
+  $('#l-openvinojsbackend' + _selectedBackend).addClass('cursordefault');
+  $('.openvinojsbackend input').removeAttr('checked');
+  $('.openvinojsbackend label').removeClass('checked');
+  $('#openvinojs' + _selectedBackend).attr('checked', 'checked');
+  $('#l-openvinojs' + _selectedBackend).addClass('checked');
+}
+
 const setPreferenceTipComponents = () => {
   if ($('#backendpolyfilltitle')) {
     $('#backendpolyfilltitle').attr('data-html', 'true')