Hugging Face's logo

Spaces:
ghostai1
/
GhostPack
Running

App Files Community
1
ghostai1 commited on
Commit
b9d422e
·
verified ·
1 Parent(s): 8f7d11d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +204 -167
index.html CHANGED
@@ -14,10 +14,10 @@
14
  <link rel="icon" href="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/ghostpack_logo.png">
15
  </head>
16
  <body>
17
- <!-- Navbar -->
18
  <nav class="navbar navbar-expand-lg navbar-dark bg-ghost-nav">
19
  <div class="container-fluid">
20
- <a class="navbar-brand" href="#">👻 GhostPack</a>
21
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22
  <span class="navbar-toggler-icon"></span>
23
  </button>
@@ -37,79 +37,80 @@
37
  <li class="nav-item"><a class="nav-link" href="#contribute">Contribute</a></li>
38
  <li class="nav-item"><a class="nav-link" href="#files">Files</a></li>
39
  <li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li>
 
40
  </ul>
41
  </div>
42
  </div>
43
  </nav>
44
 
45
- <!-- Hero Section -->
46
  <section id="home" class="hero-section text-center text-white">
47
  <div class="container py-5">
48
- <h1 class="display-3 animate__animated animate__zoomIn">👻 GhostPack</h1>
49
- <p class="lead animate__animated animate__fadeIn animate__delay-1s">Veo 3-Level Video Sorcery for Laptops! 😈🚀</p>
50
- <p class="animate__animated animate__fadeIn animate__delay-2s">Unleash stunning videos with ghostai1’s math on ≥6GB VRAM GPUs.</p>
51
- <div class="preview-window animate__animated animate__fadeIn animate__delay-3s">
52
- <img src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/preview_mockup.png" alt="GhostPack Preview" class="img-fluid rounded shadow-lg">
53
- <p class="mt-2 text-muted">Preview of ghostgradio.py interface and video generation.</p>
54
  </div>
55
  <div class="mt-4">
56
- <a href="#installation" class="btn btn-ghost btn-lg animate__animated animate__pulse animate__delay-4s me-3">Get Started 🛠️</a>
57
- <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>
58
  </div>
59
  </div>
60
  </section>
61
 
62
- <!-- Features Section -->
63
  <section id="features" class="py-5 bg-dark text-white">
64
  <div class="container">
65
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">✨ Spectral Features</h2>
66
- <p class="lead lead-text mb-4">Explore GhostPack’s powerful video generation tools.</p>
67
  <div class="row row-cols-1 row-cols-md-3 g-4">
68
  <div class="col">
69
  <div class="card bg-ghost-card h-100">
70
  <div class="card-body text-center">
71
- <h3 class="card-title">📹 Veo 3-Level AI</h3>
72
- <p class="card-text">Creates hyper-realistic videos with advanced next-frame prediction, optimized for 8GB RAM laptops with seamless transitions.</p>
73
  </div>
74
  </div>
75
  </div>
76
  <div class="col">
77
  <div class="card bg-ghost-card h-100">
78
  <div class="card-body text-center">
79
- <h3 class="card-title">⚡️ Phantom Speed</h3>
80
- <p class="card-text">Teacache boosts speed by ~40%, reducing frame time to ~12-15s on RTX 3060 for rapid rendering.</p>
81
  </div>
82
  </div>
83
  </div>
84
  <div class="col">
85
  <div class="card bg-ghost-card h-100">
86
  <div class="card-body text-center">
87
- <h3 class="card-title">🛠️ Laptop Domination</h3>
88
- <p class="card-text">Supports 13B models on ≥6GB VRAM GPUs, perfect for budget setups like RTX 3060.</p>
89
  </div>
90
  </div>
91
  </div>
92
  <div class="col">
93
  <div class="card bg-ghost-card h-100">
94
  <div class="card-body text-center">
95
- <h3 class="card-title">🎛️ Custom Workflows</h3>
96
- <p class="card-text">Customize frame length, batch size, and prompts to suit any creative vision.</p>
97
  </div>
98
  </div>
99
  </div>
100
  <div class="col">
101
  <div class="card bg-ghost-card h-100">
102
  <div class="card-body text-center">
103
- <h3 class="card-title">👁️ Live Preview</h3>
104
- <p class="card-text">Real-time frame previews in ghostgradio.py for instant creative control.</p>
105
  </div>
106
  </div>
107
  </div>
108
  <div class="col">
109
  <div class="card bg-ghost-card h-100">
110
  <div class="card-body text-center">
111
- <h3 class="card-title">🤝 Open Source</h3>
112
- <p class="card-text">Powered by community contributions and open-source code for continuous improvement.</p>
113
  </div>
114
  </div>
115
  </div>
@@ -117,11 +118,11 @@
117
  </div>
118
  </section>
119
 
120
- <!-- Optimizations Section -->
121
  <section id="optimizations" class="py-5 bg-dark text-white">
122
  <div class="container">
123
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🧙‍♂️ Ghostai1’s Math Sorcery</h2>
124
- <p class="lead lead-text mb-4">Advanced optimizations for low-resource systems.</p>
125
  <ul class="nav nav-tabs justify-content-center mb-4" id="optTab" role="tablist">
126
  <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>
127
  <li class="nav-item"><button class="nav-link" id="memory-tab" data-bs-toggle="tab" data-bs-target="#memory" type="button">🔮 Memory</button></li>
@@ -131,41 +132,41 @@
131
  <div class="tab-content" id="optTabContent">
132
  <div class="tab-pane fade show active" id="speed" role="tabpanel">
133
  <div class="row row-cols-1 row-cols-md-2 g-4">
134
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>🔮 Teacache</h4><p class="lead-text">Boosts speed by ~40% (~12s/frame on RTX 3060), \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \)</p></div></div></div>
135
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>🧙‍♂️ Sage-Attention</h4><p class="lead-text">Enhances speed by ~5-10%, \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \)</p></div></div></div>
136
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>⚡ CUDA Tweaks</h4><p class="lead-text">Reduces latency by ~10-15%, \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \)</p></div></div></div>
137
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>🚀 Dynamic Scheduling</h4><p class="lead-text">Speeds tasks by ~15-20%, \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \)</p></div></div></div>
138
  </div>
139
  </div>
140
  <div class="tab-pane fade" id="memory" role="tabpanel">
141
  <div class="row row-cols-1 row-cols-md-2 g-4">
142
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>🧬 Context Packing</h4><p class="lead-text">Saves ~50% VRAM (~2-3GB), \( M_{\text{VRAM}} \propto O(1) \)</p></div></div></div>
143
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>💾 tcmalloc</h4><p class="lead-text">Cuts overhead by ~5-20%, \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \)</p></div></div></div>
144
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>📦 Memory Cache</h4><p class="lead-text">Reduces swaps by ~25%, \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \)</p></div></div></div>
145
  </div>
146
  </div>
147
  <div class="tab-pane fade" id="compute" role="tabpanel">
148
  <div class="row row-cols-1 g-4">
149
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>⚡ Dynamic Batching</h4><p class="lead-text">Increases throughput by ~30-50%, \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \)</p></div></div></div>
150
  </div>
151
  </div>
152
  <div class="tab-pane fade" id="efficiency" role="tabpanel">
153
  <div class="row row-cols-1 row-cols-md-2 g-4">
154
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>🔋 Power Optimization</h4><p class="lead-text">Saves ~20-30% power, \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \)</p></div></div></div>
155
- <div class="col"><div class="card bg-ghost-card"><div class="card-body"><h4>🧵 Thread Tuning</h4><p class="lead-text">Boosts CPU by ~10-15%, \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \)</p></div></div></div>
156
  </div>
157
  </div>
158
  </div>
159
  <div class="row mt-5">
160
  <div class="col-12">
161
- <h3 class="text-center text-white mb-3">VRAM Requirements 🖥️</h3>
162
  <div class="table-responsive">
163
  <table class="table table-dark table-bordered">
164
  <thead><tr><th>GPU</th><th>VRAM</th><th>Performance</th><th>Notes</th></tr></thead>
165
  <tbody>
166
- <tr><td>GTX 1650</td><td>6GB</td><td>~18-25s/frame</td><td>Minimum, teacache recommended</td></tr>
167
  <tr><td>RTX 3050</td><td>8GB</td><td>~15-20s/frame</td><td>Balanced, batch size 2</td></tr>
168
- <tr><td>RTX 3060</td><td>12GB</td><td>~10-15s/frame</td><td>Optimal, batch size 2-4</td></tr>
169
  <tr><td>RTX 4090</td><td>24GB</td><td>~1.5-2.5s/frame</td><td>High-end, max batch</td></tr>
170
  </tbody>
171
  </table>
@@ -175,54 +176,54 @@
175
  </div>
176
  </section>
177
 
178
- <!-- Demo Video Showcase -->
179
  <section id="demo" class="py-5 bg-dark text-white">
180
  <div class="container">
181
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🎥 Demo Video Showcase</h2>
182
- <p class="lead lead-text mb-4 animate__animated animate__fadeIn">Experience GhostPack’s spectral video generation live!</p>
183
  <div class="row justify-content-center">
184
  <div class="col-md-8">
185
- <div class="card bg-ghost-card animate__animated animate__fadeIn">
186
  <div class="card-body text-center p-4">
187
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/k8pgUlg4OvdUZpbMNTcp5.gif" alt="GhostPack Demo GIF" class="img-fluid rounded" style="max-height: 400px; border: 2px solid #00ffcc;">
188
- <p class="mt-3">Sample output from ghostgradio.py, showcasing a dynamic neon-lit spectral battle.</p>
189
  </div>
190
  </div>
191
  </div>
192
  </div>
193
  <div class="text-center mt-4">
194
- <a href="https://github.com/ghostai1/GhostPack/blob/main/demo_videos" class="btn btn-ghost" target="_blank">Explore More Demos 📹</a>
195
  </div>
196
  </div>
197
  </section>
198
 
199
- <!-- Future Features Section -->
200
- <section id="future" class="py-5 bg-ghost-alt text-dark">
201
  <div class="container">
202
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌌 Future Spectral Phantoms</h2>
203
- <p class="lead light-lead-text mb-4">Innovative upgrades to redefine AI video creation.</p>
204
  <div class="row row-cols-1 row-cols-md-3 g-4">
205
  <div class="col">
206
  <div class="card bg-ghost-alt-card h-100">
207
  <div class="card-body text-center">
208
- <h3 class="card-title">🗣️ Voice Generation</h3>
209
- <p class="light-lead-text">AI-powered voice synthesis with customizable tones, integrating seamlessly into ghostgradio.py for narrated videos.</p>
210
  </div>
211
  </div>
212
  </div>
213
  <div class="col">
214
  <div class="card bg-ghost-alt-card h-100">
215
  <div class="card-body text-center">
216
- <h3 class="card-title">🖼️ AI Images</h3>
217
- <p class="light-lead-text">Generates high-quality starting frames with AI-crafted visuals, enhancing video pipeline creativity.</p>
218
  </div>
219
  </div>
220
  </div>
221
  <div class="col">
222
  <div class="card bg-ghost-alt-card h-100">
223
  <div class="card-body text-center">
224
- <h3 class="card-title">🎮 VR Integration</h3>
225
- <p class="light-lead-text">Upcoming VR video rendering support for immersive, 3D spectral experiences.</p>
226
  </div>
227
  </div>
228
  </div>
@@ -230,80 +231,80 @@
230
  </div>
231
  </section>
232
 
233
- <!-- Installation Section -->
234
  <section id="installation" class="py-5 bg-dark text-white">
235
  <div class="container">
236
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🛠️ Unleash GhostPack</h2>
237
- <p class="lead lead-text mb-4">Get started with GitHub, requires >30GB disk and compatible hardware.</p>
238
  <div class="row row-cols-1 row-cols-md-3 g-4">
239
  <div class="col">
240
  <div class="card bg-ghost-card h-100">
241
  <div class="card-body text-center">
242
- <h3 class="card-title">🐧 Ubuntu</h3>
243
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
244
  cd GhostPack
245
  chmod +x install_ubuntu.sh
246
  ./install_ubuntu.sh</code></pre>
247
- <p>Requires NVIDIA GPU, 8GB RAM, Python 3.10, and CUDA 12.6.</p>
248
  </div>
249
  </div>
250
  </div>
251
  <div class="col">
252
  <div class="card bg-ghost-card h-100">
253
  <div class="card-body text-center">
254
- <h3 class="card-title">🪟 Windows</h3>
255
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
256
  cd GhostPack
257
  install.bat</code></pre>
258
- <p>Auto-downloads >30GB models, requires NVIDIA drivers.</p>
259
  </div>
260
  </div>
261
  </div>
262
  <div class="col">
263
  <div class="card bg-ghost-card h-100">
264
  <div class="card-body text-center">
265
- <h3 class="card-title">🍎 macOS</h3>
266
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
267
  cd GhostPack
268
  chmod +x install_macos.sh
269
  ./install_macos.sh</code></pre>
270
- <p>Supports M1/M2 (slower), requires Metal compatibility.</p>
271
  </div>
272
  </div>
273
  </div>
274
  </div>
275
  <div class="text-center mt-4">
276
- <a href="https://github.com/ghostai1/GhostPack/releases" class="btn btn-ghost" target="_blank">Latest Release 📦</a>
277
  </div>
278
  </div>
279
  </section>
280
 
281
- <!-- Usage Section -->
282
  <section id="usage" class="py-5 bg-dark text-white">
283
  <div class="container">
284
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">📹 Weave Ghostly Videos</h2>
285
- <p class="lead lead-text mb-4">Step-by-step guide to mastering GhostPack’s video sorcery.</p>
286
  <div class="row row-cols-1 g-4">
287
  <div class="col">
288
  <div class="card bg-ghost-card h-100">
289
  <div class="card-body">
290
- <h4>Launch Phantom GUI</h4>
291
  <pre><code class="code-block">source ~/ghostpack_venv/venv/bin/activate
292
  cd ~/ghostpack_venv
293
  python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
294
- <p>Activates the virtual environment and starts the GUI on port 5666.</p>
295
  </div>
296
  </div>
297
  </div>
298
  <div class="col">
299
  <div class="card bg-ghost-card h-100">
300
  <div class="card-body">
301
- <h4>Craft Spells</h4>
302
  <ul class="lead-text">
303
- <li>Upload an initial image or video frame to begin.</li>
304
- <li>Input prompt: “A spectral figure glides through a neon-lit city.”</li>
305
- <li>Enable teacache for ⚡️ speed and tweak batch size for performance.</li>
306
- <li>Configure 15fps, 5s video (~75 frames) or adjust duration and frame rate.</li>
307
  </ul>
308
  </div>
309
  </div>
@@ -311,16 +312,16 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
311
  <div class="col">
312
  <div class="card bg-ghost-card h-100">
313
  <div class="card-body">
314
- <h4>Summon Spirits</h4>
315
- <p class="lead-text">Track GPU usage with <code>nvidia-smi</code>, expecting ~80-100% during rendering.</p>
316
  </div>
317
  </div>
318
  </div>
319
  <div class="col">
320
  <div class="card bg-ghost-card h-100">
321
  <div class="card-body">
322
- <h4>Export Results</h4>
323
- <p class="lead-text">Export MP4 files with adjustable compression (CRF 0-100) for quality balance.</p>
324
  </div>
325
  </div>
326
  </div>
@@ -328,144 +329,144 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
328
  </div>
329
  </section>
330
 
331
- <!-- Community Hub Section -->
332
- <section id="community" class="py-5 bg-ghost-alt text-dark">
333
  <div class="container">
334
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🤝 Community Hub</h2>
335
- <p class="lead light-lead-text mb-4">Join the GhostPack community to collaborate and grow.</p>
336
  <div class="row row-cols-1 row-cols-md-2 g-4">
337
  <div class="col">
338
  <div class="card bg-ghost-alt-card h-100">
339
  <div class="card-body text-center">
340
- <h3 class="card-title">💬 Discord Server</h3>
341
- <p class="light-lead-text">Engage in real-time with creators for support, updates, and discussions.</p>
342
- <a href="https://discord.gg/ghostpack" class="btn btn-ghost" target="_blank">Join Now</a>
343
  </div>
344
  </div>
345
  </div>
346
  <div class="col">
347
  <div class="card bg-ghost-alt-card h-100">
348
  <div class="card-body text-center">
349
- <h3 class="card-title">🐦 X Thread</h3>
350
- <p class="light-lead-text">Stay updated with news, in-depth tutorials, and community highlights.</p>
351
- <a href="https://x.com/search?q=ghostpack" class="btn btn-ghost" target="_blank">Visit X</a>
352
  </div>
353
  </div>
354
  </div>
355
  </div>
356
  <div class="text-center mt-4">
357
- <a href="https://github.com/ghostai1/GhostPack/issues" class="btn btn-outline-ghost" target="_blank">Report Issues 🚩</a>
358
  </div>
359
  </div>
360
  </section>
361
 
362
- <!-- Technical Deep Dive Section -->
363
  <section id="technical" class="py-5 bg-dark text-white">
364
  <div class="container">
365
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🔍 Technical Deep Dive</h2>
366
- <p class="lead lead-text mb-4">Uncover the technical backbone of GhostPack’s engine.</p>
367
  <div class="row row-cols-1 row-cols-md-2 g-4">
368
  <div class="col">
369
  <div class="card bg-ghost-card h-100">
370
  <div class="card-body text-center">
371
- <h3 class="card-title">🛠️ Architecture</h3>
372
- <p class="lead-text">Built on HunyuanVideo and FramePackI2V_HY, leveraging LlamaModel and CLIPTextModel for advanced embeddings and processing power.</p>
373
  </div>
374
  </div>
375
  </div>
376
  <div class="col">
377
  <div class="card bg-ghost-card h-100">
378
  <div class="card-body text-center">
379
- <h3 class="card-title">📊 Pipeline</h3>
380
- <p class="lead-text">Utilizes k-diffusion sampling with unipc, optimized for real-time preview and high-quality frame generation.</p>
381
  </div>
382
  </div>
383
  </div>
384
  </div>
385
  <div class="text-center mt-4">
386
- <a href="https://github.com/ghostai1/GhostPack/wiki" class="btn btn-ghost" target="_blank">Explore Wiki 🔗</a>
387
  </div>
388
  </div>
389
  </section>
390
 
391
- <!-- FAQ Section -->
392
- <section id="faq" class="py-5 bg-ghost-alt text-dark">
393
  <div class="container">
394
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">❓ Frequently Asked Questions</h2>
395
  <div class="accordion" id="faqAccordion">
396
  <div class="accordion-item bg-ghost-alt-card">
397
  <h2 class="accordion-header"><button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">What hardware is needed?</button></h2>
398
- <div id="faq1" class="accordion-collapse collapse show"><div class="accordion-body light-lead-text">Minimum: 6GB VRAM GPU (e.g., GTX 1650) and 8GB RAM; Optimal: 12GB VRAM (e.g., RTX 3060).</div></div>
399
  </div>
400
  <div class="accordion-item bg-ghost-alt-card">
401
  <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">How do I install GhostPack?</button></h2>
402
- <div id="faq2" class="accordion-collapse collapse"><div class="accordion-body light-lead-text">Clone the repo and execute the relevant install script, e.g., <code>./install_ubuntu.sh</code>, from the Installation section.</div></div>
403
  </div>
404
  <div class="accordion-item bg-ghost-alt-card">
405
  <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq3">Can I contribute?</button></h2>
406
- <div id="faq3" class="accordion-collapse collapse"><div class="accordion-body light-lead-text">Absolutely, review the Contributing Guidelines for participation details.</div></div>
407
  </div>
408
  </div>
409
  </div>
410
  </section>
411
 
412
- <!-- Tutorials Section -->
413
  <section id="tutorials" class="py-5 bg-dark text-white">
414
  <div class="container">
415
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">📚 Tutorials</h2>
416
- <p class="lead lead-text mb-4">In-depth guides to master GhostPack’s video sorcery.</p>
417
  <div class="row row-cols-1 row-cols-md-2 g-4">
418
  <div class="col">
419
  <div class="card bg-ghost-card h-100">
420
  <div class="card-body text-center">
421
- <h3 class="card-title">🎬 Getting Started</h3>
422
- <p class="lead-text">Comprehensive setup guide and first video creation with GhostPack.</p>
423
- <a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost" target="_blank">Start Here</a>
424
  </div>
425
  </div>
426
  </div>
427
  <div class="col">
428
  <div class="card bg-ghost-card h-100">
429
  <div class="card-body text-center">
430
- <h3 class="card-title">⚙️ Advanced Configuration</h3>
431
- <p class="lead-text">Learn to fine-tune prompts, batch sizes, and advanced settings for pro results.</p>
432
- <a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost" target="_blank">Go Advanced</a>
433
  </div>
434
  </div>
435
  </div>
436
  <div class="col">
437
  <div class="card bg-ghost-card h-100">
438
  <div class="card-body text-center">
439
- <h3 class="card-title">🎥 Video Export Tips</h3>
440
- <p class="lead-text">Expert advice on exporting MP4s with optimal CRF settings for quality and file size.</p>
441
- <a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost" target="_blank">Export Guide</a>
442
  </div>
443
  </div>
444
  </div>
445
  </div>
446
  <div class="text-center mt-4">
447
- <a href="https://github.com/ghostai1/GhostPack/wiki/Tutorials" class="btn btn-outline-ghost" target="_blank">More Tutorials 📖</a>
448
  </div>
449
  </div>
450
  </section>
451
 
452
- <!-- Contributing Guidelines Section -->
453
- <section id="contribute" class="py-5 bg-ghost-alt text-dark">
454
  <div class="container">
455
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌱 Contributing Guidelines</h2>
456
- <p class="lead light-lead-text mb-4">Help shape GhostPack’s future with your skills.</p>
457
  <div class="row">
458
  <div class="col-md-12">
459
  <div class="card bg-ghost-alt-card">
460
  <div class="card-body text-center">
461
- <h3 class="card-title">🎯 How to Contribute</h3>
462
  <ul class="light-lead-text">
463
- <li>Fork the repository and create a dedicated feature branch.</li>
464
- <li>Submit pull requests with detailed change descriptions.</li>
465
- <li>Follow coding standards detailed in the wiki.</li>
466
- <li>Thoroughly test changes with ghostgradio.py before submission.</li>
467
  </ul>
468
- <a href="https://github.com/ghostai1/GhostPack/blob/main/CONTRIBUTING.md" class="btn btn-ghost" target="_blank">View Guidelines</a>
469
  </div>
470
  </div>
471
  </div>
@@ -473,114 +474,150 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
473
  </div>
474
  </section>
475
 
476
- <!-- Screenshots Section -->
477
  <section id="screenshots" class="py-5 bg-dark text-white">
478
  <div class="container">
479
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">📸 Screenshots</h2>
480
- <p class="lead lead-text mb-4">Explore GhostPack’s spectral magic visually.</p>
481
  <div class="row row-cols-1 row-cols-md-3 g-4">
482
  <div class="col">
483
  <div class="card bg-ghost-card h-100">
484
  <div class="card-body text-center">
485
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/7ABE2lOA4LOUtPfh1mhxP.png" alt="Main Interface" class="img-fluid rounded shadow-sm" style="max-height: 300px;">
486
- <p class="mt-2">Main Interface Overview</p>
487
  </div>
488
  </div>
489
  </div>
490
  <div class="col">
491
  <div class="card bg-ghost-card h-100">
492
  <div class="card-body text-center">
493
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/9qNVRX2eM2iCY8xQKcOwW.png" alt="Advanced Settings" class="img-fluid rounded shadow-sm" style="max-height: 300px;">
494
- <p class="mt-2">Advanced Settings Panel</p>
495
  </div>
496
  </div>
497
  </div>
498
  <div class="col">
499
  <div class="card bg-ghost-card h-100">
500
  <div class="card-body text-center">
501
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/--fIS9ITg4-VqN22ySoa2.png" alt="Logs Display" class="img-fluid rounded shadow-sm" style="max-height: 300px;">
502
- <p class="mt-2">Logs Display View</p>
503
  </div>
504
  </div>
505
  </div>
506
  </div>
507
- <p class="text-center mt-4 lead-text">Share your own screenshots to showcase your work!</p>
508
  </div>
509
  </section>
510
 
511
- <!-- Last Files Section -->
512
- <section id="files" class="py-5 bg-ghost-alt text-dark">
513
  <div class="container">
514
- <h2 class="text-center mb-5 animate__animated animate__fadeIn">📂 Latest Conjurations</h2>
515
- <p class="lead light-lead-text mb-4">Access the latest files and logs from the repository.</p>
516
  <div class="row row-cols-1 row-cols-md-2 g-4">
517
  <div class="col">
518
  <div class="card bg-ghost-alt-card h-100">
519
  <div class="card-body text-center">
520
- <h3 class="card-title">📜 Latest File</h3>
521
- <p class="light-lead-text">Explore <code>ghostgradio.py</code>, the heart of GhostPack’s GUI functionality.</p>
522
- <a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost" target="_blank">View File</a>
523
  </div>
524
  </div>
525
  </div>
526
  <div class="col">
527
  <div class="card bg-ghost-alt-card h-100">
528
  <div class="card-body text-center">
529
- <h3 class="card-title">📋 Logs</h3>
530
- <p class="light-lead-text">Dive into render logs for debugging and performance analysis.</p>
531
- <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">View Logs</a>
532
  </div>
533
  </div>
534
  </div>
535
  </div>
536
  <div class="text-center mt-4">
537
- <a href="https://github.com/ghostai1/GhostPack" class="btn btn-outline-ghost me-3" target="_blank">Refresh Repo 🔄</a>
538
- <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">Refresh Logs 📥</a>
539
  </div>
540
  </div>
541
  </section>
542
 
543
- <!-- Footer -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
544
  <footer class="bg-ghost-black text-white text-center py-3">
545
- <p>👻 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>
546
- <p>Created 07:20 PM CDT, June 11, 2025 😈⚡️</p>
547
  </footer>
548
 
549
- <!-- Modals -->
550
  <div class="modal fade" id="teacacheModal" tabindex="-1" aria-labelledby="teacacheModalLabel" aria-hidden="true">
551
- <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>Enhances performance by caching diffusion states, reducing frame time by ~40% (~12s/frame on RTX 3060), calculated as \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \).</p></div></div></div>
552
  </div>
553
  <div class="modal fade" id="contextModal" tabindex="-1" aria-labelledby="contextModalLabel" aria-hidden="true">
554
- <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>Optimizes memory by compressing contexts into a fixed matrix, saving ~50% VRAM (~2-3GB for 60s video), with \( M_{\text{VRAM}} \propto O(1) \).</p></div></div></div>
555
  </div>
556
  <div class="modal fade" id="batchingModal" tabindex="-1" aria-labelledby="batchingModalLabel" aria-hidden="true">
557
- <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>Improves efficiency with adaptive batching (2-4 frames), boosting throughput by ~30-50%, where \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \).</p></div></div></div>
558
  </div>
559
  <div class="modal fade" id="sageModal" tabindex="-1" aria-labelledby="sageModalLabel" aria-hidden="true">
560
- <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>Streamlines attention layers, saving ~5-10% processing time, expressed as \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \).</p></div></div></div>
561
  </div>
562
  <div class="modal fade" id="tcmallocModal" tabindex="-1" aria-labelledby="tcmallocModalLabel" aria-hidden="true">
563
- <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>Enhances memory management, reducing overhead by ~5-20%, with \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \).</p></div></div></div>
564
  </div>
565
  <div class="modal fade" id="cudaModal" tabindex="-1" aria-labelledby="cudaModalLabel" aria-hidden="true">
566
- <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 allocation, cutting latency by ~10-15%, where \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \).</p></div></div></div>
567
  </div>
568
  <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
569
- <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 queues to reduce task time by ~15-20%, calculated as \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \).</p></div></div></div>
570
  </div>
571
  <div class="modal fade" id="cacheModal" tabindex="-1" aria-labelledby="cacheModalLabel" aria-hidden="true">
572
- <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 to cut swaps by ~25%, with \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \).</p></div></div></div>
573
  </div>
574
  <div class="modal fade" id="powerModal" tabindex="-1" aria-labelledby="powerModalLabel" aria-hidden="true">
575
- <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 draw by ~20-30% during idle, expressed as \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \).</p></div></div></div>
576
  </div>
577
  <div class="modal fade" id="threadModal" tabindex="-1" aria-labelledby="threadModalLabel" aria-hidden="true">
578
- <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 threads for ~10-15% CPU efficiency, \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \).</p></div></div></div>
579
  </div>
580
 
581
  <!-- Bootstrap JS -->
582
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
583
  <!-- Custom JS -->
584
  <script src="script.js"></script>
 
 
 
 
 
 
 
585
  </body>
586
  </html>
 
14
  <link rel="icon" href="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/ghostpack_logo.png">
15
  </head>
16
  <body>
17
+ <!-- Navbar with Dynamic Effects -->
18
  <nav class="navbar navbar-expand-lg navbar-dark bg-ghost-nav">
19
  <div class="container-fluid">
20
+ <a class="navbar-brand animate__animated animate__pulse" href="#">👻 GhostPack</a>
21
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22
  <span class="navbar-toggler-icon"></span>
23
  </button>
 
37
  <li class="nav-item"><a class="nav-link" href="#contribute">Contribute</a></li>
38
  <li class="nav-item"><a class="nav-link" href="#files">Files</a></li>
39
  <li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li>
40
+ <li class="nav-item"><a class="nav-link" href="#ads">Ads & Offers</a></li>
41
  </ul>
42
  </div>
43
  </div>
44
  </nav>
45
 
46
+ <!-- Hero Section with Cosmic Vibe -->
47
  <section id="home" class="hero-section text-center text-white">
48
  <div class="container py-5">
49
+ <h1 class="display-2 animate__animated animate__zoomIn animate__delay-1s" style="text-shadow: 0 0 20px #00ffcc, 0 0 30px #ff00ff;">👻 GhostPack</h1>
50
+ <p class="lead animate__animated animate__fadeIn animate__delay-2s">Unleash Veo 3-Level Video Sorcery on Your Laptop! 😈🚀</p>
51
+ <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>
52
+ <div class="preview-window animate__animated animate__fadeInUp animate__delay-4s">
53
+ <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;">
54
+ <p class="mt-2 text-muted">Witness the cutting-edge ghostgradio.py interface in action!</p>
55
  </div>
56
  <div class="mt-4">
57
+ <a href="#installation" class="btn btn-ghost btn-lg animate__animated animate__pulse animate__infinite">Get Started Now 🛠️</a>
58
+ <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>
59
  </div>
60
  </div>
61
  </section>
62
 
63
+ <!-- Features Section with Enhanced Details -->
64
  <section id="features" class="py-5 bg-dark text-white">
65
  <div class="container">
66
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">✨ Spectral Features Unleashed</h2>
67
+ <p class="lead lead-text mb-4">Dive into GhostPack’s revolutionary video generation capabilities.</p>
68
  <div class="row row-cols-1 row-cols-md-3 g-4">
69
  <div class="col">
70
  <div class="card bg-ghost-card h-100">
71
  <div class="card-body text-center">
72
+ <h3>📹 Veo 3-Level AI</h3>
73
+ <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>
74
  </div>
75
  </div>
76
  </div>
77
  <div class="col">
78
  <div class="card bg-ghost-card h-100">
79
  <div class="card-body text-center">
80
+ <h3>⚡️ Phantom Speed</h3>
81
+ <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>
82
  </div>
83
  </div>
84
  </div>
85
  <div class="col">
86
  <div class="card bg-ghost-card h-100">
87
  <div class="card-body text-center">
88
+ <h3>🛠️ Laptop Domination</h3>
89
+ <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>
90
  </div>
91
  </div>
92
  </div>
93
  <div class="col">
94
  <div class="card bg-ghost-card h-100">
95
  <div class="card-body text-center">
96
+ <h3>🎛️ Custom Workflows</h3>
97
+ <p class="card-text">Offers extensive customization with adjustable frame lengths, batch sizes, and detailed prompt engineering for unparalleled creative control.</p>
98
  </div>
99
  </div>
100
  </div>
101
  <div class="col">
102
  <div class="card bg-ghost-card h-100">
103
  <div class="card-body text-center">
104
+ <h3>👁️ Live Preview</h3>
105
+ <p class="card-text">Provides real-time frame previews in ghostgradio.py, allowing instant tweaks and visual feedback during the creative process.</p>
106
  </div>
107
  </div>
108
  </div>
109
  <div class="col">
110
  <div class="card bg-ghost-card h-100">
111
  <div class="card-body text-center">
112
+ <h3>🤝 Open Source Power</h3>
113
+ <p class="card-text">Thrives on community contributions, offering open-source code for continuous improvement and collaborative innovation.</p>
114
  </div>
115
  </div>
116
  </div>
 
118
  </div>
119
  </section>
120
 
121
+ <!-- Optimizations Section with Deep Knowledge -->
122
  <section id="optimizations" class="py-5 bg-dark text-white">
123
  <div class="container">
124
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🧙‍♂️ Ghostai1’s Math Sorcery</h2>
125
+ <p class="lead lead-text mb-4">Unlock the science behind GhostPack’s performance optimizations.</p>
126
  <ul class="nav nav-tabs justify-content-center mb-4" id="optTab" role="tablist">
127
  <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>
128
  <li class="nav-item"><button class="nav-link" id="memory-tab" data-bs-toggle="tab" data-bs-target="#memory" type="button">🔮 Memory</button></li>
 
132
  <div class="tab-content" id="optTabContent">
133
  <div class="tab-pane fade show active" id="speed" role="tabpanel">
134
  <div class="row row-cols-1 row-cols-md-2 g-4">
135
+ <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>
136
+ <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>
137
+ <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>
138
+ <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>
139
  </div>
140
  </div>
141
  <div class="tab-pane fade" id="memory" role="tabpanel">
142
  <div class="row row-cols-1 row-cols-md-2 g-4">
143
+ <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>
144
+ <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>
145
+ <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>
146
  </div>
147
  </div>
148
  <div class="tab-pane fade" id="compute" role="tabpanel">
149
  <div class="row row-cols-1 g-4">
150
+ <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>
151
  </div>
152
  </div>
153
  <div class="tab-pane fade" id="efficiency" role="tabpanel">
154
  <div class="row row-cols-1 row-cols-md-2 g-4">
155
+ <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>
156
+ <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>
157
  </div>
158
  </div>
159
  </div>
160
  <div class="row mt-5">
161
  <div class="col-12">
162
+ <h3 class="text-center mb-3">VRAM Requirements 🖥️</h3>
163
  <div class="table-responsive">
164
  <table class="table table-dark table-bordered">
165
  <thead><tr><th>GPU</th><th>VRAM</th><th>Performance</th><th>Notes</th></tr></thead>
166
  <tbody>
167
+ <tr><td>GTX 1650</td><td>6GB</td><td>~18-25s/frame</td><td>Minimum, use teacache</td></tr>
168
  <tr><td>RTX 3050</td><td>8GB</td><td>~15-20s/frame</td><td>Balanced, batch size 2</td></tr>
169
+ <tr><td>RTX 3060</td><td>12GB</td><td>~10-15s/frame</td><td>Optimal, batch 2-4</td></tr>
170
  <tr><td>RTX 4090</td><td>24GB</td><td>~1.5-2.5s/frame</td><td>High-end, max batch</td></tr>
171
  </tbody>
172
  </table>
 
176
  </div>
177
  </section>
178
 
179
+ <!-- Demo Video Showcase with Epic Vibe -->
180
  <section id="demo" class="py-5 bg-dark text-white">
181
  <div class="container">
182
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🎥 Demo Video Showcase</h2>
183
+ <p class="lead lead-text mb-4 animate__animated animate__fadeIn">Behold GhostPack’s spectral video generation in action!</p>
184
  <div class="row justify-content-center">
185
  <div class="col-md-8">
186
+ <div class="card bg-ghost-card animate__animated animate__fadeIn" style="border: 3px solid #ff00ff; box-shadow: 0 0 20px #ff00ff;">
187
  <div class="card-body text-center p-4">
188
+ <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;">
189
+ <p class="mt-3">Epic sample from ghostgradio.py, featuring a neon-lit spectral battle scene!</p>
190
  </div>
191
  </div>
192
  </div>
193
  </div>
194
  <div class="text-center mt-4">
195
+ <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>
196
  </div>
197
  </div>
198
  </section>
199
 
200
+ <!-- Future Features with Visionary Details -->
201
+ <section id="future" class="py-5 bg-ghost-alt text-white">
202
  <div class="container">
203
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🌌 Future Spectral Phantoms</h2>
204
+ <p class="lead light-lead-text mb-4">Groundbreaking upgrades to revolutionize AI video creation.</p>
205
  <div class="row row-cols-1 row-cols-md-3 g-4">
206
  <div class="col">
207
  <div class="card bg-ghost-alt-card h-100">
208
  <div class="card-body text-center">
209
+ <h3>🗣️ Voice Generation</h3>
210
+ <p class="light-lead-text">Advanced AI voice synthesis with customizable tones and pitch, seamlessly integrated into ghostgradio.py for immersive narrated videos.</p>
211
  </div>
212
  </div>
213
  </div>
214
  <div class="col">
215
  <div class="card bg-ghost-alt-card h-100">
216
  <div class="card-body text-center">
217
+ <h3>🖼️ AI Images</h3>
218
+ <p class="light-lead-text">Generates stunning, high-resolution starting frames with AI-crafted visuals, elevating video pipeline creativity to new heights.</p>
219
  </div>
220
  </div>
221
  </div>
222
  <div class="col">
223
  <div class="card bg-ghost-alt-card h-100">
224
  <div class="card-body text-center">
225
+ <h3>🎮 VR Integration</h3>
226
+ <p class="light-lead-text">Future-ready VR video rendering, delivering immersive 3D spectral experiences with real-time interaction.</p>
227
  </div>
228
  </div>
229
  </div>
 
231
  </div>
232
  </section>
233
 
234
+ <!-- Installation Section with Detailed Steps -->
235
  <section id="installation" class="py-5 bg-dark text-white">
236
  <div class="container">
237
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🛠️ Unleash GhostPack</h2>
238
+ <p class="lead lead-text mb-4">Step into the future with a simple installation, requiring >30GB disk and compatible hardware.</p>
239
  <div class="row row-cols-1 row-cols-md-3 g-4">
240
  <div class="col">
241
  <div class="card bg-ghost-card h-100">
242
  <div class="card-body text-center">
243
+ <h3>🐧 Ubuntu</h3>
244
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
245
  cd GhostPack
246
  chmod +x install_ubuntu.sh
247
  ./install_ubuntu.sh</code></pre>
248
+ <p>Requires NVIDIA GPU, 8GB RAM, Python 3.10, and CUDA 12.6 for optimal performance.</p>
249
  </div>
250
  </div>
251
  </div>
252
  <div class="col">
253
  <div class="card bg-ghost-card h-100">
254
  <div class="card-body text-center">
255
+ <h3>🪟 Windows</h3>
256
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
257
  cd GhostPack
258
  install.bat</code></pre>
259
+ <p>Automatically downloads >30GB models, ensure NVIDIA drivers are installed.</p>
260
  </div>
261
  </div>
262
  </div>
263
  <div class="col">
264
  <div class="card bg-ghost-card h-100">
265
  <div class="card-body text-center">
266
+ <h3>🍎 macOS</h3>
267
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
268
  cd GhostPack
269
  chmod +x install_macos.sh
270
  ./install_macos.sh</code></pre>
271
+ <p>Supports M1/M2 (slower performance), requires Metal compatibility.</p>
272
  </div>
273
  </div>
274
  </div>
275
  </div>
276
  <div class="text-center mt-4">
277
+ <a href="https://github.com/ghostai1/GhostPack/releases" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Grab Latest Release 📦</a>
278
  </div>
279
  </div>
280
  </section>
281
 
282
+ <!-- Usage Section with In-Depth Guide -->
283
  <section id="usage" class="py-5 bg-dark text-white">
284
  <div class="container">
285
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">📹 Weave Ghostly Videos</h2>
286
+ <p class="lead lead-text mb-4">Master GhostPack with this detailed usage guide.</p>
287
  <div class="row row-cols-1 g-4">
288
  <div class="col">
289
  <div class="card bg-ghost-card h-100">
290
  <div class="card-body">
291
+ <h3>Launch Phantom GUI</h3>
292
  <pre><code class="code-block">source ~/ghostpack_venv/venv/bin/activate
293
  cd ~/ghostpack_venv
294
  python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
295
+ <p>Activates the virtual environment and launches the GUI, accessible locally on port 5666.</p>
296
  </div>
297
  </div>
298
  </div>
299
  <div class="col">
300
  <div class="card bg-ghost-card h-100">
301
  <div class="card-body">
302
+ <h3>Craft Spells</h3>
303
  <ul class="lead-text">
304
+ <li>Upload a base image or video frame to kickstart your project.</li>
305
+ <li>Input a vivid prompt: “A spectral figure glides through a neon-lit city under twin moons.”</li>
306
+ <li>Enable teacache for ⚡️ speed and fine-tune batch size for optimal performance.</li>
307
+ <li>Set 15fps for a 5-second video (~75 frames) or customize duration and frame rate for unique outputs.</li>
308
  </ul>
309
  </div>
310
  </div>
 
312
  <div class="col">
313
  <div class="card bg-ghost-card h-100">
314
  <div class="card-body">
315
+ <h3>Summon Spirits</h3>
316
+ <p class="lead-text">Monitor GPU usage with <code>nvidia-smi</code>, expecting ~80-100% utilization as the spectral magic unfolds.</p>
317
  </div>
318
  </div>
319
  </div>
320
  <div class="col">
321
  <div class="card bg-ghost-card h-100">
322
  <div class="card-body">
323
+ <h3>Export Results</h3>
324
+ <p class="lead-text">Export your masterpiece as an MP4 with adjustable compression (CRF 0-100) to balance quality and file size.</p>
325
  </div>
326
  </div>
327
  </div>
 
329
  </div>
330
  </section>
331
 
332
+ <!-- Community Hub with Interactive Flair -->
333
+ <section id="community" class="py-5 bg-ghost-alt text-white">
334
  <div class="container">
335
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🤝 Community Hub</h2>
336
+ <p class="lead light-lead-text mb-4">Join a vibrant community to collaborate and innovate.</p>
337
  <div class="row row-cols-1 row-cols-md-2 g-4">
338
  <div class="col">
339
  <div class="card bg-ghost-alt-card h-100">
340
  <div class="card-body text-center">
341
+ <h3>💬 Discord Server</h3>
342
+ <p class="light-lead-text">Connect with creators worldwide for real-time support, updates, and spectral brainstorming sessions.</p>
343
+ <a href="https://discord.gg/ghostpack" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Join the Spectral Chat</a>
344
  </div>
345
  </div>
346
  </div>
347
  <div class="col">
348
  <div class="card bg-ghost-alt-card h-100">
349
  <div class="card-body text-center">
350
+ <h3>🐦 X Thread</h3>
351
+ <p class="light-lead-text">Follow for breaking news, expert tutorials, and stunning community-generated showcases.</p>
352
+ <a href="https://x.com/search?q=ghostpack" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Dive into X</a>
353
  </div>
354
  </div>
355
  </div>
356
  </div>
357
  <div class="text-center mt-4">
358
+ <a href="https://github.com/ghostai1/GhostPack/issues" class="btn btn-outline-ghost animate__animated animate__pulse" target="_blank">Report Issues 🚩</a>
359
  </div>
360
  </div>
361
  </section>
362
 
363
+ <!-- Technical Deep Dive with Expert Insights -->
364
  <section id="technical" class="py-5 bg-dark text-white">
365
  <div class="container">
366
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🔍 Technical Deep Dive</h2>
367
+ <p class="lead lead-text mb-4">Explore the intricate technology powering GhostPack.</p>
368
  <div class="row row-cols-1 row-cols-md-2 g-4">
369
  <div class="col">
370
  <div class="card bg-ghost-card h-100">
371
  <div class="card-body text-center">
372
+ <h3>🛠️ Architecture</h3>
373
+ <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>
374
  </div>
375
  </div>
376
  </div>
377
  <div class="col">
378
  <div class="card bg-ghost-card h-100">
379
  <div class="card-body text-center">
380
+ <h3>📊 Pipeline</h3>
381
+ <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>
382
  </div>
383
  </div>
384
  </div>
385
  </div>
386
  <div class="text-center mt-4">
387
+ <a href="https://github.com/ghostai1/GhostPack/wiki" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Dive into Wiki 🔗</a>
388
  </div>
389
  </div>
390
  </section>
391
 
392
+ <!-- FAQ Section with Expanded Answers -->
393
+ <section id="faq" class="py-5 bg-ghost-alt text-white">
394
  <div class="container">
395
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">❓ Frequently Asked Questions</h2>
396
  <div class="accordion" id="faqAccordion">
397
  <div class="accordion-item bg-ghost-alt-card">
398
  <h2 class="accordion-header"><button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">What hardware is needed?</button></h2>
399
+ <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>
400
  </div>
401
  <div class="accordion-item bg-ghost-alt-card">
402
  <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">How do I install GhostPack?</button></h2>
403
+ <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>
404
  </div>
405
  <div class="accordion-item bg-ghost-alt-card">
406
  <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq3">Can I contribute?</button></h2>
407
+ <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>
408
  </div>
409
  </div>
410
  </div>
411
  </section>
412
 
413
+ <!-- Tutorials Section with Rich Content -->
414
  <section id="tutorials" class="py-5 bg-dark text-white">
415
  <div class="container">
416
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">📚 Tutorials</h2>
417
+ <p class="lead lead-text mb-4">Master GhostPack with these in-depth learning resources.</p>
418
  <div class="row row-cols-1 row-cols-md-2 g-4">
419
  <div class="col">
420
  <div class="card bg-ghost-card h-100">
421
  <div class="card-body text-center">
422
+ <h3>🎬 Getting Started</h3>
423
+ <p class="lead-text">A step-by-step guide to install GhostPack and create your first spectral video, from setup to export.</p>
424
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Start Here</a>
425
  </div>
426
  </div>
427
  </div>
428
  <div class="col">
429
  <div class="card bg-ghost-card h-100">
430
  <div class="card-body text-center">
431
+ <h3>⚙️ Advanced Configuration</h3>
432
+ <p class="lead-text">Unlock pro-level control with detailed instructions on customizing prompts, batch sizes, and advanced settings.</p>
433
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Go Pro</a>
434
  </div>
435
  </div>
436
  </div>
437
  <div class="col">
438
  <div class="card bg-ghost-card h-100">
439
  <div class="card-body text-center">
440
+ <h3>🎥 Video Export Tips</h3>
441
+ <p class="lead-text">Expert techniques for exporting MP4s with optimal CRF settings to balance quality, size, and performance.</p>
442
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Export Mastery</a>
443
  </div>
444
  </div>
445
  </div>
446
  </div>
447
  <div class="text-center mt-4">
448
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Tutorials" class="btn btn-outline-ghost animate__animated animate__pulse" target="_blank">Discover More 📖</a>
449
  </div>
450
  </div>
451
  </section>
452
 
453
+ <!-- Contributing Guidelines with Community Call -->
454
+ <section id="contribute" class="py-5 bg-ghost-alt text-white">
455
  <div class="container">
456
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">🌱 Contributing Guidelines</h2>
457
+ <p class="lead light-lead-text mb-4">Join the revolution and shape GhostPack’s future.</p>
458
  <div class="row">
459
  <div class="col-md-12">
460
  <div class="card bg-ghost-alt-card">
461
  <div class="card-body text-center">
462
+ <h3>🎯 How to Contribute</h3>
463
  <ul class="light-lead-text">
464
+ <li>Fork the repository and create a dedicated feature branch for your changes.</li>
465
+ <li>Submit pull requests with thorough descriptions and tested code.</li>
466
+ <li>Adhere to coding standards outlined in the wiki for consistency.</li>
467
+ <li>Test your enhancements with ghostgradio.py to ensure compatibility.</li>
468
  </ul>
469
+ <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>
470
  </div>
471
  </div>
472
  </div>
 
474
  </div>
475
  </section>
476
 
477
+ <!-- Screenshots Section with Gallery Feel -->
478
  <section id="screenshots" class="py-5 bg-dark text-white">
479
  <div class="container">
480
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">📸 Screenshots Gallery</h2>
481
+ <p class="lead lead-text mb-4">Immerse yourself in GhostPack’s visual magic.</p>
482
  <div class="row row-cols-1 row-cols-md-3 g-4">
483
  <div class="col">
484
  <div class="card bg-ghost-card h-100">
485
  <div class="card-body text-center">
486
+ <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;">
487
+ <p class="mt-2">Main Interface: Command Center</p>
488
  </div>
489
  </div>
490
  </div>
491
  <div class="col">
492
  <div class="card bg-ghost-card h-100">
493
  <div class="card-body text-center">
494
+ <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;">
495
+ <p class="mt-2">Advanced Settings: Fine-Tune Power</p>
496
  </div>
497
  </div>
498
  </div>
499
  <div class="col">
500
  <div class="card bg-ghost-card h-100">
501
  <div class="card-body text-center">
502
+ <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;">
503
+ <p class="mt-2">Logs Display: Performance Insights</p>
504
  </div>
505
  </div>
506
  </div>
507
  </div>
508
+ <p class="text-center mt-4 lead-text">Upload your own screenshots to flaunt your spectral creations!</p>
509
  </div>
510
  </section>
511
 
512
+ <!-- Last Files Section with Live Updates -->
513
+ <section id="files" class="py-5 bg-ghost-alt text-white">
514
  <div class="container">
515
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">📂 Latest Conjurations</h2>
516
+ <p class="lead light-lead-text mb-4">Access the freshest files and logs from the GhostPack vault.</p>
517
  <div class="row row-cols-1 row-cols-md-2 g-4">
518
  <div class="col">
519
  <div class="card bg-ghost-alt-card h-100">
520
  <div class="card-body text-center">
521
+ <h3>📜 Latest File</h3>
522
+ <p class="light-lead-text">Dive into <code>ghostgradio.py</code>, the pulsating core of GhostPack’s GUI, updated regularly.</p>
523
+ <a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost animate__animated animate__bounce" target="_blank">View File</a>
524
  </div>
525
  </div>
526
  </div>
527
  <div class="col">
528
  <div class="card bg-ghost-alt-card h-100">
529
  <div class="card-body text-center">
530
+ <h3>📋 Logs</h3>
531
+ <p class="light-lead-text">Explore real-time render logs for debugging and performance optimization.</p>
532
+ <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost animate__animated animate__bounce" target="_blank">View Logs</a>
533
  </div>
534
  </div>
535
  </div>
536
  </div>
537
  <div class="text-center mt-4">
538
+ <a href="https://github.com/ghostai1/GhostPack" class="btn btn-outline-ghost animate__animated animate__pulse me-3" target="_blank">Refresh Repo 🔄</a>
539
+ <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost animate__animated animate__pulse" target="_blank">Refresh Logs 📥</a>
540
  </div>
541
  </div>
542
  </section>
543
 
544
+ <!-- Ads & Offers Section with Flashy Promotions -->
545
+ <section id="ads" class="py-5 bg-dark text-white">
546
+ <div class="container">
547
+ <h2 class="text-center mb-5 animate__animated animate__fadeInUp">💰 Ads & Exclusive Offers</h2>
548
+ <p class="lead lead-text mb-4">Boost your experience with these spectral deals!</p>
549
+ <div class="row row-cols-1 row-cols-md-2 g-4">
550
+ <div class="col">
551
+ <div class="card bg-ghost-card h-100">
552
+ <div class="card-body text-center">
553
+ <h3>🎁 SuperGrok Upgrade</h3>
554
+ <p class="lead-text">Unlock higher usage quotas with a SuperGrok subscription! Visit <a href="https://x.ai/grok" target="_blank">x.ai/grok</a> for details and elevate your video game.</p>
555
+ <a href="https://x.ai/grok" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Claim Now!</a>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ <div class="col">
560
+ <div class="card bg-ghost-card h-100">
561
+ <div class="card-body text-center">
562
+ <h3>🌟 xAI API Access</h3>
563
+ <p class="lead-text">Integrate GhostPack into your projects with the xAI API. Check out <a href="https://x.ai/api" target="_blank">x.ai/api</a> for developer tools and documentation.</p>
564
+ <a href="https://x.ai/api" class="btn btn-ghost animate__animated animate__bounce" target="_blank">Get API Key</a>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ <p class="text-center mt-4 lead-text animate__animated animate__flash">More offers coming soon—stay tuned! 🚀</p>
570
+ </div>
571
+ </section>
572
+
573
+ <!-- Footer with Dynamic Glow -->
574
  <footer class="bg-ghost-black text-white text-center py-3">
575
+ <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>
576
+ <p class="animate__animated animate__fadeIn animate__delay-1s">Created 07:29 PM CDT, June 11, 2025 😈⚡️</p>
577
  </footer>
578
 
579
+ <!-- Modals with Expanded Knowledge -->
580
  <div class="modal fade" id="teacacheModal" tabindex="-1" aria-labelledby="teacacheModalLabel" aria-hidden="true">
581
+ <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>
582
  </div>
583
  <div class="modal fade" id="contextModal" tabindex="-1" aria-labelledby="contextModalLabel" aria-hidden="true">
584
+ <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>
585
  </div>
586
  <div class="modal fade" id="batchingModal" tabindex="-1" aria-labelledby="batchingModalLabel" aria-hidden="true">
587
+ <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>
588
  </div>
589
  <div class="modal fade" id="sageModal" tabindex="-1" aria-labelledby="sageModalLabel" aria-hidden="true">
590
+ <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>
591
  </div>
592
  <div class="modal fade" id="tcmallocModal" tabindex="-1" aria-labelledby="tcmallocModalLabel" aria-hidden="true">
593
+ <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>
594
  </div>
595
  <div class="modal fade" id="cudaModal" tabindex="-1" aria-labelledby="cudaModalLabel" aria-hidden="true">
596
+ <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>
597
  </div>
598
  <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
599
+ <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>
600
  </div>
601
  <div class="modal fade" id="cacheModal" tabindex="-1" aria-labelledby="cacheModalLabel" aria-hidden="true">
602
+ <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>
603
  </div>
604
  <div class="modal fade" id="powerModal" tabindex="-1" aria-labelledby="powerModalLabel" aria-hidden="true">
605
+ <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>
606
  </div>
607
  <div class="modal fade" id="threadModal" tabindex="-1" aria-labelledby="threadModalLabel" aria-hidden="true">
608
+ <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>
609
  </div>
610
 
611
  <!-- Bootstrap JS -->
612
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
613
  <!-- Custom JS -->
614
  <script src="script.js"></script>
615
+ <style>
616
+ @keyframes pulse {
617
+ 0% { transform: scale(1); }
618
+ 50% { transform: scale(1.05); }
619
+ 100% { transform: scale(1); }
620
+ }
621
+ </style>
622
  </body>
623
  </html>