Hugging Face's logo

Spaces:
ghostai1
/
GhostPack
Running

App Files Community
1
GhostPack
File size: 8,879 Bytes 
0423506
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>👻 GhostPack: Video Generation Unleashed 🚀</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Favicon -->
    <link rel="icon" href="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/ghostpack_logo.png">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">👻 GhostPack</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
                    <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
                    <li class="nav-item"><a class="nav-link" href="#optimization">Optimization</a></li>
                    <li class="nav-item"><a class="nav-link" href="#model">Model Card</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-section text-center text-white">
        <div class="container">
            <h1 class="display-3 animate__animated animate__fadeIn">👻 GhostPack</h1>
            <p class="lead animate__animated animate__fadeIn animate__delay-1s">Next-Frame Video Generation Made Practical! 🚀</p>
            <a href="#installation" class="btn btn-primary btn-lg animate__animated animate__pulse animate__delay-2s">Get Started 🛠️</a>
            <a href="https://github.com/ghostai1/GhostPack" class="btn btn-outline-light btn-lg animate__animated animate__pulse animate__delay-2s" target="_blank">GitHub 🌟</a>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-5 bg-dark text-white">
        <div class="container">
            <h2 class="text-center mb-5">✨ Features</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card bg-secondary text-white h-100">
                        <div class="card-body">
                            <h3 class="card-title">📹 Progressive Video</h3>
                            <p class="card-text">Generate videos frame-by-frame with smooth transitions using next-frame prediction.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card bg-secondary text-white h-100">
                        <div class="card-body">
                            <h3 class="card-title">⚡️ Teacache Speed</h3>
                            <p class="card-text">~40% faster generation (~12–15s/frame on RTX 3060) with teacache optimization.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card bg-secondary text-white h-100">
                        <div class="card-body">
                            <h3 class="card-title">🛠️ Laptop-Friendly</h3>
                            <p class="card-text">Runs 13B models on GPUs with ≥6GB VRAM, perfect for RTX 3060 and above.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">🛠️ Installation</h2>
            <p class="text-center lead">GhostPack supports Ubuntu, Windows, and macOS. Ensure >30GB disk space for models.</p>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h3>🐧 Ubuntu</h3>
                    <pre><code>git clone https://github.com/ghostai1/GhostPack
cd GhostPack
chmod +x install_ubuntu.sh
./install_ubuntu.sh</code></pre>
                    <p>Requires NVIDIA GPU, Python 3.10, CUDA 12.6.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h3>🪟 Windows</h3>
                    <pre><code>git clone https://github.com/ghostai1/GhostPack
cd GhostPack
install_windows.bat</code></pre>
                    <p>Models download automatically (>30GB).</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h3>🍎 macOS</h3>
                    <pre><code>git clone https://github.com/ghostai1/GhostPack
cd GhostPack
chmod +x install_macos.sh
./install_macos.sh</code></pre>
                    <p>Limited GPU support (M1/M2 slower).</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Section -->
    <section id="usage" class="py-5 bg-dark text-white">
        <div class="container">
            <h2 class="text-center mb-5">📹 Usage</h2>
            <ol>
                <li><strong>Launch GUI Locally</strong>:
                    <pre><code>source ~/ghostpack_venv/venv/bin/activate
cd ~/ghostpack_venv
python demo_gradio.py --port 5666 --server 0.0.0.0</code></pre>
                </li>
                <li><strong>Configure</strong>:
                    <ul>
                        <li>Upload an image.</li>
                        <li>Enter a prompt (e.g., “The girl dances gracefully, with clear movements, full of charm”).</li>
                        <li>Enable teacache for speed.</li>
                        <li>Set 15fps, 5s video (~75 frames).</li>
                    </ul>
                </li>
                <li><strong>Monitor</strong>: Use <code>nvidia-smi</code> for GPU usage (~80–100% ideal).</li>
            </ol>
        </div>
    </section>

    <!-- Optimization Section -->
    <section id="optimization" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">⚡️ Performance Optimization</h2>
            <ul>
                <li><strong>Teacache</strong>: ~40% speed-up (12–15s/frame on RTX 3060).</li>
                <li><strong>Sage-Attention/Xformers</strong>: 5–10% faster.</li>
                <li><strong>tcmalloc</strong>: 5–20% memory efficiency.</li>
                <li><strong>CUDA</strong>:
                    <pre><code>export PYTORCH_CUDA_ALLOC_CONF=max_split_size_mb:128
export CUDNN_V8_API_ENABLED=1</code></pre>
                </li>
                <li><strong>GPU</strong>:
                    <pre><code>sudo nvidia-smi -pm 1</code></pre>
                </li>
            </ul>
            <p>Expected: ~10–15s/frame on RTX 3060 with all tweaks.</p>
        </div>
    </section>

    <!-- Model Card Section -->
    <section id="model" class="py-5 bg-dark text-white">
        <div class="container">
            <h2 class="text-center mb-5">Model Card</h2>
            <ul>
                <li><strong>Model</strong>: GhostPack-F1 (13B parameters).</li>
                <li><strong>Repo</strong>: <a href="https://huggingface.co/spaces/ghostai1/GhostPack" target="_blank">Hugging Face</a></li>
                <li><strong>Files</strong>: >30GB, stored in <code>models/</code> with Git LFS.</li>
                <li><strong>License</strong>: Apache-2.0.</li>
            </ul>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white text-center py-3">
        <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>
    </footer>

    <!-- Bootstrap JS and Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <!-- Custom JS -->
    <script src="script.js"></script>
</body>
</html>