refactor: split logo variations into parallel light, dark and monochrome generation

arolleaguekeng · arolleaguekeng · commit 0791431b0bca · 2025-09-13T15:33:22.000+01:00
diff --git a/api/services/BandIdentity/branding.service.ts b/api/services/BandIdentity/branding.service.ts
@@ -8,7 +8,9 @@ import {
   TypographyModel,
 } from "../../models/brand-identity.model";
 import { LOGO_GENERATION_PROMPT } from "./prompts/singleGenerations/00_logo-generation-section.prompt";
-import { LOGO_VARIATIONS_GENERATION_PROMPT } from "./prompts/singleGenerations/01_logo-variations-generation.prompt";
+import { LOGO_VARIATION_LIGHT_PROMPT } from "./prompts/singleGenerations/logo-variation-light.prompt";
+import { LOGO_VARIATION_DARK_PROMPT } from "./prompts/singleGenerations/logo-variation-dark.prompt";
+import { LOGO_VARIATION_MONOCHROME_PROMPT } from "./prompts/singleGenerations/logo-variation-monochrome.prompt";
 
 import { BRAND_HEADER_SECTION_PROMPT } from "./prompts/00_brand-header-section.prompt";
 import { LOGO_SYSTEM_SECTION_PROMPT } from "./prompts/01_logo-system-section.prompt";
@@ -181,21 +183,21 @@ export class BrandingService extends GenericService {
           stepName: "Brand Header",
           hasDependencies: false,
         },
-        // {
-        //   promptConstant: LOGO_SYSTEM_SECTION_PROMPT + projectDescription,
-        //   stepName: "Logo System",
-        //   hasDependencies: false,
-        // },
-        // {
-        //   promptConstant: COLOR_PALETTE_SECTION_PROMPT + projectDescription,
-        //   stepName: "Color Palette",
-        //   hasDependencies: false,
-        // },
-        // {
-        //   promptConstant: TYPOGRAPHY_SECTION_PROMPT + projectDescription,
-        //   stepName: "Typography",
-        //   hasDependencies: false,
-        // },
+        {
+          promptConstant: LOGO_SYSTEM_SECTION_PROMPT + projectDescription,
+          stepName: "Logo System",
+          hasDependencies: false,
+        },
+        {
+          promptConstant: COLOR_PALETTE_SECTION_PROMPT + projectDescription,
+          stepName: "Color Palette",
+          hasDependencies: false,
+        },
+        {
+          promptConstant: TYPOGRAPHY_SECTION_PROMPT + projectDescription,
+          stepName: "Typography",
+          hasDependencies: false,
+        },
         // {
         //   promptConstant: USAGE_GUIDELINES_SECTION_PROMPT + projectDescription,
         //   stepName: "Usage Guidelines",
@@ -206,11 +208,11 @@ export class BrandingService extends GenericService {
         //   stepName: "Visual Examples",
         //   hasDependencies: false,
         // },
-        // {
-        //   promptConstant: BRAND_FOOTER_SECTION_PROMPT + projectDescription,
-        //   stepName: "Brand Footer",
-        //   hasDependencies: false,
-        // },
+        {
+          promptConstant: BRAND_FOOTER_SECTION_PROMPT + projectDescription,
+          stepName: "Brand Footer",
+          hasDependencies: false,
+        },
       ];
 
       // Initialize empty sections array to collect results as they come in
@@ -866,8 +868,107 @@ export class BrandingService extends GenericService {
   }
 
   /**
-   * Generate logo variations using optimized JSON-to-SVG layered approach
-   * Implements token-saving strategy with compact JSON generation
+   * Generate single logo variation for light background
+   */
+  private async generateSingleLightVariation(
+    logoStructure: any,
+    project: ProjectModel
+  ): Promise<{ lightBackground?: string }> {
+    const prompt = `Logo structure: ${JSON.stringify(
+      logoStructure
+    )}\n\n${LOGO_VARIATION_LIGHT_PROMPT}`;
+
+    const steps: IPromptStep[] = [
+      {
+        promptConstant: prompt,
+        stepName: "Light Background Variation",
+        maxOutputTokens: 1000,
+        modelParser: (content) => {
+          try {
+            const parsed = JSON.parse(content);
+            return parsed.variation;
+          } catch (error) {
+            logger.error("Error parsing light variation JSON:", error);
+            throw new Error("Failed to parse light variation JSON");
+          }
+        },
+        hasDependencies: false,
+      },
+    ];
+
+    const sectionResults = await this.processSteps(steps, project);
+    return sectionResults[0].parsedData;
+  }
+
+  /**
+   * Generate single logo variation for dark background
+   */
+  private async generateSingleDarkVariation(
+    logoStructure: any,
+    project: ProjectModel
+  ): Promise<{ darkBackground?: string }> {
+    const prompt = `Logo structure: ${JSON.stringify(
+      logoStructure
+    )}\n\n${LOGO_VARIATION_DARK_PROMPT}`;
+
+    const steps: IPromptStep[] = [
+      {
+        promptConstant: prompt,
+        stepName: "Dark Background Variation",
+        maxOutputTokens: 1000,
+        modelParser: (content) => {
+          try {
+            const parsed = JSON.parse(content);
+            return parsed.variation;
+          } catch (error) {
+            logger.error("Error parsing dark variation JSON:", error);
+            throw new Error("Failed to parse dark variation JSON");
+          }
+        },
+        hasDependencies: false,
+      },
+    ];
+
+    const sectionResults = await this.processSteps(steps, project);
+    return sectionResults[0].parsedData;
+  }
+
+  /**
+   * Generate single logo variation for monochrome
+   */
+  private async generateSingleMonochromeVariation(
+    logoStructure: any,
+    project: ProjectModel
+  ): Promise<{ monochrome?: string }> {
+    const prompt = `Logo structure: ${JSON.stringify(
+      logoStructure
+    )}\n\n${LOGO_VARIATION_MONOCHROME_PROMPT}`;
+
+    const steps: IPromptStep[] = [
+      {
+        promptConstant: prompt,
+        stepName: "Monochrome Variation",
+        maxOutputTokens: 1000,
+        modelParser: (content) => {
+          try {
+            const parsed = JSON.parse(content);
+            return parsed.variation;
+          } catch (error) {
+            logger.error("Error parsing monochrome variation JSON:", error);
+            throw new Error("Failed to parse monochrome variation JSON");
+          }
+        },
+        hasDependencies: false,
+      },
+    ];
+
+    const sectionResults = await this.processSteps(steps, project);
+    return sectionResults[0].parsedData;
+  }
+
+  /**
+   * Generate logo variations using parallel execution for each variation type
+   * Implements optimized parallel generation strategy
    */
   async generateLogoVariations(
     userId: string,
@@ -886,7 +987,7 @@ export class BrandingService extends GenericService {
     };
   }> {
     logger.info(
-      `Generating optimized logo variations using JSON-to-SVG conversion for logo: ${selectedLogo.id}`
+      `Generating logo variations using parallel execution for logo: ${selectedLogo.id}`
     );
 
     const project = await this.getProjectOptimized(userId, projectId);
@@ -902,35 +1003,29 @@ export class BrandingService extends GenericService {
       concept: selectedLogo.concept,
     };
 
-    const prompt = `Logo structure: ${JSON.stringify(
-      logoStructure
-    )}\n\n${LOGO_VARIATIONS_GENERATION_PROMPT}`;
-
-    const steps: IPromptStep[] = [
-      {
-        promptConstant: prompt,
-        stepName: "Logo Variations Generation",
-        maxOutputTokens: 2000, // Increased tokens for detailed variations
-        modelParser: (content) => {
-          try {
-            const variationsJson: LogoVariationsJson = JSON.parse(content);
-            return variationsJson;
-          } catch (error) {
-            logger.error("Error parsing logo variations JSON:", error);
-            throw new Error("Failed to parse logo variations JSON");
-          }
-        },
-        hasDependencies: false,
-      },
-    ];
+    // Execute all three variations in parallel
+    logger.info(`Starting parallel generation of 3 logo variations`);
+    const [lightVariation, darkVariation, monochromeVariation] = await Promise.all([
+      this.generateSingleLightVariation(logoStructure, project),
+      this.generateSingleDarkVariation(logoStructure, project),
+      this.generateSingleMonochromeVariation(logoStructure, project),
+    ]);
 
-    const sectionResults = await this.processSteps(steps, project);
-    const variationsResult = sectionResults[0];
-    const variationsJson: LogoVariationsJson = variationsResult.parsedData;
+    logger.info(`Successfully generated all 3 variations in parallel`);
 
-    // Convert JSON variations to optimized SVGs
-    const svgVariations =
-      this.logoJsonToSvgService.convertVariationsJsonToSvg(variationsJson);
+    // Create direct SVG variations (bypassing JSON-to-SVG conversion since we already have SVGs)
+    const svgVariations = {
+      withText: {
+        lightBackground: lightVariation.lightBackground,
+        darkBackground: darkVariation.darkBackground,
+        monochrome: monochromeVariation.monochrome,
+      },
+      iconOnly: {
+        lightBackground: lightVariation.lightBackground,
+        darkBackground: darkVariation.darkBackground,
+        monochrome: monochromeVariation.monochrome,
+      },
+    };
 
     // Apply advanced SVG optimization
     const optimizedVariations = {
@@ -990,16 +1085,9 @@ export class BrandingService extends GenericService {
       });
 
       logger.info(
-        `Optimized logo variations cached - ProjectId: ${projectId}, Shapes: ${Object.keys(
-          variationsJson.variations
-        )
-          .map(
-            (k) =>
-              variationsJson.variations[
-                k as keyof typeof variationsJson.variations
-              ].shapes.length
-          )
-          .join("/")}`
+        `Optimized logo variations cached - ProjectId: ${projectId}, Variations: ${Object.keys(
+          optimizedVariations.iconOnly
+        ).join("/")}`
       );
     }
 
diff --git a/api/services/BandIdentity/prompts/singleGenerations/logo-variation-dark.prompt.ts b/api/services/BandIdentity/prompts/singleGenerations/logo-variation-dark.prompt.ts
@@ -0,0 +1,44 @@
+export const LOGO_VARIATION_DARK_PROMPT = `
+Generate a professional logo variation optimized for DARK BACKGROUNDS with complete SVG code. Extract ONLY the icon part (no text) and adapt colors for dark background contrast. Return JSON with complete SVG content:
+
+{
+  "variation": {
+    "darkBackground": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 80 80\" width=\"80\" height=\"80\"><g id=\"icon\"><circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"#60A5FA\"/></g></svg>"
+  }
+}
+
+SVG VARIATION GENERATION RULES:
+- GENERATE COMPLETE SVG CODE with proper XML structure
+- Extract ONLY the icon elements from the original logo (remove all text)
+- Use viewBox="0 0 80 80" for square icon format (80x80px minimum)
+- Include proper xmlns="http://www.w3.org/2000/svg" declaration
+- Maintain all original shape complexity and sophistication
+- Preserve geometric relationships and proportional scaling
+- Center the icon within the 80x80 viewBox for optimal presentation
+
+DARK BACKGROUND COLOR ADAPTATION:
+- Use lighter, more vibrant versions of original colors for excellent contrast on dark backgrounds
+- Increase brightness by 30-50% from original colors
+- Add slight saturation boost for better visibility on dark backgrounds
+- Ensure WCAG AA contrast compliance (minimum 4.5:1 ratio)
+- Maintain color harmony and brand consistency
+- Preserve visual hierarchy through strategic color brightening
+
+SVG STRUCTURE REQUIREMENTS:
+- Proper XML declaration and namespace
+- Clean <g id="icon"> grouping for organization
+- Maintain all original path complexity and Bézier curves
+- Preserve opacity values (0.6-1.0) for depth and visual richness
+- Scale coordinates proportionally to fit 80x80 viewBox
+- Center icon elements around cx="40" cy="40" reference point
+- Ensure scalable design that works at any size
+
+COLOR TRANSFORMATION EXAMPLES:
+- Original #3B82F6 (blue) → #60A5FA (lighter blue for dark bg)
+- Original #10B981 (green) → #34D399 (lighter green for dark bg)
+- Original #F59E0B (orange) → #FCD34D (lighter orange for dark bg)
+- Original #8B5CF6 (purple) → #A78BFA (lighter purple for dark bg)
+
+AVOID: Broken XML, missing namespaces, text elements, poor centering, colors too dark for contrast
+GOAL: Generate production-ready icon SVG optimized specifically for dark background usage with perfect contrast and visibility.
+`;
diff --git a/api/services/BandIdentity/prompts/singleGenerations/logo-variation-light.prompt.ts b/api/services/BandIdentity/prompts/singleGenerations/logo-variation-light.prompt.ts
@@ -0,0 +1,43 @@
+export const LOGO_VARIATION_LIGHT_PROMPT = `
+Generate a professional logo variation optimized for LIGHT BACKGROUNDS with complete SVG code. Extract ONLY the icon part (no text) and adapt colors for light background contrast. Return JSON with complete SVG content:
+
+{
+  "variation": {
+    "lightBackground": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 80 80\" width=\"80\" height=\"80\"><g id=\"icon\"><circle cx=\"40\" cy=\"40\" r=\"30\" fill=\"#2563EB\"/></g></svg>"
+  }
+}
+
+SVG VARIATION GENERATION RULES:
+- GENERATE COMPLETE SVG CODE with proper XML structure
+- Extract ONLY the icon elements from the original logo (remove all text)
+- Use viewBox="0 0 80 80" for square icon format (80x80px minimum)
+- Include proper xmlns="http://www.w3.org/2000/svg" declaration
+- Maintain all original shape complexity and sophistication
+- Preserve geometric relationships and proportional scaling
+- Center the icon within the 80x80 viewBox for optimal presentation
+
+LIGHT BACKGROUND COLOR ADAPTATION:
+- Use darker versions of original colors for excellent contrast on light backgrounds
+- Reduce brightness by 20-40% from original colors
+- Ensure WCAG AA contrast compliance (minimum 4.5:1 ratio)
+- Maintain color harmony and brand consistency
+- Preserve visual hierarchy through strategic color darkening
+
+SVG STRUCTURE REQUIREMENTS:
+- Proper XML declaration and namespace
+- Clean <g id="icon"> grouping for organization
+- Maintain all original path complexity and Bézier curves
+- Preserve opacity values (0.6-1.0) for depth and visual richness
+- Scale coordinates proportionally to fit 80x80 viewBox
+- Center icon elements around cx="40" cy="40" reference point
+- Ensure scalable design that works at any size
+
+COLOR TRANSFORMATION EXAMPLES:
+- Original #3B82F6 (blue) → #1D4ED8 (darker blue for light bg)
+- Original #10B981 (green) → #047857 (darker green for light bg)
+- Original #F59E0B (orange) → #D97706 (darker orange for light bg)
+- Original #8B5CF6 (purple) → #7C3AED (darker purple for light bg)
+
+AVOID: Broken XML, missing namespaces, text elements, poor centering, colors too light for contrast
+GOAL: Generate production-ready icon SVG optimized specifically for light background usage with perfect contrast and readability.
+`;
diff --git a/api/services/BandIdentity/prompts/singleGenerations/logo-variation-monochrome.prompt.ts b/api/services/BandIdentity/prompts/singleGenerations/logo-variation-monochrome.prompt.ts
