| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Semantic KG Diff </title> |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22><rect width=%2232%22 height=%2232%22 rx=%227%22 fill=%22%230b0d12%22/><text x=%2216%22 y=%2221%22 font-family=%22monospace%22 font-size=%2216%22 fill=%22%232fc794%22 text-anchor=%22middle%22>±</text></svg>"> |
| <link rel="stylesheet" href="static/css/style.css"> |
| </head> |
| <body id="top"> |
|
|
| <section class="section" id="demo" style="border-bottom:none; padding-top:48px;"> |
| <div class="wrap"> |
| <div class="section-head" data-reveal> |
| <p class="eyebrow">Semantic Knowledge Graphs</p> |
| <h2>Compare two document versions, see exactly what changed.</h2> |
| <p>Loads instantly with a real diff computed from this project's own sample documents. Add a Groq API key below to run it on your own text instead.</p> |
| </div> |
|
|
| <div class="demo-shell" data-reveal> |
| <div class="demo-toprow"> |
| <div class="status" id="demo-status"> |
| <span class="status-dot"></span> |
| <span class="status-text">Loading sample diff…</span> |
| </div> |
| </div> |
|
|
| <div class="doc-grid"> |
| <div class="doc-panel v1"> |
| <div class="doc-head"><span>baseline — v1</span><span>●</span></div> |
| <textarea id="input-v1" spellcheck="false"></textarea> |
| </div> |
| <div class="doc-panel v2"> |
| <div class="doc-head"><span>updated — v2</span><span>●</span></div> |
| <textarea id="input-v2" spellcheck="false"></textarea> |
| </div> |
| </div> |
|
|
| <div class="adv-toggle" id="adv-toggle">+ use your own Groq API key</div> |
| <div class="adv-panel" id="adv-panel"> |
| <div> |
| <label for="input-apikey">Groq API key</label> |
| <input type="text" id="input-apikey" placeholder="gsk_..." autocomplete="off"> |
| </div> |
| <p class="note">The browser can't call Groq directly — it POSTs to this project's own Flask endpoint (<code style="color:var(--text-dim);">/api/diff</code>), which calls Groq server-side. That only works while you're running <code style="color:var(--text-dim);">python app.py</code> locally with this key. Without one, you're looking at a real diff too — just the bundled sample, computed offline with the same set-difference logic as <code style="color:var(--text-dim);">compute_diff()</code>.</p> |
| </div> |
|
|
| <div class="demo-actions"> |
| <button class="btn btn-primary" id="run-diff-btn">Run semantic diff</button> |
| <button class="btn btn-ghost btn-sm" id="reset-sample-btn">Reset to sample text</button> |
| </div> |
|
|
| <div class="demo-results hidden" id="demo-results"> |
| <div class="console" style="margin:28px 0 22px;"> |
| <div class="console-bar"><span>semantic-diff — output</span><span>v1 → v2</span></div> |
| <div class="console-body" id="demo-console"></div> |
| </div> |
|
|
| <div class="graphs-grid"> |
| <div class="graph-pane"> |
| <div class="gp-head"><span>baseline — v1</span><span>drag nodes</span></div> |
| <svg id="graph-v1"></svg> |
| </div> |
| <div class="graph-pane"> |
| <div class="gp-head"><span>updated — v2</span><span>drag nodes</span></div> |
| <svg id="graph-v2"></svg> |
| </div> |
| </div> |
|
|
| <div class="legend"> |
| <div class="legend-item"><span class="legend-swatch" style="background:var(--neu);"></span> unchanged</div> |
| <div class="legend-item"><span class="legend-swatch" style="background:var(--add);"></span> added</div> |
| <div class="legend-item"><span class="legend-swatch" style="background:var(--rem);"></span> removed</div> |
| </div> |
|
|
| <div class="stat-grid"> |
| <div class="stat-card add"><div class="n" id="stat-add">0</div><div class="l">added entities</div></div> |
| <div class="stat-card rem"><div class="n" id="stat-rem">0</div><div class="l">removed entities</div></div> |
| <div class="stat-card add"><div class="n" id="stat-add-rel">0</div><div class="l">added relations</div></div> |
| <div class="stat-card rem"><div class="n" id="stat-rem-rel">0</div><div class="l">removed relations</div></div> |
| </div> |
|
|
| <div class="summary-panel"> |
| <p class="eyebrow" style="margin-bottom:8px;">ai summary</p> |
| <p id="summary-text"></p> |
| </div> |
|
|
| <details class="json-toggle"> |
| <summary>View raw diff JSON</summary> |
| <pre class="code-block" id="json-output"></pre> |
| </details> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script> |
| <script src="static/js/demo-data.js"></script> |
| <script src="static/js/app.js"></script> |
| </body> |
| </html> |
|
|
