Update index.html

index.html

@@ -28,10 +28,10 @@
                     <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                     <li class="nav-item"><a class="nav-link" href="#optimizations">Math Sorcery</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#demo">Demo</a></li>
                     <li class="nav-item"><a class="nav-link" href="#future">Future</a></li>
                     <li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
                     <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#model">Model Card</a></li>
                     <li class="nav-item"><a class="nav-link" href="#files">Last Files</a></li>
                 </ul>
             </div>
@@ -59,7 +59,7 @@
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">✨ Spectral Features</h2>
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Rivals Google’s Veo 3">
+                    <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Matches Veo 3’s photorealism">
                         <div class="card-body">
                             <h3 class="card-title">📹 Veo 3-Level AI</h3>
                             <p class="card-text">Hyper-realistic videos via next-frame prediction, running on 8GB RAM laptops.</p>
@@ -114,7 +114,7 @@
                                 <div class="card-body text-center">
                                     <h3 class="card-title">🔮 Teacache</h3>
                                     <p class="card-text">Caches diffusion states, slashing ~40% off frame time.</p>
-                                    <p><strong>Boost: ~40%</strong><br>Stat: ~12s/frame<br>Math: \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \)</p>
+                                    <p><strong>Boost: 40%</strong><br>Stat: ~12s/frame on RTX 3060<br>Math: \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \)</p>
                                 </div>
                             </div>
                         </div>
@@ -123,7 +123,7 @@
                                 <div class="card-body text-center">
                                     <h3 class="card-title">🧙‍♂️ Sage-Attention</h3>
                                     <p class="card-text">Streamlines attention layers for ~5–10% speed-up.</p>
-                                    <p><strong>Boost: ~5–10%</strong><br>Stat: ~1–2s/frame<br>Math: \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \)</p>
+                                    <p><strong>Boost: 5–10%</strong><br>Stat: ~1–2s/frame saved<br>Math: \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \)</p>
                                 </div>
                             </div>
                         </div>
@@ -131,8 +131,8 @@
                             <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#cudaModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">⚡ CUDA Tweaks</h3>
-                                    <p class="card-text">Optimized memory allocation for ~10–15% latency cut.</p>
-                                    <p><strong>Boost: ~10–15%</strong><br>Stat: ~10–15% faster<br>Math: \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \)</p>
+                                    <p class="card-text">Optimized allocation for ~10–15% latency cut.</p>
+                                    <p><strong>Boost: 10–15%</strong><br>Stat: ~10–15% faster<br>Math: \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \)</p>
                                 </div>
                             </div>
                         </div>
@@ -147,7 +147,7 @@
                                 <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>
+                                    <p><strong>Boost: 50%</strong><br>Stat: ~2–3GB saved<br>Math: \( M_{\text{VRAM}} \propto O(1) \)</p>
                                 </div>
                             </div>
                         </div>
@@ -155,8 +155,8 @@
                             <div class="card bg-ghost-card text-white 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%, easing CPU load.</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>
+                                    <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>
@@ -171,7 +171,7 @@
                                 <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>
+                                    <p><strong>Boost: 30–50%</strong><br>Stat: ~1.5x FPS<br>Math: \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \)</p>
                                 </div>
                             </div>
                         </div>
@@ -206,6 +206,45 @@
                 </div>
             </div>
 
+            <!-- Performance Calculator -->
+            <div class="row mt-4">
+                <div class="col-md-12">
+                    <h3 class="text-center text-white mb-3">Performance Calculator 🧮</h3>
+                    <div class="card bg-ghost-card">
+                        <div class="card-body">
+                            <form>
+                                <div class="row g-3">
+                                    <div class="col-md-4">
+                                        <label for="gpuSelect" class="form-label">GPU</label>
+                                        <select id="gpuSelect" class="form-select bg-dark text-white border-neon">
+                                            <option value="22">GTX 1650 (6GB)</option>
+                                            <option value="17.5">RTX 3050 (8GB)</option>
+                                            <option value="12.5" selected>RTX 3060 (12GB)</option>
+                                            <option value="2">RTX 4090 (24GB)</option>
+                                        </select>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="frameCount" class="form-label">Frames</label>
+                                        <input type="number" id="frameCount" class="form-control bg-dark text-white border-neon" value="75">
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="teacacheCheck" class="form-label">Teacache</label>
+                                        <div class="form-check">
+                                            <input type="checkbox" id="teacacheCheck" class="form-check-input" checked>
+                                            <label class="form-check-label text-white" for="teacacheCheck">Enable (~40% faster)</label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="text-center mt-3">
+                                    <button type="button" class="btn btn-ghost" onclick="calculatePerformance()">Calculate</button>
+                                </div>
+                                <p id="perfResult" class="text-center mt-3 text-white"></p>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- VRAM Requirements Table -->
             <div class="row mt-4">
                 <div class="col-md-12">
@@ -225,25 +264,25 @@
                                     <td>GTX 1650</td>
                                     <td>6GB</td>
                                     <td>~18–25s/frame</td>
-                                    <td>Minimum spec, teacache recommended.</td>
+                                    <td>Minimum, teacache recommended.</td>
                                 </tr>
                                 <tr>
                                     <td>RTX 3050</td>
                                     <td>8GB</td>
                                     <td>~15–20s/frame</td>
-                                    <td>Balanced, supports batch size 2.</td>
+                                    <td>Balanced, batch size 2.</td>
                                 </tr>
                                 <tr>
                                     <td>RTX 3060</td>
                                     <td>12GB</td>
                                     <td>~10–15s/frame</td>
-                                    <td>Optimal, batch size 2–4, full features.</td>
+                                    <td>Optimal, batch size 2–4.</td>
                                 </tr>
                                 <tr>
                                     <td>RTX 4090</td>
                                     <td>24GB</td>
                                     <td>~1.5–2.5s/frame</td>
-                                    <td>High-end, max batch size, no limits.</td>
+                                    <td>High-end, max batch size.</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -253,14 +292,32 @@
         </div>
     </section>
 
+    <!-- Demo Video Showcase -->
+    <section id="demo" class="py-5 bg-dark text-white">
+        <div class="container">
+            <h2 class="text-center mb-5 animate__animated animate__fadeIn">🎥 Demo Video Showcase</h2>
+            <p class="lead text-center mb-4">Witness GhostPack’s spectral video generation in action!</p>
+            <div class="row">
+                <div class="col-md-8 mx-auto">
+                    <div class="card bg-ghost-card">
+                        <div class="card-body text-center">
+                            <video src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/demo_video.mp4" controls loop class="img-fluid rounded" style="max-height: 400px;"></video>
+                            <p class="mt-3">Sample output from ghostgradio.py, showcasing a neon-lit spectral figure.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- Future Features Section -->
-    <section id="future" class="py-5 bg-dark text-white">
+    <section id="future" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌌 Future Spectral Phantoms</h2>
-            <p class="lead text-center">GhostPack is brewing epic upgrades:</p>
+            <p class="lead text-center mb-4">GhostPack is brewing epic upgrades:</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">🗣️ Voice Generation</h3>
                             <p class="card-text">AI-driven voice synthesis to narrate videos with ghostly tones, coming to ghostgradio.py.</p>
@@ -268,10 +325,10 @@
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">🖼️ AI Images</h3>
-                            <p class="card-text">Generate spectral starting frames with AI-crafted images for cinematic video pipelines.</p>
+                            <p class="card-text">Generate spectral starting frames with AI-crafted images for cinematic pipelines.</p>
                         </div>
                     </div>
                 </div>
@@ -280,43 +337,43 @@
     </section>
 
     <!-- Installation Section -->
-    <section id="installation" class="py-5 bg-light">
+    <section id="installation" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🛠️ Unleash GhostPack</h2>
-            <p class="lead text-center text-dark mb-4">Summon from GitHub. Requires >30GB disk space.</p>
+            <p class="lead text-center mb-4">Summon from GitHub. Requires >30GB disk space.</p>
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">🐧 Ubuntu</h3>
                             <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
 cd GhostPack
 chmod +x install_ubuntu.sh
 ./install_ubuntu.sh</code></pre>
-                            <p class="text-dark">NVIDIA GPU, 8GB RAM, Python 3.10, CUDA 12.6.</p>
+                            <p>NVIDIA GPU, 8GB RAM, Python 3.10, CUDA 12.6.</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">🪟 Windows</h3>
                             <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
 cd GhostPack
 install.bat</code></pre>
-                            <p class="text-dark">Auto-downloads models (>30GB).</p>
+                            <p>Auto-downloads models (>30GB).</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">🍎 macOS</h3>
                             <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
 cd GhostPack
 chmod +x install_macos.sh
 ./install_macos.sh</code></pre>
-                            <p class="text-dark">M1/M2 support (slower).</p>
+                            <p>M1/M2 support (slower).</p>
                         </div>
                     </div>
                 </div>
@@ -325,7 +382,7 @@ chmod +x install_macos.sh
     </section>
 
     <!-- Usage Section -->
-    <section id="usage" class="py-5 bg-dark text-white">
+    <section id="usage" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">📹 Weave Ghostly Videos</h2>
             <ol>
@@ -351,19 +408,6 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
         </div>
     </section>
 
-    <!-- Model Card Section -->
-    <section id="model" class="py-5 bg-light">
-        <div class="container">
-            <h2 class="text-center mb-5 animate__animated animate__fadeIn">Spectral Grimoire</h2>
-            <ul class="text-dark">
-                <li><strong>Model</strong>: GhostPack-F1 (13B parameters).</li>
-                <li><strong>Repo</strong>: <a href="https://huggingface.co/spaces/ghostai1/GhostPack" target="_blank">Hugging Face Spaces</a></li>
-                <li><strong>Files</strong>: >30GB, stored in <code>models/</code> with Git LFS.</li>
-                <li><strong>License</strong>: Apache-2.0.</li>
-            </ul>
-        </div>
-    </section>
-
     <!-- Last Files Section -->
     <section id="files" class="py-5 bg-dark text-white">
         <div class="container">
@@ -383,7 +427,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                     <div class="card bg-ghost-card h-100">
                         <div class="card-body text-center">
                             <h3 class="card-title">📋 Logs</h3>
-                            <p class="card-text">Dive into the latest render logs for debugging and insights.</p>
+                            <p class="card-text">Dive into render logs for debugging and insights.</p>
                             <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">View Logs</a>
                         </div>
                     </div>