refactor: migrate logo generation from JSON-to-SVG to direct SVG output for improved quality

Author: arolleaguekeng

api/services/BandIdentity/branding.service.ts

@@ -597,8 +597,8 @@ export class BrandingService extends GenericService {
   }
 
   /**
-   * Generate single logo concept using optimized JSON-to-SVG approach
-   * Implements token-saving strategy with compact JSON generation
+   * Generate single logo concept using direct SVG generation
+   * AI generates complete SVG content directly for professional results
    */
   private async generateSingleLogoConcept(
     projectDescription: string,
@@ -608,45 +608,45 @@ export class BrandingService extends GenericService {
     conceptIndex: number
   ): Promise<LogoModel> {
     logger.info(
-      `Generating optimized logo concept ${
+      `Generating professional logo concept ${
         conceptIndex + 1
-      } using JSON-to-SVG conversion`
+      } with direct SVG generation`
     );
 
-    // Build optimized prompt for compact JSON generation
+    // Build optimized prompt for direct SVG generation
     const optimizedPrompt = this.buildOptimizedLogoPrompt(
       projectDescription,
       colors,
       typography
     );
 
-    // AI generation with max_output_tokens limit for efficiency
+    // AI generation with direct SVG output
     const steps: IPromptStep[] = [
       {
         promptConstant: optimizedPrompt,
         stepName: `Logo Concept ${conceptIndex + 1}`,
-        maxOutputTokens: 3000,
+        maxOutputTokens: 4000,
         modelParser: (content) => {
           try {
-            // Parse compact JSON logo structure
-            const logoJson: LogoJsonStructure = JSON.parse(content);
+            // Parse JSON response containing SVG
+            const logoData = JSON.parse(content);
 
             // Ensure unique ID for each concept
-            if (!logoJson.id) {
-              logoJson.id = `concept${String(conceptIndex + 1).padStart(
+            if (!logoData.id) {
+              logoData.id = `concept${String(conceptIndex + 1).padStart(
                 2,
                 "0"
               )}`;
             }
 
-            return logoJson;
+            return logoData;
           } catch (error) {
             logger.error(
-              `Error parsing logo JSON concept ${conceptIndex + 1}:`,
+              `Error parsing logo data concept ${conceptIndex + 1}:`,
               error
             );
             throw new Error(
-              `Failed to parse logo JSON concept ${conceptIndex + 1}`
+              `Failed to parse logo data concept ${conceptIndex + 1}`
             );
           }
         },
@@ -658,33 +658,58 @@ export class BrandingService extends GenericService {
       provider: LLMProvider.GEMINI,
       modelName: "gemini-2.5-flash",
       llmOptions: {
-        maxOutputTokens: 3000,
+        maxOutputTokens: 4000,
         temperature: 0.2,
         topP: 0.8,
         topK: 20,
       },
     });
     const logoResult = sectionResults[0];
-    const logoJsonStructure: LogoJsonStructure = logoResult.parsedData;
-
-    // Convert JSON structure to optimized SVG LogoModel
-    const logoModel =
-      this.logoJsonToSvgService.convertJsonToLogoModel(logoJsonStructure);
-
-    // Force unique ID to ensure each concept has a different ID
-    logoModel.id = `concept${String(conceptIndex + 1).padStart(2, "0")}`;
+    const logoData = logoResult.parsedData;
+
+    // Create LogoModel directly from SVG data
+    const logoModel: LogoModel = {
+      id: `concept${String(conceptIndex + 1).padStart(2, "0")}`,
+      name: logoData.name || `Logo Concept ${conceptIndex + 1}`,
+      concept: logoData.concept || "Professional logo design",
+      colors: logoData.colors || [],
+      fonts: logoData.fonts || [],
+      svg: logoData.svg, // Direct SVG from AI
+      iconSvg: this.extractIconFromSvg(logoData.svg), // Extract icon part
+    };
 
     // Apply SVG optimization
     const optimizedLogo = this.optimizeLogoSvgs(logoModel);
 
     logger.info(
-      `Optimized logo concept ${conceptIndex + 1} generated with ${
-        logoJsonStructure.icon.shapes.length
-      } icon shapes and ${logoJsonStructure.text.elements.length} text elements`
+      `Professional logo concept ${conceptIndex + 1} generated with direct SVG content`
     );
     return optimizedLogo;
   }
 
+  /**
+   * Extract icon-only SVG from the complete logo SVG
+   * Removes text elements to create an icon-only version
+   */
+  private extractIconFromSvg(fullSvg: string): string {
+    try {
+      // Extract the icon group from the full SVG (using multiline regex)
+      const iconMatch = fullSvg.match(/<g id="icon"[^>]*>([\s\S]*?)<\/g>/);
+      if (iconMatch) {
+        // Create a new SVG with just the icon content
+        const iconContent = iconMatch[1];
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><g id="icon">${iconContent}</g></svg>`;
+      }
+      
+      // Fallback: return a simplified version of the full SVG
+      logger.warn("Could not extract icon from SVG, using fallback");
+      return fullSvg.replace(/<g id="text"[^>]*>[\s\S]*?<\/g>/, '');
+    } catch (error) {
+      logger.error("Error extracting icon from SVG:", error);
+      return fullSvg; // Return original if extraction fails
+    }
+  }
+
   /**
    * Optimize logo SVGs using advanced compression techniques
    */

api/services/BandIdentity/prompts/singleGenerations/00_logo-generation-section.prompt.ts

@@ -1,63 +1,62 @@
 export const LOGO_GENERATION_PROMPT = `
-Generate 1 premium, ORIGINAL tech logo concept with sophisticated, professional design. Create a distinctive brand identity that stands out in the market. Return JSON only:
+Generate 1 premium, ORIGINAL tech logo concept with sophisticated, professional design. Create a distinctive brand identity that stands out in the market. Return JSON with complete SVG content:
 
 {
   "id": "concept01",
   "name": "Creative Professional Logo Name",
   "concept": "Detailed, compelling concept description explaining the design philosophy, symbolism, and brand values represented (40-60 words)",
   "colors": ["#HEX1", "#HEX2", "#HEX3", "#HEX4"],
   "fonts": ["Modern Professional FontName"],
-  "icon": {
-    "shapes": [
-      {"type": "path", "d": "M20,8 Q35,2 50,8 Q58,25 50,42 Q35,48 20,42 Q12,25 20,8 Z", "fill": "#HEX1"},
-      {"type": "circle", "cx": 35, "cy": 25, "r": 12, "fill": "#HEX2", "opacity": 0.85},
-      {"type": "polygon", "points": "28,18 42,18 40,32 30,32", "fill": "#HEX3"},
-      {"type": "path", "d": "M25,15 L45,15 L42,35 L28,35 Z", "fill": "#HEX4", "opacity": 0.7}
-    ],
-    "size": {"w": 70, "h": 50}
-  },
-  "text": {
-    "elements": [
-      {"type": "text", "x": 0, "y": 28, "text": "BRAND", "fontSize": 24, "fill": "#HEX1", "fontFamily": "FontName", "fontWeight": "700"}
-    ],
-    "size": {"w": 120, "h": 32}
-  },
+  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 80\" width=\"200\" height=\"80\"><defs><style>.text-font{font-family:'Inter',Arial,sans-serif;font-weight:700;}</style></defs><g id=\"icon\"><path d=\"M20,8 Q35,2 50,8 Q58,25 50,42 Q35,48 20,42 Q12,25 20,8 Z\" fill=\"#HEX1\"/><circle cx=\"35\" cy=\"25\" r=\"12\" fill=\"#HEX2\" opacity=\"0.85\"/><polygon points=\"28,18 42,18 40,32 30,32\" fill=\"#HEX3\"/><path d=\"M25,15 L45,15 L42,35 L28,35 Z\" fill=\"#HEX4\" opacity=\"0.7\"/></g><g id=\"text\"><text x=\"78\" y=\"45\" class=\"text-font\" font-size=\"24\" fill=\"#HEX1\">BRAND</text></g></svg>",
   "layout": {
     "textPosition": "right",
-    "spacing": 8
+    "spacing": 8,
+    "totalWidth": 200,
+    "totalHeight": 80
   }
 }
 
-DESIGN EXCELLENCE REQUIREMENTS:
-- DESCRIPTIONS MUST BE DETAILED AND COMPELLING: 40-60 words explaining design philosophy, symbolism, and brand values
-- CREATE UNIQUE, MEMORABLE, PROFESSIONAL DESIGNS - avoid basic circles/rectangles
-- Use sophisticated shapes: complex paths with curves, advanced polygons, overlapping elements
-- Combine 3-5 shapes with different opacities (0.6-1.0) for depth and visual richness
-- Create strong visual hierarchy with size variation, layering, and strategic positioning
-- Use premium color palettes with 3-4 complementary colors for sophisticated gradients
-- Implement golden ratio proportions and advanced geometric principles
-- Add intricate geometric patterns, intersections, and visual effects
-- Master negative space as a powerful design element
-- Ensure shapes are precisely positioned with professional alignment and balance
-- Create cohesive, premium color harmony that conveys brand sophistication
-- Design should be scalable and work across all media formats
-- Include subtle details that enhance professionalism without cluttering
+SVG GENERATION REQUIREMENTS:
+- GENERATE COMPLETE, PROFESSIONAL SVG CODE with proper XML structure
+- Use viewBox="0 0 200 80" for consistent scaling and professional proportions
+- Include proper xmlns="http://www.w3.org/2000/svg" declaration
+- Create sophisticated icon designs using advanced SVG elements:
+  * Complex <path> elements with Bézier curves for organic shapes
+  * Strategic <circle>, <ellipse>, <polygon> for geometric precision
+  * Advanced <g> grouping for logical organization
+  * Proper opacity and layering for depth and visual richness
+- Position icon elements in the left portion (0-70px width)
+- Position text elements starting around x="78" for proper spacing
+- Use professional typography with Inter font family and fallbacks
+- Include CSS styles in <defs><style> for consistent formatting
+- Ensure text is properly aligned and sized (font-size: 24px minimum)
+- Create 3-5 sophisticated shapes with varying opacities (0.6-1.0)
+- Use premium color palettes with 3-4 complementary hex colors
+- Implement proper spacing between icon and text (8px minimum)
+- Ensure scalable design that works at any size
+- Add subtle gradients or effects using SVG <defs> when appropriate
 
-TECHNICAL PRECISION:
-- Path elements for organic/curved shapes (use advanced quadratic/cubic Bézier curves)
-- Complex polygons for angular/geometric elements with precise point positioning
-- Strategic use of opacity (0.6-1.0) and advanced layering techniques
-- Pixel-perfect coordinate positioning for professional alignment
-- Icon dimensions: MINIMUM 70x50px for better visibility and detail
-- Text positioning relative to container (0,0 origin) with professional spacing
-- Smart layout choice: text width > icon width → "bottom", else → "right"
-- Calculate text width: ~12px per character + padding for larger fonts
-- Text height: fontSize * 1.4 for proper spacing and readability
-- Spacing: 8-12px for optimal separation and professional appearance
-- Font size: MINIMUM 24px for better readability and professional impact
-- Use font weights 600-700 for strong brand presence
-- Ensure all elements are scalable and maintain quality at different sizes
+LAYOUT INTELLIGENCE:
+- Analyze text length vs icon complexity to choose optimal layout
+- For long brand names (>8 characters): consider vertical "bottom" layout
+- For short names (≤8 characters): use horizontal "right" layout  
+- Adjust viewBox dimensions accordingly: horizontal=200x80, vertical=120x120
+- Ensure no overlapping between icon and text elements
+- Maintain professional spacing and visual balance
 
-AVOID: Basic shapes only, poor positioning, generic designs, overlapping text, small dimensions, weak typography
-GOAL: Create distinctive, premium, professional logos that command attention, convey brand authority, and stand out in competitive markets. Each logo should be a masterpiece of design that clients would be proud to use across all their brand materials.
+SVG STRUCTURE EXAMPLE:
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" width="200" height="80">
+  <defs>
+    <style>.text-font{font-family:'Inter',Arial,sans-serif;font-weight:700;}</style>
+  </defs>
+  <g id="icon">
+    <!-- Sophisticated icon shapes here -->
+  </g>
+  <g id="text">
+    <text x="78" y="45" class="text-font" font-size="24" fill="#COLOR">BRAND</text>
+  </g>
+</svg>
+
+AVOID: Broken XML, missing namespaces, overlapping elements, poor spacing, basic shapes only
+GOAL: Generate production-ready SVG logos that are immediately usable, professionally designed, and scalable across all media formats.
 `;

api/services/BandIdentity/prompts/singleGenerations/01_logo-variations-generation.prompt.ts

@@ -1,50 +1,48 @@
 export const LOGO_VARIATIONS_GENERATION_PROMPT = `
-Generate 3 professional icon variations from the provided logo structure with enhanced dimensions and quality. Use the ORIGINAL COLORS from the logo and adapt them appropriately for each background. Return JSON only:
+Generate 3 professional icon variations from the provided logo with complete SVG code. Extract ONLY the icon part (no text) and adapt colors for each background. Return JSON with complete SVG content:
 
 {
   "variations": {
-    "lightBackground": {
-      "shapes": [
-        {"type": "circle", "cx": 35, "cy": 35, "r": 25, "fill": "#2563EB"}
-      ],
-      "size": {"w": 70, "h": 70}
-    },
-    "darkBackground": {
-      "shapes": [
-        {"type": "circle", "cx": 35, "cy": 35, "r": 25, "fill": "#60A5FA"}
-      ],
-      "size": {"w": 70, "h": 70}
-    },
-    "monochrome": {
-      "shapes": [
-        {"type": "circle", "cx": 35, "cy": 35, "r": 25, "fill": "#1F2937"}
-      ],
-      "size": {"w": 70, "h": 70}
-    }
+    "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>",
+    "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>",
+    "monochrome": "<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=\"#374151\"/></g></svg>"
   }
 }
 
-PROFESSIONAL VARIATION RULES:
-- Extract and enhance icon shapes only, remove all text elements
-- MINIMUM dimensions: 70x70px for professional quality and visibility
+SVG VARIATION GENERATION RULES:
+- GENERATE COMPLETE SVG CODE for each variation 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
-- USE THE ORIGINAL LOGO COLORS as base, then adapt them for each variation:
+- Center the icon within the 80x80 viewBox for optimal presentation
 
 COLOR ADAPTATION STRATEGY:
-- lightBackground: Use the original colors but ensure good contrast (darken if needed: -20% to -40% brightness)
-- darkBackground: Use lighter versions of original colors (+30% to +50% brightness) or complementary light tones
-- monochrome: Convert the dominant original color to a sophisticated monochrome version (preserve hue but desaturate)
+- lightBackground: Use darker versions of original colors for good contrast
+  * Reduce brightness by 20-40% from original colors
+  * Ensure WCAG AA contrast compliance on light backgrounds
+- darkBackground: Use lighter, more vibrant versions of original colors  
+  * Increase brightness by 30-50% from original colors
+  * Add slight saturation boost for better visibility on dark backgrounds
+- monochrome: Convert to sophisticated grayscale maintaining visual hierarchy
+  * Use professional gray palette: #111827, #374151, #4B5563, #6B7280
+  * Preserve opacity relationships for depth and layering
+
+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 EXAMPLES:
-- If original is #3B82F6 (blue): lightBackground=#1D4ED8, darkBackground=#60A5FA, monochrome=#374151
-- If original is #10B981 (green): lightBackground=#047857, darkBackground=#34D399, monochrome=#4B5563
-- If original is #F59E0B (orange): lightBackground=#D97706, darkBackground=#FCD34D, monochrome=#6B7280
+- Original #3B82F6 (blue): light=#1D4ED8, dark=#60A5FA, mono=#374151
+- Original #10B981 (green): light=#047857, dark=#34D399, mono=#4B5563  
+- Original #F59E0B (orange): light=#D97706, dark=#FCD34D, mono=#6B7280
 
-- Maximum 8 shapes per variation to maintain detail and complexity
-- Scale all coordinates proportionally to larger dimensions
-- Ensure all opacity values are preserved for depth and layering
-- Maintain professional alignment and spacing
-- NEVER use pure black (#000000) or pure white (#FFFFFF) unless original logo uses them
-- Single line JSON, no explanations or additional text
+AVOID: Broken XML, missing namespaces, text elements, poor centering, basic shapes only
+GOAL: Generate production-ready icon SVGs that are immediately usable across light/dark themes and monochrome applications.
 `;