From 065cfe9a89d6a301f7d565fb52d94ed0da78cc8e Mon Sep 17 00:00:00 2001
From: Avarayr <7735415+avarayr@users.noreply.github.com>
Date: Sat, 1 Jan 2022 15:46:51 -0800
Subject: [PATCH] Fix and refactor Applied Classification README (#498)

* Refactored the classify-4 README to use modern ES6 javascript syntax

* Fixed the nonworking onnxruntime version

* Applied the javascript refactoring to applied classify solution
---
 4-Classification/4-Applied/README.md          |  84 ++++++---------
 .../4-Applied/solution/index.html             | 102 +++++++-----------
 2 files changed, 72 insertions(+), 114 deletions(-)

diff --git a/4-Classification/4-Applied/README.md b/4-Classification/4-Applied/README.md
index 19344e2b..ef63b2b6 100644
--- a/4-Classification/4-Applied/README.md
+++ b/4-Classification/4-Applied/README.md
@@ -219,79 +219,59 @@ You can use your model directly in a web app. This architecture also allows you
 1. First, import the [Onnx Runtime](https://www.onnxruntime.ai/):
 
     ```html
-    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.09/dist/ort.min.js"></script> 
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script> 
     ```
 
     > Onnx Runtime is used to enable running your Onnx models across a wide range of hardware platforms, including optimizations and an API to use.
 
 1. Once the Runtime is in place, you can call it:
 
-    ```javascript
+    ```html
     <script>
-        const ingredients = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+        const ingredients = Array(380).fill(0);
         
-        const checks = [].slice.call(document.querySelectorAll('.checkbox'));
-
-        // use an async context to call onnxruntime functions.
-        function init() {
-            
-            checks.forEach(function (checkbox, index) {
-                checkbox.onchange = function () {
-                    if (this.checked) {
-                        var index = checkbox.value;
-
-                        if (index !== -1) {
-                            ingredients[index] = 1;
-                        }
-                        console.log(ingredients)
-                    }
-                    else {
-                        var index = checkbox.value;
-
-                        if (index !== -1) {
-                            ingredients[index] = 0;
-                        }
-                        console.log(ingredients)
-                    }
-                }
-            })
-        }
+        const checks = [...document.querySelectorAll('.checkbox')];
+        
+        checks.forEach(check => {
+            check.addEventListener('change', function() {
+                // toggle the state of the ingredient
+                // based on the checkbox's value (1 or 0)
+                ingredients[check.value] = check.checked ? 1 : 0;
+            });
+        });
 
         function testCheckboxes() {
-                for (var i = 0; i < checks.length; i++)
-                    if (checks[i].type == "checkbox")
-                        if (checks[i].checked)
-                            return true;
-                return false;
+            // validate if at least one checkbox is checked
+            return checks.some(check => check.checked);
         }
 
         async function startInference() {
 
-            let checked = testCheckboxes()
-
-            if (checked) {
-                try {
-                    // create a new session and load the model.
-                    
-                    const session = await ort.InferenceSession.create('./model.onnx');
+            let atLeastOneChecked = testCheckboxes()
 
-                    const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
-                    const feeds = { float_input: input };
+            if (!atLeastOneChecked) {
+                alert('Please select at least one ingredient.');
+                return;
+            }
+            try {
+                // create a new session and load the model.
+                
+                const session = await ort.InferenceSession.create('./model.onnx');
 
-                    // feed inputs and run
+                const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
+                const feeds = { float_input: input };
 
-                    const results = await session.run(feeds);
+                // feed inputs and run
+                const results = await session.run(feeds);
 
-                    // read from results
-                    alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
+                // read from results
+                alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
 
-                } catch (e) {
-                    console.log(`failed to inference ONNX model: ${e}.`);
-                }
+            } catch (e) {
+                console.log(`failed to inference ONNX model`);
+                console.error(e);
             }
-            else alert("Please check an ingredient")
         }
-        init();
                
     </script>
     ```
diff --git a/4-Classification/4-Applied/solution/index.html b/4-Classification/4-Applied/solution/index.html
index 3ba07707..f9cda9bb 100644
--- a/4-Classification/4-Applied/solution/index.html
+++ b/4-Classification/4-Applied/solution/index.html
@@ -47,73 +47,51 @@
         <!-- import ONNXRuntime Web from CDN -->
         <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script>
         <script>
-            const ingredients = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-            
-            const checks = [].slice.call(document.querySelectorAll('.checkbox'));
-
-            // use an async context to call onnxruntime functions.
-            function init() {
-                
-                checks.forEach(function (checkbox, index) {
-                    checkbox.onchange = function () {
-                        if (this.checked) {
-                            var index = checkbox.value;
-
-                            if (index !== -1) {
-                                ingredients[index] = 1;
-                            }
-                            console.log(ingredients)
-                        }
-                        else {
-                            var index = checkbox.value;
-
-                            if (index !== -1) {
-                                ingredients[index] = 0;
-                            }
-                            console.log(ingredients)
-                        }
-                    }
-                })
-            }
-
-            function testCheckboxes() {
-                    for (var i = 0; i < checks.length; i++)
-                        if (checks[i].type == "checkbox")
-                            if (checks[i].checked)
-                                return true;
-                    return false;
+        const ingredients = Array(380).fill(0);
+        
+        const checks = [...document.querySelectorAll('.checkbox')];
+        
+        checks.forEach(check => {
+            check.addEventListener('change', function() {
+                // toggle the state of the ingredient
+                // based on the checkbox's value (1 or 0)
+                ingredients[check.value] = check.checked ? 1 : 0;
+            });
+        });
+
+        function testCheckboxes() {
+            // validate if at least one checkbox is checked
+            return checks.some(check => check.checked);
+        }
+
+        async function startInference() {
+
+            let atLeastOneChecked = testCheckboxes()
+
+            if (!atLeastOneChecked) {
+                alert('Please select at least one ingredient.');
+                return;
             }
+            try {
+                // create a new session and load the model.
+                
+                const session = await ort.InferenceSession.create('./model.onnx');
 
-            async function startInference() {
-
-                let checked = testCheckboxes()
-
-                if (checked) {
-
-                try {
-                    // create a new session and load the model.
-                    
-                    const session = await ort.InferenceSession.create('./model.onnx');
-
-                    const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
-                    const feeds = { float_input: input };
-
-                    // feed inputs and run
+                const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
+                const feeds = { float_input: input };
 
-                    const results = await session.run(feeds);
+                // feed inputs and run
+                const results = await session.run(feeds);
 
-                    // read from results
-                    alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
+                // read from results
+                alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
 
-                } catch (e) {
-                    console.log(`failed to inference ONNX model: ${e}.`);
-                }
-            }
-            else alert("Please check an ingredient")
-                
+            } catch (e) {
+                console.log(`failed to inference ONNX model`);
+                console.error(e);
             }
-    init();
-           
-        </script>
+        }
+               
+    </script>
     </body>
 </html>