Replace Figure 3 & 4 Mermaid diagrams with hand-crafted dark-theme SVGs
This commit is contained in:
Z User
parent
1eb92b5a40
commit
2345e2cc5a
93
index.html
93
index.html
@ -1598,10 +1598,24 @@
|
||||
</table>
|
||||
|
||||
<h3>Figure 3: Memory Efficiency Breakdown</h3>
|
||||
<div class="mermaid">
|
||||
pie title Qwen3-235B Memory Usage (Traditional vs Moxiegen)
|
||||
"Traditional FP32 (940 GB)" : 940
|
||||
"Moxiegen Compressed (47 GB)" : 47
|
||||
<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)"/>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="figure-caption">Figure 3: Dramatic memory reduction achieved through pointer-based weight
|
||||
mapping</p>
|
||||
@ -1665,22 +1679,61 @@
|
||||
</p>
|
||||
|
||||
<h3>Figure 4: Energy Consumption Comparison</h3>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
subgraph "Traditional A100 Cluster"
|
||||
A["12x A100 GPUs (~4,200W)"] --> B["Annual Energy: ~36,792 kWh"]
|
||||
B --> C["CO2 Emissions: ~16.5 tons/year"]
|
||||
end
|
||||
subgraph "Moxiegen Method"
|
||||
D["1x RTX 3060 (~170W)"] --> E["Annual Energy: ~1,489 kWh"]
|
||||
E --> F["CO2 Emissions: ~0.67 tons/year"]
|
||||
end
|
||||
style A fill:#7f1d1d,color:#f8fafc,stroke:#f87171
|
||||
style B fill:#7f1d1d,color:#f8fafc,stroke:#f87171
|
||||
style C fill:#7f1d1d,color:#f8fafc,stroke:#f87171
|
||||
style D fill:#064e3b,color:#f8fafc,stroke:#34d399
|
||||
style E fill:#064e3b,color:#f8fafc,stroke:#34d399
|
||||
style F fill:#064e3b,color:#f8fafc,stroke:#34d399
|
||||
<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;">
|
||||
<!-- 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"/>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="60" y1="190" x2="210" 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="310" y1="190" x2="460" 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="figure-caption">Figure 4: Environmental impact comparison showing 96% reduction in energy
|
||||
consumption</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user