Spaces:
Paused
Paused
File size: 3,748 Bytes
dcd5e1d | 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 | # 🔍 OpenRouter Model Loading Debug Guide
## 🐛 **Issue**: Cannot load models via OpenRouter
### 📊 **Debugging Steps Added**
I've added comprehensive logging to help identify the issue:
1. **Hook Debugging** (`/hooks/useOpenRouterModels.ts`):
- Console logs for fetch start/end
- Response status logging
- Model count logging
2. **API Route Debugging** (`/app/api/openrouter/models/route.ts`):
- Request logging
- API key status logging
- Success/error logging
3. **OpenRouter Client Debugging** (`/lib/openrouter.ts`):
- Request headers logging
- Response status logging
- Error details logging
4. **Component Debugging** (`/components/openrouter-model-selector/index.tsx`):
- Render state logging
### 🔧 **Fixes Applied**
1. **Fixed Infinite Loop**: Removed dependency array issue in useOpenRouterModels hook
2. **Updated Referer**: Changed from `deepsite.hf.co` to `localhost:3000` for local development
3. **Enhanced Error Handling**: Better error messages and logging
### 🧪 **How to Debug**
#### **Step 1: Open Browser Console**
1. Go to `http://localhost:3000`
2. Open Developer Tools (F12)
3. Go to Console tab
#### **Step 2: Test Settings Panel**
1. Open the AI chat settings
2. Toggle "Use Custom OpenRouter Models" ON
3. Watch console for logs starting with:
- 🔄 (fetch start)
- 📡 (request details)
- 📥 (response status)
- ✅ (success) or ❌ (error)
#### **Step 3: Test Model Selector**
1. Click "Select Model" button
2. Watch console for:
- 🔍 OpenRouterModelSelector render logs
- Loading state changes
- Model count updates
#### **Step 4: Test Direct API**
1. Go to `http://localhost:3000/test-openrouter.html`
2. Click "Test API" button
3. Check both page result and console logs
### 🔍 **Common Issues to Look For**
#### **Network Issues**
- Check Console → Network tab
- Look for `/api/openrouter/models` request
- Status should be 200, not 404/500
#### **CORS Issues**
- Error messages mentioning CORS
- OpenRouter API blocking requests
- Referer header issues
#### **API Rate Limiting**
- OpenRouter returning 429 status
- "Too many requests" errors
#### **Environment Issues**
- Missing environment variables
- Local development configuration
#### **Code Issues**
- JavaScript errors in console
- Component not mounting
- Hook not calling fetch
### 📝 **Expected Console Output**
**Successful Flow:**
```
🔄 Fetching OpenRouter models...
📡 Requesting: http://localhost:3000/api/openrouter/models
🔄 OpenRouter models API called
🔑 API key provided: false
📡 Fetching models from OpenRouter...
🔗 Headers: ['Content-Type', 'HTTP-Referer', 'X-Title']
📥 OpenRouter API response status: 200
✅ OpenRouter API returned 200+ models
✅ Successfully fetched 200+ models from OpenRouter
📥 Response status: 200
📋 Response data: { success: true, data: [...] }
✅ Successfully fetched 200+ models
🔍 OpenRouterModelSelector render: { modelsCount: 200+, loading: false, error: null }
```
**Error Flow Examples:**
```
❌ Error fetching models: Failed to fetch
❌ OpenRouter API error: 403 Forbidden
❌ Network error: fetch failed
```
### 🚨 **If Still Not Working**
#### **Check 1: API Endpoint Accessibility**
Try: `http://localhost:3000/api/openrouter/models`
Should return JSON with `success: true`
#### **Check 2: OpenRouter API Direct**
Try: `https://openrouter.ai/api/v1/models`
Should return list of models
#### **Check 3: Network Tab**
- Failed requests (red)
- CORS errors
- Timeout issues
#### **Check 4: Console Errors**
- JavaScript compilation errors
- React component errors
- Network fetch errors
Let me know what you see in the console and I'll help identify the specific issue! 🔧
|