Skip to content

GitLab

Unverified Commit 19c192cd authored by dagil-nvidia's avatar dagil-nvidia Committed by GitHub
Browse files

docs: modernize introduction page SVG figures (#7352) 


Signed-off-by: default avatarDan Gil <dagil@nvidia.com>
parent 24fe435d
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 43 deletions
docs/assets/img/intro-foundations.svg
View file @ 19c192cd
<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<rect width="100%" height="100%" fill="transparent"/> <defs>
<filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#0A0F25" flood-opacity="0.12"/>
</filter>
</defs>
<style type="text/css"><![CDATA[
.fill-N1 { fill: #0A0F25; }
.fill-N7 { fill: transparent; }
.fill-B1 { fill: #0D32B2; }
.fill-B5 { fill: #EDF0FD; }
.stroke-B1 { stroke: #0D32B2; }
.fill-white { fill: #FFFFFF; }
<circle cx="250" cy="155" r="110" fill="#1a1a1a" stroke="#505050" stroke-width="1" /> .label {
<circle cx="150" cy="330" r="110" fill="#1a1a1a" stroke="#505050" stroke-width="1" /> font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
<circle cx="350" cy="330" r="110" fill="#1a1a1a" stroke="#505050" stroke-width="1" /> font-size: 18px;
font-weight: 700;
text-anchor: middle;
}
.sublabel {
font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
text-anchor: middle;
}
.center-label {
font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
font-size: 20px;
font-weight: 700;
text-anchor: middle;
}
<circle cx="250" cy="275" r="90" fill="#2d5a10" stroke="#76b900" stroke-width="2" /> @media (prefers-color-scheme: dark) {
.fill-N1 { fill: #F2F2F2; }
.fill-N7 { fill: transparent; }
.fill-B1 { fill: #4A6FF3; }
.fill-B5 { fill: #252535; }
.stroke-B1 { stroke: #6B9FFF; }
.fill-white { fill: #F2F2F2; }
}
]]></style>
<style> <rect width="100%" height="100%" class="fill-N7"/>
.label { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; text-anchor: middle; fill: #e0e0e0; }
.sublabel { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; text-anchor: middle; fill: #909090; }
.center-label { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; text-anchor: middle; fill: #f0f0f0; }
</style>
<text x="250" y="120" class="label">Scheduling</text> <circle cx="250" cy="155" r="110" class="fill-B5 stroke-B1" style="stroke-width:1" filter="url(#shadow)" />
<text x="250" y="140" class="sublabel">(Dynamo)</text> <circle cx="150" cy="330" r="110" class="fill-B5 stroke-B1" style="stroke-width:1" filter="url(#shadow)" />
<circle cx="350" cy="330" r="110" class="fill-B5 stroke-B1" style="stroke-width:1" filter="url(#shadow)" />
<text x="115" y="330" class="label">Memory</text> <circle cx="250" cy="275" r="90" class="fill-B1 stroke-B1" style="stroke-width:1" filter="url(#shadow)" />
<text x="115" y="352" class="label">Management</text>
<text x="115" y="375" class="sublabel">(KVBM)</text>
<text x="385" y="330" class="label">Data</text> <text x="250" y="118" class="label fill-N1">Scheduling</text>
<text x="385" y="352" class="label">Transfer</text> <text x="250" y="138" class="sublabel fill-N1">(Dynamo)</text>
<text x="385" y="375" class="sublabel">(NIXL)</text>
<text x="250" y="268" class="center-label">Disaggregated</text> <text x="115" y="325" class="label fill-N1">Memory</text>
<text x="250" y="292" class="center-label">Serving</text> <text x="115" y="347" class="label fill-N1">Management</text>
<text x="115" y="370" class="sublabel fill-N1">(KVBM)</text>
<text x="385" y="325" class="label fill-N1">Data</text>
<text x="385" y="347" class="label fill-N1">Transfer</text>
<text x="385" y="370" class="sublabel fill-N1">(NIXL)</text>
<text x="250" y="268" class="center-label fill-white">Disaggregated</text>
<text x="250" y="292" class="center-label fill-white">Serving</text>
</svg> </svg>
docs/assets/img/intro-perf.svg
View file @ 19c192cd
<svg width="650" height="440" viewBox="0 0 650 440" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="650" height="440" viewBox="0 0 650 440">
<rect width="100%" height="100%" fill="transparent"/> <defs>
<filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#0A0F25" flood-opacity="0.12"/>
</filter>
</defs>
<style type="text/css"><![CDATA[
.fill-N1 { fill: #0A0F25; }
.fill-N7 { fill: transparent; }
.fill-B1 { fill: #0D32B2; }
.fill-B5 { fill: #EDF0FD; }
.stroke-B1 { stroke: #0D32B2; }
<ellipse cx="325" cy="230" rx="200" ry="135" fill="none" stroke="#76b900" stroke-width="2" /> .box-text {
font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
font-size: 18px;
font-weight: 700;
text-anchor: middle;
}
.benefit {
font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 700;
}
.benefit-center {
font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
font-size: 16px;
font-weight: 700;
text-anchor: middle;
}
.summary {
font-family: "NVIDIA Sans", "Inter", "Segoe UI", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
text-anchor: middle;
}
<rect x="220" y="30" width="210" height="80" rx="12" fill="#1e3a08" stroke="#76b900" stroke-width="2"/> @media (prefers-color-scheme: dark) {
<text x="325" y="65" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#f0f0f0">Disaggregated</text> .fill-N1 { fill: #F2F2F2; }
<text x="325" y="87" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#f0f0f0">Serving</text> .fill-N7 { fill: transparent; }
.fill-B1 { fill: #6B9FFF; }
.fill-B5 { fill: #252535; }
.stroke-B1 { stroke: #6B9FFF; }
}
]]></style>
<rect x="35" y="230" width="210" height="80" rx="12" fill="#251a3a" stroke="#8a60c0" stroke-width="2"/> <rect width="100%" height="100%" class="fill-N7"/>
<text x="140" y="265" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#f0f0f0">KV Cache</text>
<text x="140" y="287" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#f0f0f0">Aware Routing</text>
<rect x="405" y="230" width="210" height="80" rx="12" fill="#1a2a30" stroke="#50b0a0" stroke-width="2"/> <ellipse cx="325" cy="230" rx="200" ry="135" fill="none" class="stroke-B1" style="stroke-width:1" />
<text x="510" y="265" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#f0f0f0">KV Cache</text>
<text x="510" y="287" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#f0f0f0">Offloading</text>
<!-- Left label: near left edge --> <rect x="220" y="30" width="210" height="80" rx="6" class="fill-B5 stroke-B1" style="stroke-width:1" filter="url(#shadow)"/>
<text x="45" y="155" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#d4b040">Improved latency</text> <text x="325" y="65" class="box-text fill-N1">Disaggregated</text>
<text x="45" y="173" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#d4b040">and throughput</text> <text x="325" y="87" class="box-text fill-N1">Serving</text>
<!-- Right label: near right edge --> <rect x="35" y="230" width="210" height="80" rx="6" class="fill-B5 stroke-B1" style="stroke-width:1" filter="url(#shadow)"/>
<text x="510" y="155" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#d4b040">Better TCO</text> <text x="140" y="265" class="box-text fill-N1">KV Cache</text>
<text x="510" y="173" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#d4b040">Faster TTFT</text> <text x="140" y="287" class="box-text fill-N1">Aware Routing</text>
<!-- Bottom label: between Routing and Offloading --> <rect x="405" y="230" width="210" height="80" rx="6" class="fill-B5 stroke-B1" style="stroke-width:1" filter="url(#shadow)"/>
<text x="325" y="345" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" text-anchor="middle" fill="#d4b040">Higher KV cache hit rate</text> <text x="510" y="265" class="box-text fill-N1">KV Cache</text>
<text x="510" y="287" class="box-text fill-N1">Offloading</text>
<!-- Composition summary --> <text x="30" y="145" class="benefit fill-N1">Improved latency</text>
<text x="325" y="420" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="600" text-anchor="middle" fill="#76b900">All Three Composed: Max Throughput | Lowest Latency | Best TCO</text> <text x="30" y="163" class="benefit fill-N1">and throughput</text>
<text x="510" y="145" class="benefit fill-N1">Better TCO</text>
<text x="510" y="163" class="benefit fill-N1">Faster TTFT</text>
<text x="325" y="345" class="benefit-center fill-N1">Higher KV cache hit rate</text>
<text x="325" y="420" class="summary fill-N1">All Three Composed: Max Throughput | Lowest Latency | Best TCO</text>
</svg> </svg>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment