closr

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -28,7 +28,10 @@ Create a Pokémon-style monster that transforms the object into an imaginative c
 
 Guidelines:
 - Take the object's key visual elements (colors, shapes, materials) and incorporate them into a creature design
-- Add creature features like eyes, limbs, mouth, or other body parts that make sense
+- Add eyes (can be glowing, mechanical, multiple, etc.) positioned where they make sense
+- Include limbs (legs, arms, wings, tentacles) that grow from or replace parts of the object
+- Add a mouth, beak, or feeding apparatus if appropriate
+- Add creature elements like tail, fins, claws, or horns where fitting
 - The object should be recognizable but creatively interpreted
 
 Rarity assessment: Common objects = weaker monsters. Unique/rare objects = stronger monsters.
@@ -42,7 +45,7 @@ Include:
   const IMAGE_GENERATION_PROMPT = (concept: string) => `Convert this monster concept into a clear and succinct description of its appearance:
 "${concept}"
 
-Include all of its visual details, format the description as a single long sentence.`;
+Include all of its visual details, most importantly include its creature features, format the description as a single long sentence.`;
   
   const MONSTER_STATS_PROMPT = (concept: string) => `Convert the following monster concept into a JSON object with stats:
 

src/lib/utils/imageProcessing.ts

@@ -1,5 +1,6 @@
 /**
  * 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
  */
 export async function makeWhiteTransparent(imageUrl: string): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -24,23 +25,99 @@ export async function makeWhiteTransparent(imageUrl: string): Promise<string> {
       // 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;
       
-      // Define white threshold (adjust if needed)
-      const whiteThreshold = 240; // RGB values above this are considered "white"
+      // Create a mask to track which pixels to make transparent
+      const mask = new Uint8Array(width * height);
       
-      // Make white pixels transparent
-      for (let i = 0; i < data.length; i += 4) {
+      // 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 if pixel is white-ish
-        if (r > whiteThreshold && g > whiteThreshold && b > whiteThreshold) {
-          // Calculate how "white" this pixel is (0-1)
-          const whiteness = Math.min(r, g, b) / 255;
+        // 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;
           
-          // Make it transparent based on whiteness
-          data[i + 3] = Math.floor((1 - whiteness) * 255);
+          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 mask
+      for (let i = 0; i < mask.length; i++) {
+        if (mask[i]) {
+          data[i * 4 + 3] = 0; // Set alpha to 0
         }
       }