Pin template

The current system uploads and scans REFERENCE SAMPLES with content but doesn't convert them into actual Pinterest templates. The system needs to extract visual styling from uploaded samples and create clean templates with placeholder tags.

CREATE A SMART WORKFLOW ENGINE THAT CONVERTS SAMPLES TO TEMPLATES:

STEP 1: UPLOAD & COMPREHENSIVE ANALYSIS
- System must: Upload sample → Extract ALL visual elements → Identify content vs design elements → Classify image types
- System checklist: ✓ High-accuracy fonts identified ✓ High-accuracy colors extracted ✓ High-accuracy layout structure mapped ✓ Content detected ✓ IMAGE TYPE CLASSIFIED: Placeholder icons vs Real photos ✓ High-accuracy visual styling preserved
- Show user: Analysis results with extracted fonts, colors, layout structure, detected content, and image classifications

IMAGE CLASSIFICATION REQUIREMENTS:
- Detect PLACEHOLDER ICONS: Gray mountain shapes, geometric icons, monochromatic colors (RGB 120-180 range), simple vector graphics, low detail complexity
- Detect REAL PHOTOS: Complex scenes, rich color palettes, photographic content, natural lighting, people/objects/landscapes, high detail level
- System must classify each image area as either "placeholder_icon" or "real_photo"
- Store classification results for preview generation logic

STEP 2: CONTENT MAPPING TO PLACEHOLDERS
- System must: Map detected content to placeholder tags BUT preserve all visual styling
- For each detected element:
 - Show what was found with its styling properties
 - Suggest appropriate placeholder tag from the approved list
 - Preserve high-accuracy visual styling (fonts, colors, sizes, positions)
- User can: Accept mapping, choose different placeholder, modify styling

STEP 3: PINTEREST TEMPLATE CREATION WITH VISUAL RECREATION
System must:
✓ Create SVG template that preserves high-accuracy visual design from uploaded sample
✓ Replace detected content with appropriate placeholder tags
✓ Replace ALL image areas with numbered image placeholder tags {IMAGE_1}, {IMAGE_2}, {IMAGE_3}... regardless of type
✓ Apply high-accuracy extracted fonts, colors, positioning as shown in sample
✓ Maintain high-accuracy layout structure, spacing, and visual hierarchy
✓ Create clean template with NO original content, only placeholder tags

STEP 4: DUAL OUTPUT GENERATION
System must create TWO separate files:
✓ Template file: Clean SVG with placeholder tags (template_[ID].svg)
✓ Preview file: JPEG image showing template with generic sample content (preview_[ID].jpg)

PREVIEW FILE REQUIREMENTS:
- Generate JPEG format for smaller file size
- Show template design with generic sample content (not original content from reference)
- High enough quality for template browsing but optimized for web display
- Same high-accuracy visual styling as template but with placeholder content filled in
- Use generic text content like "Sample Title", "Sample Description", "Sample Website"

SMART IMAGE PREVIEW LOGIC:
- IF image was classified as "placeholder_icon": Keep placeholder icons in preview JPEG (shows template expects user images)
- IF image was classified as "real_photo": Replace with stock photos from Pixabay/Unsplash/Pexels APIs (shows appealing preview)
- Maintain high-accuracy visual styling while applying appropriate image strategy
- Use random relevant stock images when replacing real photos
- Ensure stock images match aspect ratios of original design

STOCK PHOTO API INTEGRATION:
- Connect to Pixabay, Unsplash, and Pexels APIs for preview generation
- Use random relevant images when replacing real photos in previews
- Fallback to styled placeholder if API calls fail
- Select images that fit the template's theme/context

DOWNLOAD SYSTEM:
- Provide download links for both files
- Clear labeling: "Download Template File" and "Download Preview Image"
- Files should have matching IDs for easy database pairing
- Preview JPEG for template gallery display
- Template SVG for pin generation functionality

STEP 5: INTERACTIVE TEMPLATE EDITOR & VALIDATION
Before export, provide comprehensive editing interface with real-time preview:

VISUAL EDITING TOOLS:
✓ Color picker for each extracted color with live SVG preview updates
✓ Font selector with custom font upload capability and Google Fonts integration
✓ Drag handles for repositioning all elements (text, images, shapes)
✓ Size adjusters with input fields and drag handles for text and image placeholders
✓ Placeholder tag dropdown editor (change {TITLE} to {DESCRIPTION}, {SUBTITLE}, etc.)
✓ Text alignment controls (left, center, right, justify)
✓ Layer ordering controls (bring to front, send to back)
✓ Spacing and margin adjusters for precise positioning
✓ Real-time SVG template preview showing all modifications instantly
✓ Undo/redo functionality for all editing operations

EDITING INTERFACE REQUIREMENTS:
- Split-screen view: Original sample vs Live editable template preview
- Property panel showing current element's editable attributes
- All changes update both template SVG and preview JPEG in real-time
- Validation warnings if edits break template functionality
- Elements remain draggable and resizable with visual feedback
- Color changes apply to all instances of that color throughout template
- Font changes maintain sizing relationships and hierarchy
- Position changes maintain relative spacing and alignment

USER EDITING WORKFLOW:
- Click any element to select and show editing properties
- Drag elements to reposition with snap-to-grid assistance
- Use property panel for precise numeric adjustments
- Preview changes instantly without regenerating files
- Save editing state throughout session
- Reset to original extracted design option available

TEMPLATE VALIDATION DURING EDITING:
- Ensure all placeholder tags remain functional after modifications
- Verify text placeholders can accommodate variable content lengths
- Maintain aspect ratios for image placeholder areas
- Check that elements don't overlap inappropriately
- Validate that contrast ratios remain accessible
- Confirm template maintains visual balance with different content

FINAL EXPORT PREPARATION:
- Show final side-by-side comparison: Original sample vs Edited template with test content
- Display template statistics: dimensions, color count, font count, placeholder count
- Allow template naming with auto-generated filenames
- Final validation check before export
- Export edited template SVG and updated preview JPEG as separate downloads

TEMPLATE NAMING:
- Add input field: "Template Name" (user types: "My Awesome Template")
- System automatically generates matching filenames:
 - Template file: my-awesome-template.svg
 - Preview file: my-awesome-template.jpg
- Show user the generated filenames before download

- Export both template file and preview image as separate downloads (NOT zipped)

VISUAL EXTRACTION REQUIREMENTS:
- Font matching: Extract and apply high-accuracy fonts from uploaded sample with custom font support
- Color matching: Preserve high-accuracy colors from sample  
- Layout preservation: Maintain high-accuracy positioning and spacing
- Image handling: Classify image types first, then convert ALL image areas to numbered {IMAGE_X} tags, store classification for preview logic
- Text styling: Preserve high-accuracy formatting, alignment, sizes
- Background recreation: Extract and preserve high-accuracy backgrounds

PLACEHOLDER MAPPING RULES:
- Map detected content to appropriate placeholder tags from approved list
- Convert image areas to {IMAGE_1}, {IMAGE_2}, {IMAGE_3}, {IMAGE_4}, {IMAGE_5}, {IMAGE_6}, {IMAGE_7}, {IMAGE_8}, {IMAGE_9}, {IMAGE_10}... (numbered sequentially)
- Preserve high-accuracy original styling while replacing content with placeholders
- System determines mapping based on content analysis, NOT predetermined examples

DYNAMIC FITTING REQUIREMENTS:
- Text placeholders must auto-resize when real content is injected
- Image placeholders must maintain aspect ratios with real images
- Layout must adapt gracefully to varying content lengths
- Preserve visual balance with different content

PLACEHOLDER TAGS TO USE:
{TITLE}, {SUBTITLE}, {DESCRIPTION}, {AUTHOR}, {DATE}, {CATEGORY}, {TAG}, {QUOTE}, {CTA_TEXT}, {PRICE}, {DOMAIN}, {SITE_NAME}, {BRAND_NAME}, {URL}, {LOGO}, {IMAGE_URL}, {IMAGE_1}, {IMAGE_2}, {IMAGE_3}, {IMAGE_4}, {IMAGE_5}, {IMAGE_6}, {IMAGE_7}, {IMAGE_8}, {IMAGE_9}, {IMAGE_10}, {AVATAR}, {THUMBNAIL}, {BACKGROUND_IMAGE}, {USERNAME}, {USER_HANDLE}, {FOLLOWERS}, {LIKES}, {SHARES}, {VIEWS}, {RATING}, {PERCENTAGE}, {NUMBER}

The system should analyze whatever content is in the uploaded sample and create appropriate templates with dual outputs for both functionality and preview purposes. The image classification system ensures previews show the correct representation - placeholder icons remain as placeholders (showing template intent) while real photos get replaced with appealing stock images (showing potential).