task: readme update. taking notes

README.md

@@ -106,24 +106,16 @@ ImagineUI/
 
 ### Problem:
 
-  I want a tool that can use verbal instructions to prototype and iterate on a design for a UI or document.
+  I want a tool that can show me examples of a design I'm imagining.
 
 ### Audience:
 
-  This app is for designers and non-designers who want to create UIs or documents using natural language. Examples include:
-
-  - Styling a resume using a standardized template
-  - Brand designers who want to iterate through ideas
-  - Writers who want to present content in a visually engaging way
-  - Creators of presentations and educational materials
-  - Small business owners creating marketing materials
-
-  The app will be particularly useful for cross-disciplinary web development teams discussing design concepts with stakeholders, to provide visual reference and preliminary materials for designs.
+  This app is for designers and non-designers who want to be inspired and see examples of good style design.
 
   
 ## Solution
 
-  An agentic RAG application will be able to consume a template of html data, and create creative style variations based on input and feedback discussed with the user.
+  An agentic RAG application that scrapes designs from CSS Zen Garden and serves the best matches to the user.
 
 ### Tools
 
@@ -136,14 +128,13 @@ f: Evaluation
 g: User Interface
 h: Serving & Inference (optional)
 
-Describe use of agents
 
 # **Data Collection & Dataset Creation**
 
 ### Dataset Format
 ```json
 {
-  "id": "style_001",
+  "id": "001",
   "html_template": "path/to/template.html",
   "css_style": "path/to/style.css",
   "screenshots": {
@@ -158,151 +149,3 @@ Describe use of agents
   }
 }
 ```
-
-### Data Collection Process
-1. **Web Scraping**
-   - Scrape CSS Zen Garden submissions
-   - Collect associated screenshots
-   - Extract design descriptions
-
-2. **Manual Curation**
-   - Review and categorize styles
-   - Validate HTML/CSS combinations
-   - Add detailed annotations
-
-3. **Automated Processing**
-   - Generate screenshots across viewports
-   - Extract color schemes
-   - Calculate accessibility scores
-
-4. **Quality Assurance**
-   - Validate file integrity
-   - Check completeness of metadata
-   - Verify screenshot quality
-
-### Usage Guidelines
-- Dataset is available under MIT License
-- Proper attribution required for CSS Zen Garden content
-- Screenshots may be used for training and testing
-- Metadata can be extended with additional annotations
-
-# **Build**  
-
-## **Problem Worth Solving**  
-Designing and styling web pages requires both creative and technical skills. Many developers and designers struggle with:  
-- Translating verbal descriptions into CSS styling.  
-- Rapidly prototyping and iterating on web layouts.  
-- Learning from real-world design patterns without extensive manual effort.  
-
-An **agentic CSS style creator** can bridge the gap by understanding style requests, generating layouts, and applying creative yet functional CSS designs.  
-
-## **Potential LLM Solution**  
-- **Multi-modal learning**: Utilize a dataset of CSS styles (from CSS Zen Garden) and their corresponding rendered outputs (screenshots).  
-- **RAG-enhanced retrieval**: Combine existing UI pattern descriptions with CSS rules for better style understanding.  
-- **Agentic workflow**: Allow the model to iteratively improve its design based on user feedback, tweaking layouts and styles dynamically.  
-- **Dual input approach**: Users can either submit their own HTML or allow the agent to generate a basic layout.  
-
-## **Target Audience**  
-- **Frontend Developers** who need quick style prototypes.  
-- **UI/UX Designers** looking to explore creative styles.  
-- **No-Code/Low-Code Builders** who want AI-powered styling.  
-- **Beginner Developers** learning CSS through interactive examples.  
-
-## **Key Metrics**  
-1. **Styling Accuracy** – How closely does the CSS match the user's description?  
-2. **Creativity & Uniqueness** – Does it produce diverse and visually appealing results?  
-3. **Functional Usability** – Are the generated styles accessible and responsive?  
-4. **Iteration Success** – Does the model effectively refine the layout based on feedback?  
-5. **RAGAS Scores** – To evaluate retrieval quality and grounding accuracy.  
-
-## **Data Sources for RAG and Fine-Tuning**  
-- **CSS Zen Garden Stylesheets** – To learn various aesthetic interpretations.  
-- **Screenshots of Zen Garden pages** – For multi-modal association between styles and visuals.  
-- **UI Pattern Dataset (with descriptions)** – To enhance textual understanding of design patterns.  
-- **Generated CSS & User Feedback Loops** – To improve iteration quality.  
-
----
-
-# **Share**  
-
-## **Online Communities to Share Your Project In**  
-- **r/web_design & r/frontend on Reddit** – Great for frontend developers and designers.  
-- **Twitter/X (Hashtags: #CSS, #AI, #WebDev)** – To engage with the dev community.  
-- **Dev.to & Hashnode** – For technical write-ups and project showcases.  
-- **CodePen & Frontend Mentor Discords** – Where designers and developers share web experiments.  
-- **LinkedIn Web Development Groups** – For professional feedback.  
-
-### **Best Time to Share**  
-- **Reddit**: 12 PM - 3 PM EST (high activity for tech subreddits).  
-- **Twitter/X**: 9 AM - 12 PM PST (when devs engage most).  
-- **Dev.to / Hashnode**: Post in the morning for better visibility.  
-- **LinkedIn**: 8 AM - 10 AM EST (when professionals browse feeds).  
-
-
-### CSS Zen Garden Scraping Tools
-
-1. **Python-based Tools**
-   - **Scrapy**
-     - Robust framework for large-scale scraping
-     - Handles JavaScript rendering
-     - Built-in pipeline for downloading files
-     ```python
-     class ZenGardenSpider(scrapy.Spider):
-         name = 'zengarden'
-         start_urls = ['http://www.csszengarden.com/']
-         
-         def parse(self, response):
-             for design in response.css('.design-selection li'):
-                 yield {
-                     'title': design.css('a::text').get(),
-                     'css_url': design.css('a::attr(href)').get(),
-                     'designer': design.css('.designer::text').get()
-                 }
-     ```
-
-   - **Beautiful Soup 4**
-     - Simpler alternative for static content
-     - Good for parsing HTML/CSS structure
-     - Easy integration with requests library
-
-2. **Browser Automation**
-   - **Playwright**
-     - Modern alternative to Selenium
-     - Better performance
-     - Built-in screenshot and PDF generation
-
-3. **CSS Processing Tools**
-   - **PostCSS**
-     - Parses and analyzes CSS
-     - Extracts color schemes
-     - Identifies design patterns
-   - **StyleStats**
-     - Generates CSS analytics
-     - Measures complexity
-     - Reports accessibility metrics
-
-### Scraping Process
-
-1. **Initial Setup**
-   ```bash
-   pip install scrapy beautifulsoup4 selenium playwright postcss-py
-   ```
-
-2. **Data Collection Steps**
-   - Fetch main gallery page
-   - Extract design links and metadata
-   - Download CSS files
-   - Capture screenshots at different viewports
-   - Parse and analyze CSS properties
-
-3. **Legal Considerations**
-   - Respect robots.txt
-   - Include appropriate delays between requests
-   - Store attribution information
-   - Follow CSS Zen Garden's terms of use
-
-4. **Data Validation**
-   - Verify CSS file integrity
-   - Check image quality
-   - Validate HTML structure
-   - Ensure complete metadata

src/sdg.ipynb

@@ -726,6 +726,15 @@
     "\n",
     "\n"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This isn't ideal, since our RAG use case is to subjectively show examples of good design. Our users won't be asking questions or looking for specific answers.\n",
+    "\n",
+    "We may still be able to use evaluators to illustrate direction changes, but what we really need is a test data set showing retrievals of designs that fit the description. This likely needs to be manually curated to ensure the returned design fits and represents a good example."
+   ]
   }
  ],
  "metadata": {