> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Technical Architecture

> Technical Architecture Diagrams and References

export const ScrollableDiagram = ({children, title = '', maxHeight = '500px', minWidth = '100%', showControls = false, className = '', style = {}, ...rest}) => {
  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(--lp-color-border-default)',
    borderRadius: "8px",
    padding: "var(--lp-spacing-4)",
    background: 'var(--lp-color-bg-card)',
    position: 'relative'
  };
  return <div className={className} style={{
    position: 'relative',
    marginBottom: "var(--lp-spacing-4)",
    ...style
  }} {...rest}>
      {title && <p style={{
    textAlign: 'center',
    fontStyle: 'italic',
    color: 'var(--lp-color-text-secondary)',
    marginBottom: "var(--lp-spacing-2)",
    fontSize: '0.875rem'
  }}>
          {title}
        </p>}

      {showControls ? <style>{`
          [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(--lp-color-accent);
            color: var(--lp-color-on-accent);
            border-color: var(--lp-color-accent);
          }`).join('\n')}
        `}</style> : null}

      {showControls ? zoomLevels.map(zoomLevel => {
    const inputId = `${diagramKey}-${zoomLevel.label.replace('%', '')}`;
    return <input key={inputId} id={inputId} type="radio" name={zoomName} defaultChecked={zoomLevel.value === 1} style={{
      position: 'absolute',
      opacity: 0,
      pointerEvents: 'none'
    }} />;
  }) : null}

      <div data-docs-diagram-key={diagramKey} data-docs-diagram-shell style={containerStyle}>
        <div data-docs-diagram-content style={{
    minWidth,
    transformOrigin: 'top left',
    width: 'max-content'
  }}>
          {children}
        </div>
      </div>

      {showControls ? <div data-docs-diagram-controls style={{
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
    gap: "var(--lp-spacing-2)",
    marginTop: "var(--lp-spacing-2)",
    flexWrap: 'wrap'
  }}>
          <span style={{
    fontSize: "0.75rem",
    color: 'var(--lp-color-text-muted)',
    marginRight: 'auto'
  }}>
            Scroll to pan
          </span>
          {zoomLevels.map(zoomLevel => {
    const inputId = `${diagramKey}-${zoomLevel.label.replace('%', '')}`;
    return <label key={inputId} htmlFor={inputId} style={{
      background: 'transparent',
      color: 'var(--lp-color-text-secondary)',
      border: '1px solid var(--lp-color-border-default)',
      borderRadius: "4px",
      padding: '4px 10px',
      cursor: 'pointer',
      fontSize: "0.75rem",
      fontWeight: '600'
    }}>
                {zoomLevel.label}
              </label>;
  })}
        </div> : null}
    </div>;
};

<Tabs>
  <Tab title="Network Layers">
    <ScrollableDiagram title="High Level Network Architecture" maxHeight="900px">
      <Mermaid
        chart={`%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#18794E', 'primaryTextColor': '#fff', 'primaryBorderColor': '#3CB540', 'lineColor': '#3CB540', 'mainBkg': '#18794E', 'nodeBorder': '#3CB540', 'clusterBkg': 'transparent', 'clusterBorder': '#3CB540', 'titleColor': '#3CB540', 'edgeLabelBackground': 'transparent', 'textColor': '#3CB540', 'nodeTextColor': '#fff'}}}%%
            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<br/>Inference, Transcoding, BYOC]
            end
            U --> GI --> GM --> GR --> OC --> OG --> OC --> GI --> U`}
      />
    </ScrollableDiagram>
  </Tab>

  <Tab title="Routing Paths">
    <ScrollableDiagram title="Routing Path Breakdown" maxHeight="900px">
      <Mermaid
        chart={`%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#18794E', 'primaryTextColor': '#fff', 'primaryBorderColor': '#3CB540', 'lineColor': '#3CB540', 'mainBkg': '#18794E', 'nodeBorder': '#3CB540', 'clusterBkg': 'transparent', 'clusterBorder': '#3CB540', 'titleColor': '#3CB540', 'edgeLabelBackground': 'transparent', 'textColor': '#3CB540', 'nodeTextColor': '#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`}
      />
    </ScrollableDiagram>
  </Tab>

  <Tab title="Gateway Pipelines">
    <ScrollableDiagram title="Dual Gateway Architecture: Video & AI Pipelines" maxHeight="900px">
      <Mermaid
        chart={`%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#18794E', 'primaryTextColor': '#fff', 'primaryBorderColor': '#3CB540', 'lineColor': '#3CB540', 'mainBkg': '#18794E', 'nodeBorder': '#3CB540', 'clusterBkg': 'transparent', 'clusterBorder': '#3CB540', 'titleColor': '#3CB540', 'edgeLabelBackground': 'transparent', 'textColor': '#3CB540', 'nodeTextColor': '#fff'}}}%%
            flowchart LR
            subgraph INPUT["Input Sources"]
                CAM["Camera / RTMP / WebRTC"]
                VID["Video File"]
                AIIN["AI Prompt / Model Request"]
            end

            GATEWAY["Gateway Node<br/>• Ingest (RTMP/HTTP/WebRTC)<br/>• Segment video<br/>• Queue + order jobs<br/>• AI pipeline routing<br/>• Orchestrator selection<br/>• 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<br/>(Daydream / ComfyStream / BYOC)"]
            end

            GATEWAY --> VJ
            GATEWAY --> AIJ

            subgraph ORCH["Orchestrator Network (GPU Operators)"]
                O1["Orchestrator A<br/>GPU Pool"]
                O2["Orchestrator B<br/>GPU Pool"]
                O3["Orchestrator C<br/>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<br/>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`}
      />
    </ScrollableDiagram>
  </Tab>
</Tabs>