web/index.html

<!DOCTYPE html>
<html>
    <header>
        <title>ONNX Runtime JavaScript examples: Quick Start - Web (using script tag)</title>
    </header>
    <body>
        <button id="start-test">Start Test</button>
        <p id="output"></p>
        <!-- import ONNXRuntime Web from CDN -->
        <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
        <script>
            async function setupButtons() {
                let test_button = document.querySelector("#start-test");

                test_button.addEventListener('click', async function() {
                    main();
                });
            }
            // use an async context to call onnxruntime functions.
            async function main() {
                try {
                    // create a new session and load the specific model.
                    //
                    // the model in this example contains a single MatMul node
                    // it has 2 inputs: 'a'(float32, 3x4) and 'b'(float32, 4x3)
                    // it has 1 output: 'c'(float32, 3x3)
                    const session = await ort.InferenceSession.create('./spoter.onnx');

                    // Number of frames
                    const N = 100

                    // prepare inputs. a tensor need its corresponding TypedArray as data
                    const dataA = new Float32Array(108 * N);
                    dataA.fill(0.4);
                    // const dataB = Float32Array.from([10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]);
                    const tensorA = new ort.Tensor('float32', dataA, [1, N, 54, 2]);
                    console.log(tensorA);

                    // prepare feeds. use model input names as keys.
                    const feeds = { input: tensorA };

                    // feed inputs and run
                    startTime = new Date();
                    const results = await session.run(feeds);
                    // read from results
                    const dataC = results.output.data;
                    endTime = new Date();
                    let output = document.querySelector("#output");

                    var timeDiff = endTime - startTime; //in ms
                    output.innerText = `Data of result tensor 'output':\n ${dataC}` + "\nInference took " + timeDiff + " ms";

                } catch (e) {
                    let output = document.querySelector("#output");
                    output.innerText = `failed to inference ONNX model: ${e}.`;
                }
            }
            setupButtons();
        </script>
    </body>
</html>