Jen Looper
3 years ago
parent
2cb0e4ed02
commit
1e51787039
@ -1,36 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<header>
|
||||
<title>ONNX Runtime JavaScript examples: Quick Start - Web (using script tag)</title>
|
||||
<title>Recipe 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>
|
||||
|
||||
<button onClick="startInference()">What kind of cuisine can you make?</button>
|
||||
|
||||
<!-- 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>
|
||||
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.
|
||||
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 {
|
||||
// create a new session and load the specific model.
|
||||
//
|
||||
const session = await ort.InferenceSession.create('./model.onnx');
|
||||
|
||||
const session = await ort.InferenceSession.create('./model2.onnx');
|
||||
|
||||
const input = new ort.Tensor(new Float32Array([5, 10, 15, 20, 25, 30, 23, 35, 50, 200]), [1, 10]);
|
||||
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
|
||||
const output = JSON.stringify(results);
|
||||
document.write(`data of result tensor 'c': ${output}`);
|
||||
alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
|
||||
|
||||
} catch (e) {
|
||||
document.write(`failed to inference ONNX model: ${e}.`);
|
||||
console.log(`failed to inference ONNX model: ${e}.`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
main();
|
||||
init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue