pushed

READY_PLAYER_ME_FIXES.md

@@ -0,0 +1,122 @@
+# Ready Player Me Integration Fixes
+
+## Issues Fixed
+
+### 1. ✅ Profile Picture Loading
+- **Problem**: Avatar profile picture wasn't displaying after creation
+- **Fix**: 
+  - Updated profile loading to prioritize `profilePicture` from backend
+  - Added profile reload after avatar creation
+  - Improved fallback logic for avatar render URL
+
+### 2. ✅ Avatar Creation Flow
+- **Problem**: Profile picture not updating after avatar export
+- **Fix**: 
+  - Reload profile after avatar creation to get updated `profilePicture`
+  - Update user context with new profile data
+  - Better error handling and fallbacks
+
+### 3. ⚠️ Ready Player Me API 400 Errors
+- **Problem**: Multiple 400 Bad Request errors from Ready Player Me API
+- **Possible Causes**:
+  1. **Subdomain mismatch**: The subdomain in `.env` might not match your Ready Player Me application
+  2. **Application configuration**: The application might not be properly configured in Ready Player Me Studio
+  3. **API permissions**: The API key might not have the right permissions
+
+## How to Fix 400 Errors
+
+### Step 1: Verify Subdomain
+1. Go to [Ready Player Me Studio](https://studio.readyplayer.me/)
+2. Check your application settings
+3. Find your **subdomain** (partner name)
+4. Update `stylegptUI/.env`:
+   ```env
+   VITE_READY_PLAYER_ME_SUBDOMAIN=your-actual-subdomain
+   ```
+
+### Step 2: Verify Application Configuration
+1. In Ready Player Me Studio, go to your application
+2. Check that:
+   - Application ID matches `READY_PLAYER_ME_APPLICATION_ID` in backend `.env`
+   - Organization ID matches `READY_PLAYER_ME_ORGANIZATION_ID` in backend `.env`
+   - Application is **active** and **published**
+
+### Step 3: Check API Key Permissions
+1. Verify your `READY_API_KEY` has permissions for:
+   - Guest user creation
+   - Avatar management
+   - Asset creation
+   - Avatar rendering
+
+### Step 4: Test Iframe URL
+The iframe URL should be:
+```
+https://{subdomain}.readyplayer.me/avatar?frameApi&id={avatarId}
+```
+
+Example:
+```
+https://stylegpt.readyplayer.me/avatar?frameApi&id=your-avatar-id
+```
+
+## Current Configuration
+
+### Frontend (.env)
+```env
+VITE_READY_PLAYER_ME_SUBDOMAIN=stylegpt
+VITE_API_URL=https://nexusbert-stylegpt-milestone2.hf.space
+```
+
+### Backend (.env)
+```env
+READY_API_KEY=your-api-key
+READY_PLAYER_ME_APPLICATION_ID=your-application-id
+READY_PLAYER_ME_ORGANIZATION_ID=your-organization-id
+```
+
+## Testing Checklist
+
+After fixing the configuration:
+
+1. ✅ **Clear browser cache** and refresh
+2. ✅ **Create/Edit Avatar** - Should load without 400 errors
+3. ✅ **Export Avatar** - Should save avatar ID
+4. ✅ **Profile Picture** - Should display avatar portrait
+5. ✅ **View Avatar** - Should show avatar in profile
+
+## Common Issues
+
+### Issue: "appName and environment are static"
+- **Cause**: Ready Player Me iframe needs proper application context
+- **Fix**: Ensure subdomain matches your application in Ready Player Me Studio
+
+### Issue: 400 Bad Request errors
+- **Cause**: API calls failing due to missing/invalid configuration
+- **Fix**: 
+  1. Verify subdomain is correct
+  2. Check application is active in Ready Player Me Studio
+  3. Verify API key has proper permissions
+
+### Issue: Avatar not displaying in profile
+- **Cause**: Profile picture not loading after avatar creation
+- **Fix**: 
+  - Refresh the page
+  - Check browser console for errors
+  - Verify avatar was created successfully (check backend logs)
+
+## Next Steps
+
+1. **Verify your Ready Player Me Studio configuration**
+2. **Update subdomain in `.env` if needed**
+3. **Test avatar creation flow**
+4. **Check browser console for any remaining errors**
+5. **Verify profile picture displays correctly**
+
+## Support
+
+If issues persist:
+1. Check Ready Player Me documentation: https://docs.readyplayer.me/
+2. Verify your application settings in Ready Player Me Studio
+3. Check backend logs for API errors
+4. Review browser console for frontend errors
+

READY_PLAYER_ME_TESTING_GUIDE.md

@@ -0,0 +1,326 @@
+# Ready Player Me Integration Testing Guide
+
+## 🎯 Testing Checklist
+
+Test the Ready Player Me integration on the deployed app: **https://stylegpt-ui.vercel.app/**
+
+---
+
+## 1. User Registration & Guest User Creation
+
+### Steps:
+1. Navigate to the registration page
+2. Fill in registration form:
+   - Name
+   - Email
+   - Password
+3. Click "Register"
+
+### Expected Results:
+- ✅ User account created successfully
+- ✅ Backend automatically creates a Ready Player Me guest user
+- ✅ `readyPlayerMeUserId` stored in database
+- ✅ User redirected to login or dashboard
+
+### How to Verify:
+- Check browser console for any errors
+- Check backend logs for "Guest user created" message
+- User should be able to proceed to Profile page
+
+---
+
+## 2. Avatar Creation
+
+### Steps:
+1. Log in to your account
+2. Navigate to **Profile** page
+3. Look for "Create Avatar" or "Edit Avatar" button
+4. Click the button
+5. Avatar Creator iframe should open
+6. Create your avatar in the Ready Player Me interface:
+   - Choose gender
+   - Customize appearance
+   - Select clothing/accessories
+7. Click "Export" or "Done" in the Ready Player Me interface
+
+### Expected Results:
+- ✅ Avatar Creator iframe loads correctly
+- ✅ Ready Player Me interface is fully functional
+- ✅ After exporting, avatar ID is automatically saved
+- ✅ Profile picture updates to show avatar portrait
+- ✅ "Create Avatar" button changes to "Edit Avatar"
+
+### How to Verify:
+- Check browser console for `v1.avatar.exported` event
+- Check backend logs for "Avatar ID saved" message
+- Profile picture should show your avatar's 2D render
+- Refresh page - avatar should persist
+
+### Troubleshooting:
+- **Iframe doesn't load**: Check `VITE_READY_PLAYER_ME_SUBDOMAIN` env var
+- **Avatar not saving**: Check browser console for postMessage errors
+- **Profile picture not updating**: Check if `readyPlayerMeAvatarId` is saved in backend
+
+---
+
+## 3. Wardrobe Item Upload with 3D Model & Asset Creation
+
+### Steps:
+1. Navigate to **Upload** or **Wardrobe** page
+2. Click "Upload" or "Add Item"
+3. Select an image file (clothing item)
+4. Select a **Style** (casual, formal, streetwear, sportswear)
+5. Click "Upload" or "Submit"
+6. Wait for processing:
+   - Background removal
+   - FashionClip classification
+   - 3D model generation
+   - Ready Player Me asset creation
+
+### Expected Results:
+- ✅ Image uploads successfully
+- ✅ Background is removed for classification
+- ✅ Original image (with background) is stored
+- ✅ Item is classified with color and category
+- ✅ 3D model is generated (may take 30-60 seconds)
+- ✅ 3D model is converted to base64 and stored
+- ✅ Ready Player Me asset is created
+- ✅ `readyPlayerMeAssetId` is stored in database
+- ✅ Item appears in wardrobe with name (e.g., "black t-shirt")
+
+### How to Verify:
+- Check upload progress indicator
+- Item should appear in wardrobe after processing
+- Check browser console for any errors
+- Check backend logs for:
+  - "3D model generated"
+  - "Asset created"
+  - "Asset ID saved"
+- In database, verify:
+  - `model3dUrl` field has base64 GLB data
+  - `readyPlayerMeAssetId` field has asset ID
+  - `name` field has "color + category" format
+
+### Troubleshooting:
+- **3D generation fails**: Check Hugging Face token/quota
+- **Asset creation fails**: Check `READY_PLAYER_ME_APPLICATION_ID` and `READY_PLAYER_ME_ORGANIZATION_ID`
+- **Item not appearing**: Check backend logs for errors
+
+---
+
+## 4. View Wardrobe (2D & 3D)
+
+### Steps (2D View):
+1. Navigate to **Wardrobe** page
+2. Items should be grouped by category
+3. Click on a category to see items
+4. Items should slide out with animation
+
+### Steps (3D View):
+1. Navigate to **Wardrobe 3D** page
+2. Wait for scene to load
+3. Items should be organized by category on circular platforms
+4. Hover over items to see them scale up
+5. Click items to interact
+6. Use mouse to rotate camera
+7. Scroll to zoom
+
+### Expected Results:
+- ✅ 2D view shows items grouped by category
+- ✅ Category selection animates smoothly
+- ✅ 3D view loads Three.js scene
+- ✅ Items with 3D models display as 3D objects
+- ✅ Items without 3D models display as 2D image planes
+- ✅ Camera controls work (rotate, zoom)
+- ✅ Hover effects work
+
+### How to Verify:
+- Check browser console for Three.js errors
+- Verify items with `model3dUrl` display as 3D
+- Verify items without `model3dUrl` display as 2D images
+- Test camera controls
+
+---
+
+## 5. AI Outfit Suggestion with Avatar Try-On
+
+### Steps:
+1. Navigate to **Chat** page
+2. Type a request like:
+   - "Suggest a casual outfit"
+   - "What should I wear today?"
+   - "Show me a formal outfit"
+3. Wait for AI response (streaming)
+4. AI should suggest specific items from your wardrobe
+5. Look for **"Try on Avatar"** button (if you have an avatar)
+6. Click "Try on Avatar" button
+7. Wait for outfit to be equipped to avatar
+
+### Expected Results:
+- ✅ AI suggests items using actual item names (e.g., "the black zara pants")
+- ✅ Selected items are displayed in a grid
+- ✅ "Try on Avatar" button appears (if avatar exists)
+- ✅ Clicking button equips assets to avatar
+- ✅ 3D avatar with outfit displays in an iframe
+- ✅ Avatar GLB URL is returned and displayed
+
+### How to Verify:
+- Check AI response mentions actual item names
+- Check `selectedItems` array in response
+- Check browser console for "Try on Avatar" API call
+- Check backend logs for:
+  - "Equipped X assets to avatar"
+  - "Avatar GLB URL generated"
+- Verify iframe loads 3D avatar with outfit
+
+### Troubleshooting:
+- **"Try on Avatar" button not showing**: 
+  - Check if user has `readyPlayerMeAvatarId`
+  - Check if selected items have `readyPlayerMeAssetId`
+- **Avatar not displaying**: 
+  - Check if GLB URL is valid
+  - Check browser console for CORS or loading errors
+- **Outfit not appearing on avatar**: 
+  - Check if assets were equipped successfully
+  - Check backend logs for equip errors
+
+---
+
+## 6. Profile Picture (Avatar Portrait)
+
+### Steps:
+1. Navigate to **Profile** page
+2. Check profile picture section
+
+### Expected Results:
+- ✅ If avatar exists: Profile picture shows 2D avatar portrait
+- ✅ Portrait is generated from Ready Player Me render API
+- ✅ Portrait uses "portrait" camera, 400x400px, 90% quality
+- ✅ Portrait updates automatically when avatar changes
+
+### How to Verify:
+- Profile picture should be a 2D render of your avatar
+- Image URL should be from `models.readyplayer.me`
+- Check browser network tab for render API call
+- Check backend logs for "Avatar render URL generated"
+
+---
+
+## 7. Delete Wardrobe Items
+
+### Steps:
+1. Navigate to **Wardrobe** or **Wardrobe 3D** page
+2. Find an item you want to delete
+3. Click delete button (trash icon)
+4. Confirm deletion
+
+### Expected Results:
+- ✅ Item is deleted from database
+- ✅ Item disappears from wardrobe view
+- ✅ Item disappears from 3D view
+- ✅ Ready Player Me asset is NOT deleted (by design)
+
+### How to Verify:
+- Item should be removed from UI immediately
+- Check backend logs for "Item deleted"
+- Refresh page - item should not reappear
+
+---
+
+## 🔍 Backend API Endpoints to Test
+
+### Avatar Endpoints:
+- `POST /api/avatar/create` - Save avatar ID
+- `GET /api/avatar/glb` - Get 3D avatar GLB URL
+- `GET /api/avatar/render` - Get 2D avatar render URL
+- `GET /api/avatar/metadata` - Get avatar metadata
+- `POST /api/avatar/try-on` - Equip assets and get avatar with outfit
+
+### Other Endpoints:
+- `POST /api/auth/register` - Should create guest user
+- `POST /api/upload` - Should create asset
+- `GET /api/wardrobe` - Should return items with asset IDs
+- `POST /api/suggest/stream` - Should return avatar URL if applicable
+
+---
+
+## 🐛 Common Issues & Solutions
+
+### Issue: Avatar Creator iframe doesn't load
+**Solution**: 
+- Check `VITE_READY_PLAYER_ME_SUBDOMAIN` environment variable
+- Verify Ready Player Me subdomain is correct
+- Check browser console for iframe errors
+
+### Issue: Assets not being created
+**Solution**:
+- Check `READY_PLAYER_ME_APPLICATION_ID` and `READY_PLAYER_ME_ORGANIZATION_ID` env vars
+- Verify API key has asset creation permissions
+- Check backend logs for asset creation errors
+
+### Issue: Avatar not displaying in chat
+**Solution**:
+- Verify user has `readyPlayerMeAvatarId`
+- Check if selected items have `readyPlayerMeAssetId`
+- Verify GLB URL is accessible (check CORS)
+- Check browser console for Three.js errors
+
+### Issue: Profile picture not updating
+**Solution**:
+- Verify avatar was created successfully
+- Check backend logs for render API calls
+- Verify `readyPlayerMeAvatarId` is saved in database
+- Try refreshing the page
+
+---
+
+## 📊 Test Results Template
+
+```
+Date: ___________
+Tester: ___________
+
+✅ User Registration & Guest User Creation: [PASS/FAIL]
+✅ Avatar Creation: [PASS/FAIL]
+✅ Wardrobe Upload with 3D & Asset: [PASS/FAIL]
+✅ View Wardrobe (2D): [PASS/FAIL]
+✅ View Wardrobe (3D): [PASS/FAIL]
+✅ AI Outfit Suggestion: [PASS/FAIL]
+✅ Try on Avatar: [PASS/FAIL]
+✅ Profile Picture (Avatar Portrait): [PASS/FAIL]
+✅ Delete Items: [PASS/FAIL]
+
+Notes:
+_________________________________________________
+_________________________________________________
+_________________________________________________
+```
+
+---
+
+## 🚀 Quick Test Flow
+
+1. **Register** → Creates guest user
+2. **Create Avatar** → Saves avatar ID, updates profile picture
+3. **Upload Item** → Creates 3D model and asset
+4. **Ask for Outfit** → AI suggests items
+5. **Try on Avatar** → Displays 3D avatar with outfit
+6. **Check Profile** → Profile picture shows avatar portrait
+
+---
+
+## 📝 Environment Variables Checklist
+
+### Backend (.env):
+- ✅ `READY_API_KEY` - Ready Player Me API key
+- ✅ `READY_PLAYER_ME_APPLICATION_ID` - Your application ID
+- ✅ `READY_PLAYER_ME_ORGANIZATION_ID` - Your organization ID
+
+### Frontend (Vercel Environment Variables):
+- ✅ `VITE_API_URL` - Backend API URL
+- ✅ `VITE_READY_PLAYER_ME_SUBDOMAIN` - Your Ready Player Me subdomain
+
+---
+
+Good luck with testing! 🎉
+

src/routes/upload.ts

@@ -186,11 +186,16 @@ router.post("/", authenticateToken, upload.array("image", 20), async (req: AuthR
 
         if (model3dUrl && process.env.READY_PLAYER_ME_APPLICATION_ID && process.env.READY_PLAYER_ME_ORGANIZATION_ID) {
           try {
+            console.log(`🔄 Creating Ready Player Me asset for: ${itemName} (category: ${normalizedCategory})`);
             const assetType = mapCategoryToAssetType(normalizedCategory);
             if (assetType) {
+              console.log(`   - Asset type mapped: ${assetType}`);
+              
+              // Upload 3D model file
               const base64Data = model3dUrl.split(',')[1];
               const binaryString = Buffer.from(base64Data, 'base64');
               
+              console.log(`   - Uploading 3D model file (${binaryString.length} bytes)...`);
               const modelUrl = await readyPlayerMeClient.uploadAssetFile(
                 binaryString,
                 `${itemName.replace(/\s+/g, '-')}.glb`,
@@ -198,8 +203,34 @@ router.post("/", authenticateToken, upload.array("image", 20), async (req: AuthR
               );
 
               if (modelUrl) {
-                const iconUrl = processedBase64Image || base64Image;
+                console.log(`   - 3D model uploaded: ${modelUrl}`);
+                
+                // Upload icon image file
+                const iconImage = processedBase64Image || base64Image;
+                const iconBase64Data = iconImage.split(',')[1];
+                const iconMimeType = iconImage.startsWith('data:image/png') ? 'image/png' : 'image/jpeg';
+                const iconBuffer = Buffer.from(iconBase64Data, 'base64');
+                
+                console.log(`   - Uploading icon image (${iconBuffer.length} bytes, ${iconMimeType})...`);
+                const iconUrl = await readyPlayerMeClient.uploadAssetFile(
+                  iconBuffer,
+                  `${itemName.replace(/\s+/g, '-')}-icon.${iconMimeType === 'image/png' ? 'png' : 'jpg'}`,
+                  iconMimeType
+                );
+
+              if (iconUrl) {
+                console.log(`   - Icon uploaded: ${iconUrl}`);
                 
+                console.log(`   - Creating asset with type: ${assetType}, gender: ${getAssetGender()}`);
+                console.log(`   - Asset data:`, {
+                  name: itemName,
+                  type: assetType,
+                  gender: getAssetGender(),
+                  modelUrl: modelUrl.substring(0, 100) + '...',
+                  iconUrl: iconUrl.substring(0, 100) + '...',
+                  organizationId: process.env.READY_PLAYER_ME_ORGANIZATION_ID?.substring(0, 10) + '...',
+                  applicationId: process.env.READY_PLAYER_ME_APPLICATION_ID?.substring(0, 10) + '...',
+                });
                 const asset = await readyPlayerMeClient.createAsset({
                   name: itemName,
                   type: assetType,
@@ -218,12 +249,38 @@ router.post("/", authenticateToken, upload.array("image", 20), async (req: AuthR
                 if (asset) {
                   savedItem.readyPlayerMeAssetId = asset.id;
                   await itemRepo.save(savedItem);
-                  console.log(`Created Ready Player Me asset: ${asset.id} for item ${savedItem.id}`);
+                  console.log(`✅ Created Ready Player Me asset: ${asset.id} for item ${savedItem.id}`);
+                } else {
+                  console.error(`❌ Failed to create Ready Player Me asset: createAsset returned null`);
+                  console.error(`   This usually means the API call failed. Check READY_API_KEY permissions.`);
                 }
+              } else {
+                console.error(`❌ Failed to upload icon image to Ready Player Me temporary storage`);
+                console.error(`   Check if READY_API_KEY has permission to upload files.`);
+              }
+              } else {
+                console.error(`❌ Failed to upload 3D model to Ready Player Me temporary storage`);
               }
+            } else {
+              console.warn(`⚠️ Could not map category "${normalizedCategory}" to a Ready Player Me asset type`);
             }
           } catch (assetError: any) {
-            console.warn(`Failed to create Ready Player Me asset for ${file.originalname}:`, assetError.message);
+            console.error(`❌ Error creating Ready Player Me asset for ${file.originalname}:`, assetError.message);
+            if (assetError.response) {
+              console.error(`   Response status: ${assetError.response.status}`);
+              console.error(`   Response data:`, JSON.stringify(assetError.response.data, null, 2));
+            }
+            if (assetError.stack) {
+              console.error(`   Stack trace:`, assetError.stack);
+            }
+          }
+        } else {
+          if (!model3dUrl) {
+            console.warn(`⚠️ Skipping Ready Player Me asset creation: no 3D model generated`);
+          } else if (!process.env.READY_PLAYER_ME_APPLICATION_ID) {
+            console.warn(`⚠️ Skipping Ready Player Me asset creation: READY_PLAYER_ME_APPLICATION_ID not set`);
+          } else if (!process.env.READY_PLAYER_ME_ORGANIZATION_ID) {
+            console.warn(`⚠️ Skipping Ready Player Me asset creation: READY_PLAYER_ME_ORGANIZATION_ID not set`);
           }
         }
 

src/utils/readyPlayerMe.ts

@@ -157,19 +157,38 @@ export class ReadyPlayerMeClient {
         contentType: mimetype,
       });
 
+      const headers = {
+        ...getHeaders(),
+        ...formData.getHeaders(),
+      };
+
+      console.log(`[Ready Player Me] Uploading file: ${filename} (${fileBuffer.length} bytes, ${mimetype})`);
       const response = await axios.post<{ data: { url: string } }>(
         `${READY_API_BASE}/temporary-media`,
         formData,
         {
-          headers: {
-            ...getHeaders(),
-            ...formData.getHeaders(),
-          },
+          headers,
+          maxContentLength: Infinity,
+          maxBodyLength: Infinity,
         }
       );
-      return response.data.data.url;
+      
+      if (response.data?.data?.url) {
+        console.log(`[Ready Player Me] File uploaded successfully: ${response.data.data.url}`);
+        return response.data.data.url;
+      } else {
+        console.error("[Ready Player Me] Upload response missing URL:", response.data);
+        return null;
+      }
     } catch (error: any) {
-      console.error("Error uploading asset file:", error.response?.data || error.message);
+      console.error("[Ready Player Me] Error uploading asset file:");
+      console.error("  Status:", error.response?.status);
+      console.error("  Status Text:", error.response?.statusText);
+      console.error("  Response Data:", JSON.stringify(error.response?.data, null, 2));
+      console.error("  Error Message:", error.message);
+      if (error.response?.data) {
+        console.error("  Full Error:", JSON.stringify(error.response.data, null, 2));
+      }
       return null;
     }
   }
@@ -189,6 +208,7 @@ export class ReadyPlayerMeClient {
     }>;
   }): Promise<ReadyPlayerMeAsset | null> {
     try {
+      console.log(`[Ready Player Me] Creating asset: ${data.name} (type: ${data.type}, gender: ${data.gender})`);
       const response = await axios.post<{ data: ReadyPlayerMeAsset }>(
         `${READY_API_BASE}/assets`,
         { data },
@@ -196,9 +216,23 @@ export class ReadyPlayerMeClient {
           headers: getHeaders(),
         }
       );
-      return response.data.data;
+      
+      if (response.data?.data) {
+        console.log(`[Ready Player Me] Asset created successfully: ${response.data.data.id}`);
+        return response.data.data;
+      } else {
+        console.error("[Ready Player Me] Create asset response missing data:", response.data);
+        return null;
+      }
     } catch (error: any) {
-      console.error("Error creating asset:", error.response?.data || error.message);
+      console.error("[Ready Player Me] Error creating asset:");
+      console.error("  Status:", error.response?.status);
+      console.error("  Status Text:", error.response?.statusText);
+      console.error("  Response Data:", JSON.stringify(error.response?.data, null, 2));
+      console.error("  Error Message:", error.message);
+      if (error.response?.data) {
+        console.error("  Full Error:", JSON.stringify(error.response.data, null, 2));
+      }
       return null;
     }
   }

stylegptUI

@@ -1 +1 @@
-Subproject commit 5739926b88e5287f4f5d33e0bf8f4ec7f9b92e2c
+Subproject commit 47bd250878e5dcecf1a829869686f27f8e79c560

test-ready-player-me.ts

@@ -0,0 +1,248 @@
+import dotenv from "dotenv";
+import { ReadyPlayerMeClient } from "./src/utils/readyPlayerMe";
+import fs from "fs";
+import path from "path";
+
+dotenv.config();
+
+const READY_API_KEY = process.env.READY_API_KEY;
+const READY_APPLICATION_ID = process.env.READY_PLAYER_ME_APPLICATION_ID;
+const READY_ORGANIZATION_ID = process.env.READY_PLAYER_ME_ORGANIZATION_ID;
+
+async function testReadyPlayerMeAPIs() {
+  console.log("=== Ready Player Me API Test Suite ===\n");
+
+  if (!READY_API_KEY) {
+    console.error("❌ READY_API_KEY not found in environment variables");
+    process.exit(1);
+  }
+
+  if (!READY_APPLICATION_ID) {
+    console.warn("⚠️  READY_PLAYER_ME_APPLICATION_ID not found - some tests will be skipped");
+  }
+
+  if (!READY_ORGANIZATION_ID) {
+    console.warn("⚠️  READY_PLAYER_ME_ORGANIZATION_ID not found - some tests will be skipped");
+  }
+
+  const client = new ReadyPlayerMeClient(READY_APPLICATION_ID);
+
+  let testGuestUserId: string | null = null;
+  let testAssetId: string | null = null;
+  let testAvatarId: string | null = null;
+
+  try {
+    console.log("1. Testing createGuestUser...");
+    if (READY_APPLICATION_ID) {
+      const guestUser = await client.createGuestUser(READY_APPLICATION_ID);
+      if (guestUser) {
+        testGuestUserId = guestUser.id;
+        console.log("✅ Guest user created:", {
+          id: guestUser.id,
+          applicationIds: guestUser.applicationIds,
+          createdAt: guestUser.createdAt,
+        });
+      } else {
+        console.log("❌ Failed to create guest user");
+      }
+    } else {
+      console.log("⏭️  Skipped (no APPLICATION_ID)");
+    }
+
+    console.log("\n2. Testing getAvatarGLB (URL generation)...");
+    const testAvatarIdForURL = "test-avatar-id-123";
+    const glbUrl = await client.getAvatarGLB(testAvatarIdForURL, {
+      quality: "high",
+      lod: 0,
+      textureFormat: "webp",
+    });
+    console.log("✅ GLB URL generated:", glbUrl);
+    console.log("   Expected format: https://avatars.readyplayer.me/{id}.glb?quality=high&lod=0&textureFormat=webp");
+
+    console.log("\n3. Testing getAvatar2DRender (URL generation)...");
+    const renderUrl = await client.getAvatar2DRender(testAvatarIdForURL, {
+      size: 400,
+      quality: 90,
+      camera: "portrait",
+    });
+    console.log("✅ 2D Render URL generated:", renderUrl);
+    console.log("   Expected format: https://models.readyplayer.me/{id}.png?size=400&quality=90&camera=portrait");
+
+    console.log("\n4. Testing getAvatarMetadata...");
+    if (testAvatarId) {
+      const metadata = await client.getAvatarMetadata(testAvatarId);
+      if (metadata) {
+        console.log("✅ Avatar metadata retrieved:", {
+          id: metadata.id,
+          url: metadata.url,
+        });
+      } else {
+        console.log("❌ Failed to get avatar metadata (avatar may not exist)");
+      }
+    } else {
+      console.log("⏭️  Skipped (no test avatar ID - create an avatar first)");
+      console.log("   To test this, create an avatar via the Profile page and use its ID");
+    }
+
+    console.log("\n5. Testing uploadAssetFile...");
+    const testImagePath = path.join(__dirname, "tits.jpeg");
+    let uploadedUrl: string | null = null;
+    
+    if (fs.existsSync(testImagePath)) {
+      const fileBuffer = fs.readFileSync(testImagePath);
+      uploadedUrl = await client.uploadAssetFile(
+        fileBuffer,
+        "test-upload.bin",
+        "application/octet-stream"
+      );
+      if (uploadedUrl) {
+        console.log("✅ File uploaded to temporary storage");
+        console.log("   URL:", uploadedUrl.substring(0, 100) + "...");
+        console.log("   Note: This URL expires after 24 hours");
+      } else {
+        console.log("❌ Failed to upload file");
+      }
+    } else {
+      console.log("⏭️  Skipped (test file not found)");
+    }
+
+    console.log("\n6. Testing createAsset...");
+    if (READY_ORGANIZATION_ID) {
+      if (!uploadedUrl) {
+        console.log("⚠️  Note: Asset creation requires a valid GLB file URL.");
+        console.log("   In production, this comes from 3D model generation.");
+        console.log("   Testing with a placeholder URL (will fail validation)...");
+      }
+      
+      const testModelUrl = uploadedUrl || "https://example.com/test-asset.glb";
+      const asset = await client.createAsset({
+        name: "Test Wardrobe Item",
+        type: "top",
+        gender: "neutral",
+        modelUrl: testModelUrl,
+        iconUrl: testModelUrl,
+        organizationId: READY_ORGANIZATION_ID,
+        locked: false,
+        applications: READY_APPLICATION_ID ? [{
+          id: READY_APPLICATION_ID,
+          organizationId: READY_ORGANIZATION_ID,
+          isVisibleInEditor: true,
+        }] : undefined,
+      });
+
+      if (asset) {
+        testAssetId = asset.id;
+        console.log("✅ Asset created:", {
+          id: asset.id,
+          name: asset.name,
+          type: asset.type,
+          gender: asset.gender,
+        });
+      } else {
+        if (uploadedUrl) {
+          console.log("❌ Failed to create asset (uploaded file may not be a valid GLB)");
+          console.log("   This is expected if the uploaded file is not a GLB model.");
+        } else {
+          console.log("❌ Failed to create asset (placeholder URL rejected)");
+        }
+      }
+    } else {
+      console.log("⏭️  Skipped (no ORGANIZATION_ID)");
+    }
+
+    console.log("\n7. Testing listAssets...");
+    const assetsList = await client.listAssets({
+      limit: 5,
+      page: 1,
+    });
+    if (assetsList) {
+      console.log("✅ Assets listed:", {
+        count: assetsList.data.length,
+        totalPages: assetsList.pagination?.totalPages || "unknown",
+        assets: assetsList.data.map(a => ({
+          id: a.id,
+          name: a.name,
+          type: a.type,
+        })),
+      });
+    } else {
+      console.log("❌ Failed to list assets");
+    }
+
+    console.log("\n8. Testing equipAsset (single)...");
+    if (testAvatarId && testAssetId) {
+      const equipSuccess = await client.equipAsset(testAvatarId, testAssetId);
+      if (equipSuccess) {
+        console.log("✅ Asset equipped to avatar");
+        
+        console.log("\n9. Testing unequipAsset...");
+        const unequipSuccess = await client.unequipAsset(testAvatarId, testAssetId);
+        if (unequipSuccess) {
+          console.log("✅ Asset unequipped from avatar");
+        } else {
+          console.log("❌ Failed to unequip asset");
+        }
+      } else {
+        console.log("❌ Failed to equip asset");
+      }
+    } else {
+      console.log("⏭️  Skipped (no test avatar ID or asset ID)");
+      console.log("   To test this:");
+      console.log("   1. Create an avatar via Profile page");
+      console.log("   2. Upload a wardrobe item (creates an asset)");
+      console.log("   3. Use those IDs to test equip/unequip");
+    }
+
+    console.log("\n10. Testing equipAsset (multiple assets)...");
+    if (testAvatarId && testAssetId) {
+      const equipPromises = [testAssetId].map(assetId => 
+        client.equipAsset(testAvatarId, assetId)
+      );
+      const results = await Promise.all(equipPromises);
+      const allSuccess = results.every(r => r === true);
+      if (allSuccess) {
+        console.log("✅ Multiple assets equipped successfully");
+      } else {
+        console.log("❌ Some assets failed to equip");
+      }
+    } else {
+      console.log("⏭️  Skipped (no test avatar ID or asset ID)");
+    }
+
+    console.log("\n11. Testing getAuthToken...");
+    if (testGuestUserId) {
+      const token = await client.getAuthToken(testGuestUserId, "readyplayerme");
+      if (token) {
+        console.log("✅ Auth token retrieved:", token.substring(0, 20) + "...");
+      } else {
+        console.log("❌ Failed to get auth token (may require specific partner permissions)");
+        console.log("   This is normal if your API key doesn't have token generation permissions");
+      }
+    } else {
+      console.log("⏭️  Skipped (no guest user ID)");
+    }
+
+    console.log("\n=== Test Summary ===");
+    console.log("✅ URL generation tests passed");
+    console.log("✅ API connectivity verified");
+    if (testGuestUserId) {
+      console.log("✅ Guest user creation: PASSED");
+    }
+    if (testAssetId) {
+      console.log("✅ Asset creation: PASSED");
+    }
+    console.log("\nNote: Some tests require real avatar/asset IDs from your application.");
+    console.log("      Run the full application flow to test equip/unequip functionality.");
+
+  } catch (error: any) {
+    console.error("\n❌ Test suite error:", error.message);
+    if (error.response) {
+      console.error("   Response status:", error.response.status);
+      console.error("   Response data:", JSON.stringify(error.response.data, null, 2));
+    }
+    process.exit(1);
+  }
+}
+
+testReadyPlayerMeAPIs();
+

test-upload.sh

@@ -0,0 +1,92 @@
+#!/bin/bash
+
+API_BASE_URL="https://nexusbert-stylegpt-milestone2.hf.space"
+EMAIL="omezirizion@gmail.com"
+PASSWORD="Amazon1@"
+IMAGE_FILE="tits.jpeg"
+
+echo "=== Testing Wardrobe Upload with tits.jpeg ==="
+echo ""
+
+# Step 1: Login
+echo "1. Logging in..."
+LOGIN_RESPONSE=$(curl -s -X POST "${API_BASE_URL}/api/auth/login" \
+  -H "Content-Type: application/json" \
+  -d "{\"email\":\"${EMAIL}\",\"password\":\"${PASSWORD}\"}")
+
+echo "Login response: $LOGIN_RESPONSE"
+echo ""
+
+# Extract token (basic extraction, might need adjustment based on response format)
+TOKEN=$(echo $LOGIN_RESPONSE | grep -o '"token":"[^"]*' | cut -d'"' -f4)
+
+if [ -z "$TOKEN" ]; then
+  echo "❌ Failed to get token. Response: $LOGIN_RESPONSE"
+  exit 1
+fi
+
+echo "✅ Login successful"
+echo "Token: ${TOKEN:0:20}..."
+echo ""
+
+# Step 2: Check if file exists
+if [ ! -f "$IMAGE_FILE" ]; then
+  echo "❌ File not found: $IMAGE_FILE"
+  exit 1
+fi
+
+echo "2. Found image file: $IMAGE_FILE"
+echo ""
+
+# Step 3: Upload
+echo "3. Uploading image (this may take a while)..."
+echo "   - Background removal"
+echo "   - FashionClip classification"
+echo "   - 3D model generation"
+echo "   - Ready Player Me asset creation"
+echo ""
+
+UPLOAD_RESPONSE=$(curl -s -X POST "${API_BASE_URL}/api/upload" \
+  -H "Authorization: Bearer ${TOKEN}" \
+  -F "image=@${IMAGE_FILE}" \
+  -F "style=casual" \
+  --max-time 300)
+
+echo "Upload response:"
+echo "$UPLOAD_RESPONSE" | jq '.' 2>/dev/null || echo "$UPLOAD_RESPONSE"
+echo ""
+
+# Check if upload was successful
+if echo "$UPLOAD_RESPONSE" | grep -q '"success":true'; then
+  echo "✅ Upload successful!"
+  
+  # Extract and display key information
+  if command -v jq &> /dev/null; then
+    echo ""
+    echo "📊 Results:"
+    COUNT=$(echo "$UPLOAD_RESPONSE" | jq -r '.count // "N/A"')
+    echo "   - Items uploaded: $COUNT"
+    
+    if [ "$COUNT" != "null" ] && [ "$COUNT" != "N/A" ]; then
+      ITEM_NAME=$(echo "$UPLOAD_RESPONSE" | jq -r '.items[0].name // "N/A"')
+      CATEGORY=$(echo "$UPLOAD_RESPONSE" | jq -r '.items[0].category // "N/A"')
+      STYLE=$(echo "$UPLOAD_RESPONSE" | jq -r '.items[0].style // "N/A"')
+      COLOR=$(echo "$UPLOAD_RESPONSE" | jq -r '.items[0].color // "N/A"')
+      HAS_3D=$(echo "$UPLOAD_RESPONSE" | jq -r 'if .items[0].model3dUrl then "Yes" else "No" end')
+      ASSET_ID=$(echo "$UPLOAD_RESPONSE" | jq -r '.items[0].readyPlayerMeAssetId // "N/A"')
+      ITEM_ID=$(echo "$UPLOAD_RESPONSE" | jq -r '.items[0].id // "N/A"')
+      
+      echo "   - Item name: $ITEM_NAME"
+      echo "   - Category: $CATEGORY"
+      echo "   - Style: $STYLE"
+      echo "   - Color: $COLOR"
+      echo "   - Has 3D model: $HAS_3D"
+      echo "   - Ready Player Me Asset ID: $ASSET_ID"
+      echo "   - Item ID: $ITEM_ID"
+    fi
+  fi
+else
+  echo "❌ Upload failed"
+  exit 1
+fi
+

test-upload.ts

@@ -0,0 +1,111 @@
+import axios from "axios";
+import FormData from "form-data";
+import fs from "fs";
+import path from "path";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const API_BASE_URL = process.env.API_URL || "https://nexusbert-stylegpt-milestone2.hf.space";
+const TEST_EMAIL = "omezirizion@gmail.com";
+const TEST_PASSWORD = "Amazon1@";
+
+async function testUpload() {
+  console.log("=== Testing Wardrobe Upload with tits.jpeg ===\n");
+
+  try {
+    // Step 1: Login to get token
+    console.log("1. Logging in...");
+    const loginResponse = await axios.post(`${API_BASE_URL}/api/auth/login`, {
+      email: TEST_EMAIL,
+      password: TEST_PASSWORD,
+    });
+
+    if (!loginResponse.data.success || !loginResponse.data.token) {
+      console.error("❌ Login failed:", loginResponse.data.error);
+      process.exit(1);
+    }
+
+    const token = loginResponse.data.token;
+    console.log("✅ Login successful\n");
+
+    // Step 2: Check if file exists
+    const imagePath = path.join(__dirname, "tits.jpeg");
+    if (!fs.existsSync(imagePath)) {
+      console.error(`❌ File not found: ${imagePath}`);
+      process.exit(1);
+    }
+    console.log(`2. Found image file: ${imagePath}\n`);
+
+    // Step 3: Create form data
+    console.log("3. Preparing upload...");
+    const formData = new FormData();
+    formData.append("image", fs.createReadStream(imagePath), {
+      filename: "tits.jpeg",
+      contentType: "image/jpeg",
+    });
+    formData.append("style", "casual");
+
+    console.log("✅ Form data prepared\n");
+
+    // Step 4: Upload
+    console.log("4. Uploading image (this may take a while)...");
+    console.log("   - Background removal");
+    console.log("   - FashionClip classification");
+    console.log("   - 3D model generation");
+    console.log("   - Ready Player Me asset creation\n");
+
+    const uploadResponse = await axios.post(
+      `${API_BASE_URL}/api/upload`,
+      formData,
+      {
+        headers: {
+          ...formData.getHeaders(),
+          Authorization: `Bearer ${token}`,
+        },
+        maxContentLength: Infinity,
+        maxBodyLength: Infinity,
+        timeout: 300000, // 5 minutes timeout
+      }
+    );
+
+    if (uploadResponse.data.success) {
+      console.log("✅ Upload successful!\n");
+      console.log("📊 Results:");
+      console.log(`   - Items uploaded: ${uploadResponse.data.count}`);
+      if (uploadResponse.data.items && uploadResponse.data.items.length > 0) {
+        const item = uploadResponse.data.items[0];
+        console.log(`   - Item name: ${item.name}`);
+        console.log(`   - Category: ${item.category}`);
+        console.log(`   - Style: ${item.style}`);
+        console.log(`   - Color: ${item.color || "N/A"}`);
+        console.log(`   - Has 3D model: ${item.model3dUrl ? "Yes" : "No"}`);
+        console.log(`   - Ready Player Me Asset ID: ${item.readyPlayerMeAssetId || "N/A"}`);
+        console.log(`   - Item ID: ${item.id}`);
+      }
+      if (uploadResponse.data.failed && uploadResponse.data.failed > 0) {
+        console.log(`   - Failed files: ${uploadResponse.data.failed}`);
+        if (uploadResponse.data.failedFiles) {
+          console.log(`     ${uploadResponse.data.failedFiles.join(", ")}`);
+        }
+      }
+    } else {
+      console.error("❌ Upload failed:", uploadResponse.data.error);
+      process.exit(1);
+    }
+  } catch (error: any) {
+    console.error("\n❌ Error during upload test:");
+    if (error.response) {
+      console.error(`   Status: ${error.response.status}`);
+      console.error(`   Error: ${JSON.stringify(error.response.data, null, 2)}`);
+    } else if (error.request) {
+      console.error("   No response received. Is the server running?");
+    } else {
+      console.error(`   ${error.message}`);
+    }
+    process.exit(1);
+  }
+}
+
+testUpload();
+