Fix whitepaper figures 2-4: replace Mermaid fig2 with SVG, fix donut arc visibility in fig3, widen GPU boxes and center callout in fig4
This commit is contained in:
Z User
parent
2345e2cc5a
commit
1905559cb8
154
index.html
154
index.html
@ -1508,21 +1508,54 @@
|
||||
optimization pipeline and pointer-based weight mapping system</p>
|
||||
|
||||
<h3>Figure 2: Lossless Pointer-Based Weight Mapping</h3>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
subgraph "Traditional Storage"
|
||||
A1["Weight Matrix (4.2B values)"] --> B1["Raw Storage (16.8 GB FP32)"]
|
||||
B1 --> C1["Many Duplicate Values (Redundant Memory)"]
|
||||
end
|
||||
subgraph "Moxiegen Pointer Mapping"
|
||||
A2["Weight Matrix (4.2B values)"] --> B2["Scan & Hash All Values"]
|
||||
B2 --> C2["Unique Value Pool (~450M values)"]
|
||||
C2 --> D2["Pointer Index (Map positions to IDs)"]
|
||||
D2 --> E2["Compressed Storage (~2.1 GB Total)"]
|
||||
end
|
||||
style B2 fill:#064e3b,color:#f8fafc,stroke:#34d399
|
||||
style C2 fill:#78350f,color:#f8fafc,stroke:#fbbf24
|
||||
style E2 fill:#065f46,color:#f8fafc,stroke:#34d399
|
||||
<div style="text-align:center; margin:1.5rem 0; overflow-x:auto;">
|
||||
<svg viewBox="0 0 540 260" xmlns="http://www.w3.org/2000/svg" style="max-width:540px; width:100%; height:auto;">
|
||||
<!-- Traditional Storage subgraph -->
|
||||
<rect x="10" y="10" width="240" height="240" rx="10" fill="rgba(30,58,95,0.2)" stroke="#1e3a5f" stroke-width="1.5"/>
|
||||
<text x="130" y="35" text-anchor="middle" fill="#94a3b8" font-family="Space Grotesk,sans-serif" font-size="12" font-weight="600">Traditional Storage</text>
|
||||
|
||||
<rect x="30" y="55" width="200" height="42" rx="8" fill="rgba(30,58,95,0.4)" stroke="#475569" stroke-width="1"/>
|
||||
<text x="130" y="80" text-anchor="middle" fill="#e2e8f0" font-family="Inter,sans-serif" font-size="12" font-weight="500">Weight Matrix (4.2B values)</text>
|
||||
|
||||
<line x1="130" y1="97" x2="130" y2="115" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowGray)"/>
|
||||
|
||||
<rect x="30" y="115" width="200" height="42" rx="8" fill="rgba(30,58,95,0.4)" stroke="#475569" stroke-width="1"/>
|
||||
<text x="130" y="140" text-anchor="middle" fill="#e2e8f0" font-family="Inter,sans-serif" font-size="12" font-weight="500">Raw Storage (16.8 GB FP32)</text>
|
||||
|
||||
<line x1="130" y1="157" x2="130" y2="175" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowGray)"/>
|
||||
|
||||
<rect x="30" y="175" width="200" height="42" rx="8" fill="rgba(30,58,95,0.4)" stroke="#475569" stroke-width="1"/>
|
||||
<text x="130" y="200" text-anchor="middle" fill="#e2e8f0" font-family="Inter,sans-serif" font-size="11" font-weight="500">Duplicate Values (Redundant)</text>
|
||||
|
||||
<!-- Moxiegen subgraph -->
|
||||
<rect x="290" y="10" width="240" height="240" rx="10" fill="rgba(6,95,70,0.12)" stroke="#065f46" stroke-width="1.5"/>
|
||||
<text x="410" y="35" text-anchor="middle" fill="#34d399" font-family="Space Grotesk,sans-serif" font-size="12" font-weight="600">Moxiegen Pointer Mapping</text>
|
||||
|
||||
<rect x="310" y="55" width="200" height="36" rx="8" fill="rgba(30,58,95,0.4)" stroke="#475569" stroke-width="1"/>
|
||||
<text x="410" y="78" text-anchor="middle" fill="#e2e8f0" font-family="Inter,sans-serif" font-size="11" font-weight="500">Weight Matrix (4.2B values)</text>
|
||||
|
||||
<line x1="410" y1="91" x2="410" y2="105" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowGray)"/>
|
||||
|
||||
<rect x="310" y="105" width="200" height="36" rx="8" fill="#064e3b" stroke="#34d399" stroke-width="1.5"/>
|
||||
<text x="410" y="128" text-anchor="middle" fill="#f8fafc" font-family="Inter,sans-serif" font-size="11" font-weight="600">Scan & Hash All Values</text>
|
||||
|
||||
<line x1="410" y1="141" x2="410" y2="155" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowGray)"/>
|
||||
|
||||
<rect x="310" y="155" width="200" height="36" rx="8" fill="#78350f" stroke="#fbbf24" stroke-width="1.5"/>
|
||||
<text x="410" y="178" text-anchor="middle" fill="#f8fafc" font-family="Inter,sans-serif" font-size="11" font-weight="600">Unique Value Pool (~450M)</text>
|
||||
|
||||
<line x1="410" y1="191" x2="410" y2="205" stroke="#475569" stroke-width="1.5" marker-end="url(#arrowGray)"/>
|
||||
|
||||
<rect x="310" y="205" width="200" height="36" rx="8" fill="#064e3b" stroke="#34d399" stroke-width="1.5"/>
|
||||
<text x="410" y="228" text-anchor="middle" fill="#f8fafc" font-family="Inter,sans-serif" font-size="11" font-weight="600">Compressed Storage (~2.1 GB)</text>
|
||||
|
||||
<!-- Arrow marker definition -->
|
||||
<defs>
|
||||
<marker id="arrowGray" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
|
||||
<path d="M0,0 L8,4 L0,8 Z" fill="#475569"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="figure-caption">Figure 2: Comparison of traditional weight storage versus Moxiegen's
|
||||
pointer-based deduplication</p>
|
||||
@ -1600,21 +1633,24 @@
|
||||
<h3>Figure 3: Memory Efficiency Breakdown</h3>
|
||||
<div style="text-align:center; margin:1.5rem 0;">
|
||||
<svg viewBox="0 0 500 320" xmlns="http://www.w3.org/2000/svg" style="max-width:480px; width:100%; height:auto;">
|
||||
<!-- Donut chart: 940 GB traditional vs 47 GB moxiegen -->
|
||||
<!-- Total = 987. Angles: traditional = 940/987*360 = 342.9deg, moxiegen = 17.1deg -->
|
||||
<!-- Center: 250,170. Outer R=130, Inner R=75 -->
|
||||
<!-- Traditional arc (large): from -90deg to ~252.9deg (342.9deg sweep) -->
|
||||
<circle cx="250" cy="170" r="130" fill="none" stroke="#1e3a5f" stroke-width="55" stroke-dasharray="817.7 816.8" stroke-dashoffset="-0.4" transform="rotate(-90 250 170)" opacity="0.9"/>
|
||||
<!-- Moxiegen arc (small): 17.1deg of circumference -->
|
||||
<circle cx="250" cy="170" r="130" fill="none" stroke="#34d399" stroke-width="55" stroke-dasharray="40.8 1634.6" stroke-dashoffset="-818.2" transform="rotate(-90 250 170)"/>
|
||||
<!-- Donut chart using arc paths for precise control -->
|
||||
<!-- Center: 250,165. Outer R=130, Inner R=75, Mid R=102.5 -->
|
||||
<!-- Traditional: 940/987 = 95.2% = 342.9deg, from -90deg to 252.9deg -->
|
||||
<path d="M 250 35 A 130 130 0 1 1 210.6 289.7 L 227.7 246.3 A 85 85 0 1 0 250 80 Z"
|
||||
fill="#1e3a5f" opacity="0.9"/>
|
||||
<!-- Moxiegen: 47/987 = 4.8% = 17.1deg, from 252.9deg to 270deg (-90deg) -->
|
||||
<path d="M 210.6 289.7 A 130 130 0 0 1 250 35 L 250 80 A 85 85 0 0 0 227.7 246.3 Z"
|
||||
fill="#34d399"/>
|
||||
<!-- Center circle (hole) -->
|
||||
<circle cx="250" cy="165" r="75" fill="#0f172a"/>
|
||||
<!-- Center text -->
|
||||
<text x="250" y="158" text-anchor="middle" fill="#f8fafc" font-family="Space Grotesk,sans-serif" font-size="28" font-weight="700">95%</text>
|
||||
<text x="250" y="182" text-anchor="middle" fill="#64748b" font-family="Inter,sans-serif" font-size="12">memory reduction</text>
|
||||
<text x="250" y="153" text-anchor="middle" fill="#f8fafc" font-family="Space Grotesk,sans-serif" font-size="28" font-weight="700">95%</text>
|
||||
<text x="250" y="177" text-anchor="middle" fill="#64748b" font-family="Inter,sans-serif" font-size="12">memory reduction</text>
|
||||
<!-- Legend -->
|
||||
<rect x="80" y="280" width="14" height="14" rx="3" fill="#1e3a5f" stroke="#475569" stroke-width="1"/>
|
||||
<text x="100" y="292" fill="#94a3b8" font-family="Inter,sans-serif" font-size="13">Traditional FP32 — 940 GB</text>
|
||||
<rect x="280" y="280" width="14" height="14" rx="3" fill="#34d399"/>
|
||||
<text x="300" y="292" fill="#94a3b8" font-family="Inter,sans-serif" font-size="13">Moxiegen — 47 GB</text>
|
||||
<rect x="60" y="290" width="14" height="14" rx="3" fill="#1e3a5f" stroke="#475569" stroke-width="1"/>
|
||||
<text x="80" y="302" fill="#94a3b8" font-family="Inter,sans-serif" font-size="13">Traditional FP32 — 940 GB</text>
|
||||
<rect x="280" y="290" width="14" height="14" rx="3" fill="#34d399"/>
|
||||
<text x="300" y="302" fill="#94a3b8" font-family="Inter,sans-serif" font-size="13">Moxiegen — 47 GB</text>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="figure-caption">Figure 3: Dramatic memory reduction achieved through pointer-based weight
|
||||
@ -1679,60 +1715,62 @@
|
||||
</p>
|
||||
|
||||
<h3>Figure 4: Energy Consumption Comparison</h3>
|
||||
<div style="text-align:center; margin:1.5rem 0;">
|
||||
<svg viewBox="0 0 520 340" xmlns="http://www.w3.org/2000/svg" style="max-width:500px; width:100%; height:auto;">
|
||||
<div style="text-align:center; margin:1.5rem 0; overflow-x:auto;">
|
||||
<svg viewBox="0 0 620 340" xmlns="http://www.w3.org/2000/svg" style="max-width:600px; width:100%; height:auto;">
|
||||
<!-- Background panels -->
|
||||
<rect x="30" y="30" width="210" height="280" rx="12" fill="rgba(127,29,29,0.15)" stroke="#7f1d1d" stroke-width="1"/>
|
||||
<rect x="280" y="30" width="210" height="280" rx="12" fill="rgba(6,78,59,0.15)" stroke="#065f46" stroke-width="1"/>
|
||||
<rect x="20" y="30" width="240" height="280" rx="12" fill="rgba(127,29,29,0.15)" stroke="#7f1d1d" stroke-width="1"/>
|
||||
<rect x="360" y="30" width="240" height="280" rx="12" fill="rgba(6,78,59,0.15)" stroke="#065f46" stroke-width="1"/>
|
||||
|
||||
<!-- Traditional panel -->
|
||||
<text x="135" y="65" text-anchor="middle" fill="#f87171" font-family="Space Grotesk,sans-serif" font-size="14" font-weight="600">Traditional A100 Cluster</text>
|
||||
<text x="140" y="65" text-anchor="middle" fill="#f87171" font-family="Space Grotesk,sans-serif" font-size="14" font-weight="600">Traditional A100 Cluster</text>
|
||||
|
||||
<!-- GPU icon -->
|
||||
<rect x="95" y="85" width="80" height="36" rx="6" fill="rgba(248,113,113,0.1)" stroke="#f87171" stroke-width="1"/>
|
||||
<text x="135" y="107" text-anchor="middle" fill="#fca5a5" font-family="Inter,sans-serif" font-size="12" font-weight="600">12x A100 GPUs</text>
|
||||
<!-- GPU icon - wider box -->
|
||||
<rect x="65" y="85" width="150" height="36" rx="6" fill="rgba(248,113,113,0.1)" stroke="#f87171" stroke-width="1"/>
|
||||
<text x="140" y="107" text-anchor="middle" fill="#fca5a5" font-family="Inter,sans-serif" font-size="13" font-weight="600">12x A100 GPUs</text>
|
||||
|
||||
<!-- Power -->
|
||||
<text x="135" y="148" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Power Draw</text>
|
||||
<text x="135" y="172" text-anchor="middle" fill="#f87171" font-family="Space Grotesk,sans-serif" font-size="24" font-weight="700">4,200W</text>
|
||||
<text x="140" y="148" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Power Draw</text>
|
||||
<text x="140" y="172" text-anchor="middle" fill="#f87171" font-family="Space Grotesk,sans-serif" font-size="24" font-weight="700">4,200W</text>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="60" y1="190" x2="210" y2="190" stroke="#7f1d1d" stroke-width="0.5" opacity="0.5"/>
|
||||
<line x1="50" y1="190" x2="230" y2="190" stroke="#7f1d1d" stroke-width="0.5" opacity="0.5"/>
|
||||
|
||||
<!-- Energy -->
|
||||
<text x="135" y="215" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Annual Energy</text>
|
||||
<text x="135" y="239" text-anchor="middle" fill="#fca5a5" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">36,792 kWh</text>
|
||||
<text x="140" y="215" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Annual Energy</text>
|
||||
<text x="140" y="239" text-anchor="middle" fill="#fca5a5" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">36,792 kWh</text>
|
||||
|
||||
<!-- CO2 -->
|
||||
<text x="135" y="268" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">CO2 Emissions</text>
|
||||
<text x="135" y="292" text-anchor="middle" fill="#fca5a5" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">16.5 t/yr</text>
|
||||
<text x="140" y="268" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">CO2 Emissions</text>
|
||||
<text x="140" y="292" text-anchor="middle" fill="#fca5a5" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">16.5 t/yr</text>
|
||||
|
||||
<!-- Moxiegen panel -->
|
||||
<text x="385" y="65" text-anchor="middle" fill="#34d399" font-family="Space Grotesk,sans-serif" font-size="14" font-weight="600">Moxiegen Method</text>
|
||||
<text x="480" y="65" text-anchor="middle" fill="#34d399" font-family="Space Grotesk,sans-serif" font-size="14" font-weight="600">Moxiegen Method</text>
|
||||
|
||||
<!-- GPU icon -->
|
||||
<rect x="345" y="85" width="80" height="36" rx="6" fill="rgba(52,211,153,0.1)" stroke="#34d399" stroke-width="1"/>
|
||||
<text x="385" y="107" text-anchor="middle" fill="#6ee7b7" font-family="Inter,sans-serif" font-size="12" font-weight="600">1x RTX 3060</text>
|
||||
<!-- GPU icon - wider box -->
|
||||
<rect x="405" y="85" width="150" height="36" rx="6" fill="rgba(52,211,153,0.1)" stroke="#34d399" stroke-width="1"/>
|
||||
<text x="480" y="107" text-anchor="middle" fill="#6ee7b7" font-family="Inter,sans-serif" font-size="13" font-weight="600">1x RTX 3060</text>
|
||||
|
||||
<!-- Power -->
|
||||
<text x="385" y="148" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Power Draw</text>
|
||||
<text x="385" y="172" text-anchor="middle" fill="#34d399" font-family="Space Grotesk,sans-serif" font-size="24" font-weight="700">170W</text>
|
||||
<text x="480" y="148" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Power Draw</text>
|
||||
<text x="480" y="172" text-anchor="middle" fill="#34d399" font-family="Space Grotesk,sans-serif" font-size="24" font-weight="700">170W</text>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="310" y1="190" x2="460" y2="190" stroke="#065f46" stroke-width="0.5" opacity="0.5"/>
|
||||
<line x1="390" y1="190" x2="570" y2="190" stroke="#065f46" stroke-width="0.5" opacity="0.5"/>
|
||||
|
||||
<!-- Energy -->
|
||||
<text x="385" y="215" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Annual Energy</text>
|
||||
<text x="385" y="239" text-anchor="middle" fill="#6ee7b7" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">1,489 kWh</text>
|
||||
<text x="480" y="215" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">Annual Energy</text>
|
||||
<text x="480" y="239" text-anchor="middle" fill="#6ee7b7" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">1,489 kWh</text>
|
||||
|
||||
<!-- CO2 -->
|
||||
<text x="385" y="268" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">CO2 Emissions</text>
|
||||
<text x="385" y="292" text-anchor="middle" fill="#6ee7b7" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">0.67 t/yr</text>
|
||||
<text x="480" y="268" text-anchor="middle" fill="#94a3b8" font-family="Inter,sans-serif" font-size="11">CO2 Emissions</text>
|
||||
<text x="480" y="292" text-anchor="middle" fill="#6ee7b7" font-family="Space Grotesk,sans-serif" font-size="20" font-weight="700">0.67 t/yr</text>
|
||||
|
||||
<!-- Center arrow -->
|
||||
<text x="260" y="175" text-anchor="middle" fill="#64748b" font-family="Inter,sans-serif" font-size="20">›</text>
|
||||
<text x="260" y="195" text-anchor="middle" fill="#34d399" font-family="Space Grotesk,sans-serif" font-size="13" font-weight="700">96%</text>
|
||||
<text x="260" y="212" text-anchor="middle" fill="#34d399" font-family="Inter,sans-serif" font-size="10">less energy</text>
|
||||
<!-- Center callout -->
|
||||
<text x="310" y="155" text-anchor="middle" fill="#f8fafc" font-family="Space Grotesk,sans-serif" font-size="28" font-weight="700">96%</text>
|
||||
<text x="310" y="178" text-anchor="middle" fill="#34d399" font-family="Inter,sans-serif" font-size="13" font-weight="600">less energy</text>
|
||||
<!-- Arrows -->
|
||||
<text x="275" y="168" text-anchor="middle" fill="#475569" font-family="Inter,sans-serif" font-size="18">‹</text>
|
||||
<text x="345" y="168" text-anchor="middle" fill="#475569" font-family="Inter,sans-serif" font-size="18">›</text>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="figure-caption">Figure 4: Environmental impact comparison showing 96% reduction in energy
|
||||
|
||||
Loading…
Reference in New Issue
Block a user