/* PAAI graphics — feathered greyscale SVG visualizations */ const featherMask = { WebkitMaskImage: "radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.65) 78%, rgba(0,0,0,0) 100%)", maskImage: "radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.65) 78%, rgba(0,0,0,0) 100%)", }; /* ============================================================ Data-flow comparison — Public LLM (top, faded) vs PAAI (bottom) ============================================================ */ function DataFlowDiagram() { return ( {/* --- TOP LANE: Conventional / Public --- */} CONVENTIONAL · DATA LEAVES THE PERIMETER {/* Nodes */} {[ { x: 100, label: "USER" }, { x: 320, label: "PUBLIC INTERNET", warn: true }, { x: 560, label: "3RD-PARTY API", warn: true }, { x: 800, label: "MODEL HOST", warn: true }, { x: 1040, label: "LOG STORE", warn: true }, ].map((n, i) => ( {n.label} {n.warn && ( ! )} ))} {/* Connecting dashed arrows */} {[150, 370, 610, 850].map((x, i) => ( ))} {/* Status row */} DATA EXFIL · LOG RETENTION · MODEL DRIFT · 3RD-PARTY TERMS {/* Separator */} ▼ PAAI ARCHITECTURE {/* --- BOTTOM LANE: PAAI --- */} PAAI · DATA NEVER LEAVES YOUR PERIMETER {/* Perimeter boundary */} CLIENT PERIMETER · ENCRYPTED AT REST + IN TRANSIT {/* Nodes inside perimeter */} {[ { x: 160, label: "USER" }, { x: 360, label: "mTLS GATEWAY" }, { x: 560, label: "LOCAL LLM" }, { x: 760, label: "AGENT HARNESS" }, { x: 960, label: "AUDIT LOG" }, ].map((n, i) => ( {n.label} ))} {/* Connecting solid arrows */} {[215, 415, 615, 815].map((x, i) => ( ))} {/* Accent marker — encrypted flow indicator */} ); } /* ============================================================ Encryption ladder — vertical bars showing cipher strength ============================================================ */ function EncryptionLadder() { const items = [ { label: "TLS 1.3", spec: "TRANSPORT", height: 30, mark: "✓" }, { label: "AES-256-GCM", spec: "AT-REST", height: 55, mark: "✓" }, { label: "GCM-SIV", spec: "DETERMINISTIC", height: 72, mark: "✓" }, { label: "ChaCha20", spec: "STREAM", height: 78, mark: "✓" }, { label: "ML-KEM-768", spec: "PQ · KYBER", height: 90, mark: "QR", accent: true }, { label: "ML-DSA-87", spec: "PQ · DILITHIUM", height: 98, mark: "QR", accent: true }, { label: "ML-KEM-1024", spec: "PQ · MAX", height: 108, mark: "QR", accent: true }, ]; const N = items.length; const W = 760; const padLeft = 36; const padRight = 24; const colW = (W - padLeft - padRight) / N; const barW = Math.min(colW - 18, 56); return ( {items.map((it, i) => { const cx = padLeft + colW * (i + 0.5); const x = cx - barW / 2; const y = 148 - it.height; return ( {it.mark} {it.label} {it.spec} ); })} {/* Classical / PQ divider — between item 3 (idx) and 4 */} {(() => { const dx = padLeft + colW * 4; return ( CLASSICAL POST-QUANTUM ); })()} ); } /* ============================================================ Quantum readiness gauge — semi-circular meter (top half) ============================================================ */ function QuantumGauge() { // Top-semicircle gauge. 0% = left (180°), 100% = right (360°/0°) const cx = 200, cy = 180, r = 130; const value = 0.88; // SVG angle: y is down, so 180° = left, 270° = top, 360°/0° = right const angleDeg = 180 + 180 * value; const rad = (angleDeg * Math.PI) / 180; const tipX = cx + Math.cos(rad) * (r - 14); const tipY = cy + Math.sin(rad) * (r - 14); const endX = cx + Math.cos(rad) * r; const endY = cy + Math.sin(rad) * r; // Ticks const ticks = []; for (let i = 0; i <= 10; i++) { const a = 180 + (180 * i) / 10; const ar = (a * Math.PI) / 180; const inner = r - 10; const outer = r; ticks.push({ x1: cx + Math.cos(ar) * inner, y1: cy + Math.sin(ar) * inner, x2: cx + Math.cos(ar) * outer, y2: cy + Math.sin(ar) * outer, major: i % 2 === 0, }); } return ( {/* Outer arc */} {/* Filled portion — from left edge clockwise (sweep=1, short arc) to current */} {/* Ticks */} {ticks.map((t, i) => ( ))} {/* Endpoint labels — placed below the arc terminals so they stay inside the viewBox */} CLASSICAL QR {/* Needle */} {/* Value — placed above the pivot, inside the arc */} 88% DEPLOYED CIPHERS · PQ-READY ); } /* ============================================================ Stack diagram — vertical layered stack (App → Hardware) ============================================================ */ function StackDiagram() { const layers = [ { label: "APPLICATION", meta: "Your apps · APIs · SDKs", h: 40 }, { label: "AGENT HARNESS", meta: "Tools · memory · audit", h: 40, acc: 1 }, { label: "INFERENCE", meta: "Local LLM · vLLM · TGI", h: 40 }, { label: "TRANSPORT", meta: "mTLS 1.3 · ZTNA · WireGuard", h: 40, acc: 0.5 }, { label: "ENCRYPTION MODULE", meta: "FIPS 140-3 · HSM · KMS", h: 40 }, { label: "HARDWARE", meta: "On-prem GPU · TPM · Air-gap", h: 40 }, ]; let y = 30; return ( FIG. 03 · PAAI STACK · TOP-DOWN {layers.map((l, i) => { // acc: 0/undefined → plain white; 0.5 → diffuse accent; 1 → solid accent const isSolid = l.acc === 1; const isDiffuse = l.acc === 0.5; const isAcc = isSolid || isDiffuse; const textColor = isSolid ? "#fff" : "#0a0a0a"; const metaColor = isSolid ? "#fff" : isDiffuse ? "#0a0a0a" : "#666"; const row = ( {l.label} {l.meta} L{layers.length - i} ); y += l.h + 2; return row; })} ); } /* ============================================================ Threat surface radar — comparing public vs PAAI ============================================================ */ function ThreatRadar() { const axes = [ "DATA EXFIL", "MODEL POISON", "PROMPT LEAK", "LOG RETENTION", "VENDOR LOCK", "REGULATORY", "QUANTUM" ]; // public values higher (more risk), PAAI values lower const publicV = [0.85, 0.6, 0.78, 0.9, 0.7, 0.82, 0.95]; const paaiV = [0.15, 0.22, 0.18, 0.1, 0.2, 0.25, 0.18]; const cx = 180, cy = 180, r = 120; const N = axes.length; const angle = (i) => -Math.PI / 2 + (i / N) * Math.PI * 2; const point = (i, v) => [cx + Math.cos(angle(i)) * r * v, cy + Math.sin(angle(i)) * r * v]; const polyStr = (vs) => vs.map((v, i) => point(i, v).join(",")).join(" "); return ( FIG. 06 · THREAT SURFACE · PUBLIC vs PAAI {/* Concentric rings */} {[0.25, 0.5, 0.75, 1].map((k, i) => ( ))} {/* Axes */} {axes.map((a, i) => { const [x, y] = point(i, 1); return ( ); })} {/* Public polygon */} {/* PAAI polygon */} {/* Labels */} {axes.map((a, i) => { const [x, y] = point(i, 1.18); return ( {a} ); })} {/* Legend */} PUBLIC PAAI ); } Object.assign(window, { DataFlowDiagram, EncryptionLadder, QuantumGauge, StackDiagram, ThreatRadar, });