"use strict"; const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const ScrollableDiagram = ({children, title = "", maxHeight = "500px", minWidth = "100%"}) => { const _components = { button: "button", div: "div", p: "p", span: "span", ..._provideComponents() }; const [zoom, setZoom] = useState(100); const zoomIn = () => setZoom(z => Math.min(z + 5, 200)); const zoomOut = () => setZoom(z => Math.max(z - 5, 25)); const resetZoom = () => setZoom(100); const containerStyle = { overflow: "auto", maxHeight: maxHeight, border: "1px solid #333", borderRadius: "8px", padding: "1rem", background: "#0d0d0d", cursor: "grab", position: "relative" }; const buttonStyle = { background: "#2d9a67", color: "#fff", border: "none", borderRadius: "4px", padding: "4px 10px", cursor: "pointer", fontSize: "0.75rem", fontWeight: "600" }; return _jsxs(_components.div, { style: { position: "relative", marginBottom: "1rem" }, children: [title && _jsx(_components.p, { style: { textAlign: "center", fontStyle: "italic", color: "#fff", marginBottom: "0.5rem", fontSize: "0.875rem" }, children: title }), _jsx(_components.div, { style: containerStyle, children: _jsx(_components.div, { style: { minWidth: minWidth, transform: `scale(${zoom / 100})`, transformOrigin: "top left" }, children: children }) }), _jsxs(_components.div, { style: { display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "0.5rem", marginTop: "0.5rem" }, children: [_jsx(_components.span, { style: { fontSize: "0.75rem", color: "#666", marginRight: "auto" }, children: "Scroll to pan" }), _jsx(_components.button, { style: buttonStyle, onClick: zoomOut, title: "Zoom out", children: "−" }), _jsxs(_components.span, { style: { fontSize: "0.75rem", color: "#888", minWidth: "40px", textAlign: "center" }, children: [zoom, "%"] }), _jsx(_components.button, { style: buttonStyle, onClick: zoomIn, title: "Zoom in", children: "+" }), _jsx(_components.button, { style: { ...buttonStyle, background: "#333" }, onClick: resetZoom, title: "Reset zoom", children: "100%" })] })] }); }; function _createMdxContent(props) { const {Mermaid, Tab, Tabs} = { ..._provideComponents(), ...props.components }; if (!Mermaid) _missingMdxReference("Mermaid", true); if (!Tab) _missingMdxReference("Tab", true); if (!Tabs) _missingMdxReference("Tabs", true); return _jsxs(Tabs, { children: [_jsx(Tab, { title: "Network Layers", id: "network-layers", children: _jsx(ScrollableDiagram, { title: "High Level Network Architecture", maxHeight: "900px", children: _jsx(Mermaid, { chart: `%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#1a1a1a', 'primaryTextColor': '#fff', 'primaryBorderColor': '#00eb88', 'lineColor': '#00eb88', 'secondaryColor': '#2d2d2d', 'tertiaryColor': '#1a1a1a', 'edgeLabelBackground': '#1a1a1a', 'clusterBkg': '#1a1a1a', 'clusterBorder': '#00eb88' }}}%% flowchart TD subgraph AppLayer[Application Layer] U[User Application] end subgraph GatewayLayer[Gateway Layer] GI[Job Intake] GM[Capability Matching] GP[Pricing Engine] GR[Routing Engine] end subgraph ComputeLayer[Orchestrator Layer] OC[Orchestrator Controller] OG[GPU Workers
Inference, Transcoding, BYOC] end U --> GI --> GM --> GR --> OC --> OG --> OC --> GI --> U` }) }) }), _jsx(Tab, { title: "Routing Paths", id: "routing-paths", children: _jsx(ScrollableDiagram, { title: "Routing Path Breakdown", maxHeight: "900px", children: _jsx(Mermaid, { chart: `%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#1a1a1a', 'primaryTextColor': '#fff', 'primaryBorderColor': '#00eb88', 'lineColor': '#00eb88', 'secondaryColor': '#2d2d2d', 'tertiaryColor': '#1a1a1a', 'actorBkg': '#1a1a1a', 'actorBorder': '#00eb88', 'actorTextColor': '#fff', 'signalColor': '#00eb88', 'signalTextColor': '#fff' }}}%% sequenceDiagram participant App participant Gateway participant Marketplace participant Orchestrator App->>Gateway: Submit job Gateway->>Marketplace: Query orchestrator capabilities Marketplace-->>Gateway: Matching candidates Gateway->>Orchestrator: Dispatch workload Orchestrator->>Gateway: Return results Gateway->>App: Deliver output` }) }) }), _jsx(Tab, { title: "Gateway Pipelines", id: "gateway-pipelines", children: _jsx(ScrollableDiagram, { title: "Dual Gateway Architecture: Video & AI Pipelines", maxHeight: "900px", children: _jsx(Mermaid, { chart: `%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#1a1a1a', 'primaryTextColor': '#fff', 'primaryBorderColor': '#2d9a67', 'lineColor': '#2d9a67', 'secondaryColor': '#0d0d0d', 'tertiaryColor': '#1a1a1a', 'background': '#0d0d0d', 'fontFamily': 'system-ui' }}}%% flowchart LR subgraph INPUT["Input Sources"] CAM["Camera / RTMP / WebRTC"] VID["Video File"] AIIN["AI Prompt / Model Request"] end GATEWAY["Gateway Node
• Ingest (RTMP/HTTP/WebRTC)
• Segment video
• Queue + order jobs
• AI pipeline routing
• Orchestrator selection
• Verification & receipts"] CAM -->|"Live stream"| GATEWAY VID -->|"VOD upload"| GATEWAY AIIN -->|"AI job request"| GATEWAY subgraph JOBS["Workflows"] VJ["Video Transcoding Job"] AIJ["AI Inference Job
(Daydream / ComfyStream / BYOC)"] end GATEWAY --> VJ GATEWAY --> AIJ subgraph ORCH["Orchestrator Network (GPU Operators)"] O1["Orchestrator A
GPU Pool"] O2["Orchestrator B
GPU Pool"] O3["Orchestrator C
GPU Pool"] end VJ -->|"Transcode segments"| O1 VJ --> O2 AIJ -->|"Run model / inference"| O1 AIJ --> O3 subgraph OUTPUTS["Outputs"] HLS["Adaptive Bitrate Video (HLS/LL-HLS)"] AIOUT["AI Frames / Stylized Video"] end O1 --> GATEWAY O2 --> GATEWAY O3 --> GATEWAY GATEWAY --> HLS GATEWAY --> AIOUT ETH[("Arbitrum Blockchain
Payments • Tickets • Rewards")] GATEWAY --> ETH O1 --> ETH O2 --> ETH O3 --> ETH classDef default fill:#1a1a1a,color:#fff,stroke:#2d9a67,stroke-width:2px style INPUT fill:#0d0d0d,stroke:#2d9a67,stroke-width:1px style JOBS fill:#0d0d0d,stroke:#2d9a67,stroke-width:1px style ORCH fill:#0d0d0d,stroke:#2d9a67,stroke-width:1px style OUTPUTS fill:#0d0d0d,stroke:#2d9a67,stroke-width:1px` }) }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { ScrollableDiagram, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

About Gateways

Gateway Services & Providers

Run Your Own Gateway

Gateway Tools & Dashboards

Gateway Guides & Resources

Technical References