File size: 8,011 Bytes
598e1f3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
# πŸš€ Complete Deployment Guide to Hugging Face

## Before You Start

### Prerequisites
- A Hugging Face account ([Sign up here](https://huggingface.co/join))
- A Google API key with Gemini API access ([Get one here](https://aistudio.google.com/app/apikey))
- At least 5-10 video clips (MP4 format recommended)

---

## Part 1: Create Your Hugging Face Space

### Step 1: Create New Space
1. Go to https://huggingface.co/spaces
2. Click the **"Create new Space"** button (top right)
3. Fill in the details:
   - **Owner**: Your username
   - **Space name**: Choose a name (e.g., `ai-video-generator`)
   - **License**: Apache 2.0 (recommended)
   - **Select the Space SDK**: Choose **Gradio**
   - **Space hardware**: Start with **CPU basic** (free) - you can upgrade later
   - **Space visibility**: Public or Private (your choice)
4. Click **"Create Space"**

---

## Part 2: Upload Your Code Files

### Step 2: Upload Main Files via Web Interface

1. You should now be in your Space's main page
2. Click on **"Files and versions"** tab
3. Click **"Add file"** β†’ **"Upload files"**
4. Upload these files (download from the artifacts above):
   - `app.py`
   - `requirements.txt`
   - `packages.txt`
   - `README.md`
   - `.gitignore`
   - `.gitattributes`
5. In the commit message box, type: `Initial commit - upload main files`
6. Click **"Commit changes to main"**

### Alternative: Using Git (Advanced)

If you're comfortable with Git:

```bash

# Clone your space

git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME

cd YOUR_SPACE_NAME



# Copy your files

cp /path/to/downloaded/app.py .

cp /path/to/downloaded/requirements.txt .

cp /path/to/downloaded/packages.txt .

cp /path/to/downloaded/README.md .

cp /path/to/downloaded/.gitignore .

cp /path/to/downloaded/.gitattributes .



# Commit and push

git add .

git commit -m "Initial commit - upload main files"

git push

```

---

## Part 3: Configure API Key

### Step 3: Add Google API Key

🚨 **CRITICAL**: Never put your API key directly in the code!

1. In your Space, click **"Settings"** (gear icon in top right)
2. Scroll down to **"Repository secrets"**
3. Click **"New secret"**
4. Enter:
   - **Name**: `GOOGLE_API_KEY`
   - **Value**: Paste your actual Google API key
5. Click **"Add"**

---

## Part 4: Upload Video Clips

### Step 4: Create video_clips Folder and Upload Videos



**Option A: Using Web Interface**



1. Go back to **"Files and versions"** tab

2. Click **"Add file"** β†’ **"Upload files"**

3. Create folder structure by typing: `video_clips/`
4. Upload your video files (.mp4, .avi, .mkv, or .mov)
5. If videos are larger than 10MB, you'll need to use Git LFS (see below)
6. Commit with message: `Add video clips`

**Option B: Using Git with LFS for Large Files**

```bash

# Make sure you're in your cloned space directory

cd YOUR_SPACE_NAME



# Install Git LFS if not already installed

git lfs install



# Create video_clips folder

mkdir video_clips



# Copy your video files

cp /path/to/your/videos/*.mp4 video_clips/



# Add and commit

git add video_clips/

git commit -m "Add video clips"

git push

```

**Video Requirements:**
- At least 5-10 video clips
- Formats: .mp4, .avi, .mkv, or .mov
- Resolution: 720p or 1080p recommended
- Duration: 5-30 seconds per clip works best

---

## Part 5: Optional - Add Background Music

### Step 5: Upload Background Music (Optional)

1. Go to **"Files and versions"**
2. Click **"Add file"** β†’ **"Upload files"**
3. Create folder: `background_music/`
4. Upload your music file (.mp3 or .wav)
5. Commit with message: `Add background music`

---

## Part 6: Wait for Build and Test

### Step 6: Monitor Build Process

1. Go back to your Space's main page (click the Space name at top)
2. Click on **"Logs"** tab
3. Watch the build process:
   - Installing system packages (imagemagick, ffmpeg)
   - Installing Python packages
   - Starting the app

**Build Status Indicators:**
- 🟑 Yellow "Building": In progress
- 🟒 Green "Running": Successfully built!
- πŸ”΄ Red "Failed": Check logs for errors

### Step 7: Test Your App

Once the status shows **"Running"**:

1. Go to the **"App"** tab
2. You should see your video generator interface!
3. Test it:
   - Enter some text (e.g., "Hello world, this is a test video")
   - Select a voice
   - Click "Generate Video"
   - Wait for the video to generate

---

## Part 7: Troubleshooting Common Issues

### Issue 1: "Video clips folder not found"
**Solution**: Upload videos to the `video_clips` folder (Step 4)

### Issue 2: "TTS failed: Error"
**Solution**: 
- Check that API key is correctly set in Settings β†’ Repository secrets
- Verify the key name is exactly `GOOGLE_API_KEY`
- Test your API key at https://aistudio.google.com/

### Issue 3: Build Fails
**Solution**:
- Check the Logs tab for specific error messages
- Common fixes:
  - Ensure `requirements.txt` is properly uploaded
  - Ensure `packages.txt` is properly uploaded
  - Try restarting the Space (Settings β†’ Factory reboot)

### Issue 4: Out of Memory
**Solution**:
- Upgrade to better hardware (Settings β†’ Change hardware)
- Or use fewer/smaller video clips

### Issue 5: Videos Upload Fails
**Solution**:
- Use Git LFS for files over 10MB
- Or use smaller video files
- Or compress videos before uploading

---

## Part 8: Optimize and Share

### Step 8: Upgrade Hardware (Optional)

For better performance:
1. Go to **Settings**
2. Scroll to **"Hardware"**
3. Choose a better option:
   - **CPU Upgrade** ($0.60/hour)
   - **T4 GPU** ($0.60/hour) - Recommended for faster processing
   - **A10G GPU** ($3/hour) - For very fast processing
4. Click **"Update"**

### Step 9: Share Your Space

Your Space is now live! Share it:
- **Direct URL**: `https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME`
- Click **"Share"** button to get embed codes
- Add to your portfolio or website

---

## Quick Checklist

Use this to ensure everything is set up:

- [ ] βœ… Created Hugging Face Space
- [ ] βœ… Uploaded `app.py`
- [ ] βœ… Uploaded `requirements.txt`
- [ ] βœ… Uploaded `packages.txt`
- [ ] βœ… Uploaded `README.md`
- [ ] βœ… Added `GOOGLE_API_KEY` to Repository secrets
- [ ] βœ… Uploaded video clips to `video_clips/` folder
- [ ] βœ… (Optional) Uploaded background music
- [ ] βœ… Space shows "Running" status
- [ ] βœ… Tested video generation successfully

---

## Need Help?

1. **Check Logs**: Always check the Logs tab for error messages
2. **Community**: Ask in [Hugging Face Discord](https://discord.gg/hugging-face)
3. **Documentation**: [Gradio Spaces Docs](https://huggingface.co/docs/hub/spaces-sdks-gradio)

---

## Summary of File Locations

After setup, your Space structure should look like:

```

your-space-name/

β”œβ”€β”€ app.py                    βœ… Main application file

β”œβ”€β”€ requirements.txt          βœ… Python dependencies

β”œβ”€β”€ packages.txt             βœ… System dependencies  

β”œβ”€β”€ README.md                βœ… Documentation

β”œβ”€β”€ .gitignore               βœ… Git ignore rules

β”œβ”€β”€ .gitattributes           βœ… LFS configuration

β”œβ”€β”€ video_clips/             βœ… Your video files (REQUIRED!)

β”‚   β”œβ”€β”€ clip1.mp4

β”‚   β”œβ”€β”€ clip2.mp4

β”‚   └── clip3.mp4

β”œβ”€β”€ background_music/        β­• Optional music files

β”‚   └── bgmusic.mp3

β”œβ”€β”€ voice_over/              βš™οΈ Auto-created by app

└── exports/                 βš™οΈ Auto-created by app

```

**Legend:**
- βœ… = Required, you upload this
- β­• = Optional
- βš™οΈ = Auto-created by the app

---

## πŸŽ‰ Congratulations!

You've successfully deployed your AI Video Generator to Hugging Face Spaces! 

Now you can create amazing videos with AI voiceovers and animated subtitles right from your browser.