🔨 Improve logo generation quality and consistency

Fix patchy/pixelated edges by removing aggressive color quantization and implementing gentler greenscreen removal. Extract icons from wordmark instead of generating separately to ensure perfect visual consistency. Generate separate icon-light.png and icon-dark.png files for better theme support.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: Miyamura80

docs/public/favicon.ico

@@ -22,61 +22,33 @@ class WordmarkDescription(dspy.Signature):
     )
 
 
-class IconDescription(dspy.Signature):
-    """Generate a creative description for a square icon (no text). The icon should be clean, modern, and recognizable."""
-
-    project_name: str = dspy.InputField()
-    suggestion: str = dspy.InputField(
-        desc="Optional suggestion to guide the icon description generation"
-    )
-    is_dark_mode: bool = dspy.InputField(
-        desc="Whether this is for dark mode (light colors) or light mode (dark colors)"
-    )
-    icon_description: str = dspy.OutputField(
-        desc="A creative description for a square icon without any text. Focus on simple shapes, clean lines, and a professional look."
-    )
-
-
 client = genai.Client(api_key=global_config.GEMINI_API_KEY)
 
 
 def remove_greenscreen(img: Image.Image, tolerance: int = 60) -> Image.Image:
-    """Remove lime green/greenscreen background using aggressive chroma key removal."""
+    """Remove greenscreen with better edge preservation."""
     if img.mode != "RGBA":
         img = img.convert("RGBA")
 
     data = np.array(img, dtype=np.float32)
     r, g, b, alpha = data[:, :, 0], data[:, :, 1], data[:, :, 2], data[:, :, 3]
 
-    # Step 1: Identify obvious greenscreen pixels (more aggressive threshold)
-    green_high = g > 160  # Lowered from 180
-    green_dominant = (g > r + tolerance) & (g > b + tolerance)
-    red_blue_low = (r < 200) & (b < 200)  # Raised from 180
-    greenscreen_mask = green_high & green_dominant & red_blue_low
+    # More conservative greenscreen detection
+    green_high = g > 180  # Higher threshold
+    green_dominant = (g > r + tolerance + 20) & (g > b + tolerance + 20)
+    greenscreen_mask = green_high & green_dominant
 
     # Set alpha to 0 for greenscreen pixels
     alpha[greenscreen_mask] = 0
 
-    # Step 2: Aggressively remove green spill from ALL pixels with green tint
-    visible = alpha > 0
-    has_green_tint = g > r + 10  # Very low threshold
-    has_strong_green_tint = g > b + 10
-
-    green_tinted = visible & has_green_tint & has_strong_green_tint
+    # Gentler green spill removal - only on visible pixels
+    visible = alpha > 128  # Only strong pixels
+    has_green_tint = (g > r + 20) & (g > b + 20)
+    green_tinted = visible & has_green_tint
 
     if np.any(green_tinted):
-        # Reduce green channel more aggressively
         avg_rb = (r[green_tinted] + b[green_tinted]) / 2
-        # Take whichever is lower: 30% of original green, or average of R&B
-        g[green_tinted] = np.minimum(g[green_tinted] * 0.3, avg_rb)
-
-    # Step 3: Make any remaining greenish pixels more transparent
-    still_greenish = (alpha > 0) & (g > r + 5) & (g > b + 5)
-    alpha[still_greenish] *= 0.5  # Make them much more transparent
-
-    # Step 4: Completely remove very faint greenish pixels
-    very_faint_green = (alpha > 0) & (alpha < 150) & (g > np.maximum(r, b))
-    alpha[very_faint_green] = 0
+        g[green_tinted] = np.minimum(g[green_tinted] * 0.6, avg_rb)  # Less aggressive
 
     data[:, :, 0] = r
     data[:, :, 1] = g
@@ -121,19 +93,23 @@ def invert_colors(img: Image.Image) -> Image.Image:
 async def generate_logo(
     project_name: str, suggestion: str | None = None, output_dir: Path | None = None
 ) -> dict[str, Image.Image]:
-    """Generate logo assets using the new pipeline:
-    1. Generate light mode wordmark
-    2. Reduce color variance
-    3. Invert colors for dark mode
-    4. Generate square icons for both light and dark modes
+    """Generate logo assets using AI-powered pipeline with consistent branding:
+    1. Generate light mode wordmark with greenscreen
+    2. Extract icon from wordmark (removes text, keeps icon)
+    3. Remove greenscreen from both wordmark and icon
+    4. Invert colors for dark mode wordmark
+    5. Invert colors for dark mode icon
+    6. Save all assets including favicon
+
+    This ensures the icon in the wordmark matches the standalone icon perfectly.
 
     Args:
         project_name: Name of the project
         suggestion: Optional suggestion to guide the logo generation
         output_dir: Output directory for the generated images. Defaults to docs/public/
 
     Returns:
-        Dictionary of generated images
+        Dictionary of generated images (wordmark_light, wordmark_dark, icon_light, icon_dark, favicon)
     """
     # Determine output directory
     if output_dir is None:
@@ -175,106 +151,70 @@ async def generate_logo(
     if light_img is None:
         raise ValueError("No light mode wordmark generated")
 
-    print("Removing greenscreen...")
-    light_img = remove_greenscreen(light_img)
-
-    # ============================================================
-    # 2. Reduce color variance
-    # ============================================================
-    print("\n=== Step 2: Reducing Color Variance ===")
-    print("Quantizing colors to reduce variance...")
-    light_img = reduce_color_variance(light_img, colors=6)
-
-    light_path = output_dir / "logo-light.png"
-    light_img.save(light_path)
-    print(f"✓ Light mode wordmark saved to: {light_path}")
-    results["wordmark_light"] = light_img
-
     # ============================================================
-    # 3. Generate dark mode by inverting colors
+    # 2. Extract icon from wordmark (before greenscreen removal)
     # ============================================================
-    print("\n=== Step 3: Generating Dark Mode (Invert Colors) ===")
-    print("Inverting colors from light mode...")
-    dark_img = invert_colors(light_img)
+    print("\n=== Step 2: Extracting Square Icon from Wordmark ===")
+    print("Asking AI to remove text and preserve only the icon...")
 
-    dark_path = output_dir / "logo-dark.png"
-    dark_img.save(dark_path)
-    print(f"✓ Dark mode wordmark saved to: {dark_path}")
-    results["wordmark_dark"] = dark_img
-
-    # ============================================================
-    # 4. Generate square icons for light mode
-    # ============================================================
-    print("\n=== Step 4: Generating Square Icon (Light Mode) ===")
-    icon_inf = DSPYInference(pred_signature=IconDescription, observe=False)
-    icon_light_result = await icon_inf.run(
-        project_name=project_name,
-        suggestion=suggestion or "",
-        is_dark_mode=False,
-    )
+    icon_extract_prompt = f"Remove ALL TEXT from this image. Keep ONLY the icon/symbol on the left side. Output a SQUARE 1:1 aspect ratio image with the icon centered. Preserve the BRIGHT LIME GREEN (#00FF00) GREENSCREEN background exactly as it is. Do not change any colors of the icon itself - keep them identical to the original. Just remove the text '{project_name}' and center the icon in a square format."
 
-    print(f"Light icon description: {icon_light_result.icon_description}")
-
-    icon_light_prompt = f"{icon_light_result.icon_description}. Create a SQUARE 1:1 aspect ratio icon/symbol. NO TEXT should appear. Use DARK colors (black, dark gray, dark blue, etc.) suitable for light backgrounds. The icon should be bold, simple, and instantly recognizable. Center it with minimal padding. CRITICAL: Use a BRIGHT LIME GREEN (#00FF00) GREENSCREEN background. Do not use lime green in the icon itself."
-
-    print("Generating light mode icon with Gemini...")
-    icon_light_resp = client.models.generate_content(
+    print("Generating square icon by extracting from wordmark...")
+    icon_extract_resp = client.models.generate_content(
         model="gemini-3-pro-image-preview",
-        contents=[icon_light_prompt],
+        contents=[icon_extract_prompt, light_img],
         config=types.GenerateContentConfig(response_modalities=["TEXT", "IMAGE"]),
     )
 
     icon_light_img = None
-    for part in icon_light_resp.candidates[0].content.parts:  # type: ignore
+    for part in icon_extract_resp.candidates[0].content.parts:  # type: ignore
         if part.inline_data and part.inline_data.mime_type.startswith("image/"):  # type: ignore
             icon_light_img = Image.open(BytesIO(part.inline_data.data))  # type: ignore
             break
 
     if icon_light_img is None:
-        raise ValueError("No light mode icon generated")
+        raise ValueError("No light mode icon extracted")
 
-    print("Removing greenscreen from light icon...")
+    print("Removing greenscreen from extracted icon...")
     icon_light_img = remove_greenscreen(icon_light_img)
 
     # ============================================================
-    # 5. Generate square icons for dark mode
+    # 3. Remove greenscreen from wordmark
     # ============================================================
-    print("\n=== Step 5: Generating Square Icon (Dark Mode) ===")
-    icon_dark_result = await icon_inf.run(
-        project_name=project_name,
-        suggestion=suggestion or "",
-        is_dark_mode=True,
-    )
-
-    print(f"Dark icon description: {icon_dark_result.icon_description}")
-
-    icon_dark_prompt = f"{icon_dark_result.icon_description}. Create a SQUARE 1:1 aspect ratio icon/symbol. NO TEXT should appear. Use LIGHT colors (white, light gray, light cyan, etc.) suitable for dark backgrounds. The icon should be bold, simple, and instantly recognizable. Center it with minimal padding. CRITICAL: Use a BRIGHT LIME GREEN (#00FF00) GREENSCREEN background. Do not use lime green in the icon itself."
+    print("\n=== Step 3: Removing Greenscreen from Wordmark ===")
+    print("Removing greenscreen...")
+    light_img = remove_greenscreen(light_img)
 
-    print("Generating dark mode icon with Gemini...")
-    icon_dark_resp = client.models.generate_content(
-        model="gemini-3-pro-image-preview",
-        contents=[icon_dark_prompt],
-        config=types.GenerateContentConfig(response_modalities=["TEXT", "IMAGE"]),
-    )
+    light_path = output_dir / "logo-light.png"
+    light_img.save(light_path)
+    print(f"✓ Light mode wordmark saved to: {light_path}")
+    results["wordmark_light"] = light_img
 
-    icon_dark_img = None
-    for part in icon_dark_resp.candidates[0].content.parts:  # type: ignore
-        if part.inline_data and part.inline_data.mime_type.startswith("image/"):  # type: ignore
-            icon_dark_img = Image.open(BytesIO(part.inline_data.data))  # type: ignore
-            break
+    # ============================================================
+    # 4. Generate dark mode by inverting colors
+    # ============================================================
+    print("\n=== Step 4: Generating Dark Mode (Invert Colors) ===")
+    print("Inverting colors from light mode for wordmark...")
+    dark_img = invert_colors(light_img)
 
-    if icon_dark_img is None:
-        raise ValueError("No dark mode icon generated")
+    dark_path = output_dir / "logo-dark.png"
+    dark_img.save(dark_path)
+    print(f"✓ Dark mode wordmark saved to: {dark_path}")
+    results["wordmark_dark"] = dark_img
 
-    print("Removing greenscreen from dark icon...")
-    icon_dark_img = remove_greenscreen(icon_dark_img)
+    # ============================================================
+    # 5. Generate dark mode icon by inverting
+    # ============================================================
+    print("\n=== Step 5: Inverting Icon for Dark Mode ===")
+    print("Inverting colors from light mode icon...")
+    icon_dark_img = invert_colors(icon_light_img)
 
     # ============================================================
     # 6. Save icon versions (use light mode icon for favicon)
     # ============================================================
     print("\n=== Saving Icon Versions ===")
 
-    # Ensure icon is square
+    # Ensure light icon is square
     width, height = icon_light_img.size
     if width != height:
         size = max(width, height)
@@ -284,22 +224,36 @@ async def generate_logo(
         new_icon.paste(icon_light_img, (paste_x, paste_y))
         icon_light_img = new_icon
 
-    # Generate favicon sizes
+    # Ensure dark icon is square
+    width, height = icon_dark_img.size
+    if width != height:
+        size = max(width, height)
+        new_icon = Image.new("RGBA", (size, size), (255, 255, 255, 0))
+        paste_x = (size - width) // 2
+        paste_y = (size - height) // 2
+        new_icon.paste(icon_dark_img, (paste_x, paste_y))
+        icon_dark_img = new_icon
+
+    # Generate favicon and icon sizes
     favicon_32 = icon_light_img.resize((32, 32), Image.Resampling.LANCZOS)
-    icon_512 = icon_light_img.resize((512, 512), Image.Resampling.LANCZOS)
+    icon_light_512 = icon_light_img.resize((512, 512), Image.Resampling.LANCZOS)
+    icon_dark_512 = icon_dark_img.resize((512, 512), Image.Resampling.LANCZOS)
 
     # Save icon versions
-    icon_path = output_dir / "icon.png"
+    icon_light_path = output_dir / "icon-light.png"
+    icon_dark_path = output_dir / "icon-dark.png"
     favicon_path = output_dir / "favicon.ico"
 
-    icon_512.save(icon_path)
+    icon_light_512.save(icon_light_path)
+    icon_dark_512.save(icon_dark_path)
     favicon_32.save(favicon_path, format="ICO")
 
-    print(f"✓ Icon saved to: {icon_path}")
+    print(f"✓ Light icon saved to: {icon_light_path}")
+    print(f"✓ Dark icon saved to: {icon_dark_path}")
     print(f"✓ Favicon saved to: {favicon_path}")
 
-    results["icon_light"] = icon_light_img
-    results["icon_dark"] = icon_dark_img
+    results["icon_light"] = icon_light_512
+    results["icon_dark"] = icon_dark_512
     results["favicon"] = favicon_32
 
     print("\n=== All assets generated successfully! ===")