1#!/usr/bin/env node
2/**
3 * extract-colors.cjs
4 *
5 * Extract dominant colors from an image and compare against brand palette.
6 * Uses pure Node.js without external image processing dependencies.
7 *
8 * For full color extraction from images, integrate with ai-multimodal skill
9 * or use ImageMagick via shell commands.
10 *
11 * Usage:
12 *   node extract-colors.cjs <image-path>
13 *   node extract-colors.cjs <image-path> --brand-file <path>
14 *   node extract-colors.cjs --palette  # Show brand palette from guidelines
15 *
16 * Integration:
17 *   For image color analysis, use: ai-multimodal skill or ImageMagick
18 *   magick <image> -colors 10 -depth 8 -format "%c" histogram:info:
19 */
20 
21const fs = require("fs");
22const path = require("path");
23 
24// Default brand guidelines path
25const DEFAULT_GUIDELINES_PATH = "docs/brand-guidelines.md";
26 
27/**
28 * Extract hex colors from markdown content
29 */
30function extractHexColors(text) {
31  const hexPattern = /#[0-9A-Fa-f]{6}\b/g;
32  return [...new Set(text.match(hexPattern) || [])];
33}
34 
35/**
36 * Parse brand guidelines for color palette
37 */
38function parseBrandColors(guidelinesPath) {
39  const resolvedPath = path.isAbsolute(guidelinesPath)
40    ? guidelinesPath
41    : path.join(process.cwd(), guidelinesPath);
42 
43  if (!fs.existsSync(resolvedPath)) {
44    return null;
45  }
46 
47  const content = fs.readFileSync(resolvedPath, "utf-8");
48 
49  const palette = {
50    primary: [],
51    secondary: [],
52    neutral: [],
53    semantic: [],
54    all: [],
55  };
56 
57  // Extract colors from different sections
58  const sections = [
59    { name: "primary", regex: /### Primary[\s\S]*?(?=###|##|$)/i },
60    { name: "secondary", regex: /### Secondary[\s\S]*?(?=###|##|$)/i },
61    { name: "neutral", regex: /### Neutral[\s\S]*?(?=###|##|$)/i },
62    { name: "semantic", regex: /### Semantic[\s\S]*?(?=###|##|$)/i },
63  ];
64 
65  sections.forEach(({ name, regex }) => {
66    const match = content.match(regex);
67    if (match) {
68      const colors = extractHexColors(match[0]);
69      palette[name] = colors;
70      palette.all.push(...colors);
71    }
72  });
73 
74  // Dedupe all
75  palette.all = [...new Set(palette.all)];
76 
77  return palette;
78}
79 
80/**
81 * Convert hex to RGB
82 */
83function hexToRgb(hex) {
84  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
85  return result
86    ? {
87        r: parseInt(result[1], 16),
88        g: parseInt(result[2], 16),
89        b: parseInt(result[3], 16),
90      }
91    : null;
92}
93 
94/**
95 * Convert RGB to hex
96 */
97function rgbToHex(r, g, b) {
98  return (
99    "#" +
100    [r, g, b]
101      .map((x) => {
102        const hex = Math.round(x).toString(16);
103        return hex.length === 1 ? "0" + hex : hex;
104      })
105      .join("")
106      .toUpperCase()
107  );
108}
109 
110/**
111 * Calculate color distance (Euclidean in RGB space)
112 */
113function colorDistance(color1, color2) {
114  const rgb1 = typeof color1 === "string" ? hexToRgb(color1) : color1;
115  const rgb2 = typeof color2 === "string" ? hexToRgb(color2) : color2;
116 
117  if (!rgb1 || !rgb2) return Infinity;
118 
119  return Math.sqrt(
120    Math.pow(rgb1.r - rgb2.r, 2) +
121      Math.pow(rgb1.g - rgb2.g, 2) +
122      Math.pow(rgb1.b - rgb2.b, 2)
123  );
124}
125 
126/**
127 * Find nearest brand color
128 */
129function findNearestBrandColor(color, brandColors) {
130  let nearest = null;
131  let minDistance = Infinity;
132 
133  brandColors.forEach((brandColor) => {
134    const distance = colorDistance(color, brandColor);
135    if (distance < minDistance) {
136      minDistance = distance;
137      nearest = brandColor;
138    }
139  });
140 
141  return { color: nearest, distance: minDistance };
142}
143 
144/**
145 * Calculate brand compliance percentage
146 * Distance threshold: 50 (out of max ~441 for RGB)
147 */
148function calculateCompliance(extractedColors, brandColors, threshold = 50) {
149  if (!extractedColors || extractedColors.length === 0) return 100;
150  if (!brandColors || brandColors.length === 0) return 0;
151 
152  let matchCount = 0;
153 
154  extractedColors.forEach((color) => {
155    const nearest = findNearestBrandColor(color, brandColors);
156    if (nearest.distance <= threshold) {
157      matchCount++;
158    }
159  });
160 
161  return Math.round((matchCount / extractedColors.length) * 100);
162}
163 
164/**
165 * Generate ImageMagick command for color extraction
166 */
167function generateImageMagickCommand(imagePath, numColors = 10) {
168  return `magick "${imagePath}" -colors ${numColors} -depth 8 -format "%c" histogram:info:`;
169}
170 
171/**
172 * Parse ImageMagick histogram output to extract colors
173 */
174function parseImageMagickOutput(output) {
175  const colors = [];
176  const lines = output.trim().split("\n");
177 
178  lines.forEach((line) => {
179    // Match pattern like: 12345: (255,128,64) #FF8040 srgb(255,128,64)
180    const hexMatch = line.match(/#([0-9A-Fa-f]{6})/);
181    const countMatch = line.match(/^\s*(\d+):/);
182 
183    if (hexMatch) {
184      colors.push({
185        hex: "#" + hexMatch[1].toUpperCase(),
186        count: countMatch ? parseInt(countMatch[1]) : 0,
187      });
188    }
189  });
190 
191  // Sort by count (most common first)
192  colors.sort((a, b) => b.count - a.count);
193 
194  return colors;
195}
196 
197/**
198 * Display brand palette
199 */
200function displayPalette(palette) {
201  console.log("\n" + "=".repeat(50));
202  console.log("BRAND COLOR PALETTE");
203  console.log("=".repeat(50));
204 
205  if (palette.primary.length > 0) {
206    console.log("\nPrimary Colors:");
207    palette.primary.forEach((c) => console.log(`  ${c}`));
208  }
209 
210  if (palette.secondary.length > 0) {
211    console.log("\nSecondary Colors:");
212    palette.secondary.forEach((c) => console.log(`  ${c}`));
213  }
214 
215  if (palette.neutral.length > 0) {
216    console.log("\nNeutral Colors:");
217    palette.neutral.forEach((c) => console.log(`  ${c}`));
218  }
219 
220  if (palette.semantic.length > 0) {
221    console.log("\nSemantic Colors:");
222    palette.semantic.forEach((c) => console.log(`  ${c}`));
223  }
224 
225  console.log("\n" + "=".repeat(50));
226  console.log(`Total: ${palette.all.length} colors in brand palette`);
227  console.log("=".repeat(50) + "\n");
228}
229 
230/**
231 * Main function
232 */
233function main() {
234  const args = process.argv.slice(2);
235  const jsonOutput = args.includes("--json");
236  const showPalette = args.includes("--palette");
237  const brandFileIdx = args.indexOf("--brand-file");
238  const brandFile =
239    brandFileIdx !== -1 ? args[brandFileIdx + 1] : DEFAULT_GUIDELINES_PATH;
240  const brandFileValue = brandFileIdx !== -1 ? args[brandFileIdx + 1] : null;
241  const imagePath = args.find(
242    (a) => !a.startsWith("--") && a !== brandFileValue
243  );
244 
245  // Load brand palette
246  const brandPalette = parseBrandColors(brandFile);
247 
248  if (!brandPalette) {
249    console.error(`Brand guidelines not found at: ${brandFile}`);
250    console.error(`Create brand guidelines or specify path with --brand-file`);
251    process.exit(1);
252  }
253 
254  // Show palette mode
255  if (showPalette || !imagePath) {
256    if (jsonOutput) {
257      console.log(JSON.stringify(brandPalette, null, 2));
258    } else {
259      displayPalette(brandPalette);
260 
261      if (!imagePath) {
262        console.log("To extract colors from an image:");
263        console.log("  node extract-colors.cjs <image-path>");
264        console.log("\nOr use ImageMagick directly:");
265        console.log('  magick image.png -colors 10 -depth 8 -format "%c" histogram:info:');
266      }
267    }
268    return;
269  }
270 
271  // Resolve image path
272  const resolvedPath = path.isAbsolute(imagePath)
273    ? imagePath
274    : path.join(process.cwd(), imagePath);
275 
276  if (!fs.existsSync(resolvedPath)) {
277    console.error(`Image not found: ${resolvedPath}`);
278    process.exit(1);
279  }
280 
281  // Generate extraction instructions
282  const result = {
283    image: resolvedPath,
284    brandPalette: brandPalette,
285    extractionCommand: generateImageMagickCommand(resolvedPath),
286    instructions: [
287      "1. Run the ImageMagick command to extract colors:",
288      `   ${generateImageMagickCommand(resolvedPath)}`,
289      "",
290      "2. Or use the ai-multimodal skill:",
291      `   python .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \\`,
292      `     --files "${resolvedPath}" \\`,
293      `     --task analyze \\`,
294      `     --prompt "Extract the 10 most dominant colors as hex values"`,
295      "",
296      "3. Then compare extracted colors against brand palette",
297    ],
298    complianceCheck: {
299      threshold: 50,
300      description:
301        "Colors within distance 50 (RGB space) are considered brand-compliant",
302      brandColors: brandPalette.all,
303    },
304  };
305 
306  if (jsonOutput) {
307    console.log(JSON.stringify(result, null, 2));
308  } else {
309    console.log("\n" + "=".repeat(60));
310    console.log("COLOR EXTRACTION HELPER");
311    console.log("=".repeat(60));
312    console.log(`\nImage: ${result.image}`);
313    console.log(`\nBrand Colors: ${brandPalette.all.length} colors loaded`);
314    console.log("\nTo extract colors from this image:\n");
315    result.instructions.forEach((line) => console.log(line));
316    console.log("\n" + "=".repeat(60));
317 
318    // Show brand palette for reference
319    console.log("\nBrand Palette Reference:");
320    console.log(`  Primary: ${brandPalette.primary.join(", ") || "none"}`);
321    console.log(`  Secondary: ${brandPalette.secondary.join(", ") || "none"}`);
322    console.log(`  Neutral: ${brandPalette.neutral.join(", ") || "none"}`);
323    console.log("=".repeat(60) + "\n");
324  }
325}
326 
327// Export functions for use as module
328module.exports = {
329  parseBrandColors,
330  hexToRgb,
331  rgbToHex,
332  colorDistance,
333  findNearestBrandColor,
334  calculateCompliance,
335  parseImageMagickOutput,
336};
337 
338// Run if called directly
339if (require.main === module) {
340  main();
341}
342