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

Complete step-by-step guide to deploy your Smart Escalation API to Hugging Face Spaces for FREE.

## Why Hugging Face Spaces?

- βœ… **FREE** - No credit card required
- βœ… **2GB RAM** - Enough for ML models (vs Render's 512MB free tier)
- βœ… **Optimized for ML** - Built for apps like yours
- βœ… **Easy deployment** - Push code via Git
- βœ… **Automatic HTTPS** - Secure by default

---

## Step 1: Create Hugging Face Account (2 minutes)

1. **Go to Hugging Face**
   - Visit: https://huggingface.co/join

2. **Sign Up**
   - Enter your email
   - Choose a username (e.g., `yourname`)
   - Create password
   - Verify email

3. **Get Access Token**
   - Go to: https://huggingface.co/settings/tokens
   - Click **"New token"**
   - Name: `escalation-api-deploy`
   - Role: **Write**
   - Click **"Generate a token"**
   - **Copy the token** - you'll need it soon!

---

## Step 2: Create a New Space (3 minutes)

1. **Create Space**
   - Go to: https://huggingface.co/new-space
   - Or click your profile β†’ **"New Space"**

2. **Configure Space**
   - **Owner**: Your username
   - **Space name**: `escalation-api` (or any name you like)
   - **License**: MIT
   - **Select the Space SDK**: Choose **"Docker"** (important!)
   - **Space hardware**: CPU basic (free)
   - **Visibility**: Public
   - Click **"Create Space"**

3. **Wait for Space Creation**
   - You'll see a page with instructions
   - Keep this page open

---

## Step 3: Add Required Files (5 minutes)

We need to add a few files for Hugging Face Spaces:

### 3.1: Create Dockerfile

I'll create a Dockerfile for you:

```bash
# This will be created automatically in the next step
```

### 3.2: Create .env.example for Spaces

```bash
# This will be created automatically in the next step
```

Let me create these files now:

---

## Step 4: Push Code to Hugging Face (5 minutes)

### 4.1: Add Hugging Face Remote

Open your terminal and run:

```bash
# Add Hugging Face as a git remote
# Replace YOUR_USERNAME with your actual Hugging Face username
git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/escalation-api
```

Example:
```bash
git remote add hf https://huggingface.co/spaces/john/escalation-api
```

### 4.2: Commit New Files

```bash
# Add the new Hugging Face files
git add Dockerfile README_SPACES.md app.py

# Commit
git commit -m "Add Hugging Face Spaces deployment files"
```

### 4.3: Push to Hugging Face

```bash
# Push to Hugging Face Spaces
git push hf main
```

**You'll be prompted for credentials:**
- **Username**: Your Hugging Face username
- **Password**: Use the **access token** you created in Step 1 (NOT your password!)

---

## Step 5: Configure Environment Variables (3 minutes)

1. **Go to Your Space**
   - Visit: `https://huggingface.co/spaces/YOUR_USERNAME/escalation-api`

2. **Open Settings**
   - Click the **"Settings"** tab at the top

3. **Add Secrets (Environment Variables)**
   - Scroll down to **"Repository secrets"**
   - Click **"New secret"** for each variable:

   | Name | Value |
   |------|-------|
   | `GOOGLE_API_KEY` | Your Gemini API key from https://makersuite.google.com/app/apikey |
   | `ARTICLES_DIR` | `data/articles` |
   | `EMBEDDING_MODEL` | `all-MiniLM-L6-v2` |
   | `RELEVANCE_THRESHOLD` | `0.5` |
   | `TOP_K_CHUNKS` | `3` |
   | `CHUNK_SIZE` | `500` |
   | `CHUNK_OVERLAP` | `50` |
   | `LLM_MODEL` | `gemini-1.5-flash` |
   | `LLM_TEMPERATURE` | `0.3` |
   | `CORS_ORIGINS` | `https://escalation-api-frontend.vercel.app,http://localhost:5173` |

4. **Save Each Secret**
   - Click **"Add secret"** after entering each one

---

## Step 6: Wait for Build (10-15 minutes)

1. **Go to "App" Tab**
   - Click the **"App"** tab at the top

2. **Watch Build Logs**
   - You'll see the Docker build progress
   - It will download ML models (~2GB)
   - This takes 10-15 minutes on first build

3. **Build Complete**
   - When done, you'll see: **"Running"** status
   - Your API is now live! πŸŽ‰

---

## Step 7: Test Your API (2 minutes)

### 7.1: Get Your API URL

Your API is available at:
```
https://YOUR_USERNAME-escalation-api.hf.space
```

Example:
```
https://john-escalation-api.hf.space
```

### 7.2: Test with curl

```bash
curl -X POST https://YOUR_USERNAME-escalation-api.hf.space/ask \
  -H "Content-Type: application/json" \
  -d '{"question": "How do I reset my password?"}'
```

### 7.3: Test in Browser

Visit:
```
https://YOUR_USERNAME-escalation-api.hf.space/docs
```

You'll see interactive API documentation where you can test the `/ask` endpoint.

---

## Step 8: Connect Frontend to Backend (5 minutes)

Now connect your Vercel frontend to the Hugging Face backend:

### 8.1: Copy Your Backend URL

```
https://YOUR_USERNAME-escalation-api.hf.space
```

### 8.2: Add to Vercel

1. Go to https://vercel.com/dashboard
2. Open your project: `escalation-api-frontend`
3. Go to **Settings** β†’ **Environment Variables**
4. Click **"Add New"**
   - **Key**: `VITE_API_URL`
   - **Value**: `https://YOUR_USERNAME-escalation-api.hf.space`
   - **Environments**: Check all (Production, Preview, Development)
5. Click **"Save"**

### 8.3: Redeploy Frontend

1. Go to **Deployments** tab
2. Find the latest deployment
3. Click **"β‹―"** (three dots) β†’ **"Redeploy"**
4. Click **"Redeploy"** to confirm
5. Wait 1-2 minutes

---

## Step 9: Test End-to-End (1 minute)

1. **Visit Your Frontend**
   - Go to: https://escalation-api-frontend.vercel.app/

2. **Ask a Question**
   - Type: "How do I reset my password?"
   - Click **"Send"**

3. **Success!** πŸŽ‰
   - You should get an answer from your Hugging Face backend
   - Your full-stack ML app is now live!

---

## πŸŽ‰ Deployment Complete!

Your app is now fully deployed:

- **Frontend**: https://escalation-api-frontend.vercel.app/ (Vercel - FREE)
- **Backend**: https://YOUR_USERNAME-escalation-api.hf.space (Hugging Face - FREE)
- **Total Cost**: $0/month 🎊

---

## Troubleshooting

### Build fails with "Out of memory"

**Solution**: Upgrade to Hugging Face Pro ($9/month) for more resources, or:
- Use a smaller embedding model: `all-MiniLM-L6-v2` β†’ `paraphrase-MiniLM-L3-v2`
- Reduce dependencies in `requirements.txt`

### "Application startup failed"

**Solution**: Check the logs in the "App" tab:
- Verify `GOOGLE_API_KEY` is set correctly
- Check that all environment variables are set
- Look for Python errors in the logs

### API returns 404

**Solution**: 
- Make sure the Space is "Running" (not "Building" or "Sleeping")
- Check the URL is correct: `https://YOUR_USERNAME-escalation-api.hf.space`
- Visit `/docs` to see available endpoints

### Frontend shows "Failed to fetch"

**Solution**:
- Verify `VITE_API_URL` is set in Vercel
- Check backend URL is correct (no trailing slash)
- Make sure Hugging Face Space is running
- Check CORS_ORIGINS includes your Vercel frontend URL

### Space goes to sleep

**Solution**: Hugging Face Spaces on free tier sleep after inactivity:
- First request after sleep takes 30-60 seconds (cold start)
- Subsequent requests are fast
- Upgrade to Pro ($9/month) for always-on instances

---

## Updating Your App

To update your code:

```bash
# Make changes to your code
git add .
git commit -m "Update feature"

# Push to GitHub (for version control)
git push origin main

# Push to Hugging Face (to deploy)
git push hf main
```

Hugging Face will automatically rebuild and redeploy.

---

## Cost Comparison

| Platform | Free Tier | Paid Tier | RAM | Notes |
|----------|-----------|-----------|-----|-------|
| **Hugging Face** | FREE | $9/month | 2GB | Best for ML apps |
| **Render** | 512MB (too small) | $7/month | 512MB+ | Good for web apps |
| **Railway** | $5 credit | $5-20/month | 512MB+ | Pay as you go |
| **Vercel** | ❌ Can't deploy ML | ❌ Can't deploy ML | 500MB limit | Frontend only |

---

## Next Steps

- βœ… Your app is live and working!
- πŸ“Š Monitor usage in Hugging Face dashboard
- πŸ”§ Add more help articles in `data/articles/`
- 🎨 Customize the frontend
- πŸ“ˆ Track API usage and performance

---

## Need Help?

- **Hugging Face Docs**: https://huggingface.co/docs/hub/spaces
- **Hugging Face Discord**: https://discord.gg/hugging-face
- **Your Space Settings**: https://huggingface.co/spaces/YOUR_USERNAME/escalation-api/settings

Enjoy your FREE ML-powered API! πŸš€