Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
disagg-same-node.svg 11 KB
Newer Older
dagil-nvidia's avatar
docs: add SVG diagrams to disaggregated inference communication guide (#7638)  
dagil-nvidia committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 250" width="800" height="250" role="img" aria-labelledby="title desc">
  <title id="title">disagg-same-node</title>
  <desc id="desc">Architecture diagram showing disagg-same-node</desc>

  <defs>
    <linearGradient id="green-fill" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#8BD420"/>
      <stop offset="100%" stop-color="#6AAF00"/>
    </linearGradient>
    <linearGradient id="accent-fade" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#76B900" stop-opacity="0"/>
      <stop offset="12%" stop-color="#76B900" stop-opacity="0.65"/>
      <stop offset="88%" stop-color="#76B900" stop-opacity="0.65"/>
      <stop offset="100%" stop-color="#76B900" stop-opacity="0"/>
    </linearGradient>
    <filter id="shadow" x="-8%" y="-10%" width="116%" height="128%">
      <feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="rgba(15,23,42,0.10)"/>
    </filter>
    <filter id="green-glow" x="-12%" y="-14%" width="124%" height="136%">
      <feDropShadow dx="0" dy="3" stdDeviation="8" flood-color="rgba(118,185,0,0.35)"/>
    </filter>
    <filter id="blue-glow" x="-4%" y="-4%" width="108%" height="114%">
      <feDropShadow dx="0" dy="2" stdDeviation="10" flood-color="rgba(59,130,246,0.15)"/>
    </filter>
    <pattern id="grid-dots" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="0.5" fill="var(--grid-dot)"/>
    </pattern>
    <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3"
            markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0,0.5 L6,3 L0,5.5 Z" fill="var(--connector)"/>
    </marker>
    <marker id="arrow-info" viewBox="0 0 6 6" refX="5" refY="3"
            markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0,0.5 L6,3 L0,5.5 Z" fill="var(--info)"/>
    </marker>
    <marker id="arrow-dark" viewBox="0 0 6 6" refX="5" refY="3"
            markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0,0.5 L6,3 L0,5.5 Z" fill="var(--text-subtle)"/>
    </marker>
    <marker id="arrow-green" viewBox="0 0 6 6" refX="5" refY="3"
            markerWidth="6" markerHeight="6" orient="auto">
      <path d="M0,0.5 L6,3 L0,5.5 Z" fill="var(--pill-kv)"/>
    </marker>
    <marker id="arrow-green-rev" viewBox="0 0 6 6" refX="1" refY="3"
            markerWidth="6" markerHeight="6" orient="auto">
      <path d="M6,0.5 L0,3 L6,5.5 Z" fill="var(--pill-kv)"/>
    </marker>
    <symbol id="sym-monitor" viewBox="0 0 14 14">
      <rect x="2" y="1" width="10" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.6"/>
      <line x1="7" y1="9" x2="7" y2="12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
      <line x1="4" y1="12" x2="10" y2="12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
    </symbol>
    <symbol id="sym-fork" viewBox="0 0 14 14">
      <path d="M2,7 L7,7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
      <path d="M7,7 L12,3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
      <path d="M7,7 L12,11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
      <circle cx="12" cy="3" r="1.2" fill="currentColor"/>
      <circle cx="12" cy="11" r="1.2" fill="currentColor"/>
    </symbol>
    <symbol id="sym-gauge" viewBox="0 0 14 14">
      <path d="M2,10 A5.5,5.5 0 1,1 12,10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
      <line x1="7" y1="9" x2="9.5" y2="4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
      <circle cx="7" cy="9" r="1" fill="currentColor"/>
    </symbol>
    <symbol id="sym-layers" viewBox="0 0 14 14">
      <path d="M1,8 L7,11 L13,8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1,5.5 L7,8.5 L13,5.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1,3 L7,6 L13,3 L7,0 Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
    </symbol>
    <symbol id="sym-stream" viewBox="0 0 14 14">
      <line x1="2" y1="3" x2="8" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="2" y1="7" x2="10" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="2" y1="11" x2="6" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="12" y1="0" x2="12" y2="14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
    </symbol>
    <symbol id="sym-blocks" viewBox="0 0 14 14">
      <rect x="0.5" y="0.5" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.3"/>
      <rect x="7" y="0.5" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.3"/>
      <rect x="0.5" y="7" width="5.5" height="5.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.3"/>
      <rect x="8" y="8" width="5.5" height="5.5" rx="1" fill="currentColor" opacity="0.25" stroke="currentColor" stroke-width="1.3"/>
    </symbol>
    <symbol id="sym-gate" viewBox="0 0 14 14">
      <rect x="2" y="1" width="4" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.4"/>
      <rect x="8" y="1" width="4" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.4"/>
    </symbol>
    <symbol id="sym-transfer" viewBox="0 0 14 12">
      <line x1="0" y1="6" x2="14" y2="6" stroke="currentColor" stroke-width="0.8" stroke-dasharray="2 2"/>
      <path d="M3,2 L7,6 L3,10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M11,2 L7,6 L11,10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
    </symbol>
  </defs>

  <style>
    :root {
      --surface: #FFFFFF;
      --surface-zone: rgba(219,234,254,0.25);
      --surface-accent: url(#green-fill);
      --text-primary: #0F172A;
      --text-secondary: #1E293B;
      --text-muted: #475569;
      --text-subtle: #64748B;
      --text-on-accent: #FFFFFF;
      --border: rgba(226,232,240,0.6);
      --border-zone: rgba(147,197,253,0.5);
      --accent: #76B900;
      --accent-start: #8BD420;
      --accent-end: #6AAF00;
      --error: #EF4444;
      --info: #3B82F6;
      --connector: #CBD5E1;
      --connector-dark: #64748B;
      --shadow: rgba(15,23,42,0.10);
      --glow-green: rgba(118,185,0,0.35);
      --glow-blue: rgba(59,130,246,0.15);
      --grid-dot: rgba(148,163,184,0.2);
      --pill-request: #3B82F6;
      --pill-kv: #D97706;
      --pill-kv-dark: #B45309;
      --pill-perf: #64748B;
      --zone-label: rgba(59,130,246,0.65);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --surface: #1E293B;
        --surface-zone: rgba(59,130,246,0.08);
        --surface-accent: url(#green-fill);
        --text-primary: #F1F5F9;
        --text-secondary: #CBD5E1;
        --text-muted: #94A3B8;
        --text-subtle: #64748B;
        --text-on-accent: #FFFFFF;
        --border: rgba(148,163,184,0.25);
        --border-zone: rgba(147,197,253,0.3);
        --accent: #76B900;
        --accent-start: #8BD420;
        --accent-end: #6AAF00;
        --error: #F87171;
        --info: #60A5FA;
        --connector: #475569;
        --connector-dark: #94A3B8;
        --shadow: rgba(0,0,0,0.40);
        --glow-green: rgba(118,185,0,0.25);
        --glow-blue: rgba(59,130,246,0.10);
        --grid-dot: rgba(226,232,240,0.15);
        --pill-request: #60A5FA;
        --pill-kv: #FBBF24;
        --pill-kv-dark: #D97706;
        --pill-perf: #94A3B8;
        --zone-label: rgba(96,165,250,0.7);
      }
    }
    text { font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
    .title { font-size: 18px; font-weight: 700; fill: var(--text-primary); }
    .subtitle { font-size: 11px; font-weight: 400; fill: var(--text-subtle); letter-spacing: 0.3px; }
    .box-label { font-size: 14px; font-weight: 600; fill: var(--text-secondary); text-anchor: start; }
    .box-label-center { font-size: 14px; font-weight: 600; fill: var(--text-secondary); text-anchor: middle; }
    .box-label-white { font-size: 14px; font-weight: 700; fill: var(--text-on-accent); text-anchor: middle; }
    .box-sub { font-size: 10px; font-weight: 400; fill: var(--text-muted); text-anchor: start; }
    .box-sub-center { font-size: 10px; font-weight: 400; fill: var(--text-muted); text-anchor: middle; }
    .box-sub-white { font-size: 10px; font-weight: 400; fill: var(--text-on-accent); opacity: 0.75; text-anchor: middle; }
    .conn-label { font-size: 10px; font-weight: 600; text-anchor: middle; }
    .zone-label { font-size: 10px; font-weight: 600; fill: var(--text-subtle); text-anchor: middle; letter-spacing: 1.2px; }
    .zone-label-desc { font-size: 9px; font-weight: normal; fill: #94A3B8; text-anchor: start; }
    .pill-request { fill: rgba(59,130,246,0.12); stroke: var(--glow-blue); stroke-width: 0.5; }
    .label-request { fill: var(--info); }
    .pill-kv { fill: rgba(217,119,6,0.12); stroke: rgba(217,119,6,0.15); stroke-width: 0.5; }
    .label-kv { fill: var(--pill-kv-dark); }
    .pill-perf { fill: rgba(100,116,139,0.08); stroke: rgba(100,116,139,0.12); stroke-width: 0.5; }
    .label-perf { fill: var(--text-muted); }
    .connector { fill: none; stroke: var(--connector); stroke-width: 2.0; }
    .connector-kv { fill: none; stroke: var(--pill-kv); stroke-width: 2.0; }
    .connector-dashed { fill: none; stroke: var(--connector); stroke-width: 2.0; stroke-dasharray: 6 4; }
  </style>
  <rect x="20" y="15" width="760" height="220" rx="14" fill="var(--surface-zone)" stroke="var(--border-zone)" stroke-width="1.0" stroke-dasharray="6 3" filter="url(#blue-glow)"/>
  <text x="400.0" y="35.5" class="zone-label" style="fill:var(--zone-label);text-anchor:middle;">SAME NODE</text>

  <rect x="58" y="55" width="260" height="130" rx="10" fill="var(--accent)" opacity="0.7"/>
  <rect x="60" y="55" width="260" height="130" rx="10" fill="var(--surface)" stroke="var(--border)" stroke-width="1.0" filter="url(#shadow)"/>
  <text x="70" y="74.9" class="box-label">Prefill Pod</text>
  <rect x="478" y="55" width="260" height="130" rx="10" fill="var(--accent)" opacity="0.7"/>
  <rect x="480" y="55" width="260" height="130" rx="10" fill="var(--surface)" stroke="var(--border)" stroke-width="1.0" filter="url(#shadow)"/>
  <text x="490" y="74.9" class="box-label">Decode Pod</text>
  <rect x="110" y="110" width="150" height="56" rx="10" fill="var(--surface-accent)" filter="url(#green-glow)"/>
  <text x="185.0" y="142.9" class="box-label-white">GPU 0 (VRAM)</text>
  <rect x="540" y="110" width="150" height="56" rx="10" fill="var(--surface-accent)" filter="url(#green-glow)"/>
  <text x="615.0" y="142.9" class="box-label-white">GPU 2 (VRAM)</text>

  <path d="M185,166 L185,220 L615,220 L615.0,170.0" fill="none" stroke="var(--info)" stroke-width="2.0" marker-end="url(#arrow-info)"/>
  <rect x="336.8" y="202.0" width="126.39999999999995" height="16" rx="8" class="pill-request"/>
  <text x="400" y="213" class="conn-label label-request">RDMA (InfiniBand/RoCE)</text>

</svg>