Jen Looper
4 years ago
parent
2cb0e4ed02
commit
1e51787039
@ -1,36 +1,105 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<header>
|
<header>
|
||||||
<title>ONNX Runtime JavaScript examples: Quick Start - Web (using script tag)</title>
|
<title>Recipe Matcher</title>
|
||||||
</header>
|
</header>
|
||||||
<body>
|
<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>
|
||||||
|
|
||||||
|
<button onClick="startInference()">What kind of cuisine can you make?</button>
|
||||||
|
|
||||||
<!-- import ONNXRuntime Web from CDN -->
|
<!-- import ONNXRuntime Web from CDN -->
|
||||||
<!--script src="./dist/ort.min.js"></script-->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.8.0-dev.20210608.0/dist/ort.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.8.0-dev.20210608.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 checks = [].slice.call(document.querySelectorAll('.checkbox'));
|
||||||
|
|
||||||
// use an async context to call onnxruntime functions.
|
// use an async context to call onnxruntime functions.
|
||||||
async function main() {
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function startInference() {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// create a new session and load the specific model.
|
// create a new session and load the specific model.
|
||||||
//
|
//
|
||||||
const session = await ort.InferenceSession.create('./model.onnx');
|
|
||||||
|
|
||||||
const input = new ort.Tensor(new Float32Array([5, 10, 15, 20, 25, 30, 23, 35, 50, 200]), [1, 10]);
|
const session = await ort.InferenceSession.create('./model2.onnx');
|
||||||
|
|
||||||
|
const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
|
||||||
const feeds = { float_input: input };
|
const feeds = { float_input: input };
|
||||||
|
|
||||||
// feed inputs and run
|
// feed inputs and run
|
||||||
const results = await session.run(feeds);
|
const results = await session.run(feeds);
|
||||||
|
|
||||||
// read from results
|
// read from results
|
||||||
const output = JSON.stringify(results);
|
alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
|
||||||
document.write(`data of result tensor 'c': ${output}`);
|
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
document.write(`failed to inference ONNX model: ${e}.`);
|
console.log(`failed to inference ONNX model: ${e}.`);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
init();
|
||||||
|
|
||||||
main();
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Binary file not shown.
Loading…
Reference in new issue