Hugging Face's logo

styly-agents
/
instructdesign-kontext

Image-to-Image
Diffusers
English
flux-kontext-lora
flux
lora
kontext
web-design
ui-ux
design-transformation
instruction-following
Model card Files
xet
Community
instructdesign-kontext
File size: 4,312 Bytes 
12d4366
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
964b01c
12d4366
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
964b01c
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
---
license: other
license_name: flux-1-dev-non-commercial-license
license_link: https://huggingface.co/black-forest-labs/FLUX.1-dev/blob/main/LICENSE.md
language:
- en
tags:
- flux
- diffusers
- lora
- kontext
- web-design
- ui-ux
- design-transformation
- instruction-following
base_model: black-forest-labs/FLUX.1-dev
pipeline_tag: image-to-image
---

# InstructDesign-Kontext

Fine-tuned FLUX.1 Kontext [dev] model for transforming web interfaces with natural language instructions.

## Model Description

InstructDesign-Kontext is a LoRA fine-tuned version of FLUX.1 Kontext [dev] specialized in:
- Web interface transformations
- UI/UX redesigns
- Style transfers (dark mode, glassmorphism, etc.)
- Device mockup generation
- Design system applications

### Training Details

- **Base Model**: FLUX.1 Kontext [dev]
- **Training Method**: LoRA fine-tuning
- **Dataset**: 937 web interface transformation pairs
- **Training Steps**: 10,000
- **Training Time**: ~2 weeks (iterative)

## File Structure

```
├── unet/
│   └── flux1-kontext-dev.safetensors (23GB)
├── loras/
│   └── flux_kontext_lora_v4_consolidated_000010000.safetensors (2.6GB)
├── clip/
│   ├── clip_l.safetensors (235MB)
│   └── t5xxl_fp8_e4m3fn_scaled.safetensors (4.9GB)
├── vae/
│   └── ae.safetensors (320MB)
└── workflow/
    └── workflow_api.json
```

## Usage with ComfyUI

### 1. Download Models

Download all model files to your ComfyUI models directory:

```bash
# Main model
ComfyUI/models/diffusion_models/flux1-kontext-dev.safetensors

# LoRA
ComfyUI/models/loras/flux_kontext_lora_v4_consolidated_000010000.safetensors

# CLIP encoders
ComfyUI/models/clip/clip_l.safetensors
ComfyUI/models/clip/t5xxl_fp8_e4m3fn_scaled.safetensors

# VAE
ComfyUI/models/vae/ae.safetensors
```

### 2. Load Workflow

Import the `workflow/workflow_api.json` into ComfyUI.

### 3. Configure Parameters

Default optimal settings:
- **Steps**: 20
- **CFG**: 1.0
- **Guidance**: 5.0
- **Sampler**: er_sde
- **Scheduler**: kl_optimal
- **LoRA Strength**: 1.0

## API Usage

See the [GitHub repository](https://github.com/tercumantanumut/instructdesign-kontext) for full API implementation.

```python
# Example API request
import requests

response = requests.post("http://localhost:8000/api/generate", json={
    "positive_prompt": "Transform this interface to dark mode with purple accents",
    "input_image": "website.png",
    "seed": 42,
    "steps": 20,
    "cfg": 1.0,
    "guidance": 5.0
})
```

## Transformation Capabilities

### Style Transformations
- Dark/light mode conversion
- Glassmorphism effects
- Neumorphic design
- Material Design application
- iOS/Android style transfer

### UI/UX Improvements
- Layout modernization
- Accessibility enhancements
- Color scheme updates
- Typography improvements
- Interactive element additions

### Mockup Generation
- Device frame placement
- Environment contextualization
- Billboard/poster mockups
- Multi-device presentations

## Example Prompts

```
"Transform this website to dark mode with purple gradient accents"
"Apply glassmorphism effect with blurred backgrounds"
"Convert to material design 3 with rounded corners"
"Place this interface on an iPhone 15 Pro in a coffee shop"
"Modernize this dated interface with current design trends"
```

## Performance

- **Inference Time**: ~45-70 seconds (NVIDIA GPU 16GB+)
- **VRAM Requirements**: 16GB minimum, 24GB recommended
- **Quality**: 85%+ instruction adherence rate

## Docker Deployment

Complete Docker setup available in the GitHub repository with:
- ComfyUI container
- FastAPI wrapper
- Queue management
- Auto-scaling workers

## Limitations

- Requires significant VRAM (16GB+)
- Best results with clear, specific instructions
- Limited to single image transformations (no batch in single inference)

## Citation

If you use this model, please cite:

```bibtex
@misc{instructdesign-kontext,
  title={InstructDesign-Kontext: Web Interface Transformation with FLUX},
  author={tercumantanumut},
  year={2024},
  publisher={Hugging Face}
}
```

## License

This model is subject to the FLUX.1 [dev] Non-Commercial License.

## Acknowledgments

- FLUX.1 team for the base model
- ComfyUI for the inference framework
- 10 weeks of iterative development