msb-public
/
ML-For-Beginners
mirror of https://github.com/microsoft/ML-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Fix and refactor Applied Classification README (#498)

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

* Fixed the nonworking onnxruntime version

* Applied the javascript refactoring to applied classify solution
pull/499/head
Avarayr 3 years ago committed by GitHub
parent 5cee2e2e7c
commit 065cfe9a89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 114 deletions
Show Stats Download Patch File Download Diff File

84
4-Classification/4-Applied/README.md
Unescape View File

@ -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/): 1. First, import the [Onnx Runtime](https://www.onnxruntime.ai/):
```html ```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. > 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: 1. Once the Runtime is in place, you can call it:
```javascript ```html
<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 ingredients = Array(380).fill(0);
const checks = [].slice.call(document.querySelectorAll('.checkbox')); const checks = [...document.querySelectorAll('.checkbox')];
// use an async context to call onnxruntime functions. checks.forEach(check => {
function init() { check.addEventListener('change', function() {
// toggle the state of the ingredient
checks.forEach(function (checkbox, index) { // based on the checkbox's value (1 or 0)
checkbox.onchange = function () { ingredients[check.value] = check.checked ? 1 : 0;
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() { function testCheckboxes() {
for (var i = 0; i < checks.length; i++) // validate if at least one checkbox is checked
if (checks[i].type == "checkbox") return checks.some(check => check.checked);
if (checks[i].checked)
return true;
return false;
} }
async function startInference() { async function startInference() {
let checked = testCheckboxes() let atLeastOneChecked = 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]); if (!atLeastOneChecked) {
const feeds = { float_input: input }; 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 // read from results
alert('You can enjoy ' + results.label.data[0] + ' cuisine today!') alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
} catch (e) { } catch (e) {
console.log(`failed to inference ONNX model: ${e}.`); console.log(`failed to inference ONNX model`);
} console.error(e);
} }
else alert("Please check an ingredient")
} }
init();
</script> </script>
``` ```

102
4-Classification/4-Applied/solution/index.html
Unescape View File

@ -47,73 +47,51 @@
<!-- import ONNXRuntime Web from CDN --> <!-- import ONNXRuntime Web from CDN -->
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script>
<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 ingredients = Array(380).fill(0);
const checks = [].slice.call(document.querySelectorAll('.checkbox')); const checks = [...document.querySelectorAll('.checkbox')];
// use an async context to call onnxruntime functions. checks.forEach(check => {
function init() { check.addEventListener('change', function() {
// toggle the state of the ingredient
checks.forEach(function (checkbox, index) { // based on the checkbox's value (1 or 0)
checkbox.onchange = function () { ingredients[check.value] = check.checked ? 1 : 0;
if (this.checked) { });
var index = checkbox.value; });
if (index !== -1) { function testCheckboxes() {
ingredients[index] = 1; // validate if at least one checkbox is checked
} return checks.some(check => check.checked);
console.log(ingredients) }
}
else { async function startInference() {
var index = checkbox.value;
let atLeastOneChecked = testCheckboxes()
if (index !== -1) {
ingredients[index] = 0; if (!atLeastOneChecked) {
} alert('Please select at least one ingredient.');
console.log(ingredients) return;
}
}
})
}
function testCheckboxes() {
for (var i = 0; i < checks.length; i++)
if (checks[i].type == "checkbox")
if (checks[i].checked)
return true;
return false;
} }
try {
// create a new session and load the model.
const session = await ort.InferenceSession.create('./model.onnx');
async function startInference() { const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
const feeds = { float_input: input };
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); // feed inputs and run
const results = await session.run(feeds);
// read from results // read from results
alert('You can enjoy ' + results.label.data[0] + ' cuisine today!') alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
} catch (e) { } catch (e) {
console.log(`failed to inference ONNX model: ${e}.`); console.log(`failed to inference ONNX model`);
} console.error(e);
}
else alert("Please check an ingredient")
} }
init(); }
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save