From f44a07b1a9b87d658c160c8884edfa458b31aa60 Mon Sep 17 00:00:00 2001
From: AI Bot <bot@digifox.live>
Date: Mon, 5 Oct 2026 15:14:21 +0530
Subject: [PATCH] fix: scale down and compress large AI edit images to WebP to
 prevent 413 payload too large errors

---
 src/components/ImageTo3DModal.tsx | 27 ++++++++++++++++++++++++++-
 src/components/UVEditor.tsx       | 16 ++++++++++++----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageTo3DModal.tsx b/src/components/ImageTo3DModal.tsx
index ad487fa..1999842 100644
--- a/src/components/ImageTo3DModal.tsx
+++ b/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);
       
diff --git a/src/components/UVEditor.tsx b/src/components/UVEditor.tsx
index 7231d31..4b72481 100644
--- a/src/components/UVEditor.tsx
+++ b/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}"