| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Inspector</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <header class="app-header"> |
| <div class="brand"> |
| <div> |
| <h1>Inspector</h1> |
| </div> |
| </div> |
| <div class="header-actions"> |
| <button id="theme-toggle" class="btn btn-ghost" title="Toggle light/dark">◐</button> |
| <button id="compare-toggle" class="btn btn-ghost" title="Compare two architectures">⇄ Compare</button> |
| <button id="collapse-all" class="btn btn-ghost">Collapse repeats</button> |
| <button id="expand-all" class="btn btn-ghost">Expand repeats</button> |
| <button id="reset-layout" class="btn btn-ghost">Reset layout</button> |
| <button id="fit-btn" class="btn">Fit</button> |
| </div> |
| </header> |
|
|
| <div class="layout"> |
| |
| <aside class="sidebar"> |
| <section class="panel"> |
| <h2>Architecture</h2> |
| <select id="arch-select" class="select"></select> |
| <p id="arch-facts" class="note facts"></p> |
| <div id="capability-chips" class="cap-chips sidebar-chips"></div> |
| <p id="manifest-note" class="note"></p> |
| <p id="modularity-note" class="note modularity"></p> |
| </section> |
|
|
| <section class="panel"> |
| <h2>Config</h2> |
| <label class="field-label">Hub checkpoint using this architecture</label> |
| <select id="hub-select" class="select"><option value="">— loading checkpoints… —</option></select> |
| <p id="hub-note" class="note">Pick a checkpoint to load its <code>config.json</code> and resolve counts.</p> |
| <label class="field-label">config.json fields</label> |
| <textarea id="config-editor" class="code-area" spellcheck="false"></textarea> |
| <div class="row-btns"> |
| <button id="config-apply" class="btn">Apply & resolve</button> |
| <button id="config-reset" class="btn btn-ghost">Reset</button> |
| </div> |
| </section> |
| </aside> |
|
|
| |
| <main class="canvas"> |
| <svg id="graph" class="graph"></svg> |
| <div id="status" class="status"></div> |
| <div class="hint">Scroll to zoom · drag to pan · click to inspect · ⊕/⊖ to expand repeats</div> |
|
|
| |
| <div id="spec-panel" class="spec-panel"> |
| <div class="spec-row"> |
| <span class="spec-label">Spec</span> |
| <div class="spec-seg" id="spec-seg"> |
| <button class="spec-btn" data-spec="1" title="Structure — components, edges, dataflow">1</button> |
| <button class="spec-btn" data-spec="2" title="+ Capabilities — backends, schedule, kernels, TP">2</button> |
| <button class="spec-btn active" data-spec="3" title="+ Modularity — extends, patches, comparison (full)">3</button> |
| </div> |
| </div> |
| <label class="spec-toggle"><input type="checkbox" id="opt-tp" checked /> Tensor parallel</label> |
| <label class="spec-toggle"><input type="checkbox" id="opt-kernels" checked /> Kernels</label> |
| </div> |
|
|
| |
| <div id="compare-view" class="compare-view"> |
| <div class="cmp-bar"> |
| <span class="cmp-a-label" id="cmp-a-label"></span> |
| <span class="cmp-vs">with</span> |
| <select id="cmp-b" class="select"></select> |
| <span id="cmp-shared-note" class="cmp-shared-note"></span> |
| <button id="cmp-mode" class="btn btn-ghost" title="Merged union vs side-by-side">Merged</button> |
| <button id="cmp-fit" class="btn btn-ghost">Fit</button> |
| </div> |
| <div class="cmp-graphs"> |
| <div class="cmp-pane"> |
| <div class="cmp-pane-h" id="cmp-a-title"></div> |
| <svg id="cmp-graph-a" class="graph"></svg> |
| </div> |
| <div class="cmp-pane"> |
| <div class="cmp-pane-h" id="cmp-b-title"></div> |
| <svg id="cmp-graph-b" class="graph"></svg> |
| </div> |
| <div class="cmp-pane cmp-pane-merged"> |
| <div class="cmp-pane-h"><span id="cmp-merge-legend" class="cmp-merge-legend"></span></div> |
| <svg id="cmp-graph-merged" class="graph"></svg> |
| </div> |
| </div> |
| <div id="compare-body" class="compare-body"></div> |
| </div> |
| </main> |
|
|
| |
| <aside class="inspector"> |
| <h2>Details</h2> |
| <div id="inspector-body" class="inspector-body"> |
| <div class="insp-empty">Select a component to inspect it.</div> |
| </div> |
| </aside> |
| </div> |
|
|
| <script type="module" src="js/app.js"></script> |
| </body> |
| </html> |
|
|
