File size: 4,926 Bytes
941e8f6 e878c7f 941e8f6 | 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 | <!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>
|