task: refines scraping and analysis

analyze_designs.py

@@ -13,7 +13,7 @@ VISION_MODEL = "gpt-4o-2024-08-06"
 client = AsyncOpenAI()
 
 async def analyze_screenshot(design_id: str, design_path: Path):
-    """Analyze screenshots and return description and categories"""
+    """Analyze screenshots and return description, categories, and visual characteristics"""
     try:
         # Check files exist
         metadata_path = design_path / "metadata.json"
@@ -22,7 +22,7 @@ async def analyze_screenshot(design_id: str, design_path: Path):
         
         if not all(f.exists() for f in [metadata_path, desktop_img, mobile_img]):
             print(f"Missing required files for design {design_id}")
-            return design_id, None, None
+            return design_id, None, None, None
         
         # Load existing metadata
         with open(metadata_path, "r") as f:
@@ -36,11 +36,11 @@ async def analyze_screenshot(design_id: str, design_path: Path):
                 mobile_base64 = base64.b64encode(f.read()).decode('utf-8')
         except Exception as e:
             print(f"Error reading images for design {design_id}: {str(e)}")
-            return design_id, None, None
+            return design_id, None, None, None
         
         print(f"Analyzing design {design_id}...")
         
-        # Analyze both screenshots with GPT-4 Vision
+        # Get response first
         response = await client.chat.completions.create(
             model=VISION_MODEL,
             messages=[
@@ -48,20 +48,18 @@ async def analyze_screenshot(design_id: str, design_path: Path):
                     "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, ignoring web responsiveness. 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. Make a distinction between background visual elements and functional visual elements.
+                    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": "Brief analysis focusing on standout features and potential use cases",
+                        "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.
-                    Categories should only refer to categories of design styling.
-                    This data will be consumed by another LLM, so provide enough categories and visual characteristics to explain the design.
+                    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.
                     """
                 },
                 {
@@ -90,10 +88,14 @@ async def analyze_screenshot(design_id: str, design_path: Path):
             ],
             max_tokens=1000
         )
+        
+        # Then get the content
+        response_content = response.choices[0].message.content.strip()
+        
         # Ensure the response is not empty
         if not response_content:
             print(f"Empty response for design {design_id}")
-            return design_id, None, None
+            return design_id, None, None, None
         
         # Extract JSON content from markdown code block
         if "```json" in response_content:
@@ -102,11 +104,7 @@ async def analyze_screenshot(design_id: str, design_path: Path):
         
         # Parse the JSON response
         try:
-            print(f"Cleaned response for design {design_id}: {response_content}")
             analysis = json.loads(response_content)
-            print(f"Description: {analysis['description']}")
-            print(f"Categories: {analysis['categories']}")
-            print(f"Visual Characteristics: {analysis['visual_characteristics']}")
             
             # Update metadata with all fields
             metadata.update(analysis)
@@ -116,15 +114,16 @@ async def analyze_screenshot(design_id: str, design_path: Path):
                 json.dump(metadata, f, indent=2)
             
             print(f"Successfully analyzed design {design_id}")
-            return design_id, analysis["description"], analysis["categories"]
+            # Return visual_characteristics as fourth element
+            return design_id, analysis["description"], analysis["categories"], analysis["visual_characteristics"]
             
         except json.JSONDecodeError as e:
             print(f"Error parsing JSON response for design {design_id}: {str(e)}")
-            return design_id, None, None
+            return design_id, None, None, None
         
     except Exception as e:
         print(f"Error processing design {design_id}: {str(e)}")
-        return design_id, None, None
+        return design_id, None, None, None
 
 async def main():
     designs_dir = Path("designs")
@@ -156,7 +155,7 @@ async def main():
     
     # Print summary
     successful = 0
-    for design_id, desc, cats in results:
+    for design_id, desc, cats, _ in results:
         if desc is not None:
             successful += 1
             print(f"\nDesign {design_id}:")

notebook.ipynb

@@ -6,6 +6,8 @@
    "source": [
     "# Zen Garden Design Analysis\n",
     "\n",
+    "## 1. Scrape\n",
+    "\n",
     "To collect our design data, we scrape csszengarden.com for design screenshots and associated styles. With over 200 designs, this should give us a good training set on how apply different styles and techniques."
    ]
   },
@@ -43,51 +45,31 @@
     "await test_scraper(test_set)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## 2. Analyze\n",
+    "\n",
+    "Now, using the screenshots and styles we downloaded, we analyze the design for characteristics that will be useful for retrieval."
+   ]
+  },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [
     {
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "Analyzing design 220...\n",
-      "Type of response content: <class 'str'>\n",
-      "Length of response content: 450\n",
-      "Cleaned response for design 220: {\n",
-      "    \"description\": \"The design is minimalistic with a focus on typography, subtle background elements, and a neutral color palette. It emphasizes a clean and organized layout, suitable for showcasing content-heavy pages such as articles or educational materials.\",\n",
-      "    \"categories\": [\"Minimalism\", \"Typography-focused\"],\n",
-      "    \"visual_characteristics\": [\"Neutral color palette\", \"Clean layout\", \"Subtle typography\", \"Organized content\"]\n",
-      "}\n",
-      "JSON parsed\n",
-      "Successfully analyzed design 220\n",
-      "\n",
-      "Analysis for design 220:\n",
-      "Description: The design is minimalistic with a focus on typography, subtle background elements, and a neutral color palette. It emphasizes a clean and organized layout, suitable for showcasing content-heavy pages such as articles or educational materials.\n",
-      "Categories: Minimalism, Typography-focused\n",
-      "Analyzing design 221...\n",
-      "Type of response content: <class 'str'>\n",
-      "Length of response content: 680\n",
-      "Cleaned response for design 221: {\n",
-      "    \"description\": \"The visual design features a bold, colorful layout with a mix of geometric shapes and high-contrast text blocks. It uses a playful color palette of purples, blues, oranges, and cream tones. The design is structured to guide the viewer's eye vertically and horizontally across sections with clear typography. It appears modern and suited for showcasing CSS design capabilities in a playful yet professional manner.\",\n",
-      "    \"categories\": [\n",
-      "        \"Modern\",\n",
-      "        \"Playful\"\n",
-      "    ],\n",
-      "    \"visual_characteristics\": [\n",
-      "        \"Bold colors\",\n",
-      "        \"Geometric shapes\",\n",
-      "        \"High-contrast typography\",\n",
-      "        \"Vertical and horizontal layout\"\n",
-      "    ]\n",
-      "}\n",
-      "JSON parsed\n",
-      "Successfully analyzed design 221\n",
+      "Analyzing design 010...\n",
+      "Successfully analyzed design 010\n",
       "\n",
-      "Analysis for design 221:\n",
-      "Description: The visual design features a bold, colorful layout with a mix of geometric shapes and high-contrast text blocks. It uses a playful color palette of purples, blues, oranges, and cream tones. The design is structured to guide the viewer's eye vertically and horizontally across sections with clear typography. It appears modern and suited for showcasing CSS design capabilities in a playful yet professional manner.\n",
-      "Categories: Modern, Playful\n"
+      "Analysis for design 010:\n",
+      "Description: The design features a harmonious combination of earthy tones and soft gradients, creating a serene and inviting atmosphere. The layout leverages clear headings and subheadings for readability while integrating subtle decorative elements for visual interest. Functionally, the design is divided into a main content area and a sidebar, enhancing navigability.\n",
+      "Categories: Web Design, Educational, Inspirational, Aesthetic, Textual\n",
+      "Visual Characteristics: Earthy Color Palette, Soft Gradients, Informative Layout, Balanced Composition, Text-focused Design\n"
      ]
     }
    ],

scraper.py

@@ -34,18 +34,7 @@ async def take_screenshot(url, directory):
         page = await browser.new_page(viewport={'width': 1920, 'height': 1080})
         await page.goto(url)
         # Wait for network to be idle (no requests for at least 500ms)
-        await page.wait_for_load_state('networkidle')
-        
-        # Wait for all images to be loaded
-        await page.evaluate("""() => {
-            return Promise.all(
-                Array.from(document.images)
-                    .filter(img => !img.complete)
-                    .map(img => new Promise(resolve => {
-                        img.onload = img.onerror = resolve;
-                    }))
-            );
-        }""")
+        await page.wait_for_load_state()
         
         # Additional wait to ensure any animations/transitions complete
         #await page.wait_for_timeout(2000)  # 2 second delay
@@ -59,18 +48,7 @@ async def take_screenshot(url, directory):
         page = await browser.new_page(viewport={'width': 480, 'height': 1080})
         await page.goto(url)
         # Wait for network to be idle (no requests for at least 500ms)
-        await page.wait_for_load_state('networkidle')
-        
-        # Wait for all images to be loaded
-        await page.evaluate("""() => {
-            return Promise.all(
-                Array.from(document.images)
-                    .filter(img => !img.complete)
-                    .map(img => new Promise(resolve => {
-                        img.onload = img.onerror = resolve;
-                    }))
-            );
-        }""")
+        await page.wait_for_load_state()
         
         # Additional wait to ensure any animations/transitions complete
         #await page.wait_for_timeout(2000)  # 2 second delay