ML-For-Beginners/4-Classification/4-Applied/solution/index.html

<!DOCTYPE html>
<html>
    <header>
        <title>Cuisine Matcher</title>
    </header>
    <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>      
        <!-- import ONNXRuntime Web from CDN -->
        <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.8.0-dev.20210608.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;
            }

            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 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: ${e}.`);
                }
            }
            else alert("Please check an ingredient")
                
            }
    init();
           
        </script>
    </body>
</html>
testing applied lesson 3 years ago			`<!DOCTYPE html>`
			`<html>`
			`<header>`
renaming classification content as 'cuisines', not recipes 3 years ago			`<title>Cuisine Matcher</title>`
testing applied lesson 3 years ago			`</header>`
			`<body>`
applied content 3 years ago			`<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>`
renaming classification content as 'cuisines', not recipes 3 years ago			`<div style="padding-top:10px">`
applied content 3 years ago			`<button onClick="startInference()">What kind of cuisine can you make?</button>`
renaming classification content as 'cuisines', not recipes 3 years ago			`</div>`
testing applied lesson 3 years ago			`<!-- import ONNXRuntime Web from CDN -->`
			`<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.8.0-dev.20210608.0/dist/ort.min.js"></script>`
			`<script>`
applied content 3 years ago			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'));`

testing applied lesson 3 years ago			`// use an async context to call onnxruntime functions.`
applied content 3 years ago			`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)`
			`}`
			`}`
			`})`
			`}`

renaming classification content as 'cuisines', not recipes 3 years ago			`function testCheckboxes() {`
			`for (var i = 0; i < checks.length; i++)`
			`if (checks[i].type == "checkbox")`
			`if (checks[i].checked)`
			`return true;`
			`return false;`
			`}`

applied content 3 years ago			`async function startInference() {`

renaming classification content as 'cuisines', not recipes 3 years ago			`let checked = testCheckboxes()`

			`if (checked) {`

testing applied lesson 3 years ago			`try {`
web app lesson 3 years ago			`// create a new session and load the model.`
applied content 3 years ago
renaming classification content as 'cuisines', not recipes 3 years ago			`const session = await ort.InferenceSession.create('./model.onnx');`
testing applied lesson 3 years ago
applied content 3 years ago			`const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);`
testing applied lesson 3 years ago			`const feeds = { float_input: input };`

			`// feed inputs and run`
web app lesson 3 years ago
testing applied lesson 3 years ago			`const results = await session.run(feeds);`

			`// read from results`
applied content 3 years ago			`alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')`
testing applied lesson 3 years ago
			`} catch (e) {`
applied content 3 years ago			console.log(`failed to inference ONNX model: ${e}.`);
testing applied lesson 3 years ago			`}`
renaming classification content as 'cuisines', not recipes 3 years ago			`}`
			`else alert("Please check an ingredient")`
applied content 3 years ago
testing applied lesson 3 years ago			`}`
applied content 3 years ago			`init();`

testing applied lesson 3 years ago			`</script>`
			`</body>`
			`</html>`