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 = ({ isOpen, onClose, setCleanedImageFile(null); setCleanedImagePreview(null); try { - const base64 = await fileToDataUrl(fileToClean); + const base64 = await new Promise((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}"