Spaces:
Running
Running
File size: 47,473 Bytes
0423506 545a39f 0423506 e2e9365 0423506 b9d422e 5da5273 b9d422e 0423506 5da5273 0423506 545a39f a6f0668 545a39f ea6acc3 0423506 0a5b90a ea6acc3 0a5b90a ea6acc3 8e34172 b9d422e 0423506 b9d422e 0423506 5da5273 b9d422e dfa63ad 0a5b90a b9d422e 0a5b90a 0423506 b9d422e 0423506 b9d422e cd44dcf 5da5273 b9d422e 0423506 cd44dcf 5da5273 b9d422e 0423506 cd44dcf 5da5273 b9d422e 0a5b90a 5da5273 b9d422e 0a5b90a 5da5273 b9d422e 0a5b90a 5da5273 b9d422e 0423506 cd44dcf b9d422e 8b64a36 b9d422e 8b64a36 5da5273 8b64a36 5da5273 b9d422e 57a42d6 e2e9365 5da5273 b9d422e 978a9c9 5da5273 b9d422e 978a9c9 5da5273 8b64a36 b9d422e 3c2d6d4 5da5273 545a39f 3c2d6d4 ea6acc3 b9d422e cd44dcf 5da5273 cd44dcf b9d422e 9dd284c b9d422e 9dd284c cd44dcf 545a39f b9d422e a6f0668 b9d422e ea6acc3 b9d422e ea6acc3 b9d422e a6f0668 0a5b90a b9d422e 0a5b90a a6f0668 b9d422e 545a39f b9d422e 0a5b90a cd44dcf 9dd284c 5da5273 b9d422e 978a9c9 cd44dcf 9dd284c 5da5273 b9d422e 0a5b90a 9dd284c 5da5273 b9d422e 57a42d6 e2e9365 b9d422e a6f0668 0423506 b9d422e cd44dcf a6f0668 5da5273 b9d422e dfa63ad 0423506 b9d422e dfa63ad 0423506 cd44dcf a6f0668 5da5273 b9d422e dfa63ad 0423506 545a39f b9d422e dfa63ad 0423506 cd44dcf a6f0668 5da5273 b9d422e dfa63ad 0423506 b9d422e dfa63ad 0423506 0a5b90a b9d422e 0a5b90a 0423506 b9d422e 6e54e4c 0423506 b9d422e 5da5273 9dd284c dfa63ad b9d422e dfa63ad 0423506 e2e9365 b9d422e dfa63ad 5da5273 9dd284c 5da5273 b9d422e 5da5273 b9d422e 6e54e4c 5da5273 9dd284c 5da5273 b9d422e 6e54e4c 5da5273 9dd284c 5da5273 b9d422e 6e54e4c 5da5273 0423506 b9d422e 0a5b90a b9d422e 0a5b90a 9dd284c 5da5273 b9d422e 0a5b90a 9dd284c 5da5273 b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 6e54e4c 0a5b90a b9d422e 0a5b90a 6e54e4c 5da5273 b9d422e 0a5b90a 6e54e4c 5da5273 b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 0a5b90a 9dd284c ea6acc3 b9d422e 0a5b90a 9dd284c b9d422e 0a5b90a 9dd284c ea6acc3 b9d422e 0a5b90a b9d422e 6e54e4c 0a5b90a b9d422e 0a5b90a 6e54e4c 5da5273 b9d422e 0a5b90a 6e54e4c 5da5273 b9d422e 0a5b90a 6e54e4c 5da5273 b9d422e 6e54e4c 0a5b90a b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 0a5b90a 9dd284c 5da5273 b9d422e 6e54e4c b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 6e54e4c 8e34172 b9d422e 8e34172 6e54e4c 8e34172 b9d422e 8e34172 6e54e4c 8e34172 b9d422e 8e34172 6e54e4c 8e34172 b9d422e 8e34172 b9d422e 8e34172 b9d422e dfa63ad b9d422e dfa63ad 9dd284c dfa63ad b9d422e dfa63ad 9dd284c dfa63ad b9d422e dfa63ad b9d422e dfa63ad 803579a b9d422e 5da5273 b9d422e 0423506 b9d422e cd44dcf b9d422e cd44dcf b9d422e cd44dcf b9d422e cd44dcf b9d422e cd44dcf b9d422e cd44dcf b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 0a5b90a b9d422e 0a5b90a b9d422e cd44dcf 57a42d6 e2e9365 0423506 b9d422e 0423506 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 |
<!DOCTYPE html>
<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/bootstrap@5.3.3/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 with Dynamic Effects -->
<nav class="navbar navbar-expand-lg navbar-dark bg-ghost-nav">
<div class="container-fluid">
<a class="navbar-brand animate__animated animate__pulse" 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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<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">Install</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">Tech 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">Files</a></li>
<li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li>
<li class="nav-item"><a class="nav-link" href="#ads">Ads & Offers</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section with Cosmic Vibe -->
<section id="home" class="hero-section text-center text-white">
<div class="container py-5">
<h1 class="display-2 animate__animated animate__zoomIn animate__delay-1s" style="text-shadow: 0 0 20px #00ffcc, 0 0 30px #ff00ff;">👻 GhostPack</h1>
<p class="lead animate__animated animate__fadeIn animate__delay-2s">Unleash Veo 3-Level Video Sorcery on Your Laptop! 😈🚀</p>
<p class="animate__animated animate__fadeIn animate__delay-3s">Transform your ≥6GB VRAM GPU into a spectral video powerhouse with ghostai1’s genius math.</p>
<div class="preview-window animate__animated animate__fadeInUp animate__delay-4s">
<img src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/preview_mockup.png" alt="GhostPack Preview" class="img-fluid rounded shadow-lg" style="border: 3px solid #00ffcc;">
<p class="mt-2 text-muted">Witness the cutting-edge ghostgradio.py interface in action!</p>
</div>
<div class="mt-4">
<a href="#installation" class="btn btn-ghost btn-lg animate__animated animate__pulse animate__infinite">Get Started Now 🛠️</a>
<a href="https://github.com/ghostai1/GhostPack" class="btn btn-outline-ghost btn-lg animate__animated animate__pulse animate__infinite" target="_blank">Explore GitHub 🌟</a>
</div>
</div>
</section>
<!-- Features Section with Enhanced Details -->
<section id="features" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">✨ Spectral Features Unleashed</h2>
<p class="lead lead-text mb-4">Dive into GhostPack’s revolutionary video generation capabilities.</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">
<h3>📹 Veo 3-Level AI</h3>
<p class="card-text">Generates hyper-realistic videos using cutting-edge next-frame prediction, optimized for 8GB RAM laptops with fluid, seamless transitions powered by advanced neural networks.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>⚡️ Phantom Speed</h3>
<p class="card-text">Leverages Teacache to slash rendering time by ~40%, delivering frames in ~12-15s on RTX 3060, ideal for rapid prototyping and production.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🛠️ Laptop Domination</h3>
<p class="card-text">Runs 13B parameter models efficiently on GPUs with ≥6GB VRAM, tailored for budget-friendly setups like the RTX 3060, democratizing AI video creation.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🎛️ Custom Workflows</h3>
<p class="card-text">Offers extensive customization with adjustable frame lengths, batch sizes, and detailed prompt engineering for unparalleled creative control.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>👁️ Live Preview</h3>
<p class="card-text">Provides real-time frame previews in ghostgradio.py, allowing instant tweaks and visual feedback during the creative process.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🤝 Open Source Power</h3>
<p class="card-text">Thrives on community contributions, offering open-source code for continuous improvement and collaborative innovation.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optimizations Section with Deep Knowledge -->
<section id="optimizations" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🧙♂️ Ghostai1’s Math Sorcery</h2>
<p class="lead lead-text mb-4">Unlock the science behind GhostPack’s performance optimizations.</p>
<ul class="nav nav-tabs justify-content-center mb-4" id="optTab" role="tablist">
<li class="nav-item"><button class="nav-link active" id="speed-tab" data-bs-toggle="tab" data-bs-target="#speed" type="button">⚡️ Speed</button></li>
<li class="nav-item"><button class="nav-link" id="memory-tab" data-bs-toggle="tab" data-bs-target="#memory" type="button">🔮 Memory</button></li>
<li class="nav-item"><button class="nav-link" id="compute-tab" data-bs-toggle="tab" data-bs-target="#compute" type="button">🧬 Compute</button></li>
<li class="nav-item"><button class="nav-link" id="efficiency-tab" data-bs-toggle="tab" data-bs-target="#efficiency" type="button">🌌 Efficiency</button></li>
</ul>
<div class="tab-content" id="optTabContent">
<div class="tab-pane fade show active" id="speed" role="tabpanel">
<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>🔮 Teacache</h3><p class="lead-text">Caches diffusion states to reduce computation, cutting frame time by ~40% (~12s/frame on RTX 3060). Formula: \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \), optimizing GPU cycles.</p></div></div></div>
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>🧙♂️ Sage-Attention</h3><p class="lead-text">Streamlines transformer attention layers, boosting speed by ~5-10% with \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \), enhancing low-VRAM performance.</p></div></div></div>
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>⚡ CUDA Tweaks</h3><p class="lead-text">Optimizes memory allocation, reducing latency by ~10-15% with \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \), maximizing GPU efficiency.</p></div></div></div>
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>🚀 Dynamic Scheduling</h3><p class="lead-text">Adapts processing queues, speeding tasks by ~15-20% with \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \), improving workflow efficiency.</p></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="memory" role="tabpanel">
<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>🧬 Context Packing</h3><p class="lead-text">Compresses frame contexts into a fixed matrix, saving ~50% VRAM (~2-3GB) with \( M_{\text{VRAM}} \propto O(1) \), enabling long videos on low-memory GPUs.</p></div></div></div>
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>💾 tcmalloc</h3><p class="lead-text">Replaces standard allocation, cutting overhead by ~5-20% with \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \), easing CPU load.</p></div></div></div>
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>📦 Memory Cache</h3><p class="lead-text">Preloads data, reducing swaps by ~25% with \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \), boosting data access speed.</p></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="compute" role="tabpanel">
<div class="row row-cols-1 g-4">
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>⚡ Dynamic Batching</h3><p class="lead-text">Adapts batch sizes (2-4 frames), increasing throughput by ~30-50% with \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \), optimizing GPU load.</p></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="efficiency" role="tabpanel">
<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>🔋 Power Optimization</h3><p class="lead-text">Reduces power draw by ~20-30% during idle with \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \), perfect for energy-efficient setups.</p></div></div></div>
<div class="col"><div class="card bg-ghost-card h-100"><div class="card-body"><h3>🧵 Thread Tuning</h3><p class="lead-text">Optimizes thread allocation, boosting CPU efficiency by ~10-15% with \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \).</p></div></div></div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<h3 class="text-center 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, use teacache</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 2-4</td></tr>
<tr><td>RTX 4090</td><td>24GB</td><td>~1.5-2.5s/frame</td><td>High-end, max batch</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Demo Video Showcase with Epic Vibe -->
<section id="demo" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🎥 Demo Video Showcase</h2>
<p class="lead lead-text mb-4 animate__animated animate__fadeIn">Behold GhostPack’s spectral video generation in action!</p>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card bg-ghost-card animate__animated animate__fadeIn" style="border: 3px solid #ff00ff; box-shadow: 0 0 20px #ff00ff;">
<div class="card-body text-center p-4">
<img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/k8pgUlg4OvdUZpbMNTcp5.gif" alt="GhostPack Demo GIF" class="img-fluid rounded" style="max-height: 400px; animation: pulse 2s infinite;">
<p class="mt-3">Epic sample from ghostgradio.py, featuring a neon-lit spectral battle scene!</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 animate__animated animate__bounce" target="_blank">Unlock More Demos 📹</a>
</div>
</div>
</section>
<!-- Future Features with Visionary Details -->
<section id="future" class="py-5 bg-ghost-alt text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🌌 Future Spectral Phantoms</h2>
<p class="lead light-lead-text mb-4">Groundbreaking upgrades to revolutionize AI video creation.</p>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>🗣️ Voice Generation</h3>
<p class="light-lead-text">Advanced AI voice synthesis with customizable tones and pitch, seamlessly integrated into ghostgradio.py for immersive narrated videos.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>🖼️ AI Images</h3>
<p class="light-lead-text">Generates stunning, high-resolution starting frames with AI-crafted visuals, elevating video pipeline creativity to new heights.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>🎮 VR Integration</h3>
<p class="light-lead-text">Future-ready VR video rendering, delivering immersive 3D spectral experiences with real-time interaction.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Installation Section with Detailed Steps -->
<section id="installation" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🛠️ Unleash GhostPack</h2>
<p class="lead lead-text mb-4">Step into the future with a simple installation, requiring >30GB disk 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 text-center">
<h3>🐧 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, and CUDA 12.6 for optimal performance.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🪟 Windows</h3>
<pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
cd GhostPack
install.bat</code></pre>
<p>Automatically downloads >30GB models, ensure NVIDIA drivers are installed.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🍎 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>Supports M1/M2 (slower performance), 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 animate__animated animate__bounce" target="_blank">Grab Latest Release 📦</a>
</div>
</div>
</section>
<!-- Usage Section with In-Depth Guide -->
<section id="usage" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">📹 Weave Ghostly Videos</h2>
<p class="lead lead-text mb-4">Master GhostPack with this detailed usage guide.</p>
<div class="row row-cols-1 g-4">
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body">
<h3>Launch Phantom GUI</h3>
<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>
<p>Activates the virtual environment and launches the GUI, accessible locally on port 5666.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body">
<h3>Craft Spells</h3>
<ul class="lead-text">
<li>Upload a base image or video frame to kickstart your project.</li>
<li>Input a vivid prompt: “A spectral figure glides through a neon-lit city under twin moons.”</li>
<li>Enable teacache for ⚡️ speed and fine-tune batch size for optimal performance.</li>
<li>Set 15fps for a 5-second video (~75 frames) or customize duration and frame rate for unique outputs.</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body">
<h3>Summon Spirits</h3>
<p class="lead-text">Monitor GPU usage with <code>nvidia-smi</code>, expecting ~80-100% utilization as the spectral magic unfolds.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body">
<h3>Export Results</h3>
<p class="lead-text">Export your masterpiece as an MP4 with adjustable compression (CRF 0-100) to balance quality and file size.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Community Hub with Interactive Flair -->
<section id="community" class="py-5 bg-ghost-alt text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🤝 Community Hub</h2>
<p class="lead light-lead-text mb-4">Join a vibrant community to collaborate and innovate.</p>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>💬 Discord Server</h3>
<p class="light-lead-text">Connect with creators worldwide for real-time support, updates, and spectral brainstorming sessions.</p>
<a href="https://discord.gg/ghostpack" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Join the Spectral Chat</a>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>🐦 X Thread</h3>
<p class="light-lead-text">Follow for breaking news, expert tutorials, and stunning community-generated showcases.</p>
<a href="https://x.com/search?q=ghostpack" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Dive into 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 animate__animated animate__pulse" target="_blank">Report Issues 🚩</a>
</div>
</div>
</section>
<!-- Technical Deep Dive with Expert Insights -->
<section id="technical" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🔍 Technical Deep Dive</h2>
<p class="lead lead-text mb-4">Explore the intricate technology powering GhostPack.</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 text-center">
<h3>🛠️ Architecture</h3>
<p class="lead-text">Built on HunyuanVideo and FramePackI2V_HY frameworks, utilizing LlamaModel for language processing and CLIPTextModel for visual embeddings, creating a robust AI backbone.</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>📊 Pipeline</h3>
<p class="lead-text">Employs k-diffusion sampling with unipc for high-fidelity frame generation, optimized with real-time preview capabilities and efficient memory handling.</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a href="https://github.com/ghostai1/GhostPack/wiki" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Dive into Wiki 🔗</a>
</div>
</div>
</section>
<!-- FAQ Section with Expanded Answers -->
<section id="faq" class="py-5 bg-ghost-alt text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">❓ Frequently Asked Questions</h2>
<div class="accordion" id="faqAccordion">
<div class="accordion-item bg-ghost-alt-card">
<h2 class="accordion-header"><button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">What hardware is needed?</button></h2>
<div id="faq1" class="accordion-collapse collapse show"><div class="accordion-body light-lead-text">Minimum requirement: 6GB VRAM GPU (e.g., GTX 1650) with 8GB RAM; Optimal setup: 12GB VRAM (e.g., RTX 3060) for full feature access and performance.</div></div>
</div>
<div class="accordion-item bg-ghost-alt-card">
<h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">How do I install GhostPack?</button></h2>
<div id="faq2" class="accordion-collapse collapse"><div class="accordion-body light-lead-text">Clone the repository from GitHub, navigate to the directory, and run the appropriate install script (e.g., <code>./install_ubuntu.sh</code>) as outlined in the Installation section for a seamless setup.</div></div>
</div>
<div class="accordion-item bg-ghost-alt-card">
<h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq3">Can I contribute?</button></h2>
<div id="faq3" class="accordion-collapse collapse"><div class="accordion-body light-lead-text">Yes, contributions are welcome! Check the Contributing Guidelines for a detailed process to join the development team.</div></div>
</div>
</div>
</div>
</section>
<!-- Tutorials Section with Rich Content -->
<section id="tutorials" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">📚 Tutorials</h2>
<p class="lead lead-text mb-4">Master GhostPack with these in-depth learning resources.</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 text-center">
<h3>🎬 Getting Started</h3>
<p class="lead-text">A step-by-step guide to install GhostPack and create your first spectral video, from setup to export.</p>
<a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Start Here</a>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>⚙️ Advanced Configuration</h3>
<p class="lead-text">Unlock pro-level control with detailed instructions on customizing prompts, batch sizes, and advanced settings.</p>
<a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Go Pro</a>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🎥 Video Export Tips</h3>
<p class="lead-text">Expert techniques for exporting MP4s with optimal CRF settings to balance quality, size, and performance.</p>
<a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Export Mastery</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 animate__animated animate__pulse" target="_blank">Discover More 📖</a>
</div>
</div>
</section>
<!-- Contributing Guidelines with Community Call -->
<section id="contribute" class="py-5 bg-ghost-alt text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">🌱 Contributing Guidelines</h2>
<p class="lead light-lead-text mb-4">Join the revolution and shape GhostPack’s future.</p>
<div class="row">
<div class="col-md-12">
<div class="card bg-ghost-alt-card">
<div class="card-body text-center">
<h3>🎯 How to Contribute</h3>
<ul class="light-lead-text">
<li>Fork the repository and create a dedicated feature branch for your changes.</li>
<li>Submit pull requests with thorough descriptions and tested code.</li>
<li>Adhere to coding standards outlined in the wiki for consistency.</li>
<li>Test your enhancements with ghostgradio.py to ensure compatibility.</li>
</ul>
<a href="https://github.com/ghostai1/GhostPack/blob/main/CONTRIBUTING.md" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Join the Team</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Screenshots Section with Gallery Feel -->
<section id="screenshots" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">📸 Screenshots Gallery</h2>
<p class="lead lead-text mb-4">Immerse yourself in GhostPack’s visual magic.</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 shadow-lg" style="max-height: 300px;">
<p class="mt-2">Main Interface: Command Center</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 shadow-lg" style="max-height: 300px;">
<p class="mt-2">Advanced Settings: Fine-Tune Power</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 shadow-lg" style="max-height: 300px;">
<p class="mt-2">Logs Display: Performance Insights</p>
</div>
</div>
</div>
</div>
<p class="text-center mt-4 lead-text">Upload your own screenshots to flaunt your spectral creations!</p>
</div>
</section>
<!-- Last Files Section with Live Updates -->
<section id="files" class="py-5 bg-ghost-alt text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">📂 Latest Conjurations</h2>
<p class="lead light-lead-text mb-4">Access the freshest files and logs from the GhostPack vault.</p>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>📜 Latest File</h3>
<p class="light-lead-text">Dive into <code>ghostgradio.py</code>, the pulsating core of GhostPack’s GUI, updated regularly.</p>
<a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost animate__animated animate__bounce" target="_blank">View File</a>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-alt-card h-100">
<div class="card-body text-center">
<h3>📋 Logs</h3>
<p class="light-lead-text">Explore real-time render logs for debugging and performance optimization.</p>
<a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost animate__animated animate__bounce" 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 animate__animated animate__pulse me-3" target="_blank">Refresh Repo 🔄</a>
<a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost animate__animated animate__pulse" target="_blank">Refresh Logs 📥</a>
</div>
</div>
</section>
<!-- Ads & Offers Section with Flashy Promotions for Your Stuff -->
<section id="ads" class="py-5 bg-dark text-white">
<div class="container">
<h2 class="text-center mb-5 animate__animated animate__fadeInUp">💰 Ads & Exclusive Offers</h2>
<p class="lead lead-text mb-4">Level up your spectral journey with these epic deals!</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 text-center">
<h3>🎮 GhostPack Pro Pack</h3>
<p class="lead-text">Unlock exclusive templates, advanced tutorials, and priority support for your GhostPack projects! Visit <a href="https://huggingface.co/spaces/ghostai1/GhostPack-Pro" target="_blank">GhostPack Pro</a> to grab this limited-time offer.</p>
<a href="https://huggingface.co/spaces/ghostai1/GhostPack-Pro" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Get Pro Pack Now!</a>
</div>
</div>
</div>
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>🌐 GhostAI Marketplace</h3>
<p class="lead-text">Sell your spectral creations or buy unique assets on the GhostAI Marketplace! Check out <a href="https://ghostai-marketplace.com" target="_blank">ghostai-marketplace.com</a> for a thriving community hub.</p>
<a href="https://ghostai-marketplace.com" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Join Marketplace</a>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="card bg-ghost-card h-100">
<div class="card-body text-center">
<h3>📚 GhostPack Masterclass</h3>
<p class="lead-text">Enroll in the GhostPack Masterclass for in-depth video sorcery training! Learn advanced techniques at <a href="https://ghostai1.teachable.com" target="_blank">ghostai1.teachable.com</a> and become a pro creator.</p>
<a href="https://ghostai1.teachable.com" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Enroll Today!</a>
</div>
</div>
</div>
</div>
<p class="text-center mt-4 lead-text animate__animated animate__flash">More exclusive drops coming soon—stay spectral! 🚀👻</p>
</div>
</section>
<!-- Footer with Dynamic Glow -->
<footer class="bg-ghost-black text-white text-center py-3">
<p class="animate__animated animate__pulse animate__infinite">👻 GhostPack by ghostai1 | <a href="https://github.com/ghostai1/GhostPack">GitHub</a> | <a href="https://huggingface.co/spaces/ghostai1/GhostPack">Hugging Face</a> | Apache-2.0</p>
<p class="animate__animated animate__fadeIn animate__delay-1s">Created 07:29 PM CDT, June 11, 2025 😈⚡️</p>
</footer>
<!-- Modals with Expanded Knowledge -->
<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 is a revolutionary caching mechanism that stores intermediate diffusion states, slashing frame generation time by approximately 40% (down to ~12 seconds per frame on an RTX 3060). This optimization leverages a mathematical reduction where \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \), significantly enhancing GPU cycle efficiency and enabling faster iterative video creation.</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>Context Packing compresses frame contexts into a fixed-size matrix, reducing VRAM usage by ~50% (saving ~2-3GB for a 60-second video). This technique uses a constant memory model \( M_{\text{VRAM}} \propto O(1) \), making it ideal for low-memory GPUs like the GTX 1650, expanding accessibility.</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>Dynamic Batching adjusts batch sizes (2-4 frames) dynamically, boosting throughput by ~30-50%. The formula \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \) optimizes GPU load, enhancing performance across varying hardware capacities.</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>Sage-Attention refines transformer attention mechanisms, saving ~5-10% processing time with \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \). This reduces computational overhead, especially beneficial for low-VRAM systems.</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>tcmalloc replaces standard memory allocation, reducing overhead by ~5-20% with \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \), improving multitasking and system stability.</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>CUDA Tweaks optimize memory allocation, cutting latency by ~10-15% with \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \), maximizing NVIDIA GPU potential.</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>Dynamic Scheduling adapts processing queues, reducing task time by ~15-20% with \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \), enhancing multi-task efficiency.</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>Memory Cache preloads data, cutting swap operations by ~25% with \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \), improving data retrieval speed.</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>Power Optimization lowers consumption by ~20-30% during idle with \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \), ideal for sustainable use.</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>Thread Tuning optimizes allocation, boosting CPU efficiency by ~10-15% with \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \), reducing overhead.</p></div></div></div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="script.js"></script>
<style>
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</body>
</html> |