File size: 4,923 Bytes
0e55eb5 1acbf39 ab5e03a 1acbf39 ab5e03a 1acbf39 0e55eb5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!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">
<!-- Sidebar -->
<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>
<!-- Canvas -->
<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>
<!-- Spec-tier selector + feature toggles (bottom-left) -->
<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>
<!-- Comparison overlay (shown in compare mode) -->
<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>
<!-- Inspector -->
<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>
|