|
| 1 | +# DevBase.Avalonia.Extension - AI Agent Guide |
| 2 | + |
| 3 | +This guide helps AI agents effectively use DevBase.Avalonia.Extension for advanced color analysis in Avalonia UI applications. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +DevBase.Avalonia.Extension provides advanced color analysis using LAB color space and sophisticated preprocessing capabilities. |
| 8 | + |
| 9 | +**Target Framework:** .NET 9.0, Avalonia UI 11.x |
| 10 | + |
| 11 | +## Core Components |
| 12 | + |
| 13 | +### Color Calculators |
| 14 | + |
| 15 | +```csharp |
| 16 | +// RGB-based clustering |
| 17 | +ClusterColorCalculator |
| 18 | +List<Color> Calculate(Bitmap bitmap, int clusterCount) |
| 19 | + |
| 20 | +// LAB-based clustering (more accurate) |
| 21 | +LabClusterColorCalculator |
| 22 | +List<Color> Calculate(Bitmap bitmap, int clusterCount) |
| 23 | +``` |
| 24 | + |
| 25 | +### Converters |
| 26 | + |
| 27 | +```csharp |
| 28 | +RGBToLabConverter |
| 29 | +(double L, double A, double B) Convert(Color rgb) |
| 30 | +``` |
| 31 | + |
| 32 | +## Usage Patterns for AI Agents |
| 33 | + |
| 34 | +### Pattern 1: LAB Color Clustering |
| 35 | + |
| 36 | +```csharp |
| 37 | +using DevBase.Avalonia.Extension.Color.Image; |
| 38 | +using Avalonia.Media.Imaging; |
| 39 | + |
| 40 | +var bitmap = new Bitmap("album-art.png"); |
| 41 | +var calculator = new LabClusterColorCalculator(); |
| 42 | + |
| 43 | +// Extract 5 dominant colors |
| 44 | +var colors = calculator.Calculate(bitmap, clusterCount: 5); |
| 45 | + |
| 46 | +// Use for UI theming |
| 47 | +var primary = colors[0]; |
| 48 | +var secondary = colors[1]; |
| 49 | +var accent = colors[2]; |
| 50 | +``` |
| 51 | + |
| 52 | +### Pattern 2: Image Preprocessing |
| 53 | + |
| 54 | +```csharp |
| 55 | +using DevBase.Avalonia.Extension.Processing; |
| 56 | +using DevBase.Avalonia.Extension.Configuration; |
| 57 | + |
| 58 | +var config = new PreProcessingConfiguration |
| 59 | +{ |
| 60 | + Brightness = new BrightnessConfiguration |
| 61 | + { |
| 62 | + Enabled = true, |
| 63 | + MinBrightness = 0.3, |
| 64 | + MaxBrightness = 0.9 |
| 65 | + }, |
| 66 | + Chroma = new ChromaConfiguration |
| 67 | + { |
| 68 | + Enabled = true, |
| 69 | + MinChroma = 0.2 |
| 70 | + }, |
| 71 | + Filter = new FilterConfiguration |
| 72 | + { |
| 73 | + Enabled = true, |
| 74 | + ExcludeGrayscale = true |
| 75 | + } |
| 76 | +}; |
| 77 | + |
| 78 | +var preprocessor = new ImagePreProcessor(config); |
| 79 | +var processed = preprocessor.Process(bitmap); |
| 80 | + |
| 81 | +// Now extract colors from processed image |
| 82 | +var calculator = new LabClusterColorCalculator(); |
| 83 | +var colors = calculator.Calculate(processed, 5); |
| 84 | +``` |
| 85 | + |
| 86 | +### Pattern 3: Music Player Theme |
| 87 | + |
| 88 | +```csharp |
| 89 | +using DevBase.Api.Apis.Deezer; |
| 90 | +using DevBase.Avalonia.Extension.Color.Image; |
| 91 | +using DevBase.Avalonia.Extension.Configuration; |
| 92 | +using DevBase.Avalonia.Extension.Processing; |
| 93 | + |
| 94 | +public async Task<List<Color>> GetAlbumTheme(string trackId) |
| 95 | +{ |
| 96 | + // Get album art |
| 97 | + var deezer = new Deezer(); |
| 98 | + var track = await deezer.GetSong(trackId); |
| 99 | + var bitmap = await DownloadBitmap(track.album.cover_xl); |
| 100 | + |
| 101 | + // Preprocess to remove dark/grayscale colors |
| 102 | + var config = new PreProcessingConfiguration |
| 103 | + { |
| 104 | + Brightness = new BrightnessConfiguration |
| 105 | + { |
| 106 | + Enabled = true, |
| 107 | + MinBrightness = 0.4 |
| 108 | + }, |
| 109 | + Chroma = new ChromaConfiguration |
| 110 | + { |
| 111 | + Enabled = true, |
| 112 | + MinChroma = 0.3 |
| 113 | + }, |
| 114 | + Filter = new FilterConfiguration |
| 115 | + { |
| 116 | + Enabled = true, |
| 117 | + ExcludeGrayscale = true |
| 118 | + } |
| 119 | + }; |
| 120 | + |
| 121 | + var preprocessor = new ImagePreProcessor(config); |
| 122 | + var processed = preprocessor.Process(bitmap); |
| 123 | + |
| 124 | + // Extract colors using LAB |
| 125 | + var calculator = new LabClusterColorCalculator(); |
| 126 | + return calculator.Calculate(processed, 5).ToList(); |
| 127 | +} |
| 128 | +``` |
| 129 | + |
| 130 | +### Pattern 4: RGB to LAB Conversion |
| 131 | + |
| 132 | +```csharp |
| 133 | +using DevBase.Avalonia.Extension.Converter; |
| 134 | +using Avalonia.Media; |
| 135 | + |
| 136 | +var converter = new RGBToLabConverter(); |
| 137 | +var color = Colors.Red; |
| 138 | + |
| 139 | +var (l, a, b) = converter.Convert(color); |
| 140 | +Console.WriteLine($"L: {l}, A: {a}, B: {b}"); |
| 141 | + |
| 142 | +// L = Lightness (0-100) |
| 143 | +// A = Green-Red axis |
| 144 | +// B = Blue-Yellow axis |
| 145 | +``` |
| 146 | + |
| 147 | +### Pattern 5: Filter Specific Colors |
| 148 | + |
| 149 | +```csharp |
| 150 | +var config = new PreProcessingConfiguration |
| 151 | +{ |
| 152 | + Filter = new FilterConfiguration |
| 153 | + { |
| 154 | + Enabled = true, |
| 155 | + ExcludeGrayscale = true, |
| 156 | + ExcludeColors = new List<Color> |
| 157 | + { |
| 158 | + Colors.White, |
| 159 | + Colors.Black |
| 160 | + } |
| 161 | + } |
| 162 | +}; |
| 163 | + |
| 164 | +var preprocessor = new ImagePreProcessor(config); |
| 165 | +var filtered = preprocessor.Process(bitmap); |
| 166 | +``` |
| 167 | + |
| 168 | +## Important Concepts |
| 169 | + |
| 170 | +### 1. LAB vs RGB Clustering |
| 171 | + |
| 172 | +**Use LAB when:** |
| 173 | +- Accuracy is important |
| 174 | +- Perceptual color distance matters |
| 175 | +- Creating color palettes for UI |
| 176 | + |
| 177 | +**Use RGB when:** |
| 178 | +- Speed is critical |
| 179 | +- Simple color extraction |
| 180 | +- Quick prototyping |
| 181 | + |
| 182 | +```csharp |
| 183 | +// RGB - faster but less accurate |
| 184 | +var rgbCalc = new ClusterColorCalculator(); |
| 185 | +var rgbColors = rgbCalc.Calculate(bitmap, 5); |
| 186 | + |
| 187 | +// LAB - slower but more accurate |
| 188 | +var labCalc = new LabClusterColorCalculator(); |
| 189 | +var labColors = labCalc.Calculate(bitmap, 5); |
| 190 | +``` |
| 191 | + |
| 192 | +### 2. Preprocessing Configuration |
| 193 | + |
| 194 | +```csharp |
| 195 | +// Minimal preprocessing |
| 196 | +var minConfig = new PreProcessingConfiguration |
| 197 | +{ |
| 198 | + Brightness = new BrightnessConfiguration { Enabled = true, MinBrightness = 0.2 } |
| 199 | +}; |
| 200 | + |
| 201 | +// Aggressive preprocessing |
| 202 | +var maxConfig = new PreProcessingConfiguration |
| 203 | +{ |
| 204 | + Brightness = new BrightnessConfiguration |
| 205 | + { |
| 206 | + Enabled = true, |
| 207 | + MinBrightness = 0.4, |
| 208 | + MaxBrightness = 0.85 |
| 209 | + }, |
| 210 | + Chroma = new ChromaConfiguration |
| 211 | + { |
| 212 | + Enabled = true, |
| 213 | + MinChroma = 0.3 |
| 214 | + }, |
| 215 | + Filter = new FilterConfiguration |
| 216 | + { |
| 217 | + Enabled = true, |
| 218 | + ExcludeGrayscale = true |
| 219 | + } |
| 220 | +}; |
| 221 | +``` |
| 222 | + |
| 223 | +### 3. Cluster Count Selection |
| 224 | + |
| 225 | +```csharp |
| 226 | +// Simple palette (2-3 colors) |
| 227 | +var simple = calculator.Calculate(bitmap, 3); |
| 228 | + |
| 229 | +// Balanced palette (5-7 colors) |
| 230 | +var balanced = calculator.Calculate(bitmap, 5); |
| 231 | + |
| 232 | +// Detailed palette (10+ colors) |
| 233 | +var detailed = calculator.Calculate(bitmap, 10); |
| 234 | +``` |
| 235 | + |
| 236 | +## Common Mistakes to Avoid |
| 237 | + |
| 238 | +### ❌ Mistake 1: Too Many Clusters |
| 239 | + |
| 240 | +```csharp |
| 241 | +// Wrong - too many clusters for small image |
| 242 | +var colors = calculator.Calculate(smallBitmap, 50); // Overkill! |
| 243 | +
|
| 244 | +// Correct |
| 245 | +var colors = calculator.Calculate(smallBitmap, 5); |
| 246 | +``` |
| 247 | + |
| 248 | +### ❌ Mistake 2: No Preprocessing |
| 249 | + |
| 250 | +```csharp |
| 251 | +// Wrong - extracting from raw image with dark/grayscale colors |
| 252 | +var colors = calculator.Calculate(bitmap, 5); |
| 253 | + |
| 254 | +// Correct - preprocess first |
| 255 | +var config = new PreProcessingConfiguration |
| 256 | +{ |
| 257 | + Brightness = new BrightnessConfiguration { Enabled = true, MinBrightness = 0.3 }, |
| 258 | + Filter = new FilterConfiguration { Enabled = true, ExcludeGrayscale = true } |
| 259 | +}; |
| 260 | +var preprocessor = new ImagePreProcessor(config); |
| 261 | +var processed = preprocessor.Process(bitmap); |
| 262 | +var colors = calculator.Calculate(processed, 5); |
| 263 | +``` |
| 264 | + |
| 265 | +### ❌ Mistake 3: Wrong Calculator for Use Case |
| 266 | + |
| 267 | +```csharp |
| 268 | +// Wrong - using RGB for accurate color palette |
| 269 | +var calculator = new ClusterColorCalculator(); |
| 270 | +var colors = calculator.Calculate(bitmap, 5); // Less accurate |
| 271 | +
|
| 272 | +// Correct - use LAB for accurate palettes |
| 273 | +var calculator = new LabClusterColorCalculator(); |
| 274 | +var colors = calculator.Calculate(bitmap, 5); |
| 275 | +``` |
| 276 | + |
| 277 | +### ❌ Mistake 4: Not Scaling Large Images |
| 278 | + |
| 279 | +```csharp |
| 280 | +// Wrong - processing 4K image directly |
| 281 | +var bitmap = new Bitmap("4k-image.png"); |
| 282 | +var colors = calculator.Calculate(bitmap, 5); // Slow! |
| 283 | +
|
| 284 | +// Correct - scale down first |
| 285 | +var original = new Bitmap("4k-image.png"); |
| 286 | +var scaled = original.CreateScaledBitmap(new PixelSize(400, 400)); |
| 287 | +var colors = calculator.Calculate(scaled, 5); |
| 288 | +``` |
| 289 | + |
| 290 | +## Configuration Reference |
| 291 | + |
| 292 | +### BrightnessConfiguration |
| 293 | + |
| 294 | +| Property | Type | Range | Description | |
| 295 | +|----------|------|-------|-------------| |
| 296 | +| Enabled | bool | - | Enable brightness filtering | |
| 297 | +| MinBrightness | double | 0.0-1.0 | Minimum brightness threshold | |
| 298 | +| MaxBrightness | double | 0.0-1.0 | Maximum brightness threshold | |
| 299 | + |
| 300 | +### ChromaConfiguration |
| 301 | + |
| 302 | +| Property | Type | Range | Description | |
| 303 | +|----------|------|-------|-------------| |
| 304 | +| Enabled | bool | - | Enable chroma filtering | |
| 305 | +| MinChroma | double | 0.0-1.0 | Minimum chroma/saturation | |
| 306 | + |
| 307 | +### FilterConfiguration |
| 308 | + |
| 309 | +| Property | Type | Description | |
| 310 | +|----------|------|-------------| |
| 311 | +| Enabled | bool | Enable color filtering | |
| 312 | +| ExcludeGrayscale | bool | Remove grayscale colors | |
| 313 | +| ExcludeColors | List<Color> | Specific colors to exclude | |
| 314 | + |
| 315 | +## Performance Tips |
| 316 | + |
| 317 | +1. **Scale images** before processing (300-500px is usually sufficient) |
| 318 | +2. **Use RGB** for quick analysis, **LAB** for accuracy |
| 319 | +3. **Limit clusters** to 5-10 for most use cases |
| 320 | +4. **Cache results** for frequently analyzed images |
| 321 | +5. **Preprocess once** then extract multiple palettes |
| 322 | + |
| 323 | +## Integration Examples |
| 324 | + |
| 325 | +### With DevBase.Api |
| 326 | + |
| 327 | +```csharp |
| 328 | +using DevBase.Api.Apis.Deezer; |
| 329 | +using DevBase.Avalonia.Extension.Color.Image; |
| 330 | + |
| 331 | +var deezer = new Deezer(); |
| 332 | +var track = await deezer.GetSong("123456"); |
| 333 | +var bitmap = await DownloadBitmap(track.album.cover_xl); |
| 334 | + |
| 335 | +var calculator = new LabClusterColorCalculator(); |
| 336 | +var colors = calculator.Calculate(bitmap, 5); |
| 337 | +``` |
| 338 | + |
| 339 | +### With DevBase.Avalonia |
| 340 | + |
| 341 | +```csharp |
| 342 | +using DevBase.Avalonia.Color.Image; |
| 343 | +using DevBase.Avalonia.Extension.Color.Image; |
| 344 | + |
| 345 | +// Basic analysis |
| 346 | +var basic = new BrightestColorCalculator().Calculate(bitmap); |
| 347 | + |
| 348 | +// Advanced analysis |
| 349 | +var advanced = new LabClusterColorCalculator().Calculate(bitmap, 5); |
| 350 | +``` |
| 351 | + |
| 352 | +## Quick Reference |
| 353 | + |
| 354 | +| Task | Code | |
| 355 | +|------|------| |
| 356 | +| LAB clustering | `new LabClusterColorCalculator().Calculate(bitmap, count)` | |
| 357 | +| RGB clustering | `new ClusterColorCalculator().Calculate(bitmap, count)` | |
| 358 | +| RGB to LAB | `new RGBToLabConverter().Convert(color)` | |
| 359 | +| Preprocess | `new ImagePreProcessor(config).Process(bitmap)` | |
| 360 | +| Filter brightness | `BrightnessConfiguration { MinBrightness = 0.3 }` | |
| 361 | +| Filter chroma | `ChromaConfiguration { MinChroma = 0.2 }` | |
| 362 | +| Exclude grayscale | `FilterConfiguration { ExcludeGrayscale = true }` | |
| 363 | + |
| 364 | +## Testing Considerations |
| 365 | + |
| 366 | +- Test with various image types (photos, graphics, logos) |
| 367 | +- Test with different cluster counts |
| 368 | +- Test preprocessing configurations |
| 369 | +- Verify LAB conversion accuracy |
| 370 | +- Test performance with large images |
| 371 | + |
| 372 | +## Version |
| 373 | + |
| 374 | +Current version: **1.0.0** |
| 375 | +Target framework: **.NET 9.0** |
| 376 | + |
| 377 | +## Dependencies |
| 378 | + |
| 379 | +- Avalonia |
| 380 | +- DevBase |
| 381 | +- DevBase.Avalonia |
0 commit comments