Create graph_canvas_patch.py

dvnc_ai_v2_hf/graph_canvas_patch.py

@@ -0,0 +1,977 @@
+import html
+import json
+import re
+from typing import Any, Dict, List
+
+
+TYPE_STYLES = {
+    "topic": {"color": "#38bdf8", "size": 12, "label": "Topic"},
+    "query": {"color": "#38bdf8", "size": 12, "label": "Topic"},
+    "paper": {"color": "#34d399", "size": 9, "label": "Paper"},
+    "uploadedpdf": {"color": "#f59e0b", "size": 10, "label": "Uploaded PDF"},
+    "upload": {"color": "#f59e0b", "size": 10, "label": "Uploaded PDF"},
+    "concept": {"color": "#a78bfa", "size": 7, "label": "Concept"},
+    "author": {"color": "#f472b6", "size": 6, "label": "Author"},
+    "reference": {"color": "#94a3b8", "size": 6, "label": "Reference"},
+    "claim": {"color": "#fb7185", "size": 7, "label": "Claim"},
+    "frontierpaper": {"color": "#fde047", "size": 8, "label": "Frontier Paper"},
+    "frontier": {"color": "#fde047", "size": 8, "label": "Frontier Paper"},
+}
+
+
+def _safe_text(x: Any, default: str = "") -> str:
+    return html.escape(str(x if x is not None else default))
+
+
+def _norm_text(x: Any) -> str:
+    return re.sub(r"\s+", " ", str(x or "")).strip()
+
+
+def _truncate(text: str, limit: int = 120) -> str:
+    text = _norm_text(text)
+    return text if len(text) <= limit else text[: limit - 1].rstrip() + "…"
+
+
+def _as_dict(payload: Any) -> Dict[str, Any]:
+    if payload is None:
+        return {"status": "empty", "nodes": [], "edges": []}
+    if isinstance(payload, dict):
+        return payload
+    if isinstance(payload, str):
+        try:
+            parsed = json.loads(payload)
+            if isinstance(parsed, dict):
+                return parsed
+        except Exception:
+            pass
+    return {"status": "empty", "nodes": [], "edges": []}
+
+
+def _style_for(kind: str) -> Dict[str, Any]:
+    key = _norm_text(kind).lower().replace(" ", "")
+    return TYPE_STYLES.get(key, {"color": "#cbd5e1", "size": 6, "label": _norm_text(kind or "Node") or "Node"})
+
+
+def _normalize_payload(payload: Any, title: str) -> Dict[str, Any]:
+    raw = _as_dict(payload)
+    raw_nodes = raw.get("nodes", []) or []
+    raw_edges = raw.get("edges", raw.get("links", [])) or []
+
+    nodes: List[Dict[str, Any]] = []
+    seen = set()
+
+    for i, node in enumerate(raw_nodes):
+        if not isinstance(node, dict):
+            continue
+        node_id = _norm_text(node.get("id") or f"node_{i}")
+        if not node_id or node_id in seen:
+            continue
+        seen.add(node_id)
+
+        kind = _norm_text(node.get("kind") or node.get("type") or "paper")
+        style = _style_for(kind)
+        label = _truncate(node.get("label") or node.get("title") or node_id, 120)
+
+        nodes.append({
+            "id": node_id,
+            "label": label,
+            "kind": kind or "paper",
+            "color": style["color"],
+            "size": float(node.get("size") or style["size"]),
+            "detail": {
+                "type": style["label"],
+                "label": label,
+                "title": _norm_text(node.get("title") or node.get("label") or node_id),
+                "venue": _norm_text(node.get("venue")),
+                "year": _norm_text(node.get("year")),
+                "doi": _norm_text(node.get("doi")),
+                "source": _norm_text(node.get("source")),
+                "authors_text": _norm_text(node.get("authors_text")),
+                "text": _norm_text(node.get("text")),
+            },
+        })
+
+    links: List[Dict[str, Any]] = []
+    for edge in raw_edges:
+        if not isinstance(edge, dict):
+            continue
+        src = _norm_text(edge.get("source"))
+        tgt = _norm_text(edge.get("target"))
+        if not src or not tgt or src == tgt:
+            continue
+        links.append({
+            "source": src,
+            "target": tgt,
+            "type": _norm_text(edge.get("type") or "RELATES_TO"),
+        })
+
+    counts: Dict[str, int] = {}
+    for n in nodes:
+        label = _style_for(n["kind"])["label"]
+        counts[label] = counts.get(label, 0) + 1
+
+    return {
+        "title": _norm_text(title) or "Self-Learning Knowledge Graph",
+        "nodes": nodes,
+        "links": links,
+        "counts": counts,
+    }
+
+
+def render_graph_canvas_html(payload: Any, title: str = "Self-Learning Knowledge Graph", height: int = 780) -> str:
+    data = _normalize_payload(payload, title=title)
+    payload_json = json.dumps(data, ensure_ascii=False).replace("</script>", "<\\/script>")
+
+    html_doc = r"""
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<style>
+  :root {
+    --bg0: #030712;
+    --bg1: #0b1220;
+    --bg2: #111827;
+    --panel: rgba(8, 15, 29, 0.72);
+    --panel-border: rgba(255,255,255,0.10);
+    --text: #e5eefc;
+    --muted: #a5b4cc;
+    --accent: #38bdf8;
+  }
+  * { box-sizing: border-box; }
+  html, body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 20% 20%, rgba(56,189,248,0.16), transparent 28%),
+      radial-gradient(circle at 80% 18%, rgba(167,139,250,0.12), transparent 24%),
+      linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
+    color: var(--text);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    touch-action: none;
+  }
+  #app {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  #canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: grab;
+  }
+  #canvas.dragging { cursor: grabbing; }
+
+  .hud {
+    position: absolute;
+    z-index: 10;
+    backdrop-filter: blur(10px);
+    background: var(--panel);
+    border: 1px solid var(--panel-border);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
+  }
+  .topbar {
+    top: 16px;
+    left: 16px;
+    width: min(420px, calc(100% - 32px));
+    border-radius: 16px;
+    padding: 14px 16px;
+  }
+  .topbar h3 {
+    margin: 0 0 6px;
+    font-size: 18px;
+    line-height: 1.2;
+    color: #f8fbff;
+  }
+  .topbar p {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--muted);
+  }
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    line-height: 1;
+    color: #dbeafe;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.06);
+  }
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    flex: 0 0 10px;
+  }
+
+  .details {
+    right: 16px;
+    bottom: 16px;
+    width: min(360px, calc(100% - 32px));
+    max-height: min(48%, 360px);
+    overflow: auto;
+    border-radius: 16px;
+    padding: 14px 16px;
+  }
+  .details h4 {
+    margin: 0 0 8px;
+    font-size: 14px;
+    color: #f8fbff;
+  }
+  .details p {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--muted);
+  }
+  .details dl {
+    margin: 12px 0 0;
+    display: grid;
+    grid-template-columns: 78px 1fr;
+    gap: 8px 10px;
+    font-size: 12px;
+  }
+  .details dt {
+    color: #93c5fd;
+    font-weight: 600;
+  }
+  .details dd {
+    margin: 0;
+    color: #e5eefc;
+    word-break: break-word;
+  }
+
+  .statusbar {
+    position: absolute;
+    left: 16px;
+    bottom: 16px;
+    z-index: 10;
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .status {
+    padding: 8px 10px;
+    border-radius: 12px;
+    font-size: 11px;
+    color: #dbeafe;
+    background: rgba(8, 15, 29, 0.66);
+    border: 1px solid rgba(255,255,255,0.08);
+    backdrop-filter: blur(8px);
+  }
+
+  .empty {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    pointer-events: none;
+  }
+  .empty.show { display: flex; }
+  .empty-card {
+    width: min(520px, calc(100% - 32px));
+    text-align: center;
+    padding: 24px 28px;
+    border-radius: 20px;
+    background: rgba(8, 15, 29, 0.66);
+    border: 1px solid rgba(255,255,255,0.08);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 16px 40px rgba(0,0,0,0.34);
+  }
+  .empty-card h3 {
+    margin: 0 0 10px;
+    font-size: 22px;
+  }
+  .empty-card p {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.55;
+  }
+
+  @media (max-width: 700px) {
+    .topbar {
+      width: calc(100% - 20px);
+      left: 10px;
+      top: 10px;
+      padding: 12px;
+    }
+    .details {
+      width: calc(100% - 20px);
+      right: 10px;
+      bottom: 10px;
+      max-height: 34%;
+      padding: 12px;
+    }
+    .statusbar {
+      left: 10px;
+      bottom: calc(34% + 22px);
+      right: 10px;
+    }
+  }
+</style>
+</head>
+<body>
+<div id="app">
+  <canvas id="canvas"></canvas>
+
+  <div class="hud topbar">
+    <h3 id="title"></h3>
+    <p>Drag background to rotate, mouse wheel or trackpad pinch to zoom, two-finger pinch on touch screens, Shift-drag or right-drag to pan, and drag a node to move it in 3D space.</p>
+    <div class="legend" id="legend"></div>
+  </div>
+
+  <div class="hud details" id="details">
+    <h4>Node details</h4>
+    <p>Tap or click a node to inspect it.</p>
+  </div>
+
+  <div class="statusbar" id="statusbar"></div>
+
+  <div class="empty" id="empty">
+    <div class="empty-card">
+      <h3>No graph data yet</h3>
+      <p>Ingest papers or pass a payload containing nodes and edges. This renderer accepts the existing graph payload shape directly.</p>
+    </div>
+  </div>
+</div>
+
+<script>
+const DATA = __DATA__;
+
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d", { alpha: true });
+const titleEl = document.getElementById("title");
+const detailsEl = document.getElementById("details");
+const legendEl = document.getElementById("legend");
+const statusbarEl = document.getElementById("statusbar");
+const emptyEl = document.getElementById("empty");
+
+titleEl.textContent = DATA.title || "Self-Learning Knowledge Graph";
+
+const legendMap = [
+  ["Topic", "#38bdf8"],
+  ["Paper", "#34d399"],
+  ["Uploaded PDF", "#f59e0b"],
+  ["Concept", "#a78bfa"],
+  ["Author", "#f472b6"],
+  ["Reference", "#94a3b8"],
+  ["Claim", "#fb7185"],
+  ["Frontier Paper", "#fde047"]
+];
+
+legendMap.forEach(([label, color]) => {
+  const chip = document.createElement("div");
+  chip.className = "chip";
+  chip.innerHTML = `<span class="dot" style="background:${color}"></span>${label}`;
+  legendEl.appendChild(chip);
+});
+
+function addStatus(text) {
+  const el = document.createElement("div");
+  el.className = "status";
+  el.textContent = text;
+  statusbarEl.appendChild(el);
+}
+
+addStatus(`Nodes: ${DATA.nodes.length}`);
+addStatus(`Edges: ${DATA.links.length}`);
+
+Object.entries(DATA.counts || {}).forEach(([k, v]) => addStatus(`${k}: ${v}`));
+
+if (!DATA.nodes.length) {
+  emptyEl.classList.add("show");
+}
+
+function hashCode(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = ((h << 5) - h) + str.charCodeAt(i);
+    h |= 0;
+  }
+  return Math.abs(h);
+}
+
+function seededFloat(key, salt) {
+  const h = hashCode(key + "|" + salt);
+  return (h % 10000) / 10000;
+}
+
+const nodes = DATA.nodes.map((n, i) => {
+  const r1 = seededFloat(n.id, "x");
+  const r2 = seededFloat(n.id, "y");
+  const r3 = seededFloat(n.id, "z");
+  const radius = 120 + (i % 7) * 18 + (n.size || 6) * 2;
+  const theta = r1 * Math.PI * 2;
+  const phi = (r2 - 0.5) * Math.PI;
+
+  return {
+    ...n,
+    x: Math.cos(theta) * Math.cos(phi) * radius,
+    y: Math.sin(phi) * radius * 0.72,
+    z: Math.sin(theta) * Math.cos(phi) * radius,
+    vx: 0,
+    vy: 0,
+    vz: 0,
+    fx: null,
+    fy: null,
+    fz: null,
+    screenX: 0,
+    screenY: 0,
+    screenR: 0,
+    depth: 0
+  };
+});
+
+const nodeById = new Map(nodes.map(n => [n.id, n]));
+
+const links = DATA.links
+  .map(l => ({
+    ...l,
+    sourceRef: nodeById.get(l.source),
+    targetRef: nodeById.get(l.target)
+  }))
+  .filter(l => l.sourceRef && l.targetRef);
+
+const state = {
+  width: 0,
+  height: 0,
+  dpr: Math.max(1, Math.min(2, window.devicePixelRatio || 1)),
+  cx: 0,
+  cy: 0,
+  yaw: 0.65,
+  pitch: 0.25,
+  zoom: 1.0,
+  panX: 0,
+  panY: 0,
+  perspective: 940,
+  cameraZ: 860,
+  hovered: null,
+  selected: null,
+  draggingNode: null,
+  draggingBackground: false,
+  panMode: false,
+  lastX: 0,
+  lastY: 0,
+  raf: null,
+  lastTouchDist: 0,
+  lastTouchCenter: null
+};
+
+function resize() {
+  const rect = canvas.getBoundingClientRect();
+  state.width = rect.width;
+  state.height = rect.height;
+  state.cx = rect.width / 2;
+  state.cy = rect.height / 2;
+  canvas.width = Math.floor(rect.width * state.dpr);
+  canvas.height = Math.floor(rect.height * state.dpr);
+  ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0);
+}
+resize();
+window.addEventListener("resize", resize);
+
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+
+function rotatePoint(x, y, z) {
+  const cy = Math.cos(state.yaw);
+  const sy = Math.sin(state.yaw);
+  const cp = Math.cos(state.pitch);
+  const sp = Math.sin(state.pitch);
+
+  const x1 = x * cy - z * sy;
+  const z1 = x * sy + z * cy;
+
+  const y2 = y * cp - z1 * sp;
+  const z2 = y * sp + z1 * cp;
+
+  return { x: x1, y: y2, z: z2 };
+}
+
+function projectNode(n) {
+  const p = rotatePoint(n.x, n.y, n.z);
+  const depth = state.cameraZ - p.z;
+  const scale = (state.perspective / Math.max(120, depth)) * state.zoom;
+  n.depth = p.z;
+  n.screenX = state.cx + state.panX + p.x * scale;
+  n.screenY = state.cy + state.panY + p.y * scale;
+  n.screenR = clamp((n.size || 6) * scale * 0.85, 4, 22);
+  n._scale = scale;
+}
+
+function setDetails(n) {
+  if (!n) {
+    detailsEl.innerHTML = `
+      <h4>Node details</h4>
+      <p>Tap or click a node to inspect it.</p>
+    `;
+    return;
+  }
+  const d = n.detail || {};
+  detailsEl.innerHTML = `
+    <h4>Node details</h4>
+    <dl>
+      <dt>Label</dt><dd>${escapeHtml(n.label || "")}</dd>
+      <dt>Type</dt><dd>${escapeHtml(d.type || n.kind || "")}</dd>
+      <dt>Title</dt><dd>${escapeHtml(d.title || "—")}</dd>
+      <dt>Venue</dt><dd>${escapeHtml(d.venue || "—")}</dd>
+      <dt>Year</dt><dd>${escapeHtml(d.year || "—")}</dd>
+      <dt>DOI</dt><dd>${escapeHtml(d.doi || "—")}</dd>
+      <dt>Source</dt><dd>${escapeHtml(d.source || "—")}</dd>
+      <dt>Authors</dt><dd>${escapeHtml(d.authors_text || "—")}</dd>
+      <dt>Text</dt><dd>${escapeHtml(d.text || "—")}</dd>
+    </dl>
+  `;
+}
+
+function escapeHtml(str) {
+  return String(str || "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function findNodeAt(x, y) {
+  const ordered = [...nodes].sort((a, b) => b.depth - a.depth);
+  for (const n of ordered) {
+    const dx = x - n.screenX;
+    const dy = y - n.screenY;
+    const rr = n.screenR + 6;
+    if (dx * dx + dy * dy <= rr * rr) {
+      return n;
+    }
+  }
+  return null;
+}
+
+function worldDeltaFromScreen(dx, dy, scale) {
+  const localX = dx / Math.max(0.2, scale);
+  const localY = dy / Math.max(0.2, scale);
+
+  const cp = Math.cos(-state.pitch);
+  const sp = Math.sin(-state.pitch);
+  const cy = Math.cos(-state.yaw);
+  const sy = Math.sin(-state.yaw);
+
+  let x1 = localX;
+  let y1 = localY * cp;
+  let z1 = localY * sp;
+
+  const wx = x1 * cy - z1 * sy;
+  const wz = x1 * sy + z1 * cy;
+
+  return { x: wx, y: y1, z: wz };
+}
+
+function stepPhysics() {
+  if (!nodes.length) return;
+
+  const nCount = nodes.length;
+  const pairStride = nCount > 120 ? 2 : 1;
+  const repulsion = 15000;
+  const spring = 0.0035;
+  const centering = 0.0008;
+  const damping = 0.90;
+
+  for (const n of nodes) {
+    n.ax = 0;
+    n.ay = 0;
+    n.az = 0;
+  }
+
+  for (let i = 0; i < nCount; i += pairStride) {
+    const a = nodes[i];
+    for (let j = i + 1; j < nCount; j += pairStride) {
+      const b = nodes[j];
+      const dx = a.x - b.x;
+      const dy = a.y - b.y;
+      const dz = a.z - b.z;
+      const d2 = dx * dx + dy * dy + dz * dz + 0.01;
+      const f = repulsion / d2;
+      const inv = 1 / Math.sqrt(d2);
+      const fx = dx * inv * f;
+      const fy = dy * inv * f;
+      const fz = dz * inv * f;
+      a.ax += fx; a.ay += fy; a.az += fz;
+      b.ax -= fx; b.ay -= fy; b.az -= fz;
+    }
+  }
+
+  for (const l of links) {
+    const a = l.sourceRef;
+    const b = l.targetRef;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const dz = b.z - a.z;
+    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) || 1;
+    const target = 80 + ((a.size || 6) + (b.size || 6)) * 3;
+    const f = (dist - target) * spring;
+    const fx = (dx / dist) * f;
+    const fy = (dy / dist) * f;
+    const fz = (dz / dist) * f;
+    a.ax += fx; a.ay += fy; a.az += fz;
+    b.ax -= fx; b.ay -= fy; b.az -= fz;
+  }
+
+  for (const n of nodes) {
+    if (state.draggingNode === n) {
+      n.vx = 0; n.vy = 0; n.vz = 0;
+      continue;
+    }
+    n.ax += -n.x * centering;
+    n.ay += -n.y * centering;
+    n.az += -n.z * centering;
+
+    n.vx = (n.vx + n.ax) * damping;
+    n.vy = (n.vy + n.ay) * damping;
+    n.vz = (n.vz + n.az) * damping;
+
+    n.x += n.vx;
+    n.y += n.vy;
+    n.z += n.vz;
+  }
+}
+
+function drawBackground() {
+  ctx.clearRect(0, 0, state.width, state.height);
+
+  const g = ctx.createRadialGradient(state.width * 0.5, state.height * 0.46, 40, state.width * 0.5, state.height * 0.46, state.width * 0.72);
+  g.addColorStop(0, "rgba(56,189,248,0.05)");
+  g.addColorStop(0.45, "rgba(99,102,241,0.03)");
+  g.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.fillStyle = g;
+  ctx.fillRect(0, 0, state.width, state.height);
+}
+
+function drawEdge(a, b, type) {
+  const depthAlpha = clamp((a._scale + b._scale) * 0.22, 0.10, 0.45);
+  const typeColor = {
+    "ABOUT": "rgba(56,189,248,ALPHA)",
+    "MENTIONS": "rgba(167,139,250,ALPHA)",
+    "WRITTEN_BY": "rgba(244,114,182,ALPHA)",
+    "CITES": "rgba(148,163,184,ALPHA)",
+    "ASSERTS": "rgba(251,113,133,ALPHA)",
+    "FRONTIER": "rgba(253,224,71,ALPHA)",
+    "FRONTIER_CANDIDATE": "rgba(253,224,71,ALPHA)",
+    "UPLOADED_SOURCE": "rgba(245,158,11,ALPHA)"
+  };
+  const c = (typeColor[type] || "rgba(203,213,225,ALPHA)").replace("ALPHA", depthAlpha.toFixed(3));
+
+  ctx.beginPath();
+  ctx.moveTo(a.screenX, a.screenY);
+  ctx.lineTo(b.screenX, b.screenY);
+  ctx.lineWidth = type === "ABOUT" || type === "UPLOADED_SOURCE" ? 2 : 1.2;
+  ctx.strokeStyle = c;
+  ctx.stroke();
+}
+
+function drawNode(n, selected, hovered) {
+  const r = n.screenR;
+  ctx.beginPath();
+  ctx.arc(n.screenX, n.screenY, r + 8, 0, Math.PI * 2);
+  const glow = ctx.createRadialGradient(n.screenX, n.screenY, 0, n.screenX, n.screenY, r + 8);
+  glow.addColorStop(0, hexToRgba(n.color, hovered || selected ? 0.28 : 0.18));
+  glow.addColorStop(1, hexToRgba(n.color, 0));
+  ctx.fillStyle = glow;
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.arc(n.screenX, n.screenY, r, 0, Math.PI * 2);
+  ctx.fillStyle = n.color;
+  ctx.fill();
+
+  ctx.lineWidth = selected ? 2.6 : hovered ? 2.0 : 1.0;
+  ctx.strokeStyle = selected ? "rgba(255,255,255,0.95)" : hovered ? "rgba(255,255,255,0.75)" : "rgba(255,255,255,0.22)";
+  ctx.stroke();
+
+  if (selected || hovered || r > 10) {
+    drawLabel(n, selected || hovered);
+  }
+}
+
+function drawLabel(n, strong) {
+  const text = n.label || n.id;
+  ctx.font = `${strong ? 700 : 600} 12px Inter, sans-serif`;
+  const padX = 8;
+  const h = 24;
+  const w = Math.min(260, ctx.measureText(text).width + padX * 2);
+  const x = n.screenX + 10;
+  const y = n.screenY - 10 - h;
+
+  roundRect(x, y, w, h, 10);
+  ctx.fillStyle = strong ? "rgba(8,15,29,0.92)" : "rgba(8,15,29,0.72)";
+  ctx.fill();
+
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = "rgba(255,255,255,0.08)";
+  ctx.stroke();
+
+  ctx.fillStyle = "#f8fbff";
+  ctx.fillText(text.length > 32 ? text.slice(0, 31) + "…" : text, x + padX, y + 16);
+}
+
+function roundRect(x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  const bigint = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+function render() {
+  drawBackground();
+
+  for (const n of nodes) {
+    projectNode(n);
+  }
+
+  const orderedLinks = [...links].sort((a, b) => {
+    const da = (a.sourceRef.depth + a.targetRef.depth) * 0.5;
+    const db = (b.sourceRef.depth + b.targetRef.depth) * 0.5;
+    return da - db;
+  });
+
+  for (const l of orderedLinks) {
+    drawEdge(l.sourceRef, l.targetRef, l.type);
+  }
+
+  const orderedNodes = [...nodes].sort((a, b) => a.depth - b.depth);
+  for (const n of orderedNodes) {
+    drawNode(n, state.selected === n, state.hovered === n);
+  }
+}
+
+function animate() {
+  stepPhysics();
+  render();
+  state.raf = requestAnimationFrame(animate);
+}
+animate();
+
+function pointerPos(evt) {
+  const rect = canvas.getBoundingClientRect();
+  return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
+}
+
+canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+
+canvas.addEventListener("mousedown", (e) => {
+  const p = pointerPos(e);
+  state.lastX = p.x;
+  state.lastY = p.y;
+  state.hovered = findNodeAt(p.x, p.y);
+  state.panMode = e.button === 2 || e.shiftKey;
+
+  if (state.hovered && e.button !== 2) {
+    state.draggingNode = state.hovered;
+    state.selected = state.hovered;
+    setDetails(state.selected);
+  } else {
+    state.draggingBackground = true;
+  }
+
+  canvas.classList.add("dragging");
+});
+
+window.addEventListener("mousemove", (e) => {
+  const rect = canvas.getBoundingClientRect();
+  const inside = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+  if (!inside && !state.draggingNode && !state.draggingBackground) return;
+
+  const p = pointerPos(e);
+  const dx = p.x - state.lastX;
+  const dy = p.y - state.lastY;
+  state.lastX = p.x;
+  state.lastY = p.y;
+
+  if (state.draggingNode) {
+    const delta = worldDeltaFromScreen(dx, dy, state.draggingNode._scale || 1);
+    state.draggingNode.x += delta.x * 1.18;
+    state.draggingNode.y += delta.y * 1.18;
+    state.draggingNode.z += delta.z * 1.18;
+    state.draggingNode.vx = 0;
+    state.draggingNode.vy = 0;
+    state.draggingNode.vz = 0;
+    return;
+  }
+
+  if (state.draggingBackground) {
+    if (state.panMode) {
+      state.panX += dx;
+      state.panY += dy;
+    } else {
+      state.yaw += dx * 0.0085;
+      state.pitch = clamp(state.pitch + dy * 0.0065, -1.25, 1.25);
+    }
+    return;
+  }
+
+  state.hovered = findNodeAt(p.x, p.y);
+});
+
+window.addEventListener("mouseup", () => {
+  state.draggingNode = null;
+  state.draggingBackground = false;
+  state.panMode = false;
+  canvas.classList.remove("dragging");
+});
+
+canvas.addEventListener("wheel", (e) => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? 0.92 : 1.09;
+  state.zoom = clamp(state.zoom * delta, 0.35, 4.0);
+}, { passive: false });
+
+canvas.addEventListener("click", (e) => {
+  const p = pointerPos(e);
+  const hit = findNodeAt(p.x, p.y);
+  if (hit) {
+    state.selected = hit;
+    setDetails(hit);
+  }
+});
+
+canvas.addEventListener("touchstart", (e) => {
+  e.preventDefault();
+  if (e.touches.length === 1) {
+    const t = e.touches[0];
+    const p = pointerPos(t);
+    state.lastX = p.x;
+    state.lastY = p.y;
+    state.hovered = findNodeAt(p.x, p.y);
+    if (state.hovered) {
+      state.draggingNode = state.hovered;
+      state.selected = state.hovered;
+      setDetails(state.selected);
+    } else {
+      state.draggingBackground = true;
+    }
+  } else if (e.touches.length === 2) {
+    state.draggingNode = null;
+    state.draggingBackground = false;
+    const a = e.touches[0];
+    const b = e.touches[1];
+    state.lastTouchDist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    state.lastTouchCenter = {
+      x: (a.clientX + b.clientX) * 0.5,
+      y: (a.clientY + b.clientY) * 0.5
+    };
+  }
+}, { passive: false });
+
+canvas.addEventListener("touchmove", (e) => {
+  e.preventDefault();
+  if (e.touches.length === 1) {
+    const t = e.touches[0];
+    const p = pointerPos(t);
+    const dx = p.x - state.lastX;
+    const dy = p.y - state.lastY;
+    state.lastX = p.x;
+    state.lastY = p.y;
+
+    if (state.draggingNode) {
+      const delta = worldDeltaFromScreen(dx, dy, state.draggingNode._scale || 1);
+      state.draggingNode.x += delta.x * 1.18;
+      state.draggingNode.y += delta.y * 1.18;
+      state.draggingNode.z += delta.z * 1.18;
+      state.draggingNode.vx = 0;
+      state.draggingNode.vy = 0;
+      state.draggingNode.vz = 0;
+    } else if (state.draggingBackground) {
+      state.yaw += dx * 0.0085;
+      state.pitch = clamp(state.pitch + dy * 0.0065, -1.25, 1.25);
+    }
+  } else if (e.touches.length === 2) {
+    const a = e.touches[0];
+    const b = e.touches[1];
+    const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    const center = {
+      x: (a.clientX + b.clientX) * 0.5,
+      y: (a.clientY + b.clientY) * 0.5
+    };
+
+    if (state.lastTouchDist) {
+      const ratio = dist / state.lastTouchDist;
+      state.zoom = clamp(state.zoom * ratio, 0.35, 4.0);
+    }
+
+    if (state.lastTouchCenter) {
+      state.panX += center.x - state.lastTouchCenter.x;
+      state.panY += center.y - state.lastTouchCenter.y;
+    }
+
+    state.lastTouchDist = dist;
+    state.lastTouchCenter = center;
+  }
+}, { passive: false });
+
+canvas.addEventListener("touchend", (e) => {
+  e.preventDefault();
+  if (e.touches.length === 0) {
+    state.draggingNode = null;
+    state.draggingBackground = false;
+    state.lastTouchDist = 0;
+    state.lastTouchCenter = null;
+  }
+}, { passive: false });
+
+setDetails(null);
+</script>
+</body>
+</html>
+"""
+
+    html_doc = html_doc.replace("__DATA__", payload_json)
+    return (
+        f'<iframe title="{_safe_text(title)}" '
+        f'style="width:100%; height:{int(height)}px; border:0; border-radius:18px; overflow:hidden; background:#030712;" '
+        f'sandbox="allow-scripts allow-same-origin" '
+        f'srcdoc="{html.escape(html_doc, quote=True)}"></iframe>'
+    )
+
+
+def render_graph_canvas_component(payload: Any, title: str = "Self-Learning Knowledge Graph", height: int = 780):
+    try:
+        import gradio as gr
+    except Exception as e:
+        raise RuntimeError(f"gradio is required for render_graph_canvas_component: {e}")
+    return gr.HTML(render_graph_canvas_html(payload, title=title, height=height))
+
+
+__all__ = [
+    "render_graph_canvas_html",
+    "render_graph_canvas_component",
+]