Spaces:
Running
Running
| <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 & 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> | |