/* global React */ const { useState, useEffect, useRef } = React; /* ========================================================================= DATA FLOW DIAGRAMS — Three metaphors 1. Pipeline — linear arrows 2. Perimeter — enclosed boundary box 3. Orbit — rotating data around core ========================================================================= */ function FlowPipeline() { return ( {/* Vendor row (top) */} TYPICAL VENDOR · DATA EXITS YOUR DATA Customer · Trades · PII EGRESS API call EXTERNAL LLM Vendor cloud RESPONSE Data already left {/* Risk callout */} RISK Compliance, regulators, data residency {/* Doblier row (bottom) */} DOBLIER · DATA STAYS YOUR INFRASTRUCTURE YOUR DATA Stays on-prem DOBLIER ROUTER Multi-LLM orchestration PRIVATE LLM Frontier · GPU pool RESPONSE · ZERO EGRESS Production-ready output RESULT Sovereign, auditable, in your VPC ); } function FlowPerimeter() { return ( {/* Title bar */} PERIMETER COMPARISON · WHERE DOES INFERENCE HAPPEN? {/* Vendor: data outside */} TYPICAL VENDOR {/* Enterprise box */} YOUR ENTERPRISE {/* Internal */} YOUR DATA Customer · PII Trades · Treasury {/* Data leaves */} {/* Outside box - external LLM */} EXTERNAL CLOUD 3rd-party LLM {/* Border crossing label */} ⨯ PERIMETER BREACH {/* Doblier: data inside */} DOBLIER YOUR ENTERPRISE · EVERYTHING INSIDE {/* Data */} YOUR DATA Customer · PII Trades · Treasury {/* AORBIT inside */} AORBIT · PRIVATE LLM Frontier intelligence GPU + orchestration {/* Data flow (inside) */} {/* Governance */} GOVERNANCE · AUDIT · POLICY Every call logged. Every prompt traceable. ); } function FlowOrbit() { // Animated orbit metaphor: vendor — data drifts away. Doblier — data orbits AORBIT. return ( {/* VENDOR */} TYPICAL VENDOR · DATA ESCAPES ORBIT YOUR ORG Data origin {/* Data points drifting outward */} {[0, 45, 90, 135, 180, 225, 270, 315].map((deg, i) => { const r1 = 80; const r2 = 170; const rad = (deg * Math.PI) / 180; return ( ); })} {/* External cloud ring */} 3rd-party API SaaS LLM Vendor cloud {/* DOBLIER */} DOBLIER · DATA STAYS IN ORBIT {/* Orbit rings */} {/* Core: AORBIT */} AORBIT Private LLM {/* Orbiting data points */} {[0, 60, 120, 180, 240, 300].map((deg, i) => { const rad = (deg * Math.PI) / 180; return ( ); })} {[30, 110, 200, 290].map((deg, i) => { const rad = (deg * Math.PI) / 180; return ( ); })} DATA · CONTAINED INFERENCE · LOCAL ); } const DataFlowDiagram = ({ metaphor = "pipeline" }) => { if (metaphor === "perimeter") return ; if (metaphor === "orbit") return ; return ; }; /* ========================================================================= ISOMETRIC LAYER STACK ========================================================================= */ function IsometricLayerStack({ active, onSelect }) { // Three stacked plates. Active one floats up, others dim. const layers = [ { id: "frontier", num: "03", title: "Frontier", desc: "Agents · Treasury · Payments · ITOPS → AIOPS", z: 0 }, { id: "intelligence", num: "02", title: "Intelligence", desc: "Multi-LLM orchestration · RAG · governed routing", z: 1 }, { id: "foundation", num: "01", title: "Foundation", desc: "Private GPU pool · Kubernetes · zero egress", z: 2 }, ]; return (
{layers.map((l, i) => { const isActive = active === l.id; const baseLift = i * -55; const activeLift = isActive ? -30 : 0; return (
onSelect(l.id)} >
{l.num}
{l.title}
); })}
); } /* ========================================================================= AORBIT 5-LAYER ARCHITECTURE TABLE (used on Why Doblier / AORBIT pages) ========================================================================= */ function ArchitectureStack() { const layers = [ { tag: "05 · GOV", name: "Governance", desc: "Policy, audit, observability across every call.", role: "Cross-cutting" }, { tag: "04 · APP", name: "Application", desc: "Agents, copilots, internal UIs. Where humans meet the system.", role: "Surface" }, { tag: "03 · OPS", name: "Operations", desc: "Orchestration, monitoring, AIOps. Production discipline.", role: "Runtime" }, { tag: "02 · INT", name: "Intelligence", desc: "Frontier LLMs, embeddings, RAG, routing.", role: "Cognition" }, { tag: "01 · INF", name: "Infrastructure", desc: "GPUs, Kubernetes, networking, storage. Private, on-prem.", role: "Substrate" }, ]; return (
{layers.map((l, i) => (
{l.tag}
{l.name}
{l.desc}
{l.role}
))}
); } Object.assign(window, { DataFlowDiagram, FlowPipeline, FlowPerimeter, FlowOrbit, IsometricLayerStack, ArchitectureStack });