index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
      // a copy of this page cached from before a deploy asks for bundles the deploy removed: reload once (src/app/boot.ts)
      addEventListener('error', (e) => {
        const u = e.target && (e.target.src || e.target.href);
        if (!u || !/\/assets\//.test(u)) return;
        try { if (sessionStorage.getItem('mlipviz-stale')) return; sessionStorage.setItem('mlipviz-stale', '1'); } catch (_) { return; }
        location.reload();
      }, true);
    </script>
    <title>MLIP Visualization</title>
    <meta name="description" content="Machine-learning interatomic potentials (PET, ANI-2x, KRR/SOAP, PhysNet) running in your browser, with every forward and backward pass visualised." />
    <script>
      // the saved theme (or the system's), before the first paint; see src/viz/theme.ts
      try { const t = localStorage.getItem('mlipviz-theme'); document.documentElement.dataset.theme = t === 'light' || t === 'dark' ? t : matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; } catch (e) {}
    </script>
    <script type="module" crossorigin src="./assets/main-X5IWlUFm.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/xyz-BkjxBniX.js">
    <link rel="stylesheet" crossorigin href="./assets/xyz-CMSHb8Wz.css">
  </head>
  <body>
    <header>
      <div class="brand">MLIP<span>viz</span></div>
      <label title="The kind of model">Model <select id="kind"></select></label>
      <label title="Which trained weights (for KRR: which model it is fitted to)"><span id="variant-label">Weights</span> <select id="model"></select></label>
      <label class="file">Open model…<input id="model-files" type="file" accept=".json,.safetensors" multiple /></label>
      <label>Structure <select id="structure"></select></label>
      <label class="file">Open .xyz…<input id="xyz-file" type="file" accept=".xyz,.extxyz" /></label>
 <label id="force-mode-wrap" title="How forces are computed">Forces <select id="force-mode">
        <option value="conservative">conservative (−∂E/∂r)</option>
        <option value="direct">direct (non-conservative)</option>
        <option value="both">both, compared</option></select></label>
      <button id="rattle" title="Displace every atom a little and run a new pass">Rattle</button>
      <a class="nav" id="md-link" href="md.html" title="Molecular dynamics and diffusion Monte Carlo with this model">MD &amp; DMC →</a>
      <button id="theme" title="Theme"></button>
      <div id="status"></div>
    </header>
    <main>
      <aside id="walk">
        <div id="chapter-head"><span id="chapter-phase"></span><div id="chapter-title">Loading…</div></div>
        <div id="intro">
          <div id="intro-text"></div>
          <figure><div id="diagram"></div><figcaption>The architecture of the loaded model. Click a box to jump there; ± collapses it in 3D.</figcaption></figure>
          <p class="keys"><kbd>Space</kbd> continue · <kbd>←</kbd> <kbd>→</kbd> step · drag to pan, scroll to zoom, right-drag to rotate</p>
        </div>
        <div id="article"></div>
        <div id="model-card"></div>
      </aside>
      <section id="net">
        <div id="tooltip" hidden></div>
        <div id="loading" hidden role="status" aria-live="polite">
          <div class="loader-grid" aria-hidden="true"></div>
          <div class="loader-title"></div>
          <div class="loader-stage"></div>
          <div class="loader-bar"><i></i></div>
        </div>
        <div id="zen-count"><span id="zen-params"></span><small>parameters</small></div>
        <div id="zen-progress"><i class="f"></i><i class="b"></i></div>
        <div id="legend">
          <span><i class="sw value"></i>activation</span>
          <span><i class="sw grad"></i>gradient ∂E/∂·</span>
          <span><i class="sw weight"></i><span id="legend-weights">weights</span></span>
          <span id="legend-attn"><i class="sw attn"></i>attention</span>
        </div>
        <div id="net-buttons">
          <button id="follow" title="Camera follows the active op">Follow</button>
          <button id="overview" class="on" title="Show the whole network">Overview</button>
 <button id="weights-only" title="Show only the weights of the model">Weights</button>
          <button id="zen" title="Just the numbers, forward and backward, on a loop (Esc to leave)">Zen</button>
        </div>
          <div id="right">
            <div id="molecule"></div>
            <div id="right-text">
              <div id="graph-caption"></div>
              <div id="energies"></div>
            </div>
          </div>
      </section>

    </main>
    <footer>
      <button id="restart" title="Back to the start (Home)">⏮</button>
      <button id="prev" title="Previous op (←)">◀</button>
      <button id="play" title="Play the whole pass">▶</button>
      <button id="continue" class="primary" title="Play to the end of this step (Space)">Continue</button>
      <button id="next" title="Next op (→)">▶|</button>
      <button id="end" title="Show the whole pass (End)">⏭</button>
      <label class="speed">Speed <input id="speed" type="range" min="0" max="1" step="0.01" value="0.35" /><span id="speed-val"></span></label>
      <div id="scrub"><canvas id="timeline"></canvas><div id="scrub-label"></div></div>
    </footer>
  </body>
</html>