## 📋 Overview

**Style Grid** is a full-featured visual style browser embedded **directly inside a ComfyUI node**. It replaces manual prompt typing with a card-based grid interface where you browse, search, and select styles — the node outputs ready-to-use prompt strings.

**No external browser, no separate panels, no extra dependencies.** Everything runs inside the ComfyUI node.

**Comes bundled with 1000 pre-built styles** across 48 categories (scenes, archetypes, outfits, lighting, expressions, poses, weather, VFX, camera angles, moods, eras, and more).

---

## ✨ Key Features

### 🎯 Visual Style Browser

- **Card grid** with thumbnails, real-time search with autocomplete

- **48 category tabs** — filter by Scene, Archetype, Outfit, Lighting, Expression, and more

- **Source dropdown** — filter by CSV file when using multiple style packs

- **Click to select/deselect** — cards highlight when selected

- **Selected bar** with ✕ remove buttons

- **🎲 Random pick** — select a random style from current filter

- **🖼 Batch thumbnail generation** — one-click generation with progress modal

### 🧠 Smart Prompt Management

- **Combined output** — automatically merges all selected styles into positive + negative prompts

- **Wildcard {sg:CATEGORY}** — inserts a random style from a category at generation time

- **Deterministic seed** — set a seed for reproducible wildcard resolution (‑1 = random each run)

- **Token conflict detection** — warns when selected styles contain conflicting tags

- **Preset management** — save/load/delete collections of styles

- **Favorites & Recents** — persisted across sessions

### 🖼 Thumbnail System

- **Built-in thumbnail generation** — auto-generate .webp previews for every style

- **Custom thumbnail upload** — upload your own images per style

- **Lightbox preview** on hover

### 🛠 Data Management

- **Import/Export/Backup** — full data portability

- **Inline CSV editor** via API

- **Usage statistics** — see which styles you use most

- **Auto-refresh** on CSV file changes

- **Drag-and-drop category reordering**

### 📦 Additional Nodes

- *SG Thumbnail Output 🖼** — saves generated images as .webp thumbnails (for custom workflow builders)

---

## 📦 What's Included

### Bundled Style Pack: sd_prompt_tags_sfw.csv — **1000 entries**

| Category | Count | Category | Count |

|----------|-------|----------|-------|

| SCENE | 106 | ARCHETYPE | 89 |

| OUTFIT | 75 | STYLE | 58 |

| ACTIVITY | 41 | EXPRESSION | 36 |

| ACCESSORIES | 36 | LIGHTING | 36 |

| HAIR | 33 | PROPS | 33 |

| RACE | 27 | MOOD | 27 |

| ERA | 26 | BODY | 24 |

| POSE | 22 | PALETTE | 21 |

| EYE | 19 | WEATHER | 19 |

| VFX | 19 | CAMERA | 18 |

| ATMOSPHERE | 17 | COMPANION | 15 |

| COMPOSITION | 14 | WEAPON | 12 |

| GENDER | 11 | DYNAMICS | 11 |

| MATERIAL | 10 | TIME_OF_DAY | 9 |

| MAKEUP | 9 | FOOD | 9 |

| REGIONAL | 8 | SKIN | 8 |

| VEHICLE | 8 | BUILD | 8 |

| FORMAT | 7 | ANIMAL | 7 |

| POSITION | 7 | MEDIA | 7 |

| SURFACE | 7 | HAIRSTYLE | 7 |

| FLOOR | 7 | MUSIC | 6 |

| SIZE | 6 | TATTOO | 6 |

| BASE | 5 | SEASON | 5 |

| FRAME | 5 | WARPAINT | 4 |

| **TOTAL** | **1000** | | |

Each entry includes: name, prompt, negative_prompt, description, and category.

---

## 🎮 How to Use

### Quick Start

1. **Add node** → Right-click in workflow → Style Grid → SG Style Grid 🎨

2. **Browse** — use category tabs and search bar to find styles

3. **Select** — click style cards (they highlight when selected)

4. **Connect** — wire the outputs:

```

SG Style Grid 🎨

├── positive_prompt ──→ CLIP Text Encode (positive)

├── negative_prompt ──→ CLIP Text Encode (negative)

└── selected_names ──→ (info / logging)

```

5. **Generate** — click Queue Prompt

### Wildcard Usage

Use {sg:CATEGORY} anywhere in a style's prompt to insert a random style from that category at generation time:

```

prompt: "character in a {sg:SCENE} with {sg:LIGHTING} lighting"

```

Set the **seed** input on the node for deterministic wildcard resolution.

### Presets

1. Select your styles

2. Click **💾 Save Preset** in the context menu

3. Name your preset

4. Load it anytime via **📂 Load Preset**

---

## 📸 Thumbnails

### Generate Thumbnails

**In the node:** Click the 🖼 Batch button to generate thumbnails for all styles at once (supports model and size selection).