Hugging Face's logo

Spaces:
ghostai1
/
GhostPack
Running

App Files Community
1
ghostai1 commited on
Commit
5da5273
·
verified ·
1 Parent(s): cd8f2eb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +151 -496
index.html CHANGED
@@ -15,14 +15,14 @@
15
  </head>
16
  <body>
17
  <!-- Navbar -->
18
- <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
19
- <div class="container">
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>
24
- <div class="collapse navbar-collapse" id="navbarNav">
25
- <ul class="navbar-nav ms-auto">
26
  <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
27
  <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
28
  <li class="nav-item"><a class="nav-link" href="#optimizations">Math Sorcery</a></li>
@@ -31,11 +31,11 @@
31
  <li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
32
  <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
33
  <li class="nav-item"><a class="nav-link" href="#community">Community</a></li>
34
- <li class="nav-item"><a class="nav-link" href="#technical">Technical Deep Dive</a></li>
35
  <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
36
  <li class="nav-item"><a class="nav-link" href="#tutorials">Tutorials</a></li>
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">Last Files</a></li>
39
  <li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li>
40
  </ul>
41
  </div>
@@ -44,10 +44,10 @@
44
 
45
  <!-- Hero Section -->
46
  <section id="home" class="hero-section text-center text-white">
47
- <div class="container">
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 Haunts Laptops with 8GB RAM! 😈🚀</p>
50
- <p class="animate__animated animate__fadeIn animate__delay-2s">Unleash photorealistic videos with ghostai1’s math wizardry on GPUs ≥6GB VRAM.</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">
53
  <p class="mt-2">Preview: ghostgradio.py in action</p>
@@ -63,53 +63,53 @@
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">Discover the power of GhostPack’s cutting-edge video generation technology.</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" data-bs-toggle="tooltip" title="Matches Veo 3’s photorealism">
70
- <div class="card-body">
71
  <h3 class="card-title">📹 Veo 3-Level AI</h3>
72
- <p class="card-text">Hyper-realistic videos via next-frame prediction, optimized for 8GB RAM laptops with seamless frame transitions.</p>
73
  </div>
74
  </div>
75
  </div>
76
  <div class="col">
77
- <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Blazing fast with teacache">
78
- <div class="card-body">
79
  <h3 class="card-title">⚡️ Phantom Speed</h3>
80
- <p class="card-text">Teacache reduces generation time by ~40% (~12–15s/frame on RTX 3060) for rapid video rendering.</p>
81
  </div>
82
  </div>
83
  </div>
84
  <div class="col">
85
- <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Optimized for budget hardware">
86
- <div class="card-body">
87
  <h3 class="card-title">🛠️ Laptop Domination</h3>
88
- <p class="card-text">13B models run efficiently on GPUs with ≥6GB VRAM, tailored for RTX 3060 and budget systems.</p>
89
  </div>
90
  </div>
91
  </div>
92
  <div class="col">
93
- <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Advanced customization">
94
- <div class="card-body">
95
- <h3 class="card-title">🎛️ Customizable Workflows</h3>
96
- <p class="card-text">Flexible settings for 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" data-bs-toggle="tooltip" title="Real-time feedback">
102
- <div class="card-body">
103
  <h3 class="card-title">👁️ Live Preview</h3>
104
- <p class="card-text">Real-time frame previews in ghostgradio.py for instant creative adjustments.</p>
105
  </div>
106
  </div>
107
  </div>
108
  <div class="col">
109
- <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Community-driven growth">
110
- <div class="card-body">
111
- <h3 class="card-title">🤝 Open Source Power</h3>
112
- <p class="card-text">Leverage community contributions and open-source code for continuous improvement.</p>
113
  </div>
114
  </div>
115
  </div>
@@ -121,267 +121,52 @@
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">GhostPack’s SDK is a spectral masterpiece, optimized with ghostai1’s revolutionary math to dominate low-resource systems.</p>
125
-
126
- <!-- Tabs for Optimization Categories -->
127
  <ul class="nav nav-tabs justify-content-center mb-4" id="optTab" role="tablist">
128
- <li class="nav-item" role="presentation">
129
- <button class="nav-link active" id="speed-tab" data-bs-toggle="tab" data-bs-target="#speed" type="button" role="tab" aria-controls="speed" aria-selected="true">⚡️ Speed</button>
130
- </li>
131
- <li class="nav-item" role="presentation">
132
- <button class="nav-link" id="memory-tab" data-bs-toggle="tab" data-bs-target="#memory" type="button" role="tab" aria-controls="memory" aria-selected="false">🔮 Memory</button>
133
- </li>
134
- <li class="nav-item" role="presentation">
135
- <button class="nav-link" id="compute-tab" data-bs-toggle="tab" data-bs-target="#compute" type="button" role="tab" aria-controls="compute" aria-selected="false">🧬 Compute</button>
136
- </li>
137
- <li class="nav-item" role="presentation">
138
- <button class="nav-link" id="efficiency-tab" data-bs-toggle="tab" data-bs-target="#efficiency" type="button" role="tab" aria-controls="efficiency" aria-selected="false">🌌 Efficiency</button>
139
- </li>
140
  </ul>
141
-
142
  <div class="tab-content" id="optTabContent">
143
- <!-- Speed Tab -->
144
- <div class="tab-pane fade show active" id="speed" role="tabpanel" aria-labelledby="speed-tab">
145
- <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
146
- <div class="col">
147
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#teacacheModal">
148
- <div class="card-body text-center">
149
- <h3 class="card-title">🔮 Teacache</h3>
150
- <p class="lead-text">Caches diffusion states, slashing ~40% off frame time.</p>
151
- <p class="lead-text"><strong>Boost:</strong> 40% | <strong>Stat:</strong> ~12s/frame on RTX 3060 | <strong>Math:</strong> \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \)</p>
152
- </div>
153
- </div>
154
- </div>
155
- <div class="col">
156
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#sageModal">
157
- <div class="card-body text-center">
158
- <h3 class="card-title">🧙‍♂️ Sage-Attention</h3>
159
- <p class="lead-text">Streamlines attention layers for ~5–10% speed-up.</p>
160
- <p class="lead-text"><strong>Boost:</strong> 5–10% | <strong>Stat:</strong> ~1–2s/frame saved | <strong>Math:</strong> \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \)</p>
161
- </div>
162
- </div>
163
- </div>
164
- <div class="col">
165
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#cudaModal">
166
- <div class="card-body text-center">
167
- <h3 class="card-title">⚡ CUDA Tweaks</h3>
168
- <p class="lead-text">Optimized allocation for ~10–15% latency cut.</p>
169
- <p class="lead-text"><strong>Boost:</strong> 10–15% | <strong>Stat:</strong> ~10–15% faster | <strong>Math:</strong> \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \)</p>
170
- </div>
171
- </div>
172
- </div>
173
- <div class="col">
174
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#dynamicModal">
175
- <div class="card-body text-center">
176
- <h3 class="card-title">🚀 Dynamic Scheduling</h3>
177
- <p class="lead-text">Adapts processing queues for ~15–20% faster task completion.</p>
178
- <p class="lead-text"><strong>Boost:</strong> 15–20% | <strong>Stat:</strong> ~2–3s/task saved | <strong>Math:</strong> \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \)</p>
179
- </div>
180
- </div>
181
- </div>
182
  </div>
183
  </div>
184
-
185
- <!-- Memory Tab -->
186
- <div class="tab-pane fade" id="memory" role="tabpanel" aria-labelledby="memory-tab">
187
- <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
188
- <div class="col">
189
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#contextModal">
190
- <div class="card-body text-center">
191
- <h3 class="card-title">🧬 Context Packing</h3>
192
- <p class="lead-text">Compresses contexts, saving ~50% VRAM.</p>
193
- <p class="lead-text"><strong>Boost:</strong> 50% | <strong>Stat:</strong> ~2–3GB saved | <strong>Math:</strong> \( M_{\text{VRAM}} \propto O(1) \)</p>
194
- </div>
195
- </div>
196
- </div>
197
- <div class="col">
198
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#tcmallocModal">
199
- <div class="card-body text-center">
200
- <h3 class="card-title">💾 tcmalloc</h3>
201
- <p class="lead-text">Cuts memory overhead by ~5–20%.</p>
202
- <p class="lead-text"><strong>Boost:</strong> 5–20% | <strong>Stat:</strong> ~15% CPU relief | <strong>Math:</strong> \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \)</p>
203
- </div>
204
- </div>
205
- </div>
206
- <div class="col">
207
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#cacheModal">
208
- <div class="card-body text-center">
209
- <h3 class="card-title">📦 Memory Cache</h3>
210
- <p class="lead-text">Preloads data, reducing memory swaps by ~25%.</p>
211
- <p class="lead-text"><strong>Boost:</strong> 25% | <strong>Stat:</strong> ~1–2GB less swaps | <strong>Math:</strong> \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \)</p>
212
- </div>
213
- </div>
214
- </div>
215
  </div>
216
  </div>
217
-
218
- <!-- Compute Tab -->
219
- <div class="tab-pane fade" id="compute" role="tabpanel" aria-labelledby="compute-tab">
220
- <div class="row row-cols-1 row-cols-md-1 g-4 mb-4">
221
- <div class="col">
222
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#batchingModal">
223
- <div class="card-body text-center">
224
- <h3 class="card-title">⚡ Dynamic Batching</h3>
225
- <p class="lead-text">Adapts batches for ~30–50% throughput gain.</p>
226
- <p class="lead-text"><strong>Boost:</strong> 30–50% | <strong>Stat:</strong> ~1.5x FPS | <strong>Math:</strong> \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \)</p>
227
- </div>
228
- </div>
229
- </div>
230
  </div>
231
  </div>
232
-
233
- <!-- Efficiency Tab -->
234
- <div class="tab-pane fade" id="efficiency" role="tabpanel" aria-labelledby="efficiency-tab">
235
- <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
236
- <div class="col">
237
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#powerModal">
238
- <div class="card-body text-center">
239
- <h3 class="card-title">🔋 Power Optimization</h3>
240
- <p class="lead-text">Reduces power draw by ~20–30% during idle states.</p>
241
- <p class="lead-text"><strong>Boost:</strong> 20–30% | <strong>Stat:</strong> ~10W saved | <strong>Math:</strong> \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \)</p>
242
- </div>
243
- </div>
244
- </div>
245
- <div class="col">
246
- <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#threadModal">
247
- <div class="card-body text-center">
248
- <h3 class="card-title">🧵 Thread Tuning</h3>
249
- <p class="lead-text">Optimizes thread allocation for ~10–15% CPU efficiency.</p>
250
- <p class="lead-text"><strong>Boost:</strong> 10–15% | <strong>Stat:</strong> ~5–10% less overhead | <strong>Math:</strong> \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \)</p>
251
- </div>
252
- </div>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <!-- Optimization Breakdown -->
259
- <div class="row mt-5">
260
- <div class="col-md-12">
261
- <h3 class="mb-4 text-white">Optimization Breakdown</h3>
262
  <div class="row row-cols-1 row-cols-md-2 g-4">
263
- <div class="col">
264
- <div class="card bg-ghost-card">
265
- <div class="card-body text-center">
266
- <h4 class="card-title">🔮 Compressed Context Packing</h4>
267
- <p class="lead-text">Collapses frame contexts into a fixed-size matrix, slashing VRAM by ~50% (\( M_{\text{VRAM}} \propto O(1) \)), enabling 60s videos on 6GB VRAM GPUs like GTX 1650.</p>
268
- </div>
269
- </div>
270
- </div>
271
- <div class="col">
272
- <div class="card bg-ghost-card">
273
- <div class="card-body text-center">
274
- <h4 class="card-title">🧬 Dynamic Batching</h4>
275
- <p class="lead-text">Adapts batches (2–4 frames), boosting throughput by ~30–50% (\( \text{Throughput} \propto B \)), perfect for RTX 3050 with enhanced frame processing.</p>
276
- </div>
277
- </div>
278
- </div>
279
- <div class="col">
280
- <div class="card bg-ghost-card">
281
- <div class="card-body text-center">
282
- <h4 class="card-title">⚡️ Teacache Efficiency</h4>
283
- <p class="lead-text">Caches diffusion states, cutting ~40% off compute time (\( T_{\text{total}} \approx 0.6T_{\text{base}} \)), delivering ~10–15s/frame on RTX 3060.</p>
284
- </div>
285
- </div>
286
- </div>
287
- <div class="col">
288
- <div class="card bg-ghost-card">
289
- <div class="card-body text-center">
290
- <h4 class="card-title">🧙‍♂️ Sage-Attention</h4>
291
- <p class="lead-text">Streamlines attention layers, saving ~5–10% time (\( T_{\text{attn}} \approx 0.9T_{\text{base_attn}} \)), boosting low-VRAM performance.</p>
292
- </div>
293
- </div>
294
- </div>
295
- <div class="col">
296
- <div class="card bg-ghost-card">
297
- <div class="card-body text-center">
298
- <h4 class="card-title">💾 tcmalloc</h4>
299
- <p class="lead-text">Reduces memory overhead by ~5–20% (\( O_{\text{mem}} \approx 0.8O_{\text{glibc}} \)), easing CPU load by ~15% for smoother operation.</p>
300
- </div>
301
- </div>
302
- </div>
303
- <div class="col">
304
- <div class="card bg-ghost-card">
305
- <div class="card-body text-center">
306
- <h4 class="card-title">⚡ CUDA Tweaks</h4>
307
- <p class="lead-text">Cuts latency by ~10–15% (\( L_{\text{CUDA}} \approx 0.85L_{\text{base}} \)) with optimized memory allocation, maximizing GPU efficiency.</p>
308
- </div>
309
- </div>
310
- </div>
311
- <div class="col">
312
- <div class="card bg-ghost-card">
313
- <div class="card-body text-center">
314
- <h4 class="card-title">🚀 Dynamic Scheduling</h4>
315
- <p class="lead-text">Adapts processing queues, reducing task completion time by ~15–20% (\( T_{\text{sched}} \approx 0.8T_{\text{base_sched}} \)), enhancing workflow speed.</p>
316
- </div>
317
- </div>
318
- </div>
319
- <div class="col">
320
- <div class="card bg-ghost-card">
321
- <div class="card-body text-center">
322
- <h4 class="card-title">📦 Memory Cache</h4>
323
- <p class="lead-text">Preloads data, cutting memory swaps by ~25% (\( M_{\text{swap}} \approx 0.75M_{\text{base_swap}} \)), improving data access times.</p>
324
- </div>
325
- </div>
326
- </div>
327
- <div class="col">
328
- <div class="card bg-ghost-card">
329
- <div class="card-body text-center">
330
- <h4 class="card-title">🔋 Power Optimization</h4>
331
- <p class="lead-text">Lowers power draw by ~20–30% (\( P_{\text{idle}} \approx 0.7P_{\text{base_idle}} \)), ideal for energy-efficient setups.</p>
332
- </div>
333
- </div>
334
- </div>
335
- <div class="col">
336
- <div class="card bg-ghost-card">
337
- <div class="card-body text-center">
338
- <h4 class="card-title">🧵 Thread Tuning</h4>
339
- <p class="lead-text">Optimizes thread allocation, boosting CPU efficiency by ~10–15% (\( C_{\text{thread}} \approx 0.85C_{\text{base_thread}} \)), reducing overhead.</p>
340
- </div>
341
- </div>
342
- </div>
343
  </div>
 
344
  </div>
345
-
346
- <!-- VRAM Requirements Table -->
347
  <div class="row mt-5">
348
  <div class="col-md-12">
349
  <h3 class="text-center text-white mb-3">VRAM Requirements 🖥️</h3>
350
  <div class="table-responsive">
351
  <table class="table table-dark table-bordered">
352
- <thead>
353
- <tr>
354
- <th>GPU</th>
355
- <th>VRAM</th>
356
- <th>Performance</th>
357
- <th>Notes</th>
358
- </tr>
359
- </thead>
360
  <tbody>
361
- <tr>
362
- <td>GTX 1650</td>
363
- <td>6GB</td>
364
- <td>~18–25s/frame</td>
365
- <td>Minimum, teacache recommended.</td>
366
- </tr>
367
- <tr>
368
- <td>RTX 3050</td>
369
- <td>8GB</td>
370
- <td>~15–20s/frame</td>
371
- <td>Balanced, batch size 2.</td>
372
- </tr>
373
- <tr>
374
- <td>RTX 3060</td>
375
- <td>12GB</td>
376
- <td>~10–15s/frame</td>
377
- <td>Optimal, batch size 2–4.</td>
378
- </tr>
379
- <tr>
380
- <td>RTX 4090</td>
381
- <td>24GB</td>
382
- <td>~1.5–2.5s/frame</td>
383
- <td>High-end, max batch size.</td>
384
- </tr>
385
  </tbody>
386
  </table>
387
  </div>
@@ -394,10 +179,10 @@
394
  <section id="demo" class="py-5 bg-dark text-white">
395
  <div class="container">
396
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🎥 Demo Video Showcase</h2>
397
- <p class="lead lead-text mb-4">Witness GhostPack’s spectral video generation in action!</p>
398
  <div class="row">
399
  <div class="col-md-8 mx-auto">
400
- <div class="card bg-ghost-card">
401
  <div class="card-body text-center">
402
  <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/k8pgUlg4OvdUZpbMNTcp5.gif" alt="GhostPack Demo GIF" class="img-fluid rounded" style="max-height: 400px;">
403
  <p class="mt-3">Sample output from ghostgradio.py, showcasing a neon-lit spectral figure.</p>
@@ -415,29 +200,29 @@
415
  <section id="future" class="py-5 bg-light text-dark">
416
  <div class="container">
417
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌌 Future Spectral Phantoms</h2>
418
- <p class="lead light-lead-text mb-4">GhostPack is brewing epic upgrades to push the boundaries of AI video generation:</p>
419
  <div class="row row-cols-1 row-cols-md-3 g-4">
420
  <div class="col">
421
  <div class="card bg-ghost-light h-100">
422
- <div class="card-body">
423
  <h3 class="card-title">🗣️ Voice Generation</h3>
424
- <p class="light-lead-text">AI-driven voice synthesis with customizable tones, integrating into ghostgradio.py for narrated videos.</p>
425
  </div>
426
  </div>
427
  </div>
428
  <div class="col">
429
  <div class="card bg-ghost-light h-100">
430
- <div class="card-body">
431
  <h3 class="card-title">🖼️ AI Images</h3>
432
- <p class="light-lead-text">Generate high-quality starting frames with AI-crafted visuals for enhanced video pipelines.</p>
433
  </div>
434
  </div>
435
  </div>
436
  <div class="col">
437
  <div class="card bg-ghost-light h-100">
438
- <div class="card-body">
439
  <h3 class="card-title">🎮 VR Integration</h3>
440
- <p class="light-lead-text">Future support for virtual reality video rendering, expanding into immersive experiences.</p>
441
  </div>
442
  </div>
443
  </div>
@@ -449,40 +234,40 @@
449
  <section id="installation" class="py-5 bg-dark text-white">
450
  <div class="container">
451
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🛠️ Unleash GhostPack</h2>
452
- <p class="lead lead-text mb-4">Summon from GitHub. Requires >30GB disk space and compatible hardware.</p>
453
  <div class="row row-cols-1 row-cols-md-3 g-4">
454
  <div class="col">
455
  <div class="card bg-ghost-card h-100">
456
- <div class="card-body">
457
  <h3 class="card-title">🐧 Ubuntu</h3>
458
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
459
  cd GhostPack
460
  chmod +x install_ubuntu.sh
461
  ./install_ubuntu.sh</code></pre>
462
- <p>Requires NVIDIA GPU, 8GB RAM, Python 3.10, CUDA 12.6.</p>
463
  </div>
464
  </div>
465
  </div>
466
  <div class="col">
467
  <div class="card bg-ghost-card h-100">
468
- <div class="card-body">
469
  <h3 class="card-title">🪟 Windows</h3>
470
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
471
  cd GhostPack
472
  install.bat</code></pre>
473
- <p>Auto-downloads models (>30GB), requires NVIDIA drivers.</p>
474
  </div>
475
  </div>
476
  </div>
477
  <div class="col">
478
  <div class="card bg-ghost-card h-100">
479
- <div class="card-body">
480
  <h3 class="card-title">🍎 macOS</h3>
481
  <pre><code class="code-block">git clone https://github.com/ghostai1/GhostPack
482
  cd GhostPack
483
  chmod +x install_macos.sh
484
  ./install_macos.sh</code></pre>
485
- <p>M1/M2 support (slower), requires Metal compatibility.</p>
486
  </div>
487
  </div>
488
  </div>
@@ -497,44 +282,48 @@ chmod +x install_macos.sh
497
  <section id="usage" class="py-5 bg-dark text-white">
498
  <div class="container">
499
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📹 Weave Ghostly Videos</h2>
500
- <p class="lead lead-text mb-4">Step-by-step instructions to harness GhostPack’s video sorcery.</p>
501
- <ol>
502
- <li><strong>Launch Phantom GUI</strong>:
503
  <div class="card bg-ghost-card">
504
  <div class="card-body">
 
505
  <pre><code class="code-block">source ~/ghostpack_venv/venv/bin/activate
506
  cd ~/ghostpack_venv
507
  python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
508
  </div>
509
  </div>
510
- </li>
511
- <li><strong>Craft Spells</strong>:
512
  <div class="card bg-ghost-card">
513
- <div class="card-body lead-text">
514
- <ul>
 
515
  <li>Upload an image or video frame.</li>
516
  <li>Prompt: “A spectral figure glides through a neon-lit city.”</li>
517
  <li>Enable teacache (⚡️ speed) and adjust batch size.</li>
518
- <li>Set 15fps, 5s video (~75 frames) or customize duration.</li>
519
  </ul>
520
  </div>
521
  </div>
522
- </li>
523
- <li><strong>Summon Spirits</strong>:
524
  <div class="card bg-ghost-card">
525
- <div class="card-body lead-text">
526
- <p>Monitor with <code>nvidia-smi</code> (~80–100% GPU usage).</p>
 
527
  </div>
528
  </div>
529
- </li>
530
- <li><strong>Export Results</strong>:
531
  <div class="card bg-ghost-card">
532
- <div class="card-body lead-text">
533
- <p>Save MP4 files with adjustable compression (CRF 0–100).</p>
 
534
  </div>
535
  </div>
536
- </li>
537
- </ol>
538
  </div>
539
  </section>
540
 
@@ -542,22 +331,22 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
542
  <section id="community" class="py-5 bg-light text-dark">
543
  <div class="container">
544
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🤝 Community Hub</h2>
545
- <p class="lead light-lead-text mb-4">Join the GhostPack community to share, learn, and collaborate!</p>
546
  <div class="row row-cols-1 row-cols-md-2 g-4">
547
  <div class="col">
548
  <div class="card bg-ghost-light h-100">
549
- <div class="card-body">
550
  <h3 class="card-title">💬 Discord Server</h3>
551
- <p class="light-lead-text">Join our Discord for real-time discussions, support, and updates.</p>
552
  <a href="https://discord.gg/ghostpack" class="btn btn-ghost" target="_blank">Join Now</a>
553
  </div>
554
  </div>
555
  </div>
556
  <div class="col">
557
  <div class="card bg-ghost-light h-100">
558
- <div class="card-body">
559
  <h3 class="card-title">🐦 X Thread</h3>
560
- <p class="light-lead-text">Follow our X thread for news, tutorials, and community showcases.</p>
561
  <a href="https://x.com/search?q=ghostpack" class="btn btn-ghost" target="_blank">Visit X</a>
562
  </div>
563
  </div>
@@ -573,21 +362,21 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
573
  <section id="technical" class="py-5 bg-dark text-white">
574
  <div class="container">
575
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🔍 Technical Deep Dive</h2>
576
- <p class="lead lead-text mb-4">Explore the technical underpinnings of GhostPack’s video generation engine.</p>
577
  <div class="row row-cols-1 row-cols-md-2 g-4">
578
  <div class="col">
579
  <div class="card bg-ghost-card h-100">
580
- <div class="card-body">
581
  <h3 class="card-title">🛠️ Architecture</h3>
582
- <p class="lead-text">Built on HunyuanVideo and FramePackI2V_HY, leveraging LlamaModel and CLIPTextModel for advanced embeddings.</p>
583
  </div>
584
  </div>
585
  </div>
586
  <div class="col">
587
  <div class="card bg-ghost-card h-100">
588
- <div class="card-body">
589
  <h3 class="card-title">📊 Pipeline</h3>
590
- <p class="lead-text">Utilizes k-diffusion sampling with unipc for high-quality frame generation, optimized for real-time preview.</p>
591
  </div>
592
  </div>
593
  </div>
@@ -604,40 +393,16 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
604
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">❓ Frequently Asked Questions</h2>
605
  <div class="accordion" id="faqAccordion">
606
  <div class="accordion-item bg-ghost-light">
607
- <h2 class="accordion-header">
608
- <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
609
- What hardware do I need?
610
- </button>
611
- </h2>
612
- <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
613
- <div class="accordion-body light-lead-text">
614
- <p>Minimum: 6GB VRAM GPU (e.g., GTX 1650), 8GB RAM. Optimal: 12GB VRAM (e.g., RTX 3060) for full features.</p>
615
- </div>
616
- </div>
617
  </div>
618
  <div class="accordion-item bg-ghost-light">
619
- <h2 class="accordion-header">
620
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
621
- How do I install GhostPack?
622
- </button>
623
- </h2>
624
- <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
625
- <div class="accordion-body light-lead-text">
626
- <p>Clone the repo and run the appropriate install script (e.g., <code>./install_ubuntu.sh</code>) as detailed in the Installation section.</p>
627
- </div>
628
- </div>
629
  </div>
630
  <div class="accordion-item bg-ghost-light">
631
- <h2 class="accordion-header">
632
- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
633
- Can I contribute?
634
- </button>
635
- </h2>
636
- <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
637
- <div class="accordion-body light-lead-text">
638
- <p>Yes! Check the Contributing Guidelines section for details on how to get involved.</p>
639
- </div>
640
- </div>
641
  </div>
642
  </div>
643
  </div>
@@ -647,38 +412,38 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
647
  <section id="tutorials" class="py-5 bg-dark text-white">
648
  <div class="container">
649
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📚 Tutorials</h2>
650
- <p class="lead lead-text mb-4">Step-by-step guides to master GhostPack’s video sorcery.</p>
651
  <div class="row row-cols-1 row-cols-md-2 g-4">
652
  <div class="col">
653
  <div class="card bg-ghost-card h-100">
654
- <div class="card-body">
655
  <h3 class="card-title">🎬 Getting Started</h3>
656
- <p class="lead-text">Learn to set up GhostPack and generate your first video with ease.</p>
657
- <a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost" target="_blank">View Tutorial</a>
658
  </div>
659
  </div>
660
  </div>
661
  <div class="col">
662
  <div class="card bg-ghost-card h-100">
663
- <div class="card-body">
664
  <h3 class="card-title">⚙️ Advanced Configuration</h3>
665
- <p class="lead-text">Dive into customizing prompts, batch sizes, and advanced settings for pro-level control.</p>
666
- <a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost" target="_blank">View Tutorial</a>
667
  </div>
668
  </div>
669
  </div>
670
  <div class="col">
671
  <div class="card bg-ghost-card h-100">
672
- <div class="card-body">
673
- <h3 class="card-title">🎥 Video Export Tips</h3>
674
- <p class="lead-text">Master exporting MP4 files with optimal compression (CRF settings) for quality and size.</p>
675
- <a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost" target="_blank">View Tutorial</a>
676
  </div>
677
  </div>
678
  </div>
679
  </div>
680
  <div class="text-center mt-4">
681
- <a href="https://github.com/ghostai1/GhostPack/wiki/Tutorials" class="btn btn-outline-ghost" target="_blank">More Tutorials 📖</a>
682
  </div>
683
  </div>
684
  </section>
@@ -687,19 +452,19 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
687
  <section id="contribute" class="py-5 bg-light text-dark">
688
  <div class="container">
689
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌱 Contributing Guidelines</h2>
690
- <p class="lead light-lead-text mb-4">Help shape GhostPack’s future with your skills and ideas!</p>
691
  <div class="row">
692
  <div class="col-md-12">
693
  <div class="card bg-ghost-light">
694
- <div class="card-body">
695
  <h3 class="card-title">🎯 How to Contribute</h3>
696
  <ul class="light-lead-text">
697
- <li>Fork the repository and create a new branch.</li>
698
- <li>Submit pull requests with detailed descriptions.</li>
699
- <li>Follow the coding standards in the wiki.</li>
700
- <li>Test your changes with ghostgradio.py.</li>
701
  </ul>
702
- <a href="https://github.com/ghostai1/GhostPack/blob/main/CONTRIBUTING.md" class="btn btn-ghost" target="_blank">View Guidelines</a>
703
  </div>
704
  </div>
705
  </div>
@@ -711,7 +476,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
711
  <section id="screenshots" class="py-5 bg-dark text-white">
712
  <div class="container">
713
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📸 Screenshots</h2>
714
- <p class="lead lead-text mb-4">Check out GhostPack’s spectral magic in action!</p>
715
  <div class="row row-cols-1 row-cols-md-3 g-4">
716
  <div class="col">
717
  <div class="card bg-ghost-card h-100">
@@ -738,7 +503,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
738
  </div>
739
  </div>
740
  </div>
741
- <p class="text-center mt-4 lead-text">Add more screenshots to showcase your work!</p>
742
  </div>
743
  </section>
744
 
@@ -746,14 +511,14 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
746
  <section id="files" class="py-5 bg-light text-dark">
747
  <div class="container">
748
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📂 Latest Conjurations</h2>
749
- <p class="lead light-lead-text mb-4">Explore the latest files and logs from the GhostPack repo.</p>
750
  <div class="row row-cols-1 row-cols-md-2 g-4">
751
  <div class="col">
752
  <div class="card bg-ghost-light h-100">
753
  <div class="card-body text-center">
754
  <h3 class="card-title">📜 Latest File</h3>
755
- <p class="light-lead-text">Check out <code>ghostgradio.py</code>, the heart of GhostPack’s GUI.</p>
756
- <a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost" target="_blank">View File</a>
757
  </div>
758
  </div>
759
  </div>
@@ -761,8 +526,8 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
761
  <div class="card bg-ghost-light h-100">
762
  <div class="card-body text-center">
763
  <h3 class="card-title">📋 Logs</h3>
764
- <p class="light-lead-text">Dive into render logs for debugging and insights.</p>
765
- <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">View Logs</a>
766
  </div>
767
  </div>
768
  </div>
@@ -775,151 +540,41 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
775
  </section>
776
 
777
  <!-- Footer -->
778
- <footer class="bg-ghost-black text-white text-center py-4">
779
- <p>👻 GhostPack by ghostai1 | <a href="https://github.com/ghostai1/GhostPack" target="_blank">GitHub</a> | <a href="https://huggingface.co/spaces/ghostai1/GhostPack" target="_blank">Hugging Face</a> | Apache-2.0 License</p>
780
- <p>Forged in 😈 hellfire with ⚡️ to haunt video generation forever!</p>
781
  </footer>
782
 
783
  <!-- Modals -->
784
  <div class="modal fade" id="teacacheModal" tabindex="-1" aria-labelledby="teacacheModalLabel" aria-hidden="true">
785
- <div class="modal-dialog modal-lg">
786
- <div class="modal-content bg-ghost-card text-white">
787
- <div class="modal-header">
788
- <h5 class="modal-title" id="teacacheModalLabel">🔮 Teacache</h5>
789
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
790
- </div>
791
- <div class="modal-body">
792
- <p>Teacache caches intermediate diffusion states, reducing compute overhead by ~30–40% and cutting frame generation time by ~40% (~12s/frame on RTX 3060).</p>
793
- <p><strong>Math</strong>: \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \), where \( T_{\text{base}} \) is the baseline frame time without caching.</p>
794
- </div>
795
- </div>
796
- </div>
797
  </div>
798
  <div class="modal fade" id="contextModal" tabindex="-1" aria-labelledby="contextModalLabel" aria-hidden="true">
799
- <div class="modal-dialog modal-lg">
800
- <div class="modal-content bg-ghost-card text-white">
801
- <div class="modal-header">
802
- <h5 class="modal-title" id="contextModalLabel">🧬 Context Packing</h5>
803
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
804
- </div>
805
- <div class="modal-body">
806
- <p>Compresses frame contexts into a fixed-size matrix, reducing VRAM usage by ~50% (~2–3GB for a 60-second video), making it viable for low-memory GPUs.</p>
807
- <p><strong>Math</strong>: \( M_{\text{VRAM}} \propto O(1) \) instead of \( O(n) \), ensuring constant memory usage regardless of video length.</p>
808
- </div>
809
- </div>
810
- </div>
811
  </div>
812
  <div class="modal fade" id="batchingModal" tabindex="-1" aria-labelledby="batchingModalLabel" aria-hidden="true">
813
- <div class="modal-dialog modal-lg">
814
- <div class="modal-content bg-ghost-card text-white">
815
- <div class="modal-header">
816
- <h5 class="modal-title" id="batchingModalLabel">⚡ Dynamic Batching</h5>
817
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
818
- </div>
819
- <div class="modal-body">
820
- <p>Adapts batch sizes (2–4 frames) dynamically, increasing throughput by ~30–50% and achieving ~1.5x FPS, optimized for varying GPU loads.</p>
821
- <p><strong>Math</strong>: \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \), where \( B \) is the batch size (2–4).</p>
822
- </div>
823
- </div>
824
- </div>
825
  </div>
826
  <div class="modal fade" id="sageModal" tabindex="-1" aria-labelledby="sageModalLabel" aria-hidden="true">
827
- <div class="modal-dialog modal-lg">
828
- <div class="modal-content bg-ghost-card text-white">
829
- <div class="modal-header">
830
- <h5 class="modal-title" id="sageModalLabel">🧙‍♂️ Sage-Attention</h5>
831
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
832
- </div>
833
- <div class="modal-body">
834
- <p>Optimizes attention mechanisms in the transformer model, saving ~5–10% of processing time (~1–2s per frame), enhancing performance on low-VRAM systems.</p>
835
- <p><strong>Math</strong>: \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \), reducing computational complexity.</p>
836
- </div>
837
- </div>
838
- </div>
839
  </div>
840
  <div class="modal fade" id="tcmallocModal" tabindex="-1" aria-labelledby="tcmallocModalLabel" aria-hidden="true">
841
- <div class="modal-dialog modal-lg">
842
- <div class="modal-content bg-ghost-card text-white">
843
- <div class="modal-header">
844
- <h5 class="modal-title" id="tcmallocModalLabel">💾 tcmalloc</h5>
845
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
846
- </div>
847
- <div class="modal-body">
848
- <p>Replaces standard memory allocation with tcmalloc, reducing overhead by ~5–20% and easing CPU load by ~15% for smoother multitasking.</p>
849
- <p><strong>Math</strong>: \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \), optimizing memory management.</p>
850
- </div>
851
- </div>
852
- </div>
853
  </div>
854
  <div class="modal fade" id="cudaModal" tabindex="-1" aria-labelledby="cudaModalLabel" aria-hidden="true">
855
- <div class="modal-dialog modal-lg">
856
- <div class="modal-content bg-ghost-card text-white">
857
- <div class="modal-header">
858
- <h5 class="modal-title" id="cudaModalLabel">⚡ CUDA Tweaks</h5>
859
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
860
- </div>
861
- <div class="modal-body">
862
- <p>Optimizes CUDA memory allocation, reducing latency by ~10–15% and enhancing GPU efficiency on RTX 3060 and similar cards.</p>
863
- <p><strong>Math</strong>: \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \), improving overall performance.</p>
864
- </div>
865
- </div>
866
- </div>
867
  </div>
868
  <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
869
- <div class="modal-dialog modal-lg">
870
- <div class="modal-content bg-ghost-card text-white">
871
- <div class="modal-header">
872
- <h5 class="modal-title" id="dynamicModalLabel">🚀 Dynamic Scheduling</h5>
873
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
874
- </div>
875
- <div class="modal-body">
876
- <p>Adapts processing queues dynamically, reducing task completion time by ~15–20% and improving workflow efficiency.</p>
877
- <p><strong>Math</strong>: \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \), optimizing task distribution.</p>
878
- </div>
879
- </div>
880
- </div>
881
  </div>
882
  <div class="modal fade" id="cacheModal" tabindex="-1" aria-labelledby="cacheModalLabel" aria-hidden="true">
883
- <div class="modal-dialog modal-lg">
884
- <div class="modal-content bg-ghost-card text-white">
885
- <div class="modal-header">
886
- <h5 class="modal-title" id="cacheModalLabel">📦 Memory Cache</h5>
887
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
888
- </div>
889
- <div class="modal-body">
890
- <p>Preloads data into memory cache, reducing swap operations by ~25% and speeding up data access.</p>
891
- <p><strong>Math</strong>: \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \), minimizing memory bottlenecks.</p>
892
- </div>
893
- </div>
894
- </div>
895
  </div>
896
  <div class="modal fade" id="powerModal" tabindex="-1" aria-labelledby="powerModalLabel" aria-hidden="true">
897
- <div class="modal-dialog modal-lg">
898
- <div class="modal-content bg-ghost-card text-white">
899
- <div class="modal-header">
900
- <h5 class="modal-title" id="powerModalLabel">🔋 Power Optimization</h5>
901
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
902
- </div>
903
- <div class="modal-body">
904
- <p>Reduces power consumption by ~20–30% during idle states, ideal for energy-efficient setups.</p>
905
- <p><strong>Math</strong>: \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \), lowering energy usage.</p>
906
- </div>
907
- </div>
908
- </div>
909
  </div>
910
  <div class="modal fade" id="threadModal" tabindex="-1" aria-labelledby="threadModalLabel" aria-hidden="true">
911
- <div class="modal-dialog modal-lg">
912
- <div class="modal-content bg-ghost-card text-white">
913
- <div class="modal-header">
914
- <h5 class="modal-title" id="threadModalLabel">🧵 Thread Tuning</h5>
915
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
916
- </div>
917
- <div class="modal-body">
918
- <p>Optimizes thread allocation, boosting CPU efficiency by ~10–15% and reducing overhead.</p>
919
- <p><strong>Math</strong>: \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \), enhancing multi-threading performance.</p>
920
- </div>
921
- </div>
922
- </div>
923
  </div>
924
 
925
  <!-- Bootstrap JS -->
 
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>
24
+ <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
25
+ <ul class="navbar-nav">
26
  <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
27
  <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
28
  <li class="nav-item"><a class="nav-link" href="#optimizations">Math Sorcery</a></li>
 
31
  <li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
32
  <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
33
  <li class="nav-item"><a class="nav-link" href="#community">Community</a></li>
34
+ <li class="nav-item"><a class="nav-link" href="#technical">Tech Deep Dive</a></li>
35
  <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
36
  <li class="nav-item"><a class="nav-link" href="#tutorials">Tutorials</a></li>
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">Latest Files</a></li>
39
  <li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li>
40
  </ul>
41
  </div>
 
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 8GB RAM Laptops! 😈🚀</p>
50
+ <p class="animate__animated animate__fadeIn animate__delay-2s">Unleash photorealistic 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">
53
  <p class="mt-2">Preview: ghostgradio.py in action</p>
 
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 cutting-edge video generation tech.</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">Hyper-realistic videos with next-frame prediction, optimized for 8GB RAM.</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 cuts generation time by ~40% (~12s/frame on RTX 3060).</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">Runs 13B models on ≥6GB VRAM GPUs, ideal for 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">Adjust frame length, batch size, and prompts for creativity.</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.</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">Community-driven with open-source code.</p>
113
  </div>
114
  </div>
115
  </div>
 
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">Optimized with revolutionary math 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>
128
+ <li class="nav-item"><button class="nav-link" id="compute-tab" data-bs-toggle="tab" data-bs-target="#compute" type="button">🧬 Compute</button></li>
129
+ <li class="nav-item"><button class="nav-link" id="efficiency-tab" data-bs-toggle="tab" data-bs-target="#efficiency" type="button">🌌 Efficiency</button></li>
 
 
 
 
 
 
 
 
130
  </ul>
 
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">~40% faster (~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">~5–10% speed-up, \( 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">~10–15% latency cut, \( 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">~15–20% faster tasks, \( 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">~50% VRAM saved, \( 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">~5–20% memory cut, \( 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">~25% less swaps, \( 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">~30–50% throughput, \( \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">~20–30% power saved, \( 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">~10–15% CPU boost, \( 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-md-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 size</td></tr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  </tbody>
171
  </table>
172
  </div>
 
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">Witness GhostPack’s spectral video generation in action!</p>
183
  <div class="row">
184
  <div class="col-md-8 mx-auto">
185
+ <div class="card bg-ghost-card animate__animated animate__fadeIn">
186
  <div class="card-body text-center">
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;">
188
  <p class="mt-3">Sample output from ghostgradio.py, showcasing a neon-lit spectral figure.</p>
 
200
  <section id="future" class="py-5 bg-light 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">Upcoming upgrades to redefine AI video generation.</p>
204
  <div class="row row-cols-1 row-cols-md-3 g-4">
205
  <div class="col">
206
  <div class="card bg-ghost-light h-100">
207
+ <div class="card-body text-center">
208
  <h3 class="card-title">🗣️ Voice Generation</h3>
209
+ <p class="light-lead-text">AI voice synthesis for narrated videos in ghostgradio.py.</p>
210
  </div>
211
  </div>
212
  </div>
213
  <div class="col">
214
  <div class="card bg-ghost-light h-100">
215
+ <div class="card-body text-center">
216
  <h3 class="card-title">🖼️ AI Images</h3>
217
+ <p class="light-lead-text">AI-crafted starting frames for enhanced videos.</p>
218
  </div>
219
  </div>
220
  </div>
221
  <div class="col">
222
  <div class="card bg-ghost-light h-100">
223
+ <div class="card-body text-center">
224
  <h3 class="card-title">🎮 VR Integration</h3>
225
+ <p class="light-lead-text">VR video rendering for immersive experiences.</p>
226
  </div>
227
  </div>
228
  </div>
 
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">Install from GitHub, needs >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>Needs NVIDIA GPU, 8GB RAM, Python 3.10, 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, needs 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>M1/M2 support, needs Metal compatibility</p>
271
  </div>
272
  </div>
273
  </div>
 
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 use 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">
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
  </div>
295
  </div>
296
+ </div>
297
+ <div class="col">
298
  <div class="card bg-ghost-card">
299
+ <div class="card-body">
300
+ <h4>Craft Spells</h4>
301
+ <ul class="lead-text">
302
  <li>Upload an image or video frame.</li>
303
  <li>Prompt: “A spectral figure glides through a neon-lit city.”</li>
304
  <li>Enable teacache (⚡️ speed) and adjust batch size.</li>
305
+ <li>Set 15fps, 5s video (~75 frames).</li>
306
  </ul>
307
  </div>
308
  </div>
309
+ </div>
310
+ <div class="col">
311
  <div class="card bg-ghost-card">
312
+ <div class="card-body">
313
+ <h4>Summon Spirits</h4>
314
+ <p class="lead-text">Monitor with <code>nvidia-smi</code> (~80–100% GPU usage).</p>
315
  </div>
316
  </div>
317
+ </div>
318
+ <div class="col">
319
  <div class="card bg-ghost-card">
320
+ <div class="card-body">
321
+ <h4>Export Results</h4>
322
+ <p class="lead-text">Save MP4 files with adjustable compression (CRF 0–100).</p>
323
  </div>
324
  </div>
325
+ </div>
326
+ </div>
327
  </div>
328
  </section>
329
 
 
331
  <section id="community" class="py-5 bg-light text-dark">
332
  <div class="container">
333
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🤝 Community Hub</h2>
334
+ <p class="lead light-lead-text mb-4">Join to share, learn, and collaborate with GhostPack.</p>
335
  <div class="row row-cols-1 row-cols-md-2 g-4">
336
  <div class="col">
337
  <div class="card bg-ghost-light h-100">
338
+ <div class="card-body text-center">
339
  <h3 class="card-title">💬 Discord Server</h3>
340
+ <p class="light-lead-text">Real-time support and updates.</p>
341
  <a href="https://discord.gg/ghostpack" class="btn btn-ghost" target="_blank">Join Now</a>
342
  </div>
343
  </div>
344
  </div>
345
  <div class="col">
346
  <div class="card bg-ghost-light h-100">
347
+ <div class="card-body text-center">
348
  <h3 class="card-title">🐦 X Thread</h3>
349
+ <p class="light-lead-text">News, tutorials, and showcases.</p>
350
  <a href="https://x.com/search?q=ghostpack" class="btn btn-ghost" target="_blank">Visit X</a>
351
  </div>
352
  </div>
 
362
  <section id="technical" class="py-5 bg-dark text-white">
363
  <div class="container">
364
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🔍 Technical Deep Dive</h2>
365
+ <p class="lead lead-text mb-4">Dive into GhostPack’s video generation engine tech.</p>
366
  <div class="row row-cols-1 row-cols-md-2 g-4">
367
  <div class="col">
368
  <div class="card bg-ghost-card h-100">
369
+ <div class="card-body text-center">
370
  <h3 class="card-title">🛠️ Architecture</h3>
371
+ <p class="lead-text">Built on HunyuanVideo and FramePackI2V_HY with LlamaModel.</p>
372
  </div>
373
  </div>
374
  </div>
375
  <div class="col">
376
  <div class="card bg-ghost-card h-100">
377
+ <div class="card-body text-center">
378
  <h3 class="card-title">📊 Pipeline</h3>
379
+ <p class="lead-text">Uses k-diffusion with unipc for real-time frame generation.</p>
380
  </div>
381
  </div>
382
  </div>
 
393
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">❓ Frequently Asked Questions</h2>
394
  <div class="accordion" id="faqAccordion">
395
  <div class="accordion-item bg-ghost-light">
396
+ <h2 class="accordion-header"><button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">What hardware do I need?</button></h2>
397
+ <div id="faq1" class="accordion-collapse collapse show"><div class="accordion-body light-lead-text">6GB VRAM (GTX 1650), 8GB RAM minimum; 12GB VRAM (RTX 3060) optimal.</div></div>
 
 
 
 
 
 
 
 
398
  </div>
399
  <div class="accordion-item bg-ghost-light">
400
+ <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">How do I install?</button></h2>
401
+ <div id="faq2" class="accordion-collapse collapse"><div class="accordion-body light-lead-text">Clone repo and run install script (e.g., <code>./install_ubuntu.sh</code>).</div></div>
 
 
 
 
 
 
 
 
402
  </div>
403
  <div class="accordion-item bg-ghost-light">
404
+ <h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq3">Can I contribute?</button></h2>
405
+ <div id="faq3" class="accordion-collapse collapse"><div class="accordion-body light-lead-text">Yes, see Contributing Guidelines.</div></div>
 
 
 
 
 
 
 
 
406
  </div>
407
  </div>
408
  </div>
 
412
  <section id="tutorials" class="py-5 bg-dark text-white">
413
  <div class="container">
414
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📚 Tutorials</h2>
415
+ <p class="lead lead-text mb-4">Guides to master GhostPack’s video sorcery.</p>
416
  <div class="row row-cols-1 row-cols-md-2 g-4">
417
  <div class="col">
418
  <div class="card bg-ghost-card h-100">
419
+ <div class="card-body text-center">
420
  <h3 class="card-title">🎬 Getting Started</h3>
421
+ <p class="lead-text">Set up and create your first video.</p>
422
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost">View</a>
423
  </div>
424
  </div>
425
  </div>
426
  <div class="col">
427
  <div class="card bg-ghost-card h-100">
428
+ <div class="card-body text-center">
429
  <h3 class="card-title">⚙️ Advanced Configuration</h3>
430
+ <p class="lead-text">Customize prompts and settings.</p>
431
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost">View</a>
432
  </div>
433
  </div>
434
  </div>
435
  <div class="col">
436
  <div class="card bg-ghost-card h-100">
437
+ <div class="card-body text-center">
438
+ <h3 class="card-title">🎥 Export Tips</h3>
439
+ <p class="lead-text">Optimize MP4 exports with CRF settings.</p>
440
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost">View</a>
441
  </div>
442
  </div>
443
  </div>
444
  </div>
445
  <div class="text-center mt-4">
446
+ <a href="https://github.com/ghostai1/GhostPack/wiki/Tutorials" class="btn btn-outline-ghost">More 📖</a>
447
  </div>
448
  </div>
449
  </section>
 
452
  <section id="contribute" class="py-5 bg-light text-dark">
453
  <div class="container">
454
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌱 Contributing Guidelines</h2>
455
+ <p class="lead light-lead-text mb-4">Contribute to GhostPack’s future development.</p>
456
  <div class="row">
457
  <div class="col-md-12">
458
  <div class="card bg-ghost-light">
459
+ <div class="card-body text-center">
460
  <h3 class="card-title">🎯 How to Contribute</h3>
461
  <ul class="light-lead-text">
462
+ <li>Fork and create a branch.</li>
463
+ <li>Submit detailed pull requests.</li>
464
+ <li>Follow wiki coding standards.</li>
465
+ <li>Test with ghostgradio.py.</li>
466
  </ul>
467
+ <a href="https://github.com/ghostai1/GhostPack/blob/main/CONTRIBUTING.md" class="btn btn-ghost">View</a>
468
  </div>
469
  </div>
470
  </div>
 
476
  <section id="screenshots" class="py-5 bg-dark text-white">
477
  <div class="container">
478
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📸 Screenshots</h2>
479
+ <p class="lead lead-text mb-4">See GhostPack’s spectral magic in action.</p>
480
  <div class="row row-cols-1 row-cols-md-3 g-4">
481
  <div class="col">
482
  <div class="card bg-ghost-card h-100">
 
503
  </div>
504
  </div>
505
  </div>
506
+ <p class="text-center mt-4 lead-text">Add more to showcase your work!</p>
507
  </div>
508
  </section>
509
 
 
511
  <section id="files" class="py-5 bg-light text-dark">
512
  <div class="container">
513
  <h2 class="text-center mb-5 animate__animated animate__fadeIn">📂 Latest Conjurations</h2>
514
+ <p class="lead light-lead-text mb-4">Explore the latest files and logs.</p>
515
  <div class="row row-cols-1 row-cols-md-2 g-4">
516
  <div class="col">
517
  <div class="card bg-ghost-light h-100">
518
  <div class="card-body text-center">
519
  <h3 class="card-title">📜 Latest File</h3>
520
+ <p class="light-lead-text">View <code>ghostgradio.py</code>, GhostPack’s GUI core.</p>
521
+ <a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost" target="_blank">View</a>
522
  </div>
523
  </div>
524
  </div>
 
526
  <div class="card bg-ghost-light h-100">
527
  <div class="card-body text-center">
528
  <h3 class="card-title">📋 Logs</h3>
529
+ <p class="light-lead-text">Check render logs for debugging.</p>
530
+ <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">View</a>
531
  </div>
532
  </div>
533
  </div>
 
540
  </section>
541
 
542
  <!-- Footer -->
543
+ <footer class="bg-ghost-black text-white text-center py-3">
544
+ <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>
545
+ <p>Created 07:00 PM CDT, June 11, 2025 😈⚡️</p>
546
  </footer>
547
 
548
  <!-- Modals -->
549
  <div class="modal fade" id="teacacheModal" tabindex="-1" aria-labelledby="teacacheModalLabel" aria-hidden="true">
550
+ <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>Cuts frame time by ~40% (~12s/frame on RTX 3060), \( T_{\text{total}} \approx 0.6 \cdot T_{\text{base}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
551
  </div>
552
  <div class="modal fade" id="contextModal" tabindex="-1" aria-labelledby="contextModalLabel" aria-hidden="true">
553
+ <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>Saves ~50% VRAM (~2–3GB), \( M_{\text{VRAM}} \propto O(1) \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
554
  </div>
555
  <div class="modal fade" id="batchingModal" tabindex="-1" aria-labelledby="batchingModalLabel" aria-hidden="true">
556
+ <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>Boosts throughput by ~30–50%, \( \text{Throughput} \propto B \cdot \text{FPS}_{\text{base}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
557
  </div>
558
  <div class="modal fade" id="sageModal" tabindex="-1" aria-labelledby="sageModalLabel" aria-hidden="true">
559
+ <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>Saves ~5–10% time, \( T_{\text{attn}} \approx 0.9 \cdot T_{\text{base_attn}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
560
  </div>
561
  <div class="modal fade" id="tcmallocModal" tabindex="-1" aria-labelledby="tcmallocModalLabel" aria-hidden="true">
562
+ <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>Reduces overhead by ~5–20%, \( O_{\text{mem}} \approx 0.8 \cdot O_{\text{glibc}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
563
  </div>
564
  <div class="modal fade" id="cudaModal" tabindex="-1" aria-labelledby="cudaModalLabel" aria-hidden="true">
565
+ <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>Cuts latency by ~10–15%, \( L_{\text{CUDA}} \approx 0.85 \cdot L_{\text{base}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
566
  </div>
567
  <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
568
+ <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>Reduces task time by ~15–20%, \( T_{\text{sched}} \approx 0.8 \cdot T_{\text{base_sched}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
569
  </div>
570
  <div class="modal fade" id="cacheModal" tabindex="-1" aria-labelledby="cacheModalLabel" aria-hidden="true">
571
+ <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>Cuts swaps by ~25%, \( M_{\text{swap}} \approx 0.75 \cdot M_{\text{base_swap}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
572
  </div>
573
  <div class="modal fade" id="powerModal" tabindex="-1" aria-labelledby="powerModalLabel" aria-hidden="true">
574
+ <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>Saves ~20–30% power, \( P_{\text{idle}} \approx 0.7 \cdot P_{\text{base_idle}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
575
  </div>
576
  <div class="modal fade" id="threadModal" tabindex="-1" aria-labelledby="threadModalLabel" aria-hidden="true">
577
+ <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>Boosts CPU by ~10–15%, \( C_{\text{thread}} \approx 0.85 \cdot C_{\text{base_thread}} \)</p></div></div></div>
 
 
 
 
 
 
 
 
 
 
 
578
  </div>
579
 
580
  <!-- Bootstrap JS -->