Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="CUTS+ Causal Terminal — Iroha Financial Intelligence. Real-time causal probability matrix, HHKD decomposition, and DoFlow inference over NIFTY50."> | |
| <title>CUTS+ Causal Terminal · Iroha</title> | |
| <!-- Stylesheet (separate file served via StaticFiles) --> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <!-- ── Loading Overlay ─────────────────────────────────────────────────── --> | |
| <div id="loading-overlay"> | |
| <div class="loading-brand">CUTS+ CAUSAL</div> | |
| <div class="loading-bar-wrap"> | |
| <div class="loading-bar-fill"></div> | |
| </div> | |
| <div class="loading-status" id="loading-status">INITIALISING ENGINE…</div> | |
| </div> | |
| <!-- ── Top Bar ─────────────────────────────────────────────────────────── --> | |
| <div class="topbar"> | |
| <div style="display:flex;align-items:center;gap:16px;"> | |
| <div class="brand">CUTS+ CAUSAL</div> | |
| <div class="tabs"> | |
| <button class="tab active" data-tab="matrix" onclick="setTab('matrix')">MATRIX</button> | |
| <button class="tab" data-tab="network" onclick="setTab('network')">NETWORK</button> | |
| <button class="tab" data-tab="hhkd" onclick="setTab('hhkd')">HHKD</button> | |
| <button class="tab" data-tab="sector" onclick="setTab('sector')">SECTOR</button> | |
| <button class="tab" data-tab="single" onclick="setTab('single')">SINGLE TICKER</button> | |
| </div> | |
| </div> | |
| <div class="topbar-right"> | |
| <span><span class="live-dot"></span> LIVE</span> | |
| <span id="clock" style="color:var(--amber);">--:--:--</span> | |
| <span>NIFTY50 · EPOCH 30/30</span> | |
| </div> | |
| </div> | |
| <!-- ── API Status Banner ───────────────────────────────────────────────── --> | |
| <div id="api-banner"> | |
| <div class="api-chip" id="api-rest"> | |
| <div class="api-dot"></div><span>REST API</span> | |
| </div> | |
| <div class="api-chip" id="api-gradio"> | |
| <div class="api-dot"></div><span>GRADIO CLIENT</span> | |
| </div> | |
| <div class="api-chip" id="api-pipeline"> | |
| <div class="api-dot"></div><span>PIPELINE</span> | |
| </div> | |
| <div class="api-chip" id="api-infer"> | |
| <div class="api-dot"></div><span>INFERENCE</span> | |
| </div> | |
| </div> | |
| <!-- ── Body ────────────────────────────────────────────────────────────── --> | |
| <div class="body"> | |
| <!-- LEFT SIDEBAR --> | |
| <div class="sidebar"> | |
| <div class="sb-header"> | |
| <span>TICKERS — φ RANK</span> | |
| <span id="sb-count" style="color:var(--muted);">36</span> | |
| </div> | |
| <div class="sb-seg"> | |
| <div class="seg-btn"> | |
| <button class="active" onclick="setSeg(this,'all')">ALL</button> | |
| <button onclick="setSeg(this,'up')">UPSTREAM</button> | |
| <button onclick="setSeg(this,'dn')">SINK</button> | |
| </div> | |
| </div> | |
| <div class="sb-search"> | |
| <input type="text" placeholder="Search ticker…" id="sb-search-input" | |
| oninput="filterTickers(this.value)" autocomplete="off"> | |
| </div> | |
| <div class="ticker-list" id="ticker-list"></div> | |
| </div> | |
| <!-- CENTER PANEL --> | |
| <div class="center"> | |
| <!-- MATRIX VIEW --> | |
| <div class="view active" id="view-matrix"> | |
| <div class="view-header"> | |
| <span class="vh-title">CAUSAL PROBABILITY MATRIX</span> | |
| <span class="vh-meta">G·σ(G_T) · GUMBEL-SOFTMAX · HOVER → DETAILS · CLICK → PIN</span> | |
| </div> | |
| <div class="legend"> | |
| <div class="leg-item"><div class="leg-dot" style="background:#e03434;"></div>Strong cause >0.7</div> | |
| <div class="leg-item"><div class="leg-dot" style="background:#f0a500;"></div>Moderate 0.4–0.7</div> | |
| <div class="leg-item"><div class="leg-dot" style="background:#003a20;"></div>Weak <0.4</div> | |
| <div class="leg-item" style="margin-left:auto;color:var(--muted);">Inference ripples across this map in real-time</div> | |
| </div> | |
| <div class="view-body" style="padding:0;" id="matrix-body"> | |
| <svg id="heatmap-svg"></svg> | |
| </div> | |
| </div> | |
| <!-- NETWORK VIEW --> | |
| <div class="view" id="view-network"> | |
| <div class="view-header"> | |
| <span class="vh-title">CAUSAL NETWORK GRAPH</span> | |
| <span class="vh-meta">THRESHOLDED DAG · θ=0.5 · DRAG TO EXPLORE · NODE SIZE ∝ OUT-DEGREE</span> | |
| </div> | |
| <div class="legend"> | |
| <div class="leg-item"><div class="leg-dot" style="background:var(--amber);"></div>High φ (upstream)</div> | |
| <div class="leg-item"><div class="leg-dot" style="background:var(--cyan);"></div>Mid φ</div> | |
| <div class="leg-item"><div class="leg-dot" style="background:var(--muted);"></div>Low φ (sink)</div> | |
| <div class="leg-item"><div class="leg-line" style="background:var(--red);"></div>Strong edge</div> | |
| </div> | |
| <div class="view-body" style="padding:0;position:relative;"> | |
| <svg id="net-svg"></svg> | |
| </div> | |
| </div> | |
| <!-- HHKD VIEW --> | |
| <div class="view" id="view-hhkd"> | |
| <div class="view-header"> | |
| <span class="vh-title">HELMHOLTZ-HODGE-KODAIRA DECOMPOSITION</span> | |
| <span class="vh-meta">J_b → J_grad + J_res · ‖RESIDUAL‖ < 10⁻⁶</span> | |
| </div> | |
| <div class="view-body" style="padding:10px;"> | |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;"> | |
| <div> | |
| <div style="color:var(--amber);font-size:9px;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase;"> | |
| Scalar Potential φ — Upstream Ranking | |
| </div> | |
| <div id="phi-chart"></div> | |
| </div> | |
| <div> | |
| <div style="color:var(--cyan);font-size:9px;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase;"> | |
| Decomposition Diagnostics | |
| </div> | |
| <div id="hhkd-diag"></div> | |
| <div style="margin-top:10px;"> | |
| <div style="color:var(--muted);font-size:9px;letter-spacing:1px;margin-bottom:6px;">GRADIENT vs CYCLIC SPLIT</div> | |
| <div style="height:18px;background:var(--bg4);border-radius:3px;overflow:hidden;display:flex;"> | |
| <div style="height:18px;width:93.8%;background:var(--amber);display:flex;align-items:center;justify-content:center;font-size:8px;color:#000;font-weight:600;">GRADIENT 93.8%</div> | |
| <div style="flex:1;height:18px;background:var(--cyan-lo);display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--cyan);">6.2%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="color:var(--amber);font-size:9px;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase;"> | |
| Gradient Flow J_grad — Sector Heatmap | |
| </div> | |
| <svg id="jgrad-svg"></svg> | |
| </div> | |
| </div> | |
| <!-- SECTOR VIEW --> | |
| <div class="view" id="view-sector"> | |
| <div class="view-header"> | |
| <span class="vh-title">SECTOR MACRO GRAPH — REASON TRIPLET ⟨G, A, E⟩</span> | |
| <span class="vh-meta">BIDIRECTIONAL MESSAGE PASSING · CrossLevelMPNN</span> | |
| </div> | |
| <div class="view-body" style="padding:0;overflow-y:auto;"> | |
| <div style="padding:10px;"> | |
| <div style="color:var(--amber);font-size:9px;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase;">Macro Sector Adjacency</div> | |
| <svg id="macro-svg"></svg> | |
| </div> | |
| <div class="sector-grid" id="sector-grid"></div> | |
| </div> | |
| </div> | |
| <!-- SINGLE TICKER VIEW --> | |
| <div class="view" id="view-single"> | |
| <div class="view-header"> | |
| <div> | |
| <span class="vh-title">SINGLE TICKER — FUNDAMENTAL CAUSAL</span> | |
| <span id="single-name" style="color:var(--amber);font-size:13px;font-weight:600;margin-left:12px;">RELIANCE</span> | |
| </div> | |
| <span class="vh-meta">DuPont PRIOR · 23 NODES · SCM RIDGE · CAMEF GPT4MTS</span> | |
| </div> | |
| <div class="view-body" style="padding:10px;overflow-y:auto;"> | |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;"> | |
| <div> | |
| <div style="color:var(--amber);font-size:9px;letter-spacing:2px;margin-bottom:6px;text-transform:uppercase;">DuPont Prior Adjacency (23×23)</div> | |
| <svg id="dupont-svg"></svg> | |
| <div style="color:var(--cyan);font-size:9px;letter-spacing:2px;margin:10px 0 6px;text-transform:uppercase;">Discovered Causal Edges</div> | |
| <div id="disc-edges"></div> | |
| </div> | |
| <div> | |
| <div style="color:var(--amber);font-size:9px;letter-spacing:2px;margin-bottom:6px;text-transform:uppercase;">CAMEF Stress Forecast</div> | |
| <svg id="camef-svg"></svg> | |
| <div style="color:var(--cyan);font-size:9px;letter-spacing:2px;margin:10px 0 6px;text-transform:uppercase;">FCM Lag-Graph G₁–G₄</div> | |
| <div id="fcm-bars"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!-- /center --> | |
| <!-- RIGHT PANEL --> | |
| <div class="rpanel"> | |
| <!-- INFERENCE ENGINE --> | |
| <div style="flex-shrink:0;border-bottom:1px solid var(--border);"> | |
| <div class="rp-head">CAUSAL INFERENCE ENGINE</div> | |
| <div class="infer-panel"> | |
| <div class="infer-mode"> | |
| <button class="m-assert active" onclick="setInferMode('assert')">ASSERT</button> | |
| <button class="m-intervene" onclick="setInferMode('intervene')">INTERVENE</button> | |
| <button class="m-counter" onclick="setInferMode('counter')">COUNTER·F</button> | |
| </div> | |
| <div class="infer-form" id="infer-form"> | |
| <!-- populated by app.js --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RESULTS --> | |
| <div style="flex:1;overflow-y:auto;"> | |
| <div class="rp-head"> | |
| RESULTS & RIPPLE TRACE | |
| <span id="result-count" style="color:var(--muted);font-size:9px;font-weight:400;"></span> | |
| </div> | |
| <div style="padding:8px;" id="results-area"> | |
| <div style="color:var(--muted);font-size:10px;text-align:center;padding:20px 0;"> | |
| Run an inference query to see results and ripple effects across all views. | |
| </div> | |
| </div> | |
| <!-- NEWS FEED --> | |
| <div class="rp-head" style="margin-top:0;">LLM DENOISED NEWS</div> | |
| <div id="news-feed"></div> | |
| </div> | |
| </div><!-- /rpanel --> | |
| </div><!-- /body --> | |
| <!-- STATUS STRIP --> | |
| <div class="status-strip"> | |
| <div class="ss-chip"><span class="ss-k">TICKERS</span><span class="ss-v am">36</span></div> | |
| <div class="ss-chip"><span class="ss-k">EDGES</span><span class="ss-v am">127</span></div> | |
| <div class="ss-chip"><span class="ss-k">DENSITY</span><span class="ss-v">5.2%</span></div> | |
| <div class="ss-chip"><span class="ss-k">λ_s</span><span class="ss-v">0.10</span></div> | |
| <div class="ss-chip"><span class="ss-k">λ_d</span><span class="ss-v">1.00</span></div> | |
| <div class="ss-chip"><span class="ss-k">LOSS</span><span class="ss-v up" id="ss-loss">0.0412</span></div> | |
| <div class="ss-chip"><span class="ss-k">PRIOR CONFORM</span><span class="ss-v up">91.3%</span></div> | |
| <div class="ss-chip"><span class="ss-k">‖J_res‖</span><span class="ss-v am">3.2e-7</span></div> | |
| <div class="ss-chip"><span class="ss-k">EPOCH</span><span class="ss-v">30/30 ✓</span></div> | |
| </div> | |
| <!-- NODE POPUP --> | |
| <div class="node-popup" id="node-popup"> | |
| <div class="np-head"> | |
| <span id="np-name">RELIANCE</span> | |
| <span id="np-sector" style="font-size:9px;color:var(--muted);font-weight:400;">Energy</span> | |
| </div> | |
| <div class="np-row"><span class="np-k">φ Potential</span><span class="np-v am" id="np-phi">+2.41</span></div> | |
| <div class="np-row"><span class="np-k">Rank</span><span class="np-v up" id="np-rank">#1 Upstream</span></div> | |
| <div class="np-row"><span class="np-k">Out-degree</span><span class="np-v" id="np-out">8</span></div> | |
| <div class="np-row"><span class="np-k">In-degree</span><span class="np-v" id="np-in">2</span></div> | |
| <div class="np-row"><span class="np-k">Strongest cause</span><span class="np-v am" id="np-cause">ONGC 0.847</span></div> | |
| <div class="np-row"><span class="np-k">News score</span><span class="np-v up" id="np-news">0.87</span></div> | |
| </div> | |
| <!-- ERROR TOAST --> | |
| <div id="error-toast"></div> | |
| <!-- App JS (separate file served via StaticFiles) --> | |
| <script type="module" src="/static/app.js"></script> | |
| </body> | |
| </html> | |