Merge pull request #19 from PaskalSunari/ML-Patch-2

Ml patch 2
6 days ago · 0a559fc9ec
parent e042b3cdad aa6a62cab9
commit 0a559fc9ec
1 changed files with 102 additions and 0 deletions
--- a/4-Classification/4-Applied/index.html
+++ b/4-Classification/4-Applied/index.html
@ -0,0 +1,102 @@
+<!--
+D:\AI\MachineLearning\ML-For-Beginners\4-Classification\4-Applied>python -m http.server 8000
+Acces in th broser: http://localhost:8000/
+online netron to onnx file: https://netron.app/
+-->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Cuisine Matcher</title>
+        <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script>
+    </head>
+    <body>
+        <h1>Check your refrigerator. What can you create?</h1>
+        <div id="wrapper">
+            <div class="boxCont">
+                <input type="checkbox" value="4" class="checkbox">
+                <label>apple</label>
+            </div>
+        
+            <div class="boxCont">
+                <input type="checkbox" value="247" class="checkbox">
+                <label>pear</label>
+            </div>
+        
+            <div class="boxCont">
+                <input type="checkbox" value="77" class="checkbox">
+                <label>cherry</label>
+            </div>
+
+            <div class="boxCont">
+                <input type="checkbox" value="126" class="checkbox">
+                <label>fenugreek</label>
+            </div>
+
+            <div class="boxCont">
+                <input type="checkbox" value="302" class="checkbox">
+                <label>sake</label>
+            </div>
+
+            <div class="boxCont">
+                <input type="checkbox" value="327" class="checkbox">
+                <label>soy sauce</label>
+            </div>
+
+            <div class="boxCont">
+                <input type="checkbox" value="112" class="checkbox">
+                <label>cumin</label>
+            </div>
+        </div>
+        <div style="padding-top:10px">
+            <button onClick="startInference()">What kind of cuisine can you make?</button>
+        </div> 
+    </body>
+</html>
+<script>
+    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');
+
+            const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
+            const feeds = { float_input: input };
+
+            // feed inputs and run
+            const results = await session.run(feeds);
+
+            // read from results
+            alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
+
+        } catch (e) {
+            console.log(`failed to inference ONNX model`);
+            console.error(e);
+        }
+    }
+           
+</script>