"use strict"; const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const ScrollableDiagram = ({children, title = '', maxHeight = '500px', minWidth = '100%', showControls = false, className = '', style = {}, ...rest}) => { const _components = { div: "div", input: "input", label: "label", p: "p", span: "span", style: "style", ..._provideComponents() }; const buildDiagramKey = (currentTitle = '', currentClassName = '') => { const source = `${currentTitle}|${currentClassName}|scrollable-diagram`; let hash = 0; for (let index = 0; index < source.length; index += 1) { hash = hash * 31 + source.charCodeAt(index) >>> 0; } return `docs-diagram-${hash.toString(36)}`; }; const diagramKey = buildDiagramKey(title, className); const zoomName = `${diagramKey}-zoom`; const zoomLevels = [{ label: '75%', value: 0.75 }, { label: '100%', value: 1 }, { label: '125%', value: 1.25 }, { label: '150%', value: 1.5 }]; const containerStyle = { overflow: 'auto', maxHeight, border: '1px solid var(--border)', borderRadius: '8px', padding: '1rem', background: 'var(--card-background)', position: 'relative' }; return _jsxs(_components.div, { className: className, style: { position: 'relative', marginBottom: '1rem', ...style }, ...rest, children: [title && _jsx(_components.p, { style: { textAlign: 'center', fontStyle: 'italic', color: 'var(--text)', marginBottom: '0.5rem', fontSize: '0.875rem' }, children: title }), showControls ? _jsx(_components.style, { children: ` [data-docs-diagram-key="${diagramKey}"] [data-docs-diagram-content] { transform: scale(1); transform-origin: top left; width: max-content; } ${zoomLevels.map(zoomLevel => ` #${diagramKey}-${zoomLevel.label.replace('%', '')}:checked ~ [data-docs-diagram-shell] [data-docs-diagram-content] { transform: scale(${zoomLevel.value}); } #${diagramKey}-${zoomLevel.label.replace('%', '')}:checked ~ [data-docs-diagram-controls] label[for="${diagramKey}-${zoomLevel.label.replace('%', '')}"] { background: var(--accent); color: var(--button-text); border-color: var(--accent); }`).join('\n')} ` }) : null, showControls ? zoomLevels.map(zoomLevel => { const inputId = `${diagramKey}-${zoomLevel.label.replace('%', '')}`; return _jsx(_components.input, { id: inputId, type: "radio", name: zoomName, defaultChecked: zoomLevel.value === 1, style: { position: 'absolute', opacity: 0, pointerEvents: 'none' } }, inputId); }) : null, _jsx(_components.div, { "data-docs-diagram-key": diagramKey, "data-docs-diagram-shell": true, style: containerStyle, children: _jsx(_components.div, { "data-docs-diagram-content": true, style: { minWidth, transformOrigin: 'top left', width: 'max-content' }, children: children }) }), showControls ? _jsxs(_components.div, { "data-docs-diagram-controls": true, style: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: '0.5rem', marginTop: '0.5rem', flexWrap: 'wrap' }, children: [_jsx(_components.span, { style: { fontSize: '0.75rem', color: 'var(--muted-text)', marginRight: 'auto' }, children: "Scroll to pan" }), zoomLevels.map(zoomLevel => { const inputId = `${diagramKey}-${zoomLevel.label.replace('%', '')}`; return _jsx(_components.label, { htmlFor: inputId, style: { background: 'transparent', color: 'var(--text)', border: '1px solid var(--border)', borderRadius: '4px', padding: '4px 10px', cursor: 'pointer', fontSize: '0.75rem', fontWeight: '600' }, children: zoomLevel.label }, inputId); })] }) : null] }); }; 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

Concepts

Quickstart ⚡

Gateway Setup

Guides

Resources