demo.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Monotone Crescendo in WebAssembly</title>
  <style>
    :root {
      --bg-color: #0f1419;
      --text-color: #c5c5c5;
      --answer-color: #ffb44c;
    }

    body,
    html {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--bg-color);
      color: var(--text-color);
      font: 16px/1.4 "Source Serif 4", "Noto Sans KR", serif;
      font-feature-settings: "kern", "liga";
    }

    h3 {
      color: var(--answer-color);
    }

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  </style>
  <script>
    mc = {};
    const createInstance = async () => {
      const path = 'monotone_crescendo.wasm';
      const response = await fetch(path);
      const bytes = await response.arrayBuffer();
      const { instance } = await WebAssembly.instantiate(bytes, {});
      return instance;
    };

    mc.write = (string, buffer, pointer) => {
      string = `${string}\0`;
      const view = new Uint8Array(buffer, pointer, 1024);
      const encoder = new TextEncoder();

      view.set(encoder.encode(string));
    }

    mc.read = (buffer, pointer) => {
      const view = new Uint8Array(buffer, pointer, 1024);
      const length = view.findIndex(byte => byte === 0);
      const decoder = new TextDecoder();

      return decoder.decode(new Uint8Array(buffer, pointer, length));
    };

    mc.setup = async () => {
      const instance = mc.instance = await createInstance();
      mc.memory = instance.exports.memory;
      mc.alloc = instance.exports.alloc;
      mc.dealloc = instance.exports.dealloc;
      mc.callSolutionWithInput = instance.exports.call_solution_with_input;

      mc.pointer = mc.alloc();
    };

    document.addEventListener('DOMContentLoaded', async () => {
      await mc.setup();
      document.querySelector('#num').addEventListener('change', (e) => {
        mc.write(`${document.querySelector('#solution-name').value}\0${e.target.value}`, mc.memory.buffer, mc.pointer);
        mc.callSolutionWithInput(mc.pointer);
        document.querySelector('h3').innerText = mc.read(mc.memory.buffer, mc.pointer);
      });
    });
  </script>
</head>

<body>
  <h2>Monotone Crescendo</h2>
  <div>
    <label for="solution-name">Pick the solution you want to use:</label>
    <input id="solution-name" list="solution-names" />
  </div>
  <div>
    <label for="num">Please enter a binary number (press enter to get an answer):</label>
    <input id="num" type="text" />
    <h3>Answer will appear here....</h3>
  </div>

  <datalist id="solution-names">
    <option value="Cumulative">
    <option value="Prefix Sums">
    <option value="Prefix Sums w/o Redundant Zero">
  </datalist>
</body>