index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>WGPU Slicer</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.png">
</head>

<body>
    <script type="module">
        import init, { add_file } from './wasm_rend.js';

        function loadFile(file) {
            let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = () => {
                let arrayBuffer = reader.result;
                let bytes = new Uint8Array(arrayBuffer);
                add_file(bytes);
            }
        }
        function initSetup(state) {
            const canvas = document.getElementById("wgpu_canvas");
            canvas.oncontextmenu = function (e) {
                e.preventDefault();
            };
            const input = document.getElementById("file-input");
            input.onchange = e => {
                const file = e.target.files[0];
                loadFile(file);
            }
        }

        init().then((wasm) => {
            initSetup();
        });
    </script>
    <input id="file-input" type="file">
    <canvas id="wgpu_canvas" width="1280" height="720"></canvas>
    <div id="event_logger_container">
        <h2>Event Log</h2>
        <ul id="event_logger">
            ...
        </ul>
    </div>
</body>

</html>