Merge pull request #4 from Technologic101/dev

data_collection/analyze_designs.py

@@ -141,11 +141,14 @@ async def analyze_screenshot(design_id: str, design_path: Path, detailed: bool =
         print(f"Error processing design {design_id}: {str(e)}")
         return design_id, None, None, None
 
-async def attribute_designs():
+async def attribute_designs(design_ids: list[str] = None):
     """
     Process scraped designs to extract title and author from CSS comments.
     Adds these attributes to the existing metadata.json files.
     Skips designs that already have both title and author.
+    
+    Args:
+        design_ids (list[str], optional): List of design IDs to process. If None, processes all designs.
     """
     designs_dir = Path("scraped_designs")
     
@@ -153,8 +156,13 @@ async def attribute_designs():
         print("Scraped designs directory not found!")
         return
     
-    # Get all design directories
-    design_dirs = [d for d in designs_dir.iterdir() if d.is_dir()]
+    # Get design directories based on provided IDs or all directories
+    if design_ids:
+        design_dirs = [designs_dir / design_id for design_id in design_ids]
+        print(f"Processing {len(design_dirs)} specified designs")
+    else:
+        design_dirs = [d for d in designs_dir.iterdir() if d.is_dir()]
+        print(f"Found {len(design_dirs)} designs to check")
     
     if not design_dirs:
         print("No design directories found!")

src/data/designs/027/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": "027",
+  "url": "https://www.csszengarden.com/027",
+  "css_url": "https://www.csszengarden.com/027/027.css",
+  "title": "Gothica",
+  "author": "Patrick H. Lauke aka redux",
+  "description": {
+    "summary": "A minimalist web design showcasing the principles of CSS Zen Garden with a monochromatic textural header and structured content layout that balances functionality with aesthetic restraint.",
+    "visual_style": "The design employs a zen-inspired aesthetic with textural stone imagery in the header and clean typographic hierarchy throughout the content area, framed by subtle patterned backgrounds.",
+    "emotional_impact": "Creates a serene, contemplative atmosphere through the use of stone textures, balanced white space, and structured information presentation.",
+    "compositional_elements": "Features a horizontal header with textural imagery, structured content area with clear section delineations, and sidebar navigation elements arranged in a hierarchical grid."
+  },
+  "artistic_context": {
+    "style_influences": "Minimalism, Japanese zen aesthetics, early web standards movement",
+    "visual_metaphors": "Stone garden textures suggesting meditation, structured layout resembling a path or journey"
+  },
+  "categories": [
+    "minimalist",
+    "structured",
+    "textural",
+    "monochromatic",
+    "grid-based",
+    "zen-inspired"
+  ],
+  "visual_characteristics": [
+    "stone-textured header",
+    "high-contrast typography",
+    "bordered content modules",
+    "subtle pattern background",
+    "hierarchical navigation",
+    "horizontal rule dividers"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "hierarchy",
+      "contrast",
+      "balance",
+      "unity"
+    ],
+    "visual_techniques": [
+      "textural background",
+      "modular layout",
+      "typographic scale"
+    ]
+  }
+}

src/data/designs/080/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": "080",
+  "url": "https://www.csszengarden.com/080",
+  "css_url": "https://www.csszengarden.com/080/080.css",
+  "title": "Zen Pool",
+  "author": "Clinton Barth",
+  "description": {
+    "summary": "A serene web design featuring a calm blue water-droplet header that contrasts with structured content blocks in varying shades of blue below",
+    "visual_style": "The design employs a structured column layout with distinct color-coded sections that create a harmonious rhythm between header elements and content areas",
+    "emotional_impact": "The water droplet imagery paired with the cool blue color palette evokes tranquility and clarity, reinforcing the meditation and zen concepts visually",
+    "compositional_elements": "A clear hierarchy is established through color-blocking, with a prominent header image, followed by alternating light and dark blue content sections that guide the eye vertically down the page"
+  },
+  "artistic_context": {
+    "style_influences": "Minimalist web design, early 2000s CSS demonstration sites, nature-inspired digital aesthetics",
+    "visual_metaphors": "Water droplets suggesting clarity and purity, structured boxes implying organization and mindfulness"
+  },
+  "categories": [
+    "structured",
+    "blue-monochrome",
+    "grid-based",
+    "nature-inspired",
+    "minimalist",
+    "educational"
+  ],
+  "visual_characteristics": [
+    "water-droplet texture",
+    "color-blocked layout",
+    "hierarchical navigation",
+    "columnar organization",
+    "text-heavy content",
+    "high-contrast headers"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "repetition",
+      "alignment"
+    ],
+    "visual_techniques": [
+      "color blocking",
+      "textural header",
+      "consistent spacing"
+    ]
+  }
+}

src/data/designs/102/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 102,
+  "url": "https://www.csszengarden.com/102",
+  "css_url": "https://www.csszengarden.com/102/102.css",
+  "title": "Revolution!",
+  "author": "David Hellsing",
+  "description": {
+    "summary": "A bold, visually striking design featuring a rich red and black color scheme with gold accents, abstract geometric elements, and decorative floral motifs creating a dramatic Eastern-inspired aesthetic.",
+    "visual_style": "The design combines ornate decorative elements with structured layout, creating tension between organic curves and rigid geometry against a textured background.",
+    "emotional_impact": "The intense color palette of deep reds and blacks evokes a sense of drama and contemplation, while the gold elements add a touch of reverence and enlightenment.",
+    "compositional_elements": "The design features a two-column layout with a decorative header area showcasing abstract golden geometric shapes and floral ornaments against a dark textured background."
+  },
+  "artistic_context": {
+    "style_influences": "Asian calligraphy, Constructivist geometry, Eastern ornamental patterns, Gothic texture",
+    "visual_metaphors": "Balance between structure and nature, tradition meeting modernity, path to enlightenment"
+  },
+  "categories": [
+    "ornamental",
+    "high-contrast",
+    "eastern-inspired",
+    "structured",
+    "dramatic",
+    "textural"
+  ],
+  "visual_characteristics": [
+    "rich-red-background",
+    "geometric-abstractions",
+    "floral-ornaments",
+    "gold-accents",
+    "textured-surfaces",
+    "two-column-layout"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "rhythm",
+      "balance"
+    ],
+    "visual_techniques": [
+      "layering",
+      "textural variation",
+      "negative space"
+    ]
+  }
+}

src/data/designs/111/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 111,
+  "url": "https://www.csszengarden.com/111",
+  "css_url": "https://www.csszengarden.com/111/111.css",
+  "title": "Gruener Entwurf",
+  "author": "Hannah F. Liesong",
+  "description": {
+    "summary": "A richly textured web design with a lush deep green botanical background supporting an elegant layout with gold script typography and a parchment-like central content area.",
+    "visual_style": "The design employs a classic garden-inspired aesthetic with organic textures contrasting against structured layout elements, creating a harmonious balance between natural and formal elements.",
+    "emotional_impact": "The deep green backdrop evokes a sense of tranquility and natural harmony, while the elegant script typography suggests sophistication and timelessness.",
+    "compositional_elements": "A horizontal arrangement with a prominent header area flowing into a centralized content panel with multiple columns of information, framed by textural elements and subtle navigation links."
+  },
+  "artistic_context": {
+    "style_influences": "Classic manuscript design, botanical illustration traditions, and elegant web design from the early 2000s era",
+    "visual_metaphors": "Garden cultivation as visual knowledge growth, manuscript as repository of wisdom, natural textures suggesting organic development"
+  },
+  "categories": [
+    "elegant",
+    "textural",
+    "botanical",
+    "classical",
+    "structured",
+    "ornate"
+  ],
+  "visual_characteristics": [
+    "textured-background",
+    "script-typography",
+    "green-gold-palette",
+    "column-layout",
+    "parchment-elements",
+    "contrasting-type-treatments"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "balance",
+      "unity"
+    ],
+    "visual_techniques": [
+      "texture layering",
+      "typographic scaling",
+      "color harmony"
+    ]
+  }
+}

src/data/designs/117/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 117,
+  "url": "https://www.csszengarden.com/117",
+  "css_url": "https://www.csszengarden.com/117/117.css",
+  "title": "Brushwood",
+  "author": "Katrin Zieger",
+  "description": {
+    "summary": "A nature-inspired website design with an earthy green palette and bamboo accents, creating a serene digital garden atmosphere for showcasing CSS design capabilities.",
+    "visual_style": "The design employs organic textures and natural elements within a structured grid system, balancing rustic charm with technical organization.",
+    "emotional_impact": "The earthy tones and botanical imagery evoke a sense of calm contemplation and growth, reinforced by the zen garden metaphor.",
+    "compositional_elements": "Three-column layout with textured borders, cream parchment-like content area, and hierarchical text blocks organized in clearly defined sections."
+  },
+  "artistic_context": {
+    "style_influences": "Japanese zen gardens, natural minimalism, tactile papercraft, organic web design",
+    "visual_metaphors": "Garden as digital cultivation, bamboo as flexible structure, path to enlightenment"
+  },
+  "categories": [
+    "nature-inspired",
+    "textural",
+    "minimalist",
+    "organic",
+    "structured",
+    "earthy"
+  ],
+  "visual_characteristics": [
+    "bamboo texture",
+    "parchment-like panels",
+    "earth-tone palette",
+    "hierarchical typography",
+    "natural borders",
+    "column structure"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "unity",
+      "balance"
+    ],
+    "visual_techniques": [
+      "textural layering",
+      "organic framing",
+      "tonal harmony"
+    ]
+  }
+}

src/data/designs/145/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 145,
+  "url": "https://www.csszengarden.com/145",
+  "css_url": "https://www.csszengarden.com/145/145.css",
+  "title": "Paravion",
+  "author": "Emiliano Pennisi",
+  "description": {
+    "summary": "A nostalgic web design featuring a vintage postal aesthetic combined with structured informational content, creating a unique blend of retro charm and digital functionality.",
+    "visual_style": "The design employs a postal mail metaphor with air mail border elements, postage stamps, and postmarks, juxtaposed against a structured navigation system and content areas.",
+    "emotional_impact": "Evokes nostalgia through warm colors and vintage postal elements while maintaining a sense of organization and clarity through structured layout.",
+    "compositional_elements": "Features a central envelope/postcard visual as the header, with a three-column layout beneath: a narrow navigation menu, main content area, and complementary sidebar."
+  },
+  "artistic_context": {
+    "style_influences": "Mail art, vintage postal design, traditional web navigation systems, early 2000s web design conventions",
+    "visual_metaphors": "Communication as mail delivery, design as journey, digital enlightenment through traditional practice"
+  },
+  "categories": [
+    "nostalgic",
+    "postal-themed",
+    "structured",
+    "educational",
+    "warm-toned",
+    "vintage"
+  ],
+  "visual_characteristics": [
+    "airmail border stripes",
+    "warm wood-tone background",
+    "multi-column layout",
+    "vintage postmarks",
+    "hierarchical navigation",
+    "section headings with decorative elements"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "hierarchy",
+      "contrast",
+      "metaphor",
+      "repetition"
+    ],
+    "visual_techniques": [
+      "framing",
+      "color blocking",
+      "visual anchoring"
+    ]
+  }
+}

src/data/designs/148/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 148,
+  "url": "https://www.csszengarden.com/148",
+  "css_url": "https://www.csszengarden.com/148/148.css",
+  "title": "Museum",
+  "author": "Samuel Marin",
+  "description": {
+    "summary": "A minimalist virtual exhibition space displaying information about CSS Zen Garden through a series of framed text panels in a 3D gallery environment",
+    "visual_style": "The design adopts a stark, monochromatic approach with a virtual gallery aesthetic, featuring white walls, gray wooden flooring, and framed text panels that create an exhibition-like experience",
+    "emotional_impact": "The space evokes a contemplative, museum-like atmosphere through its sparse, orderly presentation and grayscale color scheme",
+    "compositional_elements": "The layout creates a vertical scrolling journey through several gallery rooms, each containing framed informational displays with small silhouette figures providing scale"
+  },
+  "artistic_context": {
+    "style_influences": "Virtual exhibition spaces, digital galleries, architectural visualization, minimalist design",
+    "visual_metaphors": "Physical gallery as information architecture, visitors as users navigating information, framed text as art objects"
+  },
+  "categories": [
+    "minimalist",
+    "architectural",
+    "monochromatic",
+    "exhibition-style",
+    "spatial",
+    "instructional"
+  ],
+  "visual_characteristics": [
+    "3D perspective",
+    "silhouette figures",
+    "framed panels",
+    "wood-textured floors",
+    "recessed lighting",
+    "sidebar navigation"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "hierarchy",
+      "repetition",
+      "contrast",
+      "spatial organization"
+    ],
+    "visual_techniques": [
+      "perspective depth",
+      "scale figures",
+      "framing elements"
+    ]
+  }
+}

src/data/designs/163/metadata.json

@@ -0,0 +1,45 @@
+{
+  "id": 163,
+  "url": "https://www.csszengarden.com/163",
+  "css_url": "https://www.csszengarden.com/163/163.css",
+  "title": "Like the Sea",
+  "author": "Lars Daum",
+  "description": {
+    "summary": "A tranquil, nature-inspired web design leveraging seashell imagery and soft textural elements to create a serene, meditative experience that evokes Japanese zen aesthetics",
+    "visual_style": "The design employs a soft, neutral color palette with organic elements, creating a harmonious balance between structured content and natural motifs",
+    "emotional_impact": "The visual composition evokes calm and contemplation through its spacious layout, subtle textures, and natural imagery",
+    "compositional_elements": "A well-structured two-column layout with decorative shells and botanical illustrations framing content areas, creating a sense of peaceful organization"
+  },
+  "artistic_context": {
+    "style_influences": "Japanese zen garden aesthetics, minimalist web design, natural material textures",
+    "visual_metaphors": "Seashells as symbols of natural beauty and simplicity, botanical silhouettes suggesting growth and harmony"
+  },
+  "categories": [
+    "natural",
+    "minimalist",
+    "textural",
+    "organic",
+    "structured"
+  ],
+  "visual_characteristics": [
+    "seashell imagery",
+    "muted color palette",
+    "decorative borders",
+    "botanical illustrations",
+    "textured background",
+    "handwritten-style typography"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "harmony",
+      "rhythm",
+      "contrast"
+    ],
+    "visual_techniques": [
+      "natural texturing",
+      "framing elements",
+      "hierarchical typography"
+    ]
+  }
+}

src/data/designs/189/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 189,
+  "url": "https://www.csszengarden.com/189",
+  "css_url": "https://www.csszengarden.com/189/189.css",
+  "title": "Mozart",
+  "author": "Andrew Brundle",
+  "description": {
+    "summary": "A richly textured, ornate website design that blends classical aesthetics with web design principles through a dark gold and black color scheme, musical motifs, and structured information hierarchy.",
+    "visual_style": "The design employs a baroque-inspired aesthetic with ornate gold decorative elements, musical notation, and historical imagery against a dark background, creating a sense of antiquity and artistic refinement.",
+    "emotional_impact": "The design evokes a sense of reverence and nostalgia, blending the formality of classical music with the warm richness of gold tones to create an atmosphere of artistic heritage.",
+    "compositional_elements": "A vertical layout with clearly defined sections separated by decorative musical notation bars, featuring a two-column structure with main content on the left and navigation elements on the right."
+  },
+  "artistic_context": {
+    "style_influences": "Baroque ornamentation, classical music iconography, illuminated manuscript traditions, vintage parchment textures",
+    "visual_metaphors": "Musical composition as design structure, golden illumination as enlightenment, ancient scrolls as knowledge repositories"
+  },
+  "categories": [
+    "ornate",
+    "baroque",
+    "vintage",
+    "textural",
+    "themed",
+    "high-contrast"
+  ],
+  "visual_characteristics": [
+    "gold-black color scheme",
+    "musical notation motifs",
+    "decorative dividers",
+    "historical imagery",
+    "textured backgrounds",
+    "ornamental typography"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "repetition",
+      "hierarchy",
+      "thematic consistency"
+    ],
+    "visual_techniques": [
+      "textural layering",
+      "decorative framing",
+      "historical referencing"
+    ]
+  }
+}

src/data/designs/194/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 194,
+  "url": "https://www.csszengarden.com/194",
+  "css_url": "https://www.csszengarden.com/194/194.css",
+  "title": "Dark Rose",
+  "author": "Rose Fu",
+  "description": {
+    "summary": "An elegant, minimalist web design that evokes traditional manuscript aesthetics while presenting structured content in a serene, organized layout.",
+    "visual_style": "The design employs a refined parchment-like aesthetic with subtle textures, decorative elements, and layered paper effects to create a contemplative, scholarly atmosphere.",
+    "emotional_impact": "The muted color palette and balanced composition evoke tranquility and mindfulness, reinforced by the delicate floral element that adds an organic touch to the structured layout.",
+    "compositional_elements": "The design utilizes a clear vertical hierarchy with distinct content sections, subtle borders, and thoughtful spacing that guides the viewer's eye naturally through the information."
+  },
+  "artistic_context": {
+    "style_influences": "Traditional manuscript design, Eastern minimalism, vintage document aesthetics, botanical illustration",
+    "visual_metaphors": "Layered paper as knowledge accumulation, floral element as natural growth and refinement, scroll-like presentation suggesting ancient wisdom"
+  },
+  "categories": [
+    "minimalist",
+    "vintage-inspired",
+    "elegant",
+    "textural",
+    "grid-based",
+    "manuscript"
+  ],
+  "visual_characteristics": [
+    "layered-paper effect",
+    "muted earth tones",
+    "botanical accent",
+    "typographic hierarchy",
+    "textured backgrounds",
+    "decorative borders"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "balance",
+      "hierarchy",
+      "contrast",
+      "harmony"
+    ],
+    "visual_techniques": [
+      "layering",
+      "textural depth",
+      "negative space"
+    ]
+  }
+}

src/data/designs/198/metadata.json

@@ -0,0 +1,46 @@
+{
+  "id": 198,
+  "url": "https://www.csszengarden.com/198",
+  "css_url": "https://www.csszengarden.com/198/198.css",
+  "title": "The Original",
+  "author": "Joachim Shotter",
+  "description": {
+    "summary": "A dramatic dark website design with strong grunge aesthetics, featuring distressed typography and a stark black background with high contrast white and red textual elements.",
+    "visual_style": "The design employs a gritty, industrial aesthetic with heavily distressed typography and textural elements against a deep black background, creating a raw, edgy visual experience.",
+    "emotional_impact": "The dark, high-contrast composition evokes an underground, rebellious atmosphere with an intense, almost confrontational energy tempered by structured information hierarchy.",
+    "compositional_elements": "The layout presents a clear two-column structure with distressed headings and red accent elements creating visual punctuation throughout the vertical scroll design."
+  },
+  "artistic_context": {
+    "style_influences": "Industrial design, grunge typography, digital decay aesthetics, zen minimalism contrasted with chaotic texture",
+    "visual_metaphors": "Digital erosion, rebellion against clean design, controlled chaos, technological weathering"
+  },
+  "categories": [
+    "grunge",
+    "industrial",
+    "high-contrast",
+    "minimalist",
+    "textural",
+    "dark-themed"
+  ],
+  "visual_characteristics": [
+    "distressed-typography",
+    "black-background",
+    "red-accents",
+    "textural-overlays",
+    "two-column-layout",
+    "angular-elements"
+  ],
+  "design_principles": {
+    "primary_principles": [
+      "contrast",
+      "hierarchy",
+      "repetition",
+      "texture"
+    ],
+    "visual_techniques": [
+      "distressing",
+      "layering",
+      "typographic-scaling"
+    ]
+  }
+}

src/tools/design_retriever.py

@@ -2,15 +2,16 @@ from nodes.design_rag import DesignRAG
 from langgraph.graph import MessagesState
 from langchain_core.messages import SystemMessage
 
+# this should be done at app level is used elsewhere
+rag = DesignRAG()
+
 async def design_retriever_tool(state: MessagesState, num_examples: int = 1):
     """
         Retrieves similar designs based on style requirements
         Name: query_similar_designs
     """
-    rag = DesignRAG()  # Create instance
     
     result = await rag.query_similar_designs(state["messages"], num_examples)
-    print("Here's the result: ", result)
 
     return SystemMessage(content=result)