Spaces:
Runtime error
Runtime error
Commit
Β·
dcbd9eb
1
Parent(s):
d63acef
task: Updates readme
Browse files
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|