rm background

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -329,7 +329,8 @@ Write your response within \`\`\`json\`\`\``;
         // Process the image to make white background transparent
         console.log('Processing image for transparency...');
         try {
-          const transparentBase64 = await makeWhiteTransparent(url);
+          const largeWhiteSegmentThreshold = 0.1; // 10% of image area
+          const transparentBase64 = await makeWhiteTransparent(url, largeWhiteSegmentThreshold);
           state.monsterImage = {
             imageUrl: url,
             imageData: transparentBase64,

src/lib/utils/imageProcessing.ts

@@ -1,8 +1,9 @@
 /**
  * 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): Promise<string> {
+export async function makeWhiteTransparent(imageUrl: string, largeSegmentThreshold: number = 0.1): Promise<string> {
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.crossOrigin = 'anonymous';
@@ -114,13 +115,77 @@ export async function makeWhiteTransparent(imageUrl: string): Promise<string> {
         }
       }
       
-      // Apply transparency based on mask
+      // 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);