File size: 3,661 Bytes
46a9b7a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fd80067
46a9b7a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fd80067
 
 
46a9b7a
 
 
fd80067
 
3ab7d12
 
 
 
 
 
 
 
fd80067
 
3ab7d12
fd80067
 
 
 
 
 
 
 
 
 
 
 
 
 
 
df3ff34
fd80067
df3ff34
fd80067
df3ff34
 
 
fd80067
df3ff34
46a9b7a
 
 
 
 
 
 
df3ff34
46a9b7a
df3ff34
 
46a9b7a
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Modular Model Graph</title>
    <link rel="stylesheet" href="/static/styles.css" />
  </head>
  <body>
    <div class="page">
      <header class="hero">
        <div>
          <p class="eyebrow">Transformers similarity explorer</p>
          <h1>Modular Model Graph</h1>
          <p class="subhead">
            Paste a modeling file, get a reconstruction blueprint, and compare against Transformers modules.
          </p>
        </div>
      </header>

      <section class="panel">
        <div class="panel-header">
          <h2>Input</h2>
          <div class="controls">
            <label>
              Top K
              <input id="topK" type="number" value="5" min="1" max="25" />
            </label>
            <label>
              Granularity
              <select id="granularity">
                <option value="method" selected>method</option>
                <option value="definition">definition</option>
              </select>
            </label>
            <button id="analyzeBtn">Analyze</button>
          </div>
        </div>
        <textarea id="codeInput" placeholder="Paste modeling file code here..."></textarea>
        <p id="status" class="status"></p>
        <div id="progress" class="progress is-hidden">
          <div class="progress-bar"></div>
        </div>
        <p id="indexInfo" class="status"></p>
      </section>

      <section class="action-bar">
        <button id="copyAgentReport" class="secondary-btn">Copy Agent Report</button>
        <label id="identicalLabel" class="toggle-pill">
          <input id="showIdentical" type="checkbox" />
          <span>Show identical matches</span>
        </label>
        <label class="toggle-pill">
          <input id="excludeModelInput" list="modelOptions" placeholder="Exclude model..." />
          <datalist id="modelOptions"></datalist>
        </label>
        <div id="reconstructionSummary" class="summary-pill">Run an analysis to build a blueprint.</div>
      </section>
      <div id="excludeModelList" class="chip-list"></div>

      <section class="blueprint-container">
        <aside class="blueprint-sidebar">
          <h2>Module Mapping</h2>
          <p class="helper">New component → suggested base class.</p>
          <div id="moduleList"></div>
        </aside>
        <div class="blueprint-main">
          <div class="comparison-header">
            <h2 id="activeModuleName">Select a module</h2>
            <div id="flowComparison" class="flow-display"></div>
          </div>
          <div class="code-diff-view">
            <pre id="astQuery" class="code-block">Select a module to compare.</pre>
            <pre id="astMatch" class="code-block">Select a module to compare.</pre>
          </div>
          <div class="structural-notes">
            <div>
              <p class="ast-label">Selected summary</p>
              <p id="astQuerySummary" class="ast-summary">No structural summary.</p>
            </div>
            <div>
              <p class="ast-label">Match summary</p>
              <p id="astMatchSummary" class="ast-summary">No structural summary.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="panel">
        <div class="panel-header">
          <h2>Closest Files</h2>
        </div>
        <p class="helper">Normalized by best match per definition.</p>
        <div id="overall" class="overall"></div>
      </section>
    </div>

    <script src="/static/app.js"></script>
  </body>
</html>