task: refactors and refines analyzer prompts

data_collection/analyze_designs.py

@@ -5,12 +5,13 @@ import asyncio
 import base64
 from openai import AsyncOpenAI
 from dotenv import load_dotenv
+from anthropic import Anthropic
+from .prompts import get_prompt
 
 load_dotenv()
+client = Anthropic()
 
-VISION_MODEL = "gpt-4o-2024-08-06"
-
-client = AsyncOpenAI()
+VISION_MODEL = "claude-3-7-sonnet-20250219"
 
 async def analyze_screenshot(design_id: str, design_path: Path):
     """Analyze screenshots and return description, categories, and visual characteristics"""
@@ -46,21 +47,7 @@ async def analyze_screenshot(design_id: str, design_path: Path):
             messages=[
                 {
                     "role": "system",
-                    "content": """You are an expert graphic designer analyzing print and web designs for aesthetics, functionality, audience appeal, and potential applications.
-                    
-                    The design should be considered from a visual standpoint. Use chain of thought to consider color palette, visual layout, typography, artistic style, mood, and potential applications.
-                    Consider gradients, texture, background effects, and the use of images.
-                    
-                    Treat all text content as placeholder Lorem Ipsum.
-                    
-                    Provide analysis in clean JSON format with these exact keys:
-                    {
-                        "description": "A one-paragraph summary highlighting exceptional features of the design",
-                        "categories": ["category1", "category2"],
-                        "visual_characteristics": ["characteristic1", "characteristic2"]
-                    }
-                    Provide 4-6 categories and 4-6 visual characteristics most relevant to the style and feel of the design. Do not reference css or web design directly because this analysis is primarily about design. These lists should describe the design to another LLM that will use this data to generate a UI.
-                    """
+                    "content": get_prompt(detailed=True)
                 },
                 {
                     "role": "user",
@@ -115,7 +102,7 @@ async def analyze_screenshot(design_id: str, design_path: Path):
             
             print(f"Successfully analyzed design {design_id}")
             # Return visual_characteristics as fourth element
-            return design_id, analysis["description"], analysis["categories"], analysis["visual_characteristics"]
+            return design_id, analysis["description"]["summary"], analysis["categories"], analysis["visual_characteristics"]
             
         except json.JSONDecodeError as e:
             print(f"Error parsing JSON response for design {design_id}: {str(e)}")

data_collection/prompts.py

@@ -0,0 +1,101 @@
+"""
+Prompt templates for design analysis using different levels of detail.
+Each template is optimized for Claude 3.7 Sonnet's visual processing capabilities.
+"""
+
+DETAILED_ANALYSIS_PROMPT = """You are an expert design analyst with deep knowledge of visual design, aesthetics, human perception, and design history. Analyze designs holistically, considering their artistic merit, cultural context, and historical influences.
+
+For each design, perform a detailed visual analysis considering:
+1. Visual Composition & Hierarchy
+   - Layout structure and flow
+   - Balance and white space
+   - Focal points and emphasis
+
+2. Color & Atmosphere
+   - Color palette and relationships
+   - Emotional resonance
+   - Light and shadow
+
+3. Typography & Text Treatment
+   - Font choices and pairings
+   - Text hierarchy
+   - Readability and rhythm
+
+4. Texture & Depth
+   - Surface treatments
+   - Layering effects
+   - Material suggestions
+
+5. Artistic Elements
+   - Stylistic influences
+   - Decorative elements
+   - Visual metaphors
+
+6. Historical & Cultural Context
+   - Era-specific design trends
+   - Cultural references and influences
+   - Design movement associations
+
+Provide analysis in the following JSON format:
+{
+    "description": {
+        "summary": "A compelling one-paragraph overview of the design's most distinctive features",
+        "visual_style": "Detailed analysis of the design's artistic approach and visual language",
+        "emotional_impact": "Description of the mood, atmosphere, and emotional response the design evokes",
+        "compositional_elements": "Analysis of how different design elements work together"
+    },
+    "historical_context": {
+        "era_indicators": "Design elements that place this in a specific time period",
+        "cultural_references": "Cultural and artistic movements referenced in the design",
+        "design_trends": "Contemporary or historical design trends evident in the work"
+    },
+    "categories": [
+        "Primary design categories (4-6 items)",
+        "Include both timeless and era-specific categories"
+    ],
+    "visual_characteristics": [
+        "Specific visual techniques and elements (4-6 items)",
+        "Include both contemporary and historical design elements"
+    ],
+    "temporal_markers": {
+        "design_period": "Estimated time period or range",
+        "characteristic_elements": ["List of elements typical of this period"]
+    }
+}"""
+
+CORE_ANALYSIS_PROMPT = """You are an expert design analyst. Analyze the visual design, focusing on the most essential elements that define its style and character.
+
+Consider:
+1. Overall composition and layout
+2. Color palette and mood
+3. Typography and text treatment
+4. Key visual elements and textures
+5. Historical/cultural indicators
+
+Provide analysis in the following JSON format:
+{
+    "description": "A concise summary highlighting the design's most distinctive features",
+    "categories": [
+        "4-5 primary design categories that best classify this design"
+    ],
+    "visual_characteristics": [
+        "4-5 specific visual techniques or elements that define this design"
+    ],
+    "era_indicators": {
+        "period": "Estimated time period",
+        "key_elements": ["2-3 elements that date this design"]
+    }
+}"""
+
+def get_prompt(detailed: bool = True) -> str:
+    """
+    Returns the appropriate prompt template based on the desired detail level.
+    
+    Args:
+        detailed (bool): If True, returns the detailed analysis prompt.
+                        If False, returns the core analysis prompt.
+    
+    Returns:
+        str: The selected prompt template
+    """
+    return DETAILED_ANALYSIS_PROMPT if detailed else CORE_ANALYSIS_PROMPT 

data_collection/scraper.py

@@ -36,7 +36,7 @@ async def take_screenshot(url, directory):
         # Wait for network to be idle (no requests for at least 500ms)
         await page.wait_for_load_state("networkidle")
         # Add a significant delay to ensure background images are loaded
-        await page.wait_for_timeout(2000)
+        await page.wait_for_timeout(3000)
         
         # Get full height
         height = await page.evaluate('document.body.scrollHeight')

pyproject.toml

@@ -37,6 +37,7 @@ dependencies = [
     "matplotlib>=3.10.0",
     "accelerate>=0.26.0",
     "nest-asyncio>=1.6.0",
+    "anthropic>=0.49.0",
 ]
 
 [build-system]

uv.lock

@@ -1,4 +1,5 @@
 version = 1
+revision = 1
 requires-python = "==3.11.*"
 
 [[package]]
@@ -91,6 +92,24 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/78/b6/6307fbef88d9b5ee7421e68d78a9f162e0da4900bc5f5793f6d3d0e34fb8/annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53", size = 13643 },
 ]
 
+[[package]]
+name = "anthropic"
+version = "0.49.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "anyio" },
+    { name = "distro" },
+    { name = "httpx" },
+    { name = "jiter" },
+    { name = "pydantic" },
+    { name = "sniffio" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/86/e3/a88c8494ce4d1a88252b9e053607e885f9b14d0a32273d47b727cbee4228/anthropic-0.49.0.tar.gz", hash = "sha256:c09e885b0f674b9119b4f296d8508907f6cff0009bc20d5cf6b35936c40b4398", size = 210016 }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/76/74/5d90ad14d55fbe3f9c474fdcb6e34b4bed99e3be8efac98734a5ddce88c1/anthropic-0.49.0-py3-none-any.whl", hash = "sha256:bbc17ad4e7094988d2fa86b87753ded8dce12498f4b85fe5810f208f454a8375", size = 243368 },
+]
+
 [[package]]
 name = "anyio"
 version = "4.8.0"
@@ -853,6 +872,7 @@ version = "0.1.0"
 source = { editable = "." }
 dependencies = [
     { name = "accelerate" },
+    { name = "anthropic" },
     { name = "beautifulsoup4" },
     { name = "chainlit" },
     { name = "datasets" },
@@ -886,6 +906,7 @@ dependencies = [
 [package.metadata]
 requires-dist = [
     { name = "accelerate", specifier = ">=0.26.0" },
+    { name = "anthropic", specifier = ">=0.49.0" },
     { name = "beautifulsoup4", specifier = ">=4.12.0" },
     { name = "chainlit", specifier = ">=0.7.700" },
     { name = "datasets", specifier = ">=2.17.0" },