better bck rm

package-lock.json

@@ -8,6 +8,7 @@
       "name": "svelte",
       "version": "0.0.0",
       "dependencies": {
+        "@imgly/background-removal": "^1.7.0",
         "dexie": "^4.0.11"
       },
       "devDependencies": {
@@ -480,6 +481,20 @@
         "node": ">=18"
       }
     },
+    "node_modules/@imgly/background-removal": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@imgly/background-removal/-/background-removal-1.7.0.tgz",
+      "integrity": "sha512-/1ZryrMYg2ckIvJKoTu5Np50JfYMVffDMlVmppw/BdbN3pBTN7e6stI5/7E/LVh9DDzz6J588s7sWqul3fy5wA==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "lodash-es": "^4.17.21",
+        "ndarray": "~1.0.0",
+        "zod": "^3.23.8"
+      },
+      "peerDependencies": {
+        "onnxruntime-web": "1.21.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.12",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
@@ -526,6 +541,80 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.45.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.45.1.tgz",
@@ -891,7 +980,6 @@
       "version": "24.0.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.14.tgz",
       "integrity": "sha512-4zXMWD91vBLGRtHK3YbIoFMia+1nqEz72coM42C5ETjnNCa/heoj7NT1G67iAfOqMmcfhuCZ4uNpyz8EjlAejw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.8.0"
@@ -1309,6 +1397,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/flatbuffers": {
+      "version": "25.2.10",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.2.10.tgz",
+      "integrity": "sha512-7JlN9ZvLDG1McO3kbX0k4v+SUAg48L1rIwEvN6ZQl/eCtgJz9UylTMzE9wrmYrcorgxm3CX/3T/w5VAub99UUw==",
+      "license": "Apache-2.0",
+      "peer": true
+    },
     "node_modules/flatted": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
@@ -1331,6 +1426,13 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/guid-typescript": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",
+      "integrity": "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ==",
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/happy-dom": {
       "version": "18.0.1",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-18.0.1.tgz",
@@ -1363,6 +1465,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/iota-array": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
+      "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==",
+      "license": "MIT"
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "license": "MIT"
+    },
     "node_modules/is-reference": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -1397,6 +1511,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0",
+      "peer": true
+    },
     "node_modules/loupe": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.4.tgz",
@@ -1460,6 +1587,38 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/ndarray": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz",
+      "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==",
+      "license": "MIT",
+      "dependencies": {
+        "iota-array": "^1.0.0",
+        "is-buffer": "^1.0.2"
+      }
+    },
+    "node_modules/onnxruntime-common": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.21.0.tgz",
+      "integrity": "sha512-Q632iLLrtCAVOTO65dh2+mNbQir/QNTVBG3h/QdZBpns7mZ0RYbLRBgGABPbpU9351AgYy7SJf1WaeVwMrBFPQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/onnxruntime-web": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.21.0.tgz",
+      "integrity": "sha512-adzOe+7uI7lKz6pQNbAsLMQd2Fq5Jhmoxd8LZjJr8m3KvbFyiYyRxRiC57/XXD+jb18voppjeGAjoZmskXG+7A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flatbuffers": "^25.1.24",
+        "guid-typescript": "^1.0.9",
+        "long": "^5.2.3",
+        "onnxruntime-common": "1.21.0",
+        "platform": "^1.3.6",
+        "protobufjs": "^7.2.4"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -1497,6 +1656,13 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -1526,6 +1692,31 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.3.tgz",
+      "integrity": "sha512-sildjKwVqOI2kmFDiXQ6aEB0fjYTafpEvIBs8tOR8qI4spuL9OPROLVu2qZqi/xgCfsHIwVqlaF8JBjWFHnKbw==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1791,7 +1982,6 @@
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
       "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/vite": {
@@ -2018,6 +2208,15 @@
       "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
       "dev": true,
       "license": "MIT"
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }

package.json

@@ -25,6 +25,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@imgly/background-removal": "^1.7.0",
     "dexie": "^4.0.11"
   }
 }

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -4,7 +4,7 @@
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
   import MonsterResult from './MonsterResult.svelte';
-  import { makeWhiteTransparent } from '$lib/utils/imageProcessing';
+  import { removeBackground } from '$lib/utils/professionalImageProcessing';
   import { saveMonster } from '$lib/db/monsters';
   import { extractPicletMetadata } from '$lib/services/picletMetadata';
   import { savePicletInstance } from '$lib/db/piclets';
@@ -259,19 +259,19 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       else if (image && image.path) url = image.path;
       
       if (url) {
-        // Process the image to make white background transparent
-        console.log('Processing image for transparency...');
+        // Process the image to remove background using professional AI method
+        console.log('Processing image for background removal...');
         try {
-          const largeWhiteSegmentThreshold = 0.1; // 10% of image area
-          const transparentBase64 = await makeWhiteTransparent(url, largeWhiteSegmentThreshold);
+          const transparentBase64 = await removeBackground(url);
           state.monsterImage = {
             imageUrl: url,
             imageData: transparentBase64,
             seed: usedSeed,
             prompt: state.imagePrompt
           };
+          console.log('Background removal completed successfully');
         } catch (processError) {
-          console.error('Failed to process image for transparency:', processError);
+          console.error('Failed to process image for background removal:', processError);
           // Fallback to original image
           state.monsterImage = {
             imageUrl: url,

src/lib/utils/imageProcessing.ts

@@ -1,236 +0,0 @@
-/**
- * Converts an image URL to a base64 data URL with white background made transparent
- * Uses flood-fill from edges to only remove background white, preserving internal white
- * Also removes large white segments that exceed the threshold percentage
- */
-export async function makeWhiteTransparent(imageUrl: string, largeSegmentThreshold: number = 0.013): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      
-      if (!ctx) {
-        reject(new Error('Failed to get canvas context'));
-        return;
-      }
-      
-      canvas.width = img.width;
-      canvas.height = img.height;
-      
-      // Draw the image
-      ctx.drawImage(img, 0, 0);
-      
-      // Get image data
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      const data = imageData.data;
-      const width = canvas.width;
-      const height = canvas.height;
-      
-      // Create a mask to track which pixels to make transparent
-      const mask = new Uint8Array(width * height);
-      
-      // Define white threshold with some tolerance
-      const whiteThreshold = 240;
-      const tolerance = 20;
-      
-      // Helper function to check if a pixel is white-ish
-      const isWhite = (index: number): boolean => {
-        const i = index * 4;
-        const r = data[i];
-        const g = data[i + 1];
-        const b = data[i + 2];
-        return r > whiteThreshold && g > whiteThreshold && b > whiteThreshold;
-      };
-      
-      // Helper function to check if colors are similar
-      const colorSimilar = (i1: number, i2: number): boolean => {
-        const idx1 = i1 * 4;
-        const idx2 = i2 * 4;
-        return Math.abs(data[idx1] - data[idx2]) < tolerance &&
-               Math.abs(data[idx1 + 1] - data[idx2 + 1]) < tolerance &&
-               Math.abs(data[idx1 + 2] - data[idx2 + 2]) < tolerance;
-      };
-      
-      // Flood fill from edges
-      const queue: number[] = [];
-      
-      // Add all edge pixels that are white to the queue
-      // Top and bottom edges
-      for (let x = 0; x < width; x++) {
-        if (isWhite(x)) {
-          queue.push(x);
-          mask[x] = 1;
-        }
-        const bottomIdx = (height - 1) * width + x;
-        if (isWhite(bottomIdx)) {
-          queue.push(bottomIdx);
-          mask[bottomIdx] = 1;
-        }
-      }
-      
-      // Left and right edges
-      for (let y = 1; y < height - 1; y++) {
-        const leftIdx = y * width;
-        if (isWhite(leftIdx)) {
-          queue.push(leftIdx);
-          mask[leftIdx] = 1;
-        }
-        const rightIdx = y * width + width - 1;
-        if (isWhite(rightIdx)) {
-          queue.push(rightIdx);
-          mask[rightIdx] = 1;
-        }
-      }
-      
-      // Flood fill
-      while (queue.length > 0) {
-        const idx = queue.pop()!;
-        const x = idx % width;
-        const y = Math.floor(idx / width);
-        
-        // Check 4 neighbors
-        const neighbors = [
-          { dx: -1, dy: 0 }, // left
-          { dx: 1, dy: 0 },  // right
-          { dx: 0, dy: -1 }, // up
-          { dx: 0, dy: 1 }   // down
-        ];
-        
-        for (const { dx, dy } of neighbors) {
-          const nx = x + dx;
-          const ny = y + dy;
-          
-          if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
-            const nIdx = ny * width + nx;
-            
-            // If not already marked and color is similar to current pixel
-            if (!mask[nIdx] && isWhite(nIdx) && colorSimilar(idx, nIdx)) {
-              mask[nIdx] = 1;
-              queue.push(nIdx);
-            }
-          }
-        }
-      }
-      
-      // Apply transparency based on edge flood fill mask
-      for (let i = 0; i < mask.length; i++) {
-        if (mask[i]) {
-          data[i * 4 + 3] = 0; // Set alpha to 0
-        }
-      }
-      
-      // Now detect and remove large white segments
-      const totalPixels = width * height;
-      const segmentMask = new Uint8Array(width * height);
-      const visited = new Uint8Array(width * height);
-      
-      // Find all white segments using flood fill
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const idx = y * width + x;
-          
-          // Skip if already transparent, visited, or not white
-          if (mask[idx] || visited[idx] || !isWhite(idx)) continue;
-          
-          // Start flood fill for this white segment
-          const segmentPixels: number[] = [];
-          const segmentQueue: number[] = [idx];
-          visited[idx] = 1;
-          
-          while (segmentQueue.length > 0) {
-            const currentIdx = segmentQueue.pop()!;
-            segmentPixels.push(currentIdx);
-            
-            const cx = currentIdx % width;
-            const cy = Math.floor(currentIdx / width);
-            
-            // Check 4 neighbors
-            const neighbors = [
-              { dx: -1, dy: 0 }, { dx: 1, dy: 0 },
-              { dx: 0, dy: -1 }, { dx: 0, dy: 1 }
-            ];
-            
-            for (const { dx, dy } of neighbors) {
-              const nx = cx + dx;
-              const ny = cy + dy;
-              
-              if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
-                const nIdx = ny * width + nx;
-                
-                if (!visited[nIdx] && !mask[nIdx] && isWhite(nIdx) && colorSimilar(currentIdx, nIdx)) {
-                  visited[nIdx] = 1;
-                  segmentQueue.push(nIdx);
-                }
-              }
-            }
-          }
-          
-          // Check if this segment is larger than threshold
-          const segmentSize = segmentPixels.length / totalPixels;
-          if (segmentSize > largeSegmentThreshold) {
-            // Mark all pixels in this segment for removal
-            for (const pixelIdx of segmentPixels) {
-              segmentMask[pixelIdx] = 1;
-            }
-          }
-        }
-      }
-      
-      // Apply transparency to large segments
-      for (let i = 0; i < segmentMask.length; i++) {
-        if (segmentMask[i]) {
-          data[i * 4 + 3] = 0; // Set alpha to 0
-        }
-      }
-      
-      // Put the modified image data back
-      ctx.putImageData(imageData, 0, 0);
-      
-      // Convert to base64
-      const base64 = canvas.toDataURL('image/png');
-      resolve(base64);
-    };
-    
-    img.onerror = () => {
-      reject(new Error('Failed to load image'));
-    };
-    
-    img.src = imageUrl;
-  });
-}
-
-/**
- * Fetches an image from URL and converts it to base64
- */
-export async function imageUrlToBase64(imageUrl: string): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      
-      if (!ctx) {
-        reject(new Error('Failed to get canvas context'));
-        return;
-      }
-      
-      canvas.width = img.width;
-      canvas.height = img.height;
-      ctx.drawImage(img, 0, 0);
-      
-      const base64 = canvas.toDataURL('image/png');
-      resolve(base64);
-    };
-    
-    img.onerror = () => {
-      reject(new Error('Failed to load image'));
-    };
-    
-    img.src = imageUrl;
-  });
-}

src/lib/utils/professionalImageProcessing.ts

@@ -0,0 +1,152 @@
+/**
+ * Professional background removal using industry-standard libraries
+ * This replaces the custom algorithm with proven solutions
+ */
+
+import { removeBackground as removeBackgroundLib } from '@imgly/background-removal';
+
+// Type definitions for the background removal library
+interface BackgroundRemovalConfig {
+    model?: 'small' | 'medium' | 'large';
+    output?: {
+        format?: string;
+        quality?: number;
+    };
+    debug?: boolean;
+}
+
+/**
+ * Remove background using AI-powered background removal
+ * This is the preferred method for high-quality results
+ */
+export async function removeBackgroundAI(imageUrl: string): Promise<string> {
+    try {
+        // Fetch the image as a blob
+        const response = await fetch(imageUrl);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch image: ${response.statusText}`);
+        }
+        const imageBlob = await response.blob();
+        
+        // Remove background using AI (using default configuration for simplicity)
+        const resultBlob = await removeBackgroundLib(imageBlob);
+        
+        // Convert result blob to data URL
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result as string);
+            reader.onerror = () => reject(new Error('Failed to convert result to data URL'));
+            reader.readAsDataURL(resultBlob);
+        });
+        
+    } catch (error) {
+        console.error('AI background removal failed:', error);
+        throw new Error(`Background removal failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+}
+
+/**
+ * Simple fallback method for basic white background removal
+ * Use this when the AI method is not available
+ */
+export async function removeWhiteBackgroundSimple(imageUrl: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            
+            if (!ctx) {
+                reject(new Error('Failed to get canvas context'));
+                return;
+            }
+            
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
+            
+            // Simple white background removal
+            const whiteThreshold = 240;
+            for (let i = 0; i < data.length; i += 4) {
+                const r = data[i];
+                const g = data[i + 1];
+                const b = data[i + 2];
+                
+                // If pixel is close to white, make it transparent
+                if (r > whiteThreshold && g > whiteThreshold && b > whiteThreshold) {
+                    data[i + 3] = 0; // Set alpha to 0
+                }
+            }
+            
+            ctx.putImageData(imageData, 0, 0);
+            resolve(canvas.toDataURL('image/png'));
+        };
+        
+        img.onerror = () => {
+            reject(new Error('Failed to load image'));
+        };
+        
+        img.src = imageUrl;
+    });
+}
+
+/**
+ * Main function that tries AI method first, then falls back to simple method
+ * This provides the best results while maintaining compatibility
+ */
+export async function removeBackground(imageUrl: string): Promise<string> {
+    try {
+        // Try AI method first
+        return await removeBackgroundAI(imageUrl);
+    } catch (aiError) {
+        console.warn('AI background removal failed, falling back to simple method:', aiError);
+        
+        try {
+            // Fallback to simple method
+            return await removeWhiteBackgroundSimple(imageUrl);
+        } catch (fallbackError) {
+            console.error('All background removal methods failed:', fallbackError);
+            throw new Error('Background removal failed with all methods');
+        }
+    }
+}
+
+/**
+ * Check if the AI background removal library is available
+ */
+export async function isAIBackgroundRemovalAvailable(): Promise<boolean> {
+    return true; // Library is now installed as a dependency
+}
+
+/**
+ * Batch process multiple images with progress callback
+ */
+export async function removeBackgroundBatch(
+    imageUrls: string[], 
+    onProgress?: (completed: number, total: number, currentImage: string) => void
+): Promise<{ url: string; result?: string; error?: string }[]> {
+    const results: { url: string; result?: string; error?: string }[] = [];
+    
+    for (let i = 0; i < imageUrls.length; i++) {
+        const imageUrl = imageUrls[i];
+        
+        try {
+            const result = await removeBackground(imageUrl);
+            results.push({ url: imageUrl, result });
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            results.push({ url: imageUrl, error: errorMessage });
+        }
+        
+        if (onProgress) {
+            onProgress(i + 1, imageUrls.length, imageUrl);
+        }
+    }
+    
+    return results;
+}