ISR

Runtime error

Zhen Ye Claude Opus 4.6 (1M context) commited on Mar 23

Commit

61c239d

1 Parent(s): 4ff16d7

feat(demo): add multi-LLM explainability graph replacing metrics tab

Replace the METRICS drawer tab with an EXPLAIN tab that renders an
interactive D3-based interpretability tree. When a track is inspected,
the frontend calls GET /inspect/explain/{job_id}/{track_id} and
visualizes the multi-LLM consensus (GPT-4o, Claude, Gemini) as a
hierarchical graph with category nodes, feature leaves, validator
badges, tooltips, and a consensus progress bar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Files changed (1) hide show

demo/index.html +354 -6

demo/index.html CHANGED Viewed

@@ -6,6 +6,9 @@
   <title>ISR Command Center</title>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   <style>
     /* ── CSS Design System ─────────────────────────────────────────── */
@@ -892,7 +895,7 @@
     /* Processing: only TRACKS tab available */
     body[data-state="processing"] .drawer-tab[data-tab="inspect"],
-    body[data-state="processing"] .drawer-tab[data-tab="metrics"] {
       opacity: 0.3;
       pointer-events: none;
     }
@@ -1765,6 +1768,70 @@
         min-width: 1280px;
       }
     }
   </style>
 </head>
 <body>
@@ -1827,7 +1894,7 @@
       <div class="drawer-tabs">
         <button class="drawer-tab active" data-tab="tracks">TRACKS</button>
         <button class="drawer-tab" data-tab="inspect">INSPECT</button>
-        <button class="drawer-tab" data-tab="metrics">METRICS</button>
       </div>
       <div id="configPanel" class="drawer-section">
         <div class="config-group">
@@ -1875,7 +1942,7 @@
       </div>
       <div id="tracksPanel" class="drawer-section"></div>
       <div id="inspectPanel" class="drawer-section hidden"></div>
-      <div id="metricsPanel" class="drawer-section hidden"></div>
     </aside>
   </main>
@@ -3160,6 +3227,7 @@
     }
     function renderMetricsPanel() {
       const panel = document.getElementById('metricsPanel');
       if (!panel) return;
@@ -3205,6 +3273,7 @@
     }
     async function computeRealMetrics(jobId, status, summary) {
       const metricsPanel = document.getElementById('metricsPanel');
       if (!metricsPanel) return;
@@ -3298,6 +3367,277 @@
         </div>`;
     }
     /* ================================================================
      *  TASK 10: Inspect State — 2x2 Quad View
      * ================================================================ */
@@ -3447,6 +3787,14 @@
         switchDrawerTab('inspect');
       }
       // Wire back button
       document.getElementById('inspectBack').addEventListener('click', exitInspectState);
@@ -4396,7 +4744,7 @@
       document.getElementById('configPanel').classList.add('hidden');
       document.getElementById('tracksPanel').classList.add('hidden');
       document.getElementById('inspectPanel').classList.add('hidden');
-      document.getElementById('metricsPanel').classList.add('hidden');
       if (tabName === 'tracks' || tabName === 'config') {
         // Config panel only shows in ready state
@@ -4406,8 +4754,8 @@
         document.getElementById('tracksPanel').classList.remove('hidden');
       } else if (tabName === 'inspect') {
         document.getElementById('inspectPanel').classList.remove('hidden');
-      } else if (tabName === 'metrics') {
-        document.getElementById('metricsPanel').classList.remove('hidden');
       }
     }

   <title>ISR Command Center</title>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3-hierarchy@3/dist/d3-hierarchy.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3-path@3/dist/d3-path.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3-shape@3/dist/d3-shape.min.js"></script>
   <style>
     /* ── CSS Design System ─────────────────────────────────────────── */
     /* Processing: only TRACKS tab available */
     body[data-state="processing"] .drawer-tab[data-tab="inspect"],
+    body[data-state="processing"] .drawer-tab[data-tab="explain"] {
       opacity: 0.3;
       pointer-events: none;
     }
         min-width: 1280px;
       }
     }
+    /* ── Explainability Graph ─────────────────────────────────────── */
+    #explainPanel {
+      overflow-y: auto;
+      padding: 0;
+    }
+    .explain-svg {
+      display: block;
+      width: 100%;
+      font-family: 'Inter', -apple-system, sans-serif;
+    }
+    .explain-svg text {
+      pointer-events: none;
+      user-select: none;
+    }
+    .explain-svg g { cursor: pointer; }
+    .explain-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 32px 16px;
+      color: var(--text-secondary);
+      font-size: 11px;
+    }
+    .explain-spinner {
+      width: 16px; height: 16px;
+      border: 2px solid var(--panel-border);
+      border-top-color: #7c3aed;
+      border-radius: 50%;
+      animation: exSpin 0.8s linear infinite;
+    }
+    @keyframes exSpin { to { transform: rotate(360deg); } }
+    .explain-loading span { animation: exPulse 2s ease-in-out infinite; }
+    @keyframes exPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
+    .explain-error {
+      padding: 24px 16px;
+      color: var(--danger);
+      font-size: 11px;
+      text-align: center;
+    }
+    .explain-tooltip {
+      position: absolute;
+      z-index: 1000;
+      background: rgba(30, 41, 59, 0.97);
+      border: 1px solid rgba(51, 65, 85, 0.8);
+      border-radius: 6px;
+      padding: 10px 12px;
+      max-width: 260px;
+      font-size: 10px;
+      color: var(--text-primary);
+      line-height: 1.5;
+      pointer-events: none;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    }
+    .explain-tooltip strong { color: #f8fafc; font-size: 11px; }
+    .tip-section { margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(51,65,85,0.6); }
+    .tip-label { font-weight: 600; color: var(--text-secondary); }
+    .tip-agree .tip-label { color: var(--success); }
+    .tip-disagree .tip-label { color: var(--danger); }
   </style>
 </head>
 <body>
       <div class="drawer-tabs">
         <button class="drawer-tab active" data-tab="tracks">TRACKS</button>
         <button class="drawer-tab" data-tab="inspect">INSPECT</button>
+        <button class="drawer-tab" data-tab="explain">EXPLAIN</button>
       </div>
       <div id="configPanel" class="drawer-section">
         <div class="config-group">
       </div>
       <div id="tracksPanel" class="drawer-section"></div>
       <div id="inspectPanel" class="drawer-section hidden"></div>
+      <div id="explainPanel" class="drawer-section hidden"></div>
     </aside>
   </main>
     }
     function renderMetricsPanel() {
+      return; // Replaced by explainability graph
       const panel = document.getElementById('metricsPanel');
       if (!panel) return;
     }
     async function computeRealMetrics(jobId, status, summary) {
+      return; // Replaced by explainability graph
       const metricsPanel = document.getElementById('metricsPanel');
       if (!metricsPanel) return;
         </div>`;
     }
+    /* ================================================================
+     *  Explainability Graph — Multi-LLM Interpretability Tree
+     * ================================================================ */
+    const EXPLAIN_COLORS = {
+      Structure: '#3b82f6', Function: '#06b6d4', Material: '#f59e0b',
+      Color: '#ef4444', Size: '#10b981', Type: '#8b5cf6',
+      Motion: '#ec4899', Context: '#64748b', Shape: '#f97316', Markings: '#a855f7',
+    };
+    const LIGHTEN_MAP = {
+      '#3b82f6':'#93c5fd','#06b6d4':'#a5f3fc','#f59e0b':'#fde68a',
+      '#ef4444':'#fca5a5','#10b981':'#6ee7b7','#8b5cf6':'#c4b5fd',
+      '#ec4899':'#f9a8d4','#64748b':'#94a3b8','#f97316':'#fdba74','#a855f7':'#d8b4fe',
+    };
+    let _explainAbort = null;
+    const _explainCache = {};
+    async function loadExplainability(jobId, trackId) {
+      const panel = document.getElementById('explainPanel');
+      if (!panel) return;
+      // Check cache
+      if (_explainCache[trackId]) {
+        renderExplainGraph(_explainCache[trackId], panel);
+        return;
+      }
+      // Abort previous
+      if (_explainAbort) _explainAbort.abort();
+      _explainAbort = new AbortController();
+      panel.innerHTML = '<div class="explain-loading"><div class="explain-spinner"></div><span>Analyzing with GPT-4o, Claude, and Gemini...</span></div>';
+      try {
+        const resp = await fetch(`${API_BASE}/inspect/explain/${jobId}/${encodeURIComponent(trackId)}`, { signal: _explainAbort.signal });
+        if (!resp.ok) {
+          const body = await resp.json().catch(() => ({}));
+          throw new Error(body.detail || `Explain failed: ${resp.status}`);
+        }
+        const data = await resp.json();
+        _explainCache[trackId] = data;
+        renderExplainGraph(data, panel);
+      } catch (err) {
+        if (err.name === 'AbortError') return;
+        panel.innerHTML = `<div class="explain-error">${escHtml(err.message)}</div>`;
+      }
+    }
+    function escHtml(str) {
+      const d = document.createElement('div');
+      d.textContent = str || '';
+      return d.innerHTML;
+    }
+    function renderExplainGraph(data, container) {
+      container.innerHTML = '';
+      if (!data || !data.categories || data.categories.length === 0) {
+        container.innerHTML = '<div class="explain-error">No explanation data</div>';
+        return;
+      }
+      const root = {
+        name: (data.object || 'OBJECT').toUpperCase(),
+        confidence: data.confidence,
+        satisfies: data.satisfies,
+        summary: data.reasoning_summary,
+        children: data.categories.map(cat => ({
+          name: cat.name,
+          color: cat.color || EXPLAIN_COLORS[cat.name] || '#64748b',
+          isCategory: true,
+          children: (cat.features || []).map(f => ({
+            name: f.name,
+            value: f.value,
+            reasoning: f.reasoning,
+            validators: f.validators || {},
+            consensus: f.consensus || 0,
+            color: cat.color || EXPLAIN_COLORS[cat.name] || '#64748b',
+            isFeature: true,
+          })),
+        })),
+      };
+      const margin = { top: 30, right: 20, bottom: 60, left: 20 };
+      const width = container.clientWidth || 340;
+      const totalLeaves = root.children.reduce((s, c) => s + (c.children ? c.children.length : 1), 0);
+      const height = Math.max(280, totalLeaves * 35 + 120);
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('width', width);
+      svg.setAttribute('height', height);
+      svg.setAttribute('class', 'explain-svg');
+      container.appendChild(svg);
+      // Glow filter
+      const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+      defs.innerHTML = '<filter id="exGlow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
+      svg.appendChild(defs);
+      // D3 layout
+      const hierarchy = d3.hierarchy(root);
+      const treeLayout = d3.tree().size([width - margin.left - margin.right, height - margin.top - margin.bottom]);
+      treeLayout(hierarchy);
+      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      g.setAttribute('transform', `translate(${margin.left},${margin.top})`);
+      svg.appendChild(g);
+      // Edges
+      hierarchy.links().forEach(link => {
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const sx = link.source.x, sy = link.source.y, tx = link.target.x, ty = link.target.y;
+        const my = (sy + ty) / 2;
+        path.setAttribute('d', `M${sx},${sy} C${sx},${my} ${tx},${my} ${tx},${ty}`);
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', link.target.data.color || '#3b82f6');
+        path.setAttribute('stroke-width', link.source.depth === 0 ? '2.5' : '1.5');
+        path.setAttribute('opacity', '0.5');
+        path.setAttribute('filter', 'url(#exGlow)');
+        g.appendChild(path);
+      });
+      // Nodes
+      hierarchy.descendants().forEach(node => {
+        const d = node.data;
+        const ng = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        ng.setAttribute('transform', `translate(${node.x},${node.y})`);
+        if (node.depth === 0) {
+          drawExRoot(ng, d);
+        } else if (d.isCategory) {
+          drawExCategory(ng, d);
+        } else if (d.isFeature) {
+          drawExFeature(ng, d);
+        }
+        ng.addEventListener('mouseenter', (e) => showExTip(e, d, container));
+        ng.addEventListener('mouseleave', () => hideExTip(container));
+        g.appendChild(ng);
+      });
+      // Consensus bar
+      if (data.consensus_bar) drawExConsensus(svg, data.consensus_bar, width, height);
+    }
+    function drawExRoot(g, d) {
+      const w = 120, h = 32;
+      const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      r.setAttribute('x', -w/2); r.setAttribute('y', -h/2);
+      r.setAttribute('width', w); r.setAttribute('height', h);
+      r.setAttribute('rx', 8); r.setAttribute('fill', '#7c3aed');
+      r.setAttribute('filter', 'url(#exGlow)');
+      g.appendChild(r);
+      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      t.setAttribute('text-anchor', 'middle'); t.setAttribute('dy', '0.35em');
+      t.setAttribute('fill', 'white'); t.setAttribute('font-size', '11'); t.setAttribute('font-weight', '700');
+      t.textContent = d.name + (d.confidence != null ? ` ${Math.round(d.confidence * 100)}%` : '');
+      g.appendChild(t);
+    }
+    function drawExCategory(g, d) {
+      const w = 90, h = 26;
+      const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      r.setAttribute('x', -w/2); r.setAttribute('y', -h/2);
+      r.setAttribute('width', w); r.setAttribute('height', h);
+      r.setAttribute('rx', 6); r.setAttribute('fill', d.color || '#3b82f6');
+      r.setAttribute('filter', 'url(#exGlow)'); r.setAttribute('opacity', '0.95');
+      g.appendChild(r);
+      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      t.setAttribute('text-anchor', 'middle'); t.setAttribute('dy', '0.35em');
+      t.setAttribute('fill', 'white'); t.setAttribute('font-size', '9'); t.setAttribute('font-weight', '600');
+      t.textContent = d.name;
+      g.appendChild(t);
+    }
+    function drawExFeature(g, d) {
+      const w = 80, h = 22;
+      const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      r.setAttribute('x', -w/2); r.setAttribute('y', -h/2);
+      r.setAttribute('width', w); r.setAttribute('height', h);
+      r.setAttribute('rx', 5); r.setAttribute('fill', '#0f172a');
+      r.setAttribute('stroke', d.color || '#3b82f6'); r.setAttribute('stroke-width', '1.5');
+      g.appendChild(r);
+      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      t.setAttribute('text-anchor', 'middle'); t.setAttribute('dy', '0.35em');
+      t.setAttribute('fill', LIGHTEN_MAP[d.color] || '#e2e8f0'); t.setAttribute('font-size', '7.5');
+      t.textContent = d.name.length > 12 ? d.name.slice(0, 11) + '\u2026' : d.name;
+      g.appendChild(t);
+      const vals = d.validators || {};
+      const total = Object.keys(vals).length;
+      if (total > 0) {
+        const agreed = Object.values(vals).filter(v => v.agree).length;
+        const badge = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        badge.setAttribute('x', w/2 - 4); badge.setAttribute('y', -h/2 - 3);
+        badge.setAttribute('text-anchor', 'end'); badge.setAttribute('font-size', '7');
+        badge.setAttribute('fill', agreed === total ? '#4ade80' : '#f87171');
+        badge.textContent = `${agreed}/${total}`;
+        g.appendChild(badge);
+      }
+    }
+    function drawExConsensus(svg, bar, width, height) {
+      const barY = height - 30, barW = width - 40, barX = 20, barH = 6;
+      const ratio = bar.total_features > 0 ? bar.agreed / bar.total_features : 0;
+      const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      bg.setAttribute('x', barX); bg.setAttribute('y', barY);
+      bg.setAttribute('width', barW); bg.setAttribute('height', barH);
+      bg.setAttribute('rx', 3); bg.setAttribute('fill', '#1e293b');
+      svg.appendChild(bg);
+      const fill = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      fill.setAttribute('x', barX); fill.setAttribute('y', barY);
+      fill.setAttribute('width', barW * ratio); fill.setAttribute('height', barH);
+      fill.setAttribute('rx', 3); fill.setAttribute('fill', '#7c3aed');
+      fill.setAttribute('opacity', '0.8'); fill.setAttribute('filter', 'url(#exGlow)');
+      svg.appendChild(fill);
+      const lb = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      lb.setAttribute('x', barX); lb.setAttribute('y', barY + barH + 14);
+      lb.setAttribute('fill', '#a78bfa'); lb.setAttribute('font-size', '9');
+      lb.textContent = `${bar.agreed}/${bar.total_features} features agreed`;
+      svg.appendChild(lb);
+      const vl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      vl.setAttribute('x', barX + barW); vl.setAttribute('y', barY + barH + 14);
+      vl.setAttribute('text-anchor', 'end'); vl.setAttribute('fill', '#6b7280'); vl.setAttribute('font-size', '9');
+      vl.textContent = `${bar.validators_available}/2 validators`;
+      svg.appendChild(vl);
+    }
+    function showExTip(event, data, container) {
+      hideExTip(container);
+      if (!data.reasoning && !data.isCategory && !data.summary) return;
+      const tip = document.createElement('div');
+      tip.className = 'explain-tooltip';
+      if (data.isCategory) {
+        const ch = data.children || [];
+        const allOk = ch.filter(c => { const vs = Object.values(c.validators||{}); return vs.length > 0 && vs.every(v => v.agree); }).length;
+        tip.innerHTML = `<strong>${escHtml(data.name)}</strong><br>${allOk}/${ch.length} features fully validated`;
+      } else if (data.isFeature) {
+        let html = `<strong>${escHtml(data.name)}</strong>`;
+        if (data.reasoning) html += `<div class="tip-section"><span class="tip-label">GPT-4o:</span> ${escHtml(data.reasoning)}</div>`;
+        const v = data.validators || {};
+        if (v.claude) { const ic = v.claude.agree ? '\u2713' : '\u2717'; const cl = v.claude.agree ? 'tip-agree' : 'tip-disagree'; html += `<div class="tip-section ${cl}"><span class="tip-label">${ic} Claude:</span> ${escHtml(v.claude.note||'')}</div>`; }
+        if (v.gemini) { const ic = v.gemini.agree ? '\u2713' : '\u2717'; const cl = v.gemini.agree ? 'tip-agree' : 'tip-disagree'; html += `<div class="tip-section ${cl}"><span class="tip-label">${ic} Gemini:</span> ${escHtml(v.gemini.note||'')}</div>`; }
+        tip.innerHTML = html;
+      } else if (data.summary) {
+        tip.innerHTML = `<strong>${escHtml(data.name)}</strong><br>${escHtml(data.summary)}`;
+      }
+      const rect = event.target.closest('g').getBoundingClientRect();
+      const cr = container.getBoundingClientRect();
+      tip.style.left = (rect.left - cr.left + rect.width/2) + 'px';
+      tip.style.top = (rect.top - cr.top - 8) + 'px';
+      tip.style.transform = 'translate(-50%, -100%)';
+      container.appendChild(tip);
+      // Clamp
+      const tr = tip.getBoundingClientRect();
+      if (tr.left < cr.left) tip.style.left = parseFloat(tip.style.left) + (cr.left - tr.left + 4) + 'px';
+      if (tr.right > cr.right) tip.style.left = parseFloat(tip.style.left) - (tr.right - cr.right + 4) + 'px';
+    }
+    function hideExTip(container) {
+      const old = container.querySelector('.explain-tooltip');
+      if (old) old.remove();
+    }
     /* ================================================================
      *  TASK 10: Inspect State — 2x2 Quad View
      * ================================================================ */
         switchDrawerTab('inspect');
       }
+      // Trigger explainability graph
+      if (hasRealData && STATE.jobId) {
+        const tid = realTrack ? realTrack.track_id : trackId;
+        loadExplainability(STATE.jobId, tid);
+        // Auto-switch to EXPLAIN tab after a brief delay so user sees it loading
+        setTimeout(() => switchDrawerTab('explain'), 300);
+      }
       // Wire back button
       document.getElementById('inspectBack').addEventListener('click', exitInspectState);
       document.getElementById('configPanel').classList.add('hidden');
       document.getElementById('tracksPanel').classList.add('hidden');
       document.getElementById('inspectPanel').classList.add('hidden');
+      document.getElementById('explainPanel').classList.add('hidden');
       if (tabName === 'tracks' || tabName === 'config') {
         // Config panel only shows in ready state
         document.getElementById('tracksPanel').classList.remove('hidden');
       } else if (tabName === 'inspect') {
         document.getElementById('inspectPanel').classList.remove('hidden');
+      } else if (tabName === 'explain') {
+        document.getElementById('explainPanel').classList.remove('hidden');
       }
     }