Technologic101 commited on
Commit
dcbd9eb
Β·
1 Parent(s): d63acef

task: Updates readme

Browse files
Files changed (1) hide show
  1. README.md +93 -91
README.md CHANGED
@@ -1,3 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  # AI Designer
2
 
3
  ## Problem and Audience
@@ -38,26 +131,6 @@ Describe use of agents
38
 
39
  # **Data Collection & Dataset Creation**
40
 
41
- ## **Dataset Structure for Kaggle**
42
-
43
- ### Core Components
44
- 1. **HTML Templates**
45
- - Basic structural template of CSS Zen Garden html
46
-
47
- 2. **CSS Styles**
48
- - Raw CSS files from CSS Zen Garden
49
- - Categorized style variations
50
- - Responsive design patterns
51
-
52
- 3. **Screenshots & Visuals**
53
- - Multiple viewport sizes (lg, sm)
54
- - Key UI component screenshots
55
-
56
- 4. **Metadata & Annotations**
57
- - Natural language descriptions of styles
58
- - Design pattern classifications
59
- - Accessibility ratings
60
-
61
  ### Dataset Format
62
  ```json
63
  {
@@ -184,10 +257,6 @@ An **agentic CSS style creator** can bridge the gap by understanding style reque
184
  - Easy integration with requests library
185
 
186
  2. **Browser Automation**
187
- - **Selenium WebDriver**
188
- - Captures dynamic content
189
- - Takes screenshots automatically
190
- - Handles different viewport sizes
191
  - **Playwright**
192
  - Modern alternative to Selenium
193
  - Better performance
@@ -228,70 +297,3 @@ An **agentic CSS style creator** can bridge the gap by understanding style reque
228
  - Check image quality
229
  - Validate HTML structure
230
  - Ensure complete metadata
231
-
232
- ## Setup
233
-
234
- This project uses uv for package management and Jupyter Notebook for development.
235
-
236
- ### Prerequisites
237
-
238
- 1. Install uv:
239
- ```bash
240
- # On Unix-like systems (Linux, macOS)
241
- curl -LsSf https://astral.sh/uv/install.sh | sh
242
-
243
- # On Windows (PowerShell)
244
- powershell -c "irm https://astral.sh/uv/install.ps1 | iex"
245
- ```
246
-
247
- ### Environment Setup
248
-
249
- 1. Initialize a new project with uv:
250
- ```bash
251
- # Create and activate a new virtual environment
252
- uv venv
253
-
254
- # Activate the virtual environment:
255
- # On Windows:
256
- .venv\Scripts\activate
257
- # On Unix-like systems:
258
- source .venv/bin/activate
259
- ```
260
-
261
- 2. Create and use requirements.txt for dependencies:
262
- ```bash
263
- # Create requirements.txt
264
- cat > requirements.txt << EOL
265
- jupyter
266
- notebook
267
- beautifulsoup4
268
- scrapy
269
- selenium
270
- playwright
271
- pandas
272
- numpy
273
- EOL
274
-
275
- # Install dependencies
276
- uv pip install -r requirements.txt
277
- ```
278
-
279
- 3. Start Jupyter Notebook:
280
- ```bash
281
- jupyter notebook
282
- ```
283
-
284
- 4. Configure environment variables:
285
- - Copy the `.env.example` file to `.env`
286
- - Add your API keys and configuration:
287
- ```bash
288
- cp .env.example .env
289
- # Edit .env with your preferred text editor
290
- ```
291
-
292
- Required environment variables:
293
- - `OPENAI_API_KEY`: Your OpenAI API key
294
- - `HUGGINGFACE_API_KEY`: Your Hugging Face API key
295
- - Additional configuration options are documented in the `.env` file
296
-
297
-
 
1
+ # ImagineUI
2
+
3
+ An AI-powered CSS style generator that creates and iterates on designs using natural language instructions.
4
+
5
+ ## Problem & Solution
6
+
7
+ ### Problem
8
+ Designers and developers need a tool that can:
9
+ - Translate verbal descriptions into CSS styling
10
+ - Rapidly prototype and iterate on web layouts
11
+ - Learn from real-world design patterns
12
+
13
+ ### Target Audience
14
+ - Frontend developers needing quick style prototypes
15
+ - UI/UX designers exploring creative variations
16
+ - Writers and content creators
17
+ - Small business owners creating marketing materials
18
+ - Cross-disciplinary teams discussing design concepts
19
+
20
+ ### Solution
21
+ An agentic RAG application that:
22
+ - Consumes HTML templates
23
+ - Creates style variations based on natural language input
24
+ - Iterates designs through user feedback
25
+ - Learns from CSS Zen Garden designs
26
+
27
+ ## Setup
28
+
29
+ This project uses Poetry for dependency management.
30
+
31
+ ### Prerequisites
32
+
33
+ 1. Python 3.11 (via brew or your system's package manager)
34
+ 2. Poetry: `curl -sSL https://install.python-poetry.org | python3 -`
35
+
36
+ ### Installation
37
+
38
+ 1. Clone and enter the repository:
39
+ ```
40
+ git clone https://github.com/yourusername/ImagineUI.git
41
+ cd ImagineUI
42
+ ```
43
+
44
+ 2. Install dependencies:
45
+ ```
46
+ poetry install
47
+ poetry run playwright install chromium
48
+ ```
49
+
50
+ ## Tools
51
+
52
+ ### CSS Zen Garden Scraper
53
+
54
+ Collects designs from CSS Zen Garden into a structured dataset. Each design in `designs/<design_id>/` contains:
55
+ - `style.css`: The design's CSS file
56
+ - `metadata.json`: Design information (author, URLs)
57
+ - `screenshot_desktop.png`: Screenshot at 1920px width
58
+ - `screenshot_mobile.png`: Screenshot at 480px width
59
+
60
+ Usage:
61
+ ```
62
+ poetry run python scraper.py # Run scraper
63
+ poetry run python analyze_designs.py # Analyze designs
64
+ poetry run jupyter notebook # Test in notebook
65
+ ```
66
+
67
+ ## Development
68
+
69
+ - `poetry add <package>`: Add dependencies
70
+ - `poetry update`: Update dependencies
71
+ - `poetry shell`: Activate virtual environment
72
+
73
+ ## Project Structure
74
+
75
+ ```
76
+ ImagineUI/
77
+ β”œβ”€β”€ designs/ # Scraped CSS Zen Garden designs
78
+ β”‚ └── <design_id>/ # Each design's files
79
+ β”œβ”€β”€ scraper.py # CSS Zen Garden scraper
80
+ β”œβ”€β”€ test_scraper.ipynb # Scraper testing notebook
81
+ β”œβ”€β”€ pyproject.toml # Project dependencies
82
+ └── README.md
83
+ ```
84
+
85
+ ## Technical Stack
86
+
87
+ - LLM: For understanding design instructions
88
+ - Embedding Model: For design similarity search
89
+ - Vector Database: For storing design patterns
90
+ - Orchestration: For managing the design workflow
91
+ - Monitoring & Evaluation: For quality assurance
92
+ - User Interface: For interaction and feedback
93
+
94
  # AI Designer
95
 
96
  ## Problem and Audience
 
131
 
132
  # **Data Collection & Dataset Creation**
133
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  ### Dataset Format
135
  ```json
136
  {
 
257
  - Easy integration with requests library
258
 
259
  2. **Browser Automation**
 
 
 
 
260
  - **Playwright**
261
  - Modern alternative to Selenium
262
  - Better performance
 
297
  - Check image quality
298
  - Validate HTML structure
299
  - Ensure complete metadata