Building a Brand-Kit Extractor for Any Website Using Screenshotlayer API

				
					import json
from datetime import datetime
import base64
import requests
import os
from dotenv import load_dotenv
from openai import OpenAI

# Load environment variables
load_dotenv()

# Initialize OpenAI client
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

class BrandKitExtractor:
    """
    Complete brand-kit extraction pipeline
    """
    
    def __init__(self, url):
        self.url = url
        self.timestamp = datetime.now().isoformat()
        self.screenshotlayer_key = os.getenv("SCREENSHOTLAYER_API_KEY")
        self.openai_client = client
        self.brand_kit = {
            'url': url,
            'extracted_at': self.timestamp,
            'colors': {},
            'typography': {},
            'logo': {},
            'design_system': {}
        }
    
    def capture_screenshot(self, output_path="temp_screenshot.png"):
        """
        Capture fullpage screenshot using Screenshotlayer API
        """
        params = {
            'access_key': self.screenshotlayer_key,
            'url': self.url,
            'fullpage': 1,
            'viewport': '1440x900',
            'format': 'PNG',
            'delay': 3,
            'force': 0,
            'user_agent': 'BrandKit-Extractor/1.0'
        }
        
        api_url = "https://api.screenshotlayer.com/api/capture"
        
        try:
            response = requests.get(api_url, params=params, timeout=30)
            response.raise_for_status()
            
            with open(output_path, 'wb') as f:
                f.write(response.content)
                
            print(f"✓ Screenshot saved: {output_path}")
            return output_path
            
        except requests.exceptions.RequestException as e:
            print(f"✗ Screenshot failed: {e}")
            return None
    
    def extract_colors(self, screenshot_path):
        """
        Extract color palette using GPT-5 Vision
        """
        with open(screenshot_path, "rb") as image_file:
            base64_image = base64.b64encode(image_file.read()).decode('utf-8')
        
        prompt = """
        Analyze this website screenshot and extract the complete color palette:
        
        Return a JSON object with:
        - primary_colors: Array of 1-3 dominant brand colors (HEX format)
        - secondary_colors: Array of 2-4 supporting colors
        - accent_colors: Array of 1-2 CTA/highlight colors
        - background_colors: Array of 1-2 main background colors
        - text_colors: Array of 1-2 primary text colors
        
        For each color, include:
        - hex: Color code
        - usage: Where/how it's used (e.g., "Primary CTA buttons", "Hero section background")
        - percentage: Estimated coverage on page (0-100)
        
        Focus on intentional brand colors, not incidental image colors.
        Return only valid JSON, no markdown formatting.
        """
        
        response = self.openai_client.chat.completions.create(
            model="gpt-5",
            messages=[
                {
                    "role": "user",
                    "content": [
                        {"type": "text", "text": prompt},
                        {
                            "type": "image_url",
                            "image_url": {
                                "url": f"data:image/png;base64,{base64_image}"
                            }
                        }
                    ]
                }
            ],
            max_tokens=1500,
            response_format={"type": "json_object"}
        )
        
        return json.loads(response.choices[0].message.content)
    
    def extract_typography(self, screenshot_path):
        """
        Identify font families, sizes, and typographic hierarchy
        """
        with open(screenshot_path, "rb") as image_file:
            base64_image = base64.b64encode(image_file.read()).decode('utf-8')
        
        prompt = """
        Analyze the typography in this website screenshot:
        
        Return JSON with:
        - heading_font: {
            family: Font name (e.g., "Inter", "Helvetica"),
            weight: Font weight used for headings,
            style: "serif", "sans-serif", or "monospace",
            characteristics: Description of the typeface
          }
        - body_font: {
            family: Font name,
            weight: Typical weight for body text,
            style: Font style category
          }
        - mono_font: Font used for code/technical content (if present)
        - font_sizes: {
            h1: Estimated size in px,
            h2: Estimated size,
            body: Base body text size,
            small: Fine print size
          }
        - line_heights: Tight (1.2), normal (1.5), or loose (1.8)
        - letter_spacing: tight, normal, or wide
        
        Return only valid JSON.
        """
        
        response = self.openai_client.chat.completions.create(
            model="gpt-5",
            messages=[
                {
                    "role": "user",
                    "content": [
                        {"type": "text", "text": prompt},
                        {
                            "type": "image_url",
                            "image_url": {
                                "url": f"data:image/png;base64,{base64_image}"
                            }
                        }
                    ]
                }
            ],
            max_tokens=1000,
            response_format={"type": "json_object"}
        )
        
        return json.loads(response.choices[0].message.content)
    
    def extract_logo(self, screenshot_path):
        """
        Identify and describe logo placement, variations, and design
        """
        with open(screenshot_path, "rb") as image_file:
            base64_image = base64.b64encode(image_file.read()).decode('utf-8')
        
        prompt = """
        Analyze the logo(s) in this website screenshot:
        
        Return JSON with:
        - logo_location: "top-left", "center", "top-right", etc.
        - logo_type: "wordmark", "icon", "combination", or "emblem"
        - logo_colors: Array of HEX colors used in logo
        - logo_style: Description (e.g., "minimalist", "geometric", "playful")
        - has_variations: Boolean - are there light/dark versions visible?
        - approximate_dimensions: {width: px, height: px}
        - design_elements: Array of notable features (e.g., "rounded corners", "gradient fill")
        
        Return only valid JSON.
        """
        
        response = self.openai_client.chat.completions.create(
            model="gpt-5",
            messages=[
                {
                    "role": "user",
                    "content": [
                        {"type": "text", "text": prompt},
                        {
                            "type": "image_url",
                            "image_url": {
                                "url": f"data:image/png;base64,{base64_image}"
                            }
                        }
                    ]
                }
            ],
            max_tokens=800,
            response_format={"type": "json_object"}
        )
        
        return json.loads(response.choices[0].message.content)
    
    def analyze_design_principles(self, screenshot_path):
        """
        Extract high-level design approach and principles
        """
        with open(screenshot_path, "rb") as image_file:
            base64_image = base64.b64encode(image_file.read()).decode('utf-8')
        
        prompt = """
        Analyze the overall design approach of this website:
        
        Return JSON with:
        - design_style: "minimalist", "bold", "corporate", "playful", etc.
        - spacing: "tight", "comfortable", or "generous"
        - corner_radius: "sharp", "slightly rounded", or "heavily rounded"
        - shadow_usage: "none", "subtle", or "prominent"
        - image_treatment: "photography", "illustrations", "3D graphics", "mixed"
        - layout_style: "grid-based", "asymmetric", "magazine-style", etc.
        - animation_presence: Boolean
        - overall_feel: 2-3 sentence description
        
        Return only valid JSON.
        """
        
        response = self.openai_client.chat.completions.create(
            model="gpt-5",
            messages=[
                {
                    "role": "user",
                    "content": [
                        {"type": "text", "text": prompt},
                        {
                            "type": "image_url",
                            "image_url": {
                                "url": f"data:image/png;base64,{base64_image}"
                            }
                        }
                    ]
                }
            ],
            max_tokens=600,
            response_format={"type": "json_object"}
        )
        
        return json.loads(response.choices[0].message.content)
    
    def extract_complete_brand_kit(self):
        """
        Run full extraction pipeline with both API keys
        """
        print(f"Extracting brand kit from: {self.url}\n")
        
        # Validate API keys
        if not self.screenshotlayer_key:
            print("Error: SCREENSHOTLAYER_API_KEY not found in environment")
            return None
        
        if not os.getenv("OPENAI_API_KEY"):
            print("Error: OPENAI_API_KEY not found in environment")
            return None
        
        # Step 1: Capture screenshot using Screenshotlayer API
        print("Step 1/5: Capturing screenshot...")
        screenshot_path = self.capture_screenshot("temp_screenshot.png")
        
        if not screenshot_path:
            return None
        
        # Step 2: Extract colors using GPT-5 Vision
        print("Step 2/5: Analyzing color palette...")
        self.brand_kit['colors'] = self.extract_colors(screenshot_path)
        
        # Step 3: Extract typography using GPT-5 Vision
        print("Step 3/5: Detecting typography...")
        self.brand_kit['typography'] = self.extract_typography(screenshot_path)
        
        # Step 4: Extract logo using GPT-5 Vision
        print(" Step 4/5: Analyzing logo...")
        self.brand_kit['logo'] = self.extract_logo(screenshot_path)
        
        # Step 5: Generate design principles using GPT-5 Vision
        print("✨ Step 5/5: Generating design principles...")
        self.brand_kit['design_system'] = self.analyze_design_principles(screenshot_path)
        
        print("\n Brand kit extraction complete!")
        return self.brand_kit
    
    def export_to_json(self, output_file="brand_kit.json"):
        """
        Save brand kit to JSON file
        """
        with open(output_file, 'w') as f:
            json.dump(self.brand_kit, f, indent=2)
        
        print(f"\n Brand kit saved to: {output_file}")
        
    def generate_markdown_report(self, output_file="brand_kit.md"):
        """
        Create human-readable markdown report
        """
        report = f"""# Brand Kit: {self.url}
*Extracted on {self.timestamp}*

## Color Palette

### Primary Colors
"""
        for color in self.brand_kit['colors'].get('primary_colors', []):
            report += f"- **{color['hex']}** - {color['usage']} ({color['percentage']}% coverage)\n"
        
        report += "\n### Secondary Colors\n"
        for color in self.brand_kit['colors'].get('secondary_colors', []):
            report += f"- **{color['hex']}** - {color['usage']}\n"
        
        report += f"\n## Typography\n\n"
        typo = self.brand_kit['typography']
        report += f"- **Heading Font:** {typo.get('heading_font', {}).get('family', 'Unknown')}\n"
        report += f"- **Body Font:** {typo.get('body_font', {}).get('family', 'Unknown')}\n"
        
        report += f"\n## Logo\n\n"
        logo = self.brand_kit['logo']
        report += f"- **Type:** {logo.get('logo_type', 'Unknown')}\n"
        report += f"- **Style:** {logo.get('logo_style', 'Unknown')}\n"
        
        report += f"\n## Design System\n\n"
        design = self.brand_kit['design_system']
        report += f"**Overall Feel:** {design.get('overall_feel', 'N/A')}\n"
        
        with open(output_file, 'w') as f:
            f.write(report)
        
        print(f"Markdown report saved to: {output_file}")

# Example Usage
if __name__ == "__main__":
    # Ensure .env file contains both API keys
    extractor = BrandKitExtractor("https://vercel.com")
    brand_kit = extractor.extract_complete_brand_kit()
    
    if brand_kit:
        extractor.export_to_json("vercel_brand_kit.json")
        extractor.generate_markdown_report("vercel_brand_kit.md")
        
        # Display summary
        print("\n" + "="*50)
        print("BRAND KIT SUMMARY")
        print("="*50)
        print(f"\nPrimary Color: {brand_kit['colors']['primary_colors'][0]['hex']}")
        print(f"Heading Font: {brand_kit['typography']['heading_font']['family']}")
        print(f"Logo Type: {brand_kit['logo']['logo_type']}")
        print(f"Design Style: {brand_kit['design_system']['design_style']}")