Update index.html

index.html

@@ -116,8 +116,7 @@
             </div>
         </div>
     </section>
-
-   <!-- Optimizations Section -->
+<!-- Optimizations Section -->
 <section id="optimizations" class="py-5 bg-dark text-white">
     <div class="container">
         <h2 class="text-center mb-5 animate__animated animate__fadeIn">🧙‍♂️ Ghostai1’s Math Sorcery</h2>
@@ -182,100 +181,169 @@
                 </div>
             </div>
 
-                <!-- Memory Tab -->
-                <div class="tab-pane fade" id="memory" role="tabpanel" aria-labelledby="memory-tab">
-                    <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
-                        <div class="col">
-                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#contextModal">
-                                <div class="card-body text-center">
-                                    <h3 class="card-title">🧬 Context Packing</h3>
-                                    <p class="card-text">Compresses contexts, saving ~50% VRAM.</p>
-                                    <p><strong>Boost: 50%</strong><br>Stat: ~2–3GB saved<br>Math: \( M_{\text{VRAM}} \propto O(1) \)</p>
-                                </div>
+            <!-- Memory Tab -->
+            <div class="tab-pane fade" id="memory" role="tabpanel" aria-labelledby="memory-tab">
+                <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
+                    <div class="col">
+                        <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#contextModal">
+                            <div class="card-body text-center">
+                                <h3 class="card-title">🧬 Context Packing</h3>
+                                <p class="lead-text">Compresses contexts, saving ~50% VRAM.</p>
+                                <p class="lead-text"><strong>Boost:</strong> 50% | <strong>Stat:</strong> ~2–3GB saved | <strong>Math:</strong> \( M_{\text{VRAM}} \propto O(1) \)</p>
                             </div>
                         </div>
-                        <div class="col">
-                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#tcmallocModal">
-                                <div class="card-body text-center">
-                                    <h3 class="card-title">💾 tcmalloc</h3>
-                                    <p class="card-text">Cuts memory overhead by ~5–20%.</p>
-                                    <p><strong>Boost: 5–20%</strong><br>Stat: ~15% CPU relief<br>Math: \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \)</p>
-                                </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#tcmallocModal">
+                            <div class="card-body text-center">
+                                <h3 class="card-title">💾 tcmalloc</h3>
+                                <p class="lead-text">Cuts memory overhead by ~5–20%.</p>
+                                <p class="lead-text"><strong>Boost:</strong> 5–20% | <strong>Stat:</strong> ~15% CPU relief | <strong>Math:</strong> \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \)</p>
                             </div>
                         </div>
-                        <div class="col">
-                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#cacheModal">
-                                <div class="card-body text-center">
-                                    <h3 class="card-title">📦 Memory Cache</h3>
-                                    <p class="card-text">Preloads data, reducing memory swaps by ~25%.</p>
-                                    <p><strong>Boost: 25%</strong><br>Stat: ~1–2GB less swaps<br>Math: \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \)</p>
-                                </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#cacheModal">
+                            <div class="card-body text-center">
+                                <h3 class="card-title">📦 Memory Cache</h3>
+                                <p class="lead-text">Preloads data, reducing memory swaps by ~25%.</p>
+                                <p class="lead-text"><strong>Boost:</strong> 25% | <strong>Stat:</strong> ~1–2GB less swaps | <strong>Math:</strong> \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \)</p>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <!-- Compute Tab -->
-                <div class="tab-pane fade" id="compute" role="tabpanel" aria-labelledby="compute-tab">
-                    <div class="row row-cols-1 row-cols-md-1 g-4 mb-4">
-                        <div class="col">
-                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#batchingModal">
-                                <div class="card-body text-center">
-                                    <h3 class="card-title">⚡ Dynamic Batching</h3>
-                                    <p class="card-text">Adapts batches for ~30–50% throughput gain.</p>
-                                    <p><strong>Boost: 30–50%</strong><br>Stat: ~1.5x FPS<br>Math: \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \)</p>
-                                </div>
+            <!-- Compute Tab -->
+            <div class="tab-pane fade" id="compute" role="tabpanel" aria-labelledby="compute-tab">
+                <div class="row row-cols-1 row-cols-md-1 g-4 mb-4">
+                    <div class="col">
+                        <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#batchingModal">
+                            <div class="card-body text-center">
+                                <h3 class="card-title">⚡ Dynamic Batching</h3>
+                                <p class="lead-text">Adapts batches for ~30–50% throughput gain.</p>
+                                <p class="lead-text"><strong>Boost:</strong> 30–50% | <strong>Stat:</strong> ~1.5x FPS | <strong>Math:</strong> \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \)</p>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <!-- Efficiency Tab -->
-                <div class="tab-pane fade" id="efficiency" role="tabpanel" aria-labelledby="efficiency-tab">
-                    <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
-                        <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#powerModal">
-                                <div class="card-body text-center">
-                                    <h3 class="card-title">🔋 Power Optimization</h3>
-                                    <p class="card-text">Reduces power draw by ~20–30% during idle states.</p>
-                                    <p><strong>Boost: 20–30%</strong><br>Stat: ~10W saved<br>Math: \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \)</p>
-                                </div>
+            <!-- Efficiency Tab -->
+            <div class="tab-pane fade" id="efficiency" role="tabpanel" aria-labelledby="efficiency-tab">
+                <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
+                    <div class="col">
+                        <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#powerModal">
+                            <div class="card-body text-center">
+                                <h3 class="card-title">🔋 Power Optimization</h3>
+                                <p class="lead-text">Reduces power draw by ~20–30% during idle states.</p>
+                                <p class="lead-text"><strong>Boost:</strong> 20–30% | <strong>Stat:</strong> ~10W saved | <strong>Math:</strong> \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \)</p>
                             </div>
                         </div>
-                        <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#threadModal">
-                                <div class="card-body text-center">
-                                    <h3 class="card-title">🧵 Thread Tuning</h3>
-                                    <p class="card-text">Optimizes thread allocation for ~10–15% CPU efficiency.</p>
-                                    <p><strong>Boost: 10–15%</strong><br>Stat: ~5–10% less overhead<br>Math: \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \)</p>
-                                </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#threadModal">
+                            <div class="card-body text-center">
+                                <h3 class="card-title">🧵 Thread Tuning</h3>
+                                <p class="lead-text">Optimizes thread allocation for ~10–15% CPU efficiency.</p>
+                                <p class="lead-text"><strong>Boost:</strong> 10–15% | <strong>Stat:</strong> ~5–10% less overhead | <strong>Math:</strong> \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \)</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <!-- Optimization Breakdown -->
-            <div class="row mt-4">
-                <div class="col-md-12">
-                    <h3 class="mb-3 text-white">Optimization Breakdown</h3>
-                    <ul class="text-white">
-                        <li><strong>🔮 Compressed Context Packing</strong>: Collapses frame contexts into a fixed-size matrix, slashing VRAM by ~50% (\( M_{\text{VRAM}} \propto O(1) \)), enabling 60s videos on 6GB VRAM GPUs like GTX 1650.</li>
-                        <li><strong>🧬 Dynamic Batching</strong>: Adapts batches (2–4 frames), boosting throughput by ~30–50% (\( \text{Throughput} \propto B \)), perfect for RTX 3050 with enhanced frame processing.</li>
-                        <li><strong>⚡️ Teacache Efficiency</strong>: Caches diffusion states, cutting ~40% off compute time (\( T_{\text{total}} \approx 0.6T_{\text{base}} \)), delivering ~10–15s/frame on RTX 3060.</li>
-                        <li><strong>🧙‍♂️ Sage-Attention</strong>: Streamlines attention layers, saving ~5–10% time (\( T_{\text{attn}} \approx 0.9T_{\text{base_attn}} \)), boosting low-VRAM performance.</li>
-                        <li><strong>💾 tcmalloc</strong>: Reduces memory overhead by ~5–20% (\( O_{\text{mem}} \approx 0.8O_{\text{glibc}} \)), easing CPU load by ~15% for smoother operation.</li>
-                        <li><strong>⚡ CUDA Tweaks</strong>: Cuts latency by ~10–15% (\( L_{\text{CUDA}} \approx 0.85L_{\text{base}} \)) with optimized memory allocation, maximizing GPU efficiency.</li>
-                        <li><strong>🚀 Dynamic Scheduling</strong>: Adapts processing queues, reducing task completion time by ~15–20% (\( T_{\text{sched}} \approx 0.8T_{\text{base_sched}} \)), enhancing workflow speed.</li>
-                        <li><strong>📦 Memory Cache</strong>: Preloads data, cutting memory swaps by ~25% (\( M_{\text{swap}} \approx 0.75M_{\text{base_swap}} \)), improving data access times.</li>
-                        <li><strong>🔋 Power Optimization</strong>: Lowers power draw by ~20–30% (\( P_{\text{idle}} \approx 0.7P_{\text{base_idle}} \)), ideal for energy-efficient setups.</li>
-                        <li><strong>🧵 Thread Tuning</strong>: Optimizes thread allocation, boosting CPU efficiency by ~10–15% (\( C_{\text{thread}} \approx 0.85C_{\text{base_thread}} \)), reducing overhead.</li>
-                    </ul>
+        <!-- Optimization Breakdown -->
+        <div class="row mt-5">
+            <div class="col-md-12">
+                <h3 class="mb-4 text-white">Optimization Breakdown</h3>
+                <div class="row row-cols-1 row-cols-md-2 g-4">
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">🔮 Compressed Context Packing</h4>
+                                <p class="lead-text">Collapses frame contexts into a fixed-size matrix, slashing VRAM by ~50% (\( M_{\text{VRAM}} \propto O(1) \)), enabling 60s videos on 6GB VRAM GPUs like GTX 1650.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">🧬 Dynamic Batching</h4>
+                                <p class="lead-text">Adapts batches (2–4 frames), boosting throughput by ~30–50% (\( \text{Throughput} \propto B \)), perfect for RTX 3050 with enhanced frame processing.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">⚡️ Teacache Efficiency</h4>
+                                <p class="lead-text">Caches diffusion states, cutting ~40% off compute time (\( T_{\text{total}} \approx 0.6T_{\text{base}} \)), delivering ~10–15s/frame on RTX 3060.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">🧙‍♂️ Sage-Attention</h4>
+                                <p class="lead-text">Streamlines attention layers, saving ~5–10% time (\( T_{\text{attn}} \approx 0.9T_{\text{base_attn}} \)), boosting low-VRAM performance.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">💾 tcmalloc</h4>
+                                <p class="lead-text">Reduces memory overhead by ~5–20% (\( O_{\text{mem}} \approx 0.8O_{\text{glibc}} \)), easing CPU load by ~15% for smoother operation.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">⚡ CUDA Tweaks</h4>
+                                <p class="lead-text">Cuts latency by ~10–15% (\( L_{\text{CUDA}} \approx 0.85L_{\text{base}} \)) with optimized memory allocation, maximizing GPU efficiency.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">🚀 Dynamic Scheduling</h4>
+                                <p class="lead-text">Adapts processing queues, reducing task completion time by ~15–20% (\( T_{\text{sched}} \approx 0.8T_{\text{base_sched}} \)), enhancing workflow speed.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">📦 Memory Cache</h4>
+                                <p class="lead-text">Preloads data, cutting memory swaps by ~25% (\( M_{\text{swap}} \approx 0.75M_{\text{base_swap}} \)), improving data access times.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">🔋 Power Optimization</h4>
+                                <p class="lead-text">Lowers power draw by ~20–30% (\( P_{\text{idle}} \approx 0.7P_{\text{base_idle}} \)), ideal for energy-efficient setups.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card bg-ghost-card">
+                            <div class="card-body text-center">
+                                <h4 class="card-title">🧵 Thread Tuning</h4>
+                                <p class="lead-text">Optimizes thread allocation, boosting CPU efficiency by ~10–15% (\( C_{\text{thread}} \approx 0.85C_{\text{base_thread}} \)), reducing overhead.</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
             <!-- VRAM Requirements Table -->
-            <div class="row mt-4">
+            <div class="row mt-5">
                 <div class="col-md-12">
                     <h3 class="text-center text-white mb-3">VRAM Requirements 🖥️</h3>
                     <div class="table-responsive">