Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>👻 GhostPack: Veo 3-Level Video Sorcery 😈</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | |
| <!-- Animate.css --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Favicon --> | |
| <link rel="icon" href="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/ghostpack_logo.png"> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-expand-lg navbar-dark fixed-top"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="#">👻 GhostPack</a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav ms-auto"> | |
| <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="#community">Community</a></li> | |
| <li class="nav-item"><a class="nav-link" href="#technical">Technical Deep Dive</a></li> | |
| <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li> | |
| <li class="nav-item"><a class="nav-link" href="#tutorials">Tutorials</a></li> | |
| <li class="nav-item"><a class="nav-link" href="#contribute">Contribute</a></li> | |
| <li class="nav-item"><a class="nav-link" href="#files">Last Files</a></li> | |
| <li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-section text-center text-white"> | |
| <div class="container"> | |
| <h1 class="display-3 animate__animated animate__zoomIn">👻 GhostPack</h1> | |
| <p class="lead animate__animated animate__fadeIn animate__delay-1s">Veo 3-Level Video Sorcery Haunts Laptops with 8GB RAM! 😈🚀</p> | |
| <p class="animate__animated animate__fadeIn animate__delay-2s">Unleash photorealistic videos with ghostai1’s math wizardry on GPUs ≥6GB VRAM.</p> | |
| <div class="preview-window animate__animated animate__fadeIn animate__delay-3s"> | |
| <img src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/preview_mockup.png" alt="GhostPack Preview" class="img-fluid rounded"> | |
| <p class="mt-2">Preview: ghostgradio.py in action</p> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="#installation" class="btn btn-ghost btn-lg animate__animated animate__pulse animate__delay-4s me-3">Summon Now 🛠️</a> | |
| <a href="https://github.com/ghostai1/GhostPack" class="btn btn-outline-ghost btn-lg animate__animated animate__pulse animate__delay-4s" target="_blank">GitHub 🌟</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-5 bg-dark text-white"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">✨ Spectral Features</h2> | |
| <p class="lead lead-text mb-4">Discover the power of GhostPack’s cutting-edge video generation technology.</p> | |
| <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="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, optimized for 8GB RAM laptops with seamless frame transitions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Blazing fast with teacache"> | |
| <div class="card-body"> | |
| <h3 class="card-title">⚡️ Phantom Speed</h3> | |
| <p class="card-text">Teacache reduces generation time by ~40% (~12–15s/frame on RTX 3060) for rapid video rendering.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Optimized for budget hardware"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🛠️ Laptop Domination</h3> | |
| <p class="card-text">13B models run efficiently on GPUs with ≥6GB VRAM, tailored for RTX 3060 and budget systems.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Advanced customization"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🎛️ Customizable Workflows</h3> | |
| <p class="card-text">Flexible settings for frame length, batch size, and prompts to suit any creative vision.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Real-time feedback"> | |
| <div class="card-body"> | |
| <h3 class="card-title">👁️ Live Preview</h3> | |
| <p class="card-text">Real-time frame previews in ghostgradio.py for instant creative adjustments.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Community-driven growth"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🤝 Open Source Power</h3> | |
| <p class="card-text">Leverage community contributions and open-source code for continuous improvement.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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> | |
| <p class="lead lead-text mb-4">GhostPack’s SDK is a spectral masterpiece, optimized with ghostai1’s revolutionary math to dominate low-resource systems.</p> | |
| <!-- Tabs for Optimization Categories --> | |
| <ul class="nav nav-tabs justify-content-center mb-4" id="optTab" role="tablist"> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link active" id="speed-tab" data-bs-toggle="tab" data-bs-target="#speed" type="button" role="tab" aria-controls="speed" aria-selected="true">⚡️ Speed</button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="memory-tab" data-bs-toggle="tab" data-bs-target="#memory" type="button" role="tab" aria-controls="memory" aria-selected="false">🔮 Memory</button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="compute-tab" data-bs-toggle="tab" data-bs-target="#compute" type="button" role="tab" aria-controls="compute" aria-selected="false">🧬 Compute</button> | |
| </li> | |
| <li class="nav-item" role="presentation"> | |
| <button class="nav-link" id="efficiency-tab" data-bs-toggle="tab" data-bs-target="#efficiency" type="button" role="tab" aria-controls="efficiency" aria-selected="false">🌌 Efficiency</button> | |
| </li> | |
| </ul> | |
| <div class="tab-content" id="optTabContent"> | |
| <!-- Speed Tab --> | |
| <div class="tab-pane fade show active" id="speed" role="tabpanel" aria-labelledby="speed-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="#teacacheModal"> | |
| <div class="card-body text-center"> | |
| <h3 class="card-title">🔮 Teacache</h3> | |
| <p class="lead-text">Caches diffusion states, slashing ~40% off frame time.</p> | |
| <p class="lead-text"><strong>Boost:</strong> 40% | <strong>Stat:</strong> ~12s/frame on RTX 3060 | <strong>Math:</strong> \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#sageModal"> | |
| <div class="card-body text-center"> | |
| <h3 class="card-title">🧙♂️ Sage-Attention</h3> | |
| <p class="lead-text">Streamlines attention layers for ~5–10% speed-up.</p> | |
| <p class="lead-text"><strong>Boost:</strong> 5–10% | <strong>Stat:</strong> ~1–2s/frame saved | <strong>Math:</strong> \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card 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="lead-text">Optimized allocation for ~10–15% latency cut.</p> | |
| <p class="lead-text"><strong>Boost:</strong> 10–15% | <strong>Stat:</strong> ~10–15% faster | <strong>Math:</strong> \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#dynamicModal"> | |
| <div class="card-body text-center"> | |
| <h3 class="card-title">🚀 Dynamic Scheduling</h3> | |
| <p class="lead-text">Adapts processing queues for ~15–20% faster task completion.</p> | |
| <p class="lead-text"><strong>Boost:</strong> 15–20% | <strong>Stat:</strong> ~2–3s/task saved | <strong>Math:</strong> \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </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="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> | |
| <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> | |
| <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="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 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> | |
| <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-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-5"> | |
| <div class="col-md-12"> | |
| <h3 class="text-center text-white mb-3">VRAM Requirements 🖥️</h3> | |
| <div class="table-responsive"> | |
| <table class="table table-dark table-bordered"> | |
| <thead> | |
| <tr> | |
| <th>GPU</th> | |
| <th>VRAM</th> | |
| <th>Performance</th> | |
| <th>Notes</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>GTX 1650</td> | |
| <td>6GB</td> | |
| <td>~18–25s/frame</td> | |
| <td>Minimum, teacache recommended.</td> | |
| </tr> | |
| <tr> | |
| <td>RTX 3050</td> | |
| <td>8GB</td> | |
| <td>~15–20s/frame</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.</td> | |
| </tr> | |
| <tr> | |
| <td>RTX 4090</td> | |
| <td>24GB</td> | |
| <td>~1.5–2.5s/frame</td> | |
| <td>High-end, max batch size.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </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 lead-text 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"> | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/k8pgUlg4OvdUZpbMNTcp5.gif" alt="GhostPack Demo GIF" class="img-fluid rounded" style="max-height: 400px;"> | |
| <p class="mt-3">Sample output from ghostgradio.py, showcasing a neon-lit spectral figure.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="https://github.com/ghostai1/GhostPack/blob/main/demo_videos" class="btn btn-ghost" target="_blank">More Demos 📹</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Future Features Section --> | |
| <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 light-lead-text mb-4">GhostPack is brewing epic upgrades to push the boundaries of AI video generation:</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-body"> | |
| <h3 class="card-title">🗣️ Voice Generation</h3> | |
| <p class="light-lead-text">AI-driven voice synthesis with customizable tones, integrating into ghostgradio.py for narrated videos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-light h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🖼️ AI Images</h3> | |
| <p class="light-lead-text">Generate high-quality starting frames with AI-crafted visuals for enhanced video pipelines.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-light h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🎮 VR Integration</h3> | |
| <p class="light-lead-text">Future support for virtual reality video rendering, expanding into immersive experiences.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Installation Section --> | |
| <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 lead-text mb-4">Summon from GitHub. Requires >30GB disk space and compatible hardware.</p> | |
| <div class="row row-cols-1 row-cols-md-3 g-4"> | |
| <div class="col"> | |
| <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>Requires NVIDIA GPU, 8GB RAM, Python 3.10, CUDA 12.6.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <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>Auto-downloads models (>30GB), requires NVIDIA drivers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <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>M1/M2 support (slower), requires Metal compatibility.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="https://github.com/ghostai1/GhostPack/releases" class="btn btn-ghost" target="_blank">Latest Release 📦</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Usage Section --> | |
| <section id="usage" class="py-5 bg-dark text-white"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">📹 Weave Ghostly Videos</h2> | |
| <p class="lead lead-text mb-4">Step-by-step instructions to harness GhostPack’s video sorcery.</p> | |
| <ol> | |
| <li><strong>Launch Phantom GUI</strong>: | |
| <div class="card bg-ghost-card"> | |
| <div class="card-body"> | |
| <pre><code class="code-block">source ~/ghostpack_venv/venv/bin/activate | |
| cd ~/ghostpack_venv | |
| python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre> | |
| </div> | |
| </div> | |
| </li> | |
| <li><strong>Craft Spells</strong>: | |
| <div class="card bg-ghost-card"> | |
| <div class="card-body lead-text"> | |
| <ul> | |
| <li>Upload an image or video frame.</li> | |
| <li>Prompt: “A spectral figure glides through a neon-lit city.”</li> | |
| <li>Enable teacache (⚡️ speed) and adjust batch size.</li> | |
| <li>Set 15fps, 5s video (~75 frames) or customize duration.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </li> | |
| <li><strong>Summon Spirits</strong>: | |
| <div class="card bg-ghost-card"> | |
| <div class="card-body lead-text"> | |
| <p>Monitor with <code>nvidia-smi</code> (~80–100% GPU usage).</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li><strong>Export Results</strong>: | |
| <div class="card bg-ghost-card"> | |
| <div class="card-body lead-text"> | |
| <p>Save MP4 files with adjustable compression (CRF 0–100).</p> | |
| </div> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </section> | |
| <!-- Community Hub Section --> | |
| <section id="community" class="py-5 bg-light text-dark"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">🤝 Community Hub</h2> | |
| <p class="lead light-lead-text mb-4">Join the GhostPack community to share, learn, and collaborate!</p> | |
| <div class="row row-cols-1 row-cols-md-2 g-4"> | |
| <div class="col"> | |
| <div class="card bg-ghost-light h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">💬 Discord Server</h3> | |
| <p class="light-lead-text">Join our Discord for real-time discussions, support, and updates.</p> | |
| <a href="https://discord.gg/ghostpack" class="btn btn-ghost" target="_blank">Join Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-light h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🐦 X Thread</h3> | |
| <p class="light-lead-text">Follow our X thread for news, tutorials, and community showcases.</p> | |
| <a href="https://x.com/search?q=ghostpack" class="btn btn-ghost" target="_blank">Visit X</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="https://github.com/ghostai1/GhostPack/issues" class="btn btn-outline-ghost" target="_blank">Report Issues 🚩</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technical Deep Dive Section --> | |
| <section id="technical" class="py-5 bg-dark text-white"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">🔍 Technical Deep Dive</h2> | |
| <p class="lead lead-text mb-4">Explore the technical underpinnings of GhostPack’s video generation engine.</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-body"> | |
| <h3 class="card-title">🛠️ Architecture</h3> | |
| <p class="lead-text">Built on HunyuanVideo and FramePackI2V_HY, leveraging LlamaModel and CLIPTextModel for advanced embeddings.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">📊 Pipeline</h3> | |
| <p class="lead-text">Utilizes k-diffusion sampling with unipc for high-quality frame generation, optimized for real-time preview.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="https://github.com/ghostai1/GhostPack/wiki" class="btn btn-ghost" target="_blank">Wiki 🔗</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-5 bg-light text-dark"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">❓ Frequently Asked Questions</h2> | |
| <div class="accordion" id="faqAccordion"> | |
| <div class="accordion-item bg-ghost-light"> | |
| <h2 class="accordion-header"> | |
| <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1"> | |
| What hardware do I need? | |
| </button> | |
| </h2> | |
| <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion"> | |
| <div class="accordion-body light-lead-text"> | |
| <p>Minimum: 6GB VRAM GPU (e.g., GTX 1650), 8GB RAM. Optimal: 12GB VRAM (e.g., RTX 3060) for full features.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-ghost-light"> | |
| <h2 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2"> | |
| How do I install GhostPack? | |
| </button> | |
| </h2> | |
| <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> | |
| <div class="accordion-body light-lead-text"> | |
| <p>Clone the repo and run the appropriate install script (e.g., <code>./install_ubuntu.sh</code>) as detailed in the Installation section.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-ghost-light"> | |
| <h2 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3"> | |
| Can I contribute? | |
| </button> | |
| </h2> | |
| <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> | |
| <div class="accordion-body light-lead-text"> | |
| <p>Yes! Check the Contributing Guidelines section for details on how to get involved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tutorials Section --> | |
| <section id="tutorials" class="py-5 bg-dark text-white"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">📚 Tutorials</h2> | |
| <p class="lead lead-text mb-4">Step-by-step guides to master GhostPack’s video sorcery.</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-body"> | |
| <h3 class="card-title">🎬 Getting Started</h3> | |
| <p class="lead-text">Learn to set up GhostPack and generate your first video with ease.</p> | |
| <a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost" target="_blank">View Tutorial</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">⚙️ Advanced Configuration</h3> | |
| <p class="lead-text">Dive into customizing prompts, batch sizes, and advanced settings for pro-level control.</p> | |
| <a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost" target="_blank">View Tutorial</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🎥 Video Export Tips</h3> | |
| <p class="lead-text">Master exporting MP4 files with optimal compression (CRF settings) for quality and size.</p> | |
| <a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost" target="_blank">View Tutorial</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="https://github.com/ghostai1/GhostPack/wiki/Tutorials" class="btn btn-outline-ghost" target="_blank">More Tutorials 📖</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contributing Guidelines Section --> | |
| <section id="contribute" class="py-5 bg-light text-dark"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌱 Contributing Guidelines</h2> | |
| <p class="lead light-lead-text mb-4">Help shape GhostPack’s future with your skills and ideas!</p> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="card bg-ghost-light"> | |
| <div class="card-body"> | |
| <h3 class="card-title">🎯 How to Contribute</h3> | |
| <ul class="light-lead-text"> | |
| <li>Fork the repository and create a new branch.</li> | |
| <li>Submit pull requests with detailed descriptions.</li> | |
| <li>Follow the coding standards in the wiki.</li> | |
| <li>Test your changes with ghostgradio.py.</li> | |
| </ul> | |
| <a href="https://github.com/ghostai1/GhostPack/blob/main/CONTRIBUTING.md" class="btn btn-ghost" target="_blank">View Guidelines</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Screenshots Section --> | |
| <section id="screenshots" class="py-5 bg-dark text-white"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">📸 Screenshots</h2> | |
| <p class="lead lead-text mb-4">Check out GhostPack’s spectral magic in action!</p> | |
| <div class="row row-cols-1 row-cols-md-3 g-4"> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100"> | |
| <div class="card-body text-center"> | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/7ABE2lOA4LOUtPfh1mhxP.png" alt="Main Interface" class="img-fluid rounded" style="max-height: 300px;"> | |
| <p class="mt-2">Main Interface</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100"> | |
| <div class="card-body text-center"> | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/9qNVRX2eM2iCY8xQKcOwW.png" alt="Advanced Settings" class="img-fluid rounded" style="max-height: 300px;"> | |
| <p class="mt-2">Advanced Settings</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-card h-100"> | |
| <div class="card-body text-center"> | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/--fIS9ITg4-VqN22ySoa2.png" alt="Logs Display" class="img-fluid rounded" style="max-height: 300px;"> | |
| <p class="mt-2">Logs Display</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-center mt-4 lead-text">Add more screenshots to showcase your work!</p> | |
| </div> | |
| </section> | |
| <!-- Last Files Section --> | |
| <section id="files" class="py-5 bg-light text-dark"> | |
| <div class="container"> | |
| <h2 class="text-center mb-5 animate__animated animate__fadeIn">📂 Latest Conjurations</h2> | |
| <p class="lead light-lead-text mb-4">Explore the latest files and logs from the GhostPack repo.</p> | |
| <div class="row row-cols-1 row-cols-md-2 g-4"> | |
| <div class="col"> | |
| <div class="card bg-ghost-light h-100"> | |
| <div class="card-body text-center"> | |
| <h3 class="card-title">📜 Latest File</h3> | |
| <p class="light-lead-text">Check out <code>ghostgradio.py</code>, the heart of GhostPack’s GUI.</p> | |
| <a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost" target="_blank">View File</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card bg-ghost-light h-100"> | |
| <div class="card-body text-center"> | |
| <h3 class="card-title">📋 Logs</h3> | |
| <p class="light-lead-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> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="https://github.com/ghostai1/GhostPack" class="btn btn-outline-ghost me-3" target="_blank">Refresh Repo 🔄</a> | |
| <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">Refresh Logs 📥</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-ghost-black text-white text-center py-4"> | |
| <p>👻 GhostPack by ghostai1 | <a href="https://github.com/ghostai1/GhostPack" target="_blank">GitHub</a> | <a href="https://huggingface.co/spaces/ghostai1/GhostPack" target="_blank">Hugging Face</a> | Apache-2.0 License</p> | |
| <p>Forged in 😈 hellfire with ⚡️ to haunt video generation forever!</p> | |
| </footer> | |
| <!-- Modals --> | |
| <div class="modal fade" id="teacacheModal" tabindex="-1" aria-labelledby="teacacheModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="teacacheModalLabel">🔮 Teacache</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Teacache caches intermediate diffusion states, reducing compute overhead by ~30–40% and cutting frame generation time by ~40% (~12s/frame on RTX 3060).</p> | |
| <p><strong>Math</strong>: \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \), where \( T_{\text{base}} \) is the baseline frame time without caching.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="contextModal" tabindex="-1" aria-labelledby="contextModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="contextModalLabel">🧬 Context Packing</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Compresses frame contexts into a fixed-size matrix, reducing VRAM usage by ~50% (~2–3GB for a 60-second video), making it viable for low-memory GPUs.</p> | |
| <p><strong>Math</strong>: \( M_{\text{VRAM}} \propto O(1) \) instead of \( O(n) \), ensuring constant memory usage regardless of video length.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="batchingModal" tabindex="-1" aria-labelledby="batchingModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="batchingModalLabel">⚡ Dynamic Batching</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Adapts batch sizes (2–4 frames) dynamically, increasing throughput by ~30–50% and achieving ~1.5x FPS, optimized for varying GPU loads.</p> | |
| <p><strong>Math</strong>: \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \), where \( B \) is the batch size (2–4).</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="sageModal" tabindex="-1" aria-labelledby="sageModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="sageModalLabel">🧙♂️ Sage-Attention</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Optimizes attention mechanisms in the transformer model, saving ~5–10% of processing time (~1–2s per frame), enhancing performance on low-VRAM systems.</p> | |
| <p><strong>Math</strong>: \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \), reducing computational complexity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="tcmallocModal" tabindex="-1" aria-labelledby="tcmallocModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="tcmallocModalLabel">💾 tcmalloc</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Replaces standard memory allocation with tcmalloc, reducing overhead by ~5–20% and easing CPU load by ~15% for smoother multitasking.</p> | |
| <p><strong>Math</strong>: \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \), optimizing memory management.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="cudaModal" tabindex="-1" aria-labelledby="cudaModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="cudaModalLabel">⚡ CUDA Tweaks</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Optimizes CUDA memory allocation, reducing latency by ~10–15% and enhancing GPU efficiency on RTX 3060 and similar cards.</p> | |
| <p><strong>Math</strong>: \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \), improving overall performance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="dynamicModalLabel">🚀 Dynamic Scheduling</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Adapts processing queues dynamically, reducing task completion time by ~15–20% and improving workflow efficiency.</p> | |
| <p><strong>Math</strong>: \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \), optimizing task distribution.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="cacheModal" tabindex="-1" aria-labelledby="cacheModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="cacheModalLabel">📦 Memory Cache</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Preloads data into memory cache, reducing swap operations by ~25% and speeding up data access.</p> | |
| <p><strong>Math</strong>: \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \), minimizing memory bottlenecks.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="powerModal" tabindex="-1" aria-labelledby="powerModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="powerModalLabel">🔋 Power Optimization</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Reduces power consumption by ~20–30% during idle states, ideal for energy-efficient setups.</p> | |
| <p><strong>Math</strong>: \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \), lowering energy usage.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="threadModal" tabindex="-1" aria-labelledby="threadModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content bg-ghost-card text-white"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" id="threadModalLabel">🧵 Thread Tuning</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Optimizes thread allocation, boosting CPU efficiency by ~10–15% and reducing overhead.</p> | |
| <p><strong>Math</strong>: \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \), enhancing multi-threading performance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | |
| <!-- Custom JS --> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |