screencraft 0.1.0

package/src/generators/analyzeStyleReference.js

@@ -0,0 +1,471 @@
+/**
+ * src/generators/analyzeStyleReference.js
+ * ----------------------------------------
+ * Sends a reference screenshot image to Claude Vision and extracts
+ * a structured StyleProfile that drives the compositor.
+ *
+ * The StyleProfile controls:
+ *   - How many phones are shown per frame
+ *   - Phone tilt angles, scales, and positions
+ *   - Background color/texture treatment
+ *   - Phone frame style (white, dark, colored border, none)
+ *   - Typography style and placement
+ *   - Overall spacing density
+ *
+ * For complex layouts (stacked phones, floating elements, etc.)
+ * the function also generates a custom layout function string
+ * that gets written to src/layouts/ and cached for reuse.
+ *
+ * Usage:
+ *   const { analyzeStyleReference } = require('./analyzeStyleReference');
+ *   const profile = await analyzeStyleReference('./reference.png', brand);
+ *   // profile is a StyleProfile object ready to pass to compositePSD()
+ *
+ * Test:
+ *   node test/test_style_analysis.js ./reference.png
+ */
+
+const fs   = require('fs');
+const path = require('path');
+
+const ANTHROPIC_API  = 'https://api.anthropic.com/v1/messages';
+const LAYOUTS_CACHE  = path.join(__dirname, '../../src/layouts');
+
+// ─────────────────────────────────────────────────────────────────
+// MAIN EXPORT
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * analyzeStyleReference(imagePath, brand)
+ *
+ * @param {string} imagePath  — path to the reference image (PNG/JPG)
+ * @param {object} brand      — detected brand (primary, accent, appName, etc.)
+ * @returns {StyleProfile}    — structured style config for the compositor
+ */
+async function analyzeStyleReference(imagePath, brand) {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey) throw new Error('ANTHROPIC_API_KEY not set');
+
+  console.log('  ↳ Sending reference image to Claude Vision...');
+
+  const imageBuffer = fs.readFileSync(imagePath);
+  const imageB64    = imageBuffer.toString('base64');
+  const mimeType    = imagePath.toLowerCase().endsWith('.jpg') ? 'image/jpeg' : 'image/png';
+
+  const response = await fetch(ANTHROPIC_API, {
+    method:  'POST',
+    headers: {
+      'Content-Type':      'application/json',
+      'x-api-key':         apiKey,
+      'anthropic-version': '2023-06-01',
+    },
+    body: JSON.stringify({
+      model:      'claude-opus-4-5',
+      max_tokens: 2000,
+      system: SYSTEM_PROMPT,
+      messages: [{
+        role:    'user',
+        content: [
+          {
+            type:   'image',
+            source: { type: 'base64', media_type: mimeType, data: imageB64 },
+          },
+          {
+            type: 'text',
+            text: `Analyze this App Store screenshot layout as a style reference.
+
+The app that will use this style has:
+- Primary brand color: ${brand.primary}
+- Accent color: ${brand.accent}
+- App name: ${brand.appName || 'the app'}
+
+Extract the complete StyleProfile JSON. Focus on what makes this layout distinctive 
+and how to replicate the visual feel with different screenshots and brand colors.
+
+Return ONLY the JSON object — no explanation, no markdown fences.`,
+          }
+        ],
+      }],
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Claude API error: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const raw  = data.content?.[0]?.text || '';
+
+  // Parse the JSON response
+  let profile;
+  try {
+    const jsonMatch = raw.match(/\{[\s\S]*\}/);
+    if (!jsonMatch) throw new Error('No JSON found in response');
+    profile = JSON.parse(jsonMatch[0]);
+  } catch (err) {
+    console.warn('  ⚠ Could not parse style profile, using defaults');
+    profile = defaultStyleProfile(brand);
+  }
+
+  // Validate and fill missing fields with defaults
+  profile = mergeWithDefaults(profile, brand);
+
+  // Adapt extracted colors to the user's actual brand
+  profile = adaptColorsToBrand(profile, brand);
+
+  // If layout is complex, generate + cache a layout function
+  if (profile.layout.type === 'multi-phone' || profile.layout.type === 'grid') {
+    profile.layoutFunctionPath = await generateLayoutFunction(profile, brand);
+  }
+
+  console.log('  ✓ Style profile extracted');
+  console.log(`     Layout:     ${profile.layout.type} (${profile.layout.phoneCount} phone${profile.layout.phoneCount > 1 ? 's' : ''})`);
+  console.log(`     Background: ${profile.background.color}`);
+  console.log(`     Frame:      ${profile.phoneFrame.style}`);
+  console.log(`     Typography: ${profile.typography.headlineStyle}`);
+
+  return profile;
+}
+
+// ─────────────────────────────────────────────────────────────────
+// SYSTEM PROMPT
+// ─────────────────────────────────────────────────────────────────
+
+const SYSTEM_PROMPT = `You are a computer vision system that analyzes App Store marketing screenshot layouts.
+
+Your job is to extract a precise StyleProfile JSON from a reference image. This profile will be used 
+to programmatically recreate a similar layout with different app screenshots and brand colors.
+
+Return ONLY a JSON object with this exact structure (fill every field):
+
+{
+  "layout": {
+    "type": "single" | "multi-phone" | "grid" | "hero-with-detail",
+    "phoneCount": <number 1-4>,
+    "arrangement": "single" | "stacked-cascade" | "side-by-side" | "floating-cluster" | "hero-plus-inset",
+    "tiltAngles": [<degrees per phone, negative=left tilt, 0=straight>],
+    "phoneScales": [<relative scale 0.5-1.0 per phone, 1.0=largest/front>],
+    "phonePositions": [
+      { "anchor": "center" | "left" | "right" | "top-left" | "bottom-right", "xOffset": <-50 to 50 percent>, "yOffset": <-50 to 50 percent> }
+    ],
+    "textPosition": "top-left" | "top-center" | "bottom-left" | "bottom-right" | "left-of-phone" | "right-of-phone" | "above-phone"
+  },
+
+  "background": {
+    "type": "solid" | "gradient" | "noise-texture" | "split",
+    "color": "<dominant background hex color>",
+    "gradientEndColor": "<second color if gradient, else null>",
+    "gradientAngle": <degrees, null if not gradient>,
+    "noiseAmount": <0.0-1.0, 0 if no texture>,
+    "adaptToBrand": <true if background should use user's brand primary color, false if it should stay as-is>
+  },
+
+  "phoneFrame": {
+    "style": "white-minimal" | "dark" | "colored-border" | "no-frame" | "shadow-only",
+    "borderColor": "<hex if colored-border, else null>",
+    "borderWidth": <px equivalent, 0 if none>,
+    "shadowStyle": "none" | "soft" | "medium" | "dramatic",
+    "shadowColor": "<hex or null>",
+    "cornerRadius": <approximate corner radius 0-60>,
+    "adaptBorderToBrand": <true if border color should use user's accent color>
+  },
+
+  "typography": {
+    "headlineStyle": "large-serif" | "large-sans" | "large-bold-sans" | "mixed-weight",
+    "headlineSize": "sm" | "md" | "lg" | "xl" | "xxl",
+    "headlineCase": "title" | "upper" | "mixed",
+    "headlinePosition": "top-left" | "top-center" | "bottom-left" | "overlay",
+    "subheadPresent": <boolean>,
+    "subheadSize": "sm" | "md",
+    "usesEmoji": <boolean — are emojis used as accent elements>,
+    "textColor": "<primary text hex color>",
+    "accentTextColor": "<accent/highlight text hex color, null if none>",
+    "lineStyle": "tight" | "normal" | "loose",
+    "fontPersonality": "serif-editorial" | "bold-sans" | "friendly-rounded" | "minimal-light"
+  },
+
+  "spacing": {
+    "density": "dense" | "balanced" | "airy",
+    "phonePaddingPercent": <approximate padding around phone as % of canvas width, 5-25>,
+    "textToPhoneGap": "tight" | "medium" | "generous"
+  },
+
+  "colorExtraction": {
+    "dominantBgColor": "<main background hex>",
+    "phoneFrameColor": "<phone frame color hex>",
+    "headlineTextColor": "<main headline color hex>",
+    "accentColor": "<any accent color used, null if none>",
+    "overallMood": "warm" | "cool" | "neutral" | "dark" | "bright"
+  },
+
+  "layoutDescription": "<one sentence describing the key visual technique that makes this layout distinctive>"
+}
+
+Be precise about tiltAngles and phoneScales — these directly control the compositor output.
+If multiple phones have different tilts/scales, list each one.
+For single-phone layouts, tiltAngles and phoneScales should have exactly one value each.`;
+
+// ─────────────────────────────────────────────────────────────────
+// COLOR ADAPTATION
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * Replace extracted reference colors with the user's brand colors
+ * where the profile says adaptToBrand/adaptBorderToBrand = true.
+ */
+function adaptColorsToBrand(profile, brand) {
+  const adapted = JSON.parse(JSON.stringify(profile)); // deep clone
+
+  // Background: if the reference used a solid brand-ish color, swap it
+  if (adapted.background.adaptToBrand) {
+    adapted.background.color = brand.primary;
+    if (adapted.background.gradientEndColor) {
+      adapted.background.gradientEndColor = darken(brand.primary, 0.15);
+    }
+  }
+
+  // Phone border: if colored border, use brand accent
+  if (adapted.phoneFrame.adaptBorderToBrand && adapted.phoneFrame.style === 'colored-border') {
+    adapted.phoneFrame.borderColor = brand.accent;
+    adapted.phoneFrame.shadowColor = brand.accent + '44'; // 27% opacity
+  }
+
+  // Accent text color: use brand accent
+  if (adapted.typography.accentTextColor) {
+    adapted.typography.accentTextColor = brand.accent;
+  }
+
+  return adapted;
+}
+
+// ─────────────────────────────────────────────────────────────────
+// LAYOUT FUNCTION GENERATOR
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * For multi-phone layouts, generate a JavaScript compositor function
+ * that sharp can execute. Writes to src/layouts/<layoutId>.js
+ * and returns the path.
+ *
+ * This is the "write custom code" step — Claude generates the
+ * actual compositing algorithm based on the extracted profile.
+ */
+async function generateLayoutFunction(profile, brand) {
+  const layoutId  = buildLayoutId(profile);
+  const cachePath = path.join(LAYOUTS_CACHE, `${layoutId}.js`);
+
+  // Return cached version if it exists
+  if (fs.existsSync(cachePath)) {
+    console.log(`  ↳ Using cached layout: ${layoutId}`);
+    return cachePath;
+  }
+
+  console.log('  ↳ Generating custom layout function...');
+
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+
+  const codePrompt = `Write a Node.js function that composites ${profile.layout.phoneCount} app screenshot(s) 
+into a single ${1290}×${2796}px App Store marketing image using the sharp image library.
+
+Layout spec:
+${JSON.stringify(profile.layout, null, 2)}
+
+Background spec:
+${JSON.stringify(profile.background, null, 2)}
+
+Phone frame spec:
+${JSON.stringify(profile.phoneFrame, null, 2)}
+
+Typography spec:
+${JSON.stringify(profile.typography, null, 2)}
+
+The function signature must be:
+  async function composeLayout(screenshots, brand, texts, outputPath)
+
+Where:
+  screenshots = array of { file: string } — paths to resized phone screen PNGs
+  brand = { primary, accent, appName } 
+  texts = array of { white: string, accent: string } — headline text per screen
+  outputPath = string — where to write the output PNG
+
+Rules:
+- Use only sharp for image compositing (already imported at top)
+- No external font files — use SVG text with system-ui font
+- Phone frames are PNG overlays loaded from __dirname + '/../../templates/device_frame.png'
+  (fall back to a simple rounded rect SVG if file not found)
+- Apply tilt using sharp's rotate() with transparent background fill
+- Apply drop shadow by compositing a blurred/offset dark layer before the phone
+- Background gradient or noise texture via SVG or sharp operations
+- The headline text goes above or beside each phone per the typography spec
+- Return the path to the written PNG
+
+Write clean, well-commented code. Export the function as module.exports = { composeLayout }.`;
+
+  const response = await fetch(ANTHROPIC_API, {
+    method:  'POST',
+    headers: {
+      'Content-Type':      'application/json',
+      'x-api-key':         apiKey,
+      'anthropic-version': '2023-06-01',
+    },
+    body: JSON.stringify({
+      model:      'claude-opus-4-5',
+      max_tokens: 4000,
+      messages: [{
+        role:    'user',
+        content: codePrompt,
+      }],
+    }),
+  });
+
+  const data  = await response.json();
+  const raw   = data.content?.[0]?.text || '';
+
+  // Extract code block
+  const codeMatch = raw.match(/```(?:javascript|js)?\n([\s\S]*?)```/) || raw.match(/(const sharp[\s\S]*module\.exports[\s\S]*?\})/);
+  const code = codeMatch ? codeMatch[1] : raw;
+
+  // Write to layouts cache
+  fs.mkdirSync(LAYOUTS_CACHE, { recursive: true });
+
+  const fileContent = `/**
+ * Auto-generated layout: ${layoutId}
+ * Generated: ${new Date().toISOString()}
+ * Layout: ${profile.layoutDescription || profile.layout.arrangement}
+ *
+ * DO NOT EDIT — regenerate by deleting this file and re-running analyzeStyleReference()
+ */
+
+const sharp = require('sharp');
+const path  = require('path');
+const fs    = require('fs');
+
+${code}
+`;
+
+  fs.writeFileSync(cachePath, fileContent);
+  console.log(`  ✓ Layout function saved: src/layouts/${layoutId}.js`);
+
+  return cachePath;
+}
+
+// ─────────────────────────────────────────────────────────────────
+// DEFAULTS AND VALIDATION
+// ─────────────────────────────────────────────────────────────────
+
+function defaultStyleProfile(brand) {
+  return {
+    layout: {
+      type:          "single",
+      phoneCount:    1,
+      arrangement:   "single",
+      tiltAngles:    [-8],
+      phoneScales:   [1.0],
+      phonePositions:[{ anchor: "center", xOffset: 0, yOffset: 10 }],
+      textPosition:  "top-center",
+    },
+    background: {
+      type:              "solid",
+      color:             brand.primary,
+      gradientEndColor:  null,
+      gradientAngle:     null,
+      noiseAmount:       0,
+      adaptToBrand:      true,
+    },
+    phoneFrame: {
+      style:               "colored-border",
+      borderColor:         brand.accent,
+      borderWidth:         6,
+      shadowStyle:         "soft",
+      shadowColor:         null,
+      cornerRadius:        44,
+      adaptBorderToBrand:  true,
+    },
+    typography: {
+      headlineStyle:    "large-bold-sans",
+      headlineSize:     "xl",
+      headlineCase:     "title",
+      headlinePosition: "top-center",
+      subheadPresent:   false,
+      subheadSize:      "sm",
+      usesEmoji:        false,
+      textColor:        "#FFFFFF",
+      accentTextColor:  brand.accent,
+      lineStyle:        "tight",
+      fontPersonality:  "bold-sans",
+    },
+    spacing: {
+      density:              "balanced",
+      phonePaddingPercent:  8,
+      textToPhoneGap:       "medium",
+    },
+    colorExtraction: {
+      dominantBgColor:    brand.primary,
+      phoneFrameColor:    "#FFFFFF",
+      headlineTextColor:  "#FFFFFF",
+      accentColor:        brand.accent,
+      overallMood:        "neutral",
+    },
+    layoutDescription: "Single phone, slightly tilted, centered on brand background",
+  };
+}
+
+function mergeWithDefaults(extracted, brand) {
+  const defaults = defaultStyleProfile(brand);
+  return deepMerge(defaults, extracted);
+}
+
+function deepMerge(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override || {})) {
+    if (override[key] !== null && typeof override[key] === 'object' && !Array.isArray(override[key])) {
+      result[key] = deepMerge(base[key] || {}, override[key]);
+    } else if (override[key] !== null && override[key] !== undefined) {
+      result[key] = override[key];
+    }
+  }
+  return result;
+}
+
+// ─────────────────────────────────────────────────────────────────
+// UTILITIES
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * Build a stable layout ID from the profile for caching.
+ * e.g. "multi-phone_stacked-cascade_3_serif-editorial"
+ */
+function buildLayoutId(profile) {
+  const parts = [
+    profile.layout.type,
+    profile.layout.arrangement,
+    profile.layout.phoneCount,
+    profile.typography.fontPersonality,
+    profile.phoneFrame.style,
+  ];
+  return parts.join('_').replace(/[^a-z0-9_-]/gi, '-').toLowerCase();
+}
+
+/**
+ * Darken a hex color by a percentage.
+ */
+function darken(hex, amount) {
+  const { r, g, b } = hexToRgb(hex);
+  const d = 1 - amount;
+  return rgbToHex(Math.round(r * d), Math.round(g * d), Math.round(b * d));
+}
+
+function hexToRgb(hex) {
+  const h = hex.replace('#', '');
+  return {
+    r: parseInt(h.substring(0, 2), 16),
+    g: parseInt(h.substring(2, 4), 16),
+    b: parseInt(h.substring(4, 6), 16),
+  };
+}
+
+function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(v => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0')).join('');
+}
+
+module.exports = { analyzeStyleReference };