design-clone 1.0.0

package/src/post-process/fetch-images.js

@@ -0,0 +1,398 @@
+#!/usr/bin/env node
+/**
+ * Unsplash Image Fetcher for Design Clone
+ *
+ * Fetches relevant images from Unsplash to replace placeholder URLs in generated HTML.
+ *
+ * Usage:
+ *   node fetch-images.js --html ./index.html --output ./
+ *
+ * Environment:
+ *   UNSPLASH_ACCESS_KEY - Your Unsplash API access key
+ *
+ * Features:
+ *   - Extracts context from alt text and surrounding content
+ *   - Searches Unsplash for relevant images
+ *   - Replaces placehold.co URLs with real images
+ *   - Creates attribution.json for credits
+ *   - Graceful fallback when API unavailable
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+
+const UNSPLASH_API = 'https://api.unsplash.com';
+const PLACEHOLDER_PATTERNS = [
+  /https?:\/\/placehold\.co\/[^"'\s)]+/gi,
+  /https?:\/\/placeholder\.com\/[^"'\s)]+/gi,
+  /https?:\/\/via\.placeholder\.com\/[^"'\s)]+/gi,
+  /https?:\/\/picsum\.photos\/[^"'\s)]+/gi
+];
+
+// Cache for search results to avoid duplicate API calls
+const searchCache = new Map();
+
+/**
+ * Parse command line arguments
+ */
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const options = {
+    html: null,
+    output: null,
+    verbose: false
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--html':
+        options.html = args[++i];
+        break;
+      case '--output':
+        options.output = args[++i];
+        break;
+      case '--verbose':
+        options.verbose = true;
+        break;
+    }
+  }
+
+  return options;
+}
+
+/**
+ * Extract image contexts from HTML
+ * Returns array of { placeholder, alt, context, orientation }
+ */
+function extractImageContexts(html) {
+  const contexts = [];
+  const imgRegex = /<img[^>]*>/gi;
+  const matches = html.matchAll(imgRegex);
+
+  for (const match of matches) {
+    const imgTag = match[0];
+
+    // Check if src is a placeholder
+    let placeholderUrl = null;
+    for (const pattern of PLACEHOLDER_PATTERNS) {
+      const srcMatch = imgTag.match(pattern);
+      if (srcMatch) {
+        placeholderUrl = srcMatch[0];
+        break;
+      }
+    }
+
+    if (!placeholderUrl) continue;
+
+    // Extract alt text
+    const altMatch = imgTag.match(/alt=["']([^"']*)["']/i);
+    const alt = altMatch ? altMatch[1] : '';
+
+    // Determine orientation from placeholder URL dimensions
+    let orientation = 'landscape';
+    const dimMatch = placeholderUrl.match(/(\d+)x(\d+)/);
+    if (dimMatch) {
+      const width = parseInt(dimMatch[1]);
+      const height = parseInt(dimMatch[2]);
+      if (height > width) orientation = 'portrait';
+      else if (height === width) orientation = 'squarish';
+    }
+
+    // Extract surrounding context (100 chars before/after)
+    const position = match.index;
+    const contextStart = Math.max(0, position - 100);
+    const contextEnd = Math.min(html.length, position + imgTag.length + 100);
+    const surroundingText = html.slice(contextStart, contextEnd)
+      .replace(/<[^>]+>/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    contexts.push({
+      placeholder: placeholderUrl,
+      alt: alt,
+      context: surroundingText,
+      orientation: orientation,
+      originalTag: imgTag
+    });
+  }
+
+  return contexts;
+}
+
+/**
+ * Generate search keywords from image context
+ */
+function generateKeywords(imageContext) {
+  const { alt, context } = imageContext;
+
+  // Priority: alt text > surrounding context
+  let keywords = alt;
+
+  if (!keywords || keywords.length < 3) {
+    // Extract meaningful words from context
+    const words = context
+      .toLowerCase()
+      .replace(/[^\w\s]/g, '')
+      .split(/\s+/)
+      .filter(w => w.length > 3)
+      .filter(w => !['http', 'https', 'www', 'html', 'class', 'style'].includes(w));
+
+    keywords = words.slice(0, 3).join(' ');
+  }
+
+  // Translate common Japanese keywords for better Unsplash results
+  const translations = {
+    '会社': 'company office',
+    '仕事': 'work business',
+    '人': 'people team',
+    'サービス': 'service',
+    'ビジネス': 'business',
+    '技術': 'technology',
+    'オフィス': 'office',
+    'チーム': 'team',
+    'ミーティング': 'meeting',
+    '開発': 'development',
+    'デザイン': 'design',
+    'マーケティング': 'marketing',
+    '事例': 'case study business',
+    '導入': 'implementation',
+    'CTA': 'business success'
+  };
+
+  for (const [jp, en] of Object.entries(translations)) {
+    if (keywords.includes(jp)) {
+      keywords = keywords.replace(jp, en);
+    }
+  }
+
+  // Default fallback
+  if (!keywords || keywords.length < 3) {
+    keywords = 'business professional';
+  }
+
+  return keywords.trim();
+}
+
+/**
+ * Search Unsplash for images
+ */
+async function searchUnsplash(keywords, orientation = 'landscape') {
+  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
+
+  if (!apiKey) {
+    return null;
+  }
+
+  // Check cache
+  const cacheKey = `${keywords}-${orientation}`;
+  if (searchCache.has(cacheKey)) {
+    return searchCache.get(cacheKey);
+  }
+
+  try {
+    const params = new URLSearchParams({
+      query: keywords,
+      orientation: orientation,
+      per_page: '1'
+    });
+
+    const response = await fetch(`${UNSPLASH_API}/search/photos?${params}`, {
+      headers: {
+        'Authorization': `Client-ID ${apiKey}`,
+        'Accept-Version': 'v1'
+      }
+    });
+
+    if (!response.ok) {
+      if (response.status === 403) {
+        console.warn('  ⚠ Unsplash rate limit reached');
+      }
+      return null;
+    }
+
+    const data = await response.json();
+
+    if (data.results && data.results.length > 0) {
+      const photo = data.results[0];
+      const result = {
+        id: photo.id,
+        url: photo.urls.regular, // 1080px width
+        thumb: photo.urls.thumb,
+        photographer: photo.user.name,
+        photographerUrl: photo.user.links.html,
+        downloadLocation: photo.links.download_location
+      };
+
+      searchCache.set(cacheKey, result);
+      return result;
+    }
+
+    return null;
+  } catch (error) {
+    console.warn(`  ⚠ Unsplash search failed: ${error.message}`);
+    return null;
+  }
+}
+
+/**
+ * Trigger download event for attribution (required by Unsplash API)
+ */
+async function triggerDownload(downloadLocation) {
+  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
+  if (!apiKey || !downloadLocation) return;
+
+  try {
+    await fetch(downloadLocation, {
+      headers: {
+        'Authorization': `Client-ID ${apiKey}`
+      }
+    });
+  } catch {
+    // Silently fail - not critical
+  }
+}
+
+/**
+ * Replace placeholder URLs in HTML with Unsplash images
+ */
+async function replaceImages(html, verbose = false) {
+  const contexts = extractImageContexts(html);
+  const attributions = [];
+  let updatedHtml = html;
+  let replacedCount = 0;
+
+  if (verbose) {
+    console.log(`  Found ${contexts.length} placeholder images`);
+  }
+
+  for (const ctx of contexts) {
+    const keywords = generateKeywords(ctx);
+
+    if (verbose) {
+      console.log(`  → Searching: "${keywords}" (${ctx.orientation})`);
+    }
+
+    const photo = await searchUnsplash(keywords, ctx.orientation);
+
+    if (photo) {
+      // Replace placeholder URL with Unsplash URL
+      updatedHtml = updatedHtml.replace(ctx.placeholder, photo.url);
+      replacedCount++;
+
+      // Track attribution
+      attributions.push({
+        keywords: keywords,
+        photoId: photo.id,
+        url: photo.url,
+        photographer: photo.photographer,
+        photographerUrl: photo.photographerUrl,
+        license: 'Unsplash License'
+      });
+
+      // Trigger download for attribution tracking
+      await triggerDownload(photo.downloadLocation);
+
+      if (verbose) {
+        console.log(`    ✓ Found: ${photo.photographer}`);
+      }
+    } else if (verbose) {
+      console.log(`    ✗ No results`);
+    }
+
+    // Small delay to avoid rate limiting
+    await new Promise(r => setTimeout(r, 100));
+  }
+
+  return { html: updatedHtml, attributions, replacedCount };
+}
+
+/**
+ * Add attribution comment to HTML
+ */
+function addAttributionComment(html, attributions) {
+  if (attributions.length === 0) return html;
+
+  const comment = `
+<!--
+  Image Credits (Unsplash)
+  ========================
+${attributions.map(a => `  - "${a.keywords}": Photo by ${a.photographer} (${a.photographerUrl})`).join('\n')}
+
+  Licensed under the Unsplash License: https://unsplash.com/license
+-->
+`;
+
+  // Insert after <head> tag
+  return html.replace(/<head>/i, `<head>${comment}`);
+}
+
+/**
+ * Main function
+ */
+async function fetchImages(htmlPath, outputDir, verbose = false) {
+  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
+
+  if (!apiKey) {
+    console.log('  → Skipping Unsplash (no UNSPLASH_ACCESS_KEY set)');
+    return {
+      success: true,
+      skipped: true,
+      message: 'No API key configured'
+    };
+  }
+
+  // Read HTML
+  const html = await fs.readFile(htmlPath, 'utf-8');
+
+  // Replace images
+  const { html: updatedHtml, attributions, replacedCount } = await replaceImages(html, verbose);
+
+  if (replacedCount > 0) {
+    // Add attribution comment
+    const finalHtml = addAttributionComment(updatedHtml, attributions);
+
+    // Write updated HTML
+    await fs.writeFile(htmlPath, finalHtml, 'utf-8');
+
+    // Write attribution JSON
+    const attrPath = path.join(outputDir, 'attribution.json');
+    await fs.writeFile(attrPath, JSON.stringify({
+      generated: new Date().toISOString(),
+      source: 'Unsplash',
+      images: attributions
+    }, null, 2), 'utf-8');
+
+    console.log(`  ✓ Replaced ${replacedCount} images from Unsplash`);
+  } else {
+    console.log('  → No placeholder images found to replace');
+  }
+
+  return {
+    success: true,
+    replacedCount,
+    attributions
+  };
+}
+
+// CLI execution
+if (process.argv[1] === new URL(import.meta.url).pathname) {
+  const args = parseArgs();
+
+  if (!args.html) {
+    console.error('Usage: node fetch-images.js --html <path> --output <dir>');
+    process.exit(1);
+  }
+
+  const outputDir = args.output || path.dirname(args.html);
+
+  fetchImages(args.html, outputDir, args.verbose)
+    .then(result => {
+      console.log(JSON.stringify(result, null, 2));
+    })
+    .catch(error => {
+      console.error('Error:', error.message);
+      process.exit(1);
+    });
+}
+
+export { fetchImages, extractImageContexts, generateKeywords };

package/src/post-process/inject-icons.js

@@ -0,0 +1,311 @@
+#!/usr/bin/env node
+/**
+ * Japanese-style SVG Icon Injector for Design Clone
+ *
+ * Injects Japanese-style SVG icons into generated HTML by:
+ * - Detecting generic SVG placeholders
+ * - Matching semantic keywords to icon library
+ * - Replacing with curated Japanese-aesthetic icons
+ *
+ * Usage:
+ *   node inject-icons.js --html ./index.html
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { icons, iconMapping, getIcon, getIconByKeyword } from './icons/japanese-icons.js';
+
+/**
+ * Parse command line arguments
+ */
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const options = {
+    html: null,
+    verbose: false
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--html':
+        options.html = args[++i];
+        break;
+      case '--verbose':
+        options.verbose = true;
+        break;
+    }
+  }
+
+  return options;
+}
+
+/**
+ * Extract context from element's surrounding HTML
+ */
+function extractContext(html, position, range = 200) {
+  const start = Math.max(0, position - range);
+  const end = Math.min(html.length, position + range);
+  return html.slice(start, end);
+}
+
+/**
+ * Detect icon purpose from class names, aria-label, or surrounding text
+ */
+function detectIconPurpose(svgTag, context) {
+  // Check class names
+  const classMatch = svgTag.match(/class=["']([^"']*)["']/i);
+  if (classMatch) {
+    const classes = classMatch[1].toLowerCase();
+
+    // Check for icon type in class
+    for (const keyword of Object.keys(iconMapping)) {
+      if (classes.includes(keyword)) {
+        return keyword;
+      }
+    }
+
+    // Check for category hints
+    if (classes.includes('icon')) {
+      // Try to extract purpose from class like "icon-mail" or "mail-icon"
+      const parts = classes.split(/[-_\s]+/);
+      for (const part of parts) {
+        if (iconMapping[part]) {
+          return part;
+        }
+      }
+    }
+  }
+
+  // Check aria-label
+  const ariaMatch = svgTag.match(/aria-label=["']([^"']*)["']/i);
+  if (ariaMatch) {
+    const label = ariaMatch[1].toLowerCase();
+    for (const keyword of Object.keys(iconMapping)) {
+      if (label.includes(keyword)) {
+        return keyword;
+      }
+    }
+  }
+
+  // Check surrounding context for hints
+  const contextLower = context.toLowerCase();
+
+  // Priority keywords for Japanese business sites
+  const priorityKeywords = [
+    'mail', 'email', 'phone', 'tel', 'location', 'address',
+    'menu', 'search', 'home', 'arrow', 'chevron',
+    'user', 'users', 'team', 'company', 'building',
+    'twitter', 'facebook', 'instagram', 'linkedin', 'line',
+    'check', 'info', 'warning', 'success', 'star',
+    'sakura', 'wave', 'zen'
+  ];
+
+  for (const keyword of priorityKeywords) {
+    if (contextLower.includes(keyword)) {
+      return keyword;
+    }
+  }
+
+  // Default to decorative
+  return 'decorative';
+}
+
+/**
+ * Find SVG elements that need replacement
+ */
+function findSvgElements(html) {
+  const elements = [];
+
+  // Pattern 1: Generic SVG with viewBox (likely placeholder)
+  const svgRegex = /<svg[^>]*viewBox=["'][^"']*["'][^>]*>[\s\S]*?<\/svg>/gi;
+
+  let match;
+  while ((match = svgRegex.exec(html)) !== null) {
+    const svgTag = match[0];
+    const context = extractContext(html, match.index);
+
+    // Skip if it's a complex SVG (logo, illustration)
+    // Simple icons typically have fewer than 3 path/shape elements
+    const pathCount = (svgTag.match(/<(path|circle|rect|line|polyline|polygon)/gi) || []).length;
+
+    // Skip logo SVGs (typically contain text elements or complex paths)
+    if (svgTag.includes('<text') || pathCount > 6) {
+      continue;
+    }
+
+    // Skip if it has specific classes indicating it's a logo
+    if (/class=["'][^"']*(logo|brand)[^"']*["']/i.test(svgTag)) {
+      continue;
+    }
+
+    elements.push({
+      original: svgTag,
+      position: match.index,
+      context: context,
+      purpose: detectIconPurpose(svgTag, context)
+    });
+  }
+
+  return elements;
+}
+
+/**
+ * Preserve original attributes when replacing SVG
+ */
+function preserveAttributes(originalSvg, newSvg) {
+  // Extract class from original
+  const classMatch = originalSvg.match(/class=["']([^"']*)["']/i);
+  const widthMatch = originalSvg.match(/width=["']([^"']*)["']/i);
+  const heightMatch = originalSvg.match(/height=["']([^"']*)["']/i);
+  const ariaMatch = originalSvg.match(/aria-[^=]+=["'][^"']*["']/gi);
+
+  let result = newSvg;
+
+  // Add class if present
+  if (classMatch) {
+    result = result.replace('<svg', `<svg class="${classMatch[1]}"`);
+  }
+
+  // Preserve width/height if specified
+  if (widthMatch) {
+    result = result.replace('<svg', `<svg width="${widthMatch[1]}"`);
+  }
+  if (heightMatch) {
+    result = result.replace('<svg', `<svg height="${heightMatch[1]}"`);
+  }
+
+  // Preserve aria attributes
+  if (ariaMatch) {
+    const attrs = ariaMatch.join(' ');
+    result = result.replace('<svg', `<svg ${attrs}`);
+  }
+
+  return result;
+}
+
+/**
+ * Inject icons into HTML
+ */
+async function injectIcons(htmlPath, verbose = false) {
+  // Read HTML
+  const html = await fs.readFile(htmlPath, 'utf-8');
+
+  // Find SVG elements
+  const elements = findSvgElements(html);
+
+  if (verbose) {
+    console.log(`  Found ${elements.length} SVG elements to enhance`);
+  }
+
+  if (elements.length === 0) {
+    console.log('  → No SVG icons to enhance');
+    return {
+      success: true,
+      replacedCount: 0
+    };
+  }
+
+  let updatedHtml = html;
+  let replacedCount = 0;
+  const replacements = [];
+
+  // Process elements in reverse order to maintain positions
+  const sortedElements = [...elements].sort((a, b) => b.position - a.position);
+
+  for (const element of sortedElements) {
+    const iconName = iconMapping[element.purpose] || 'decorative-dot';
+    const newIcon = getIcon(iconName);
+    const preservedIcon = preserveAttributes(element.original, newIcon);
+
+    updatedHtml = updatedHtml.replace(element.original, preservedIcon);
+    replacedCount++;
+
+    replacements.push({
+      purpose: element.purpose,
+      iconName: iconName
+    });
+
+    if (verbose) {
+      console.log(`  → Replaced: ${element.purpose} → ${iconName}`);
+    }
+  }
+
+  // Write updated HTML
+  await fs.writeFile(htmlPath, updatedHtml, 'utf-8');
+
+  console.log(`  ✓ Enhanced ${replacedCount} icons with Japanese style`);
+
+  return {
+    success: true,
+    replacedCount,
+    replacements
+  };
+}
+
+/**
+ * Add icon styles to HTML if not present
+ */
+async function ensureIconStyles(htmlPath) {
+  const html = await fs.readFile(htmlPath, 'utf-8');
+
+  // Check if icon styles already exist
+  if (html.includes('.icon {') || html.includes('/* Icon styles */')) {
+    return;
+  }
+
+  const iconStyles = `
+  /* Japanese-style icon defaults */
+  .icon {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+
+  .icon--sm {
+    width: 16px;
+    height: 16px;
+  }
+
+  .icon--lg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .icon--decorative {
+    opacity: 0.6;
+  }
+`;
+
+  // Find </style> or add before </head>
+  let updatedHtml;
+  if (html.includes('</style>')) {
+    updatedHtml = html.replace('</style>', `${iconStyles}\n</style>`);
+  } else if (html.includes('</head>')) {
+    updatedHtml = html.replace('</head>', `<style>${iconStyles}</style>\n</head>`);
+  } else {
+    return; // Can't safely add styles
+  }
+
+  await fs.writeFile(htmlPath, updatedHtml, 'utf-8');
+}
+
+// CLI execution
+if (process.argv[1] === new URL(import.meta.url).pathname) {
+  const args = parseArgs();
+
+  if (!args.html) {
+    console.error('Usage: node inject-icons.js --html <path>');
+    process.exit(1);
+  }
+
+  injectIcons(args.html, args.verbose)
+    .then(result => {
+      console.log(JSON.stringify(result, null, 2));
+    })
+    .catch(error => {
+      console.error('Error:', error.message);
+      process.exit(1);
+    });
+}
+
+export { injectIcons, findSvgElements, detectIconPurpose };