fix: scale down and compress large AI edit images to WebP to prevent 413 payload too large errors

src/components/ImageTo3DModal.tsx

@@ -96,7 +96,32 @@ export const ImageTo3DModal: React.FC<ImageTo3DModalProps> = ({ isOpen, onClose,
     setCleanedImageFile(null);
     setCleanedImagePreview(null);
     try {
-      const base64 = await fileToDataUrl(fileToClean);
+      const base64 = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const img = new Image();
+          img.onload = () => {
+            const canvas = document.createElement('canvas');
+            // Scale down if too large to fit in 1MB limit safely
+            let { width, height } = img;
+            const maxSize = 1024;
+            if (width > maxSize || height > maxSize) {
+              const ratio = Math.min(maxSize / width, maxSize / height);
+              width = Math.round(width * ratio);
+              height = Math.round(height * ratio);
+            }
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            ctx?.drawImage(img, 0, 0, width, height);
+            resolve(canvas.toDataURL('image/webp', 0.8));
+          };
+          img.onerror = reject;
+          img.src = e.target?.result as string;
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(fileToClean);
+      });
       const token = localStorage.getItem('auth_token') || '';
       const newUrl = await editUVLayer("Remove the background and make it solid transparent or white. Also carefully remove all text, labels, logos, and stickers, keeping the product as a perfectly clean, plain, unbranded object.", base64, token);
       

src/components/UVEditor.tsx

@@ -62,12 +62,20 @@ export function UVEditor({ onClose, onSave, targetObject, loadedModel, sceneObje
     setIsEditingLayer(true);
     try {
       const tempCanvas = document.createElement('canvas');
-      tempCanvas.width = layer.img.width;
-      tempCanvas.height = layer.img.height;
+      let { width, height } = layer.img;
+      const maxSize = 1024;
+      if (width > maxSize || height > maxSize) {
+        const ratio = Math.min(maxSize / width, maxSize / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+      }
+      tempCanvas.width = width;
+      tempCanvas.height = height;
       const ctx = tempCanvas.getContext('2d');
       if (ctx) {
-        ctx.drawImage(layer.img, 0, 0);
-        const base64 = tempCanvas.toDataURL('image/png');
+        ctx.drawImage(layer.img, 0, 0, width, height);
+        // Use webp to preserve transparency while significantly reducing payload size
+        const base64 = tempCanvas.toDataURL('image/webp', 0.8);
         
         const fullPrompt = `The user has provided an image layer. Please apply the following edit exactly as requested, while strictly maintaining the EXACT same aspect ratio, resolution, and general structure of the original image. 
 User Prompt: "${aiPrompt}"