Replace pywal with a new ImageMagick color extraction, and custom algorithm. (#20)

* Add initial new algo for color extraction

* Improve the algo

* Tweak the color selection algo

* fix blueprint

* Comment the pywal button

* Tweak the algo, keep the colors close to what is present in the image

* Remove pywal

* Remove pywal

* Remove commented code

* Ensure reset button resets it all

Author: bjarneo

CLAUDE.md

@@ -4,12 +4,16 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Aether is a GTK/Libadwaita theming application for Omarchy. It provides a visual interface for creating and applying desktop themes through pywal color extraction, wallhaven.cc wallpaper browsing, and template-based configuration generation.
+Aether is a GTK/Libadwaita theming application for Omarchy. It provides a visual interface for creating and applying desktop themes through intelligent ImageMagick-based color extraction, wallhaven.cc wallpaper browsing, and template-based configuration generation.
 
 **Core workflow:**
-1. User selects wallpaper (local file/drag-drop OR wallhaven.cc browser)
+1. User selects wallpaper (local file/drag-drop OR wallhaven.cc/local browser)
 2. **(Optional)** Edit wallpaper with filters (blur, brightness, sepia, etc.) before extraction
-3. Pywal extracts 16 ANSI colors from wallpaper (or filtered version)
+3. ImageMagick intelligently extracts 16 ANSI colors from wallpaper (or filtered version)
+   - Automatically classifies image type (monochrome, low-diversity, chromatic)
+   - Adapts palette generation strategy for optimal results
+   - Ensures readability through brightness normalization
+   - Caches results for instant re-extraction
 4. Colors auto-assign to UI roles (background, foreground, color0-15)
 5. User customizes colors/settings in GUI
 6. "Apply Theme" processes templates → writes to `~/.config/omarchy/themes/aether/` → runs `omarchy-theme-set aether`
@@ -42,12 +46,15 @@ npm run dev
 - Tab 1 (Palette Editor): Unified interface for wallpaper + custom palette creation
   - File picker/drag-drop for wallpaper selection
   - **Edit wallpaper button** (icon button next to Extract) - opens WallpaperEditor for filter application
-  - Manual extract button (no auto-extraction)
+  - **Extract button** - Intelligent ImageMagick-based color extraction
   - 16-color swatch grid with click-to-edit and lock feature
   - Loads default Catppuccin-inspired colors on startup
-- Tab 2 (Find Wallpaper): WallpaperBrowser component for wallhaven.cc integration
-- Calls `extractColorsFromWallpaper()` which runs `wal -n -s -t -e -i <image>`
-- Light mode flag (`_lightMode`) controlled by SettingsSidebar, saved to blueprints, affects pywal extraction
+- Tab 2 (Find Wallpaper): Three sub-tabs (Wallhaven, Local, Favorites)
+  - WallpaperBrowser - wallhaven.cc API integration
+  - LocalWallpaperBrowser - ~/Wallpapers directory browser
+  - FavoritesView - Favorited wallpapers from any source
+- Calls `extractColorsFromWallpaperIM()` which uses advanced ImageMagick algorithm
+- Light mode flag (`_lightMode`) controlled by SettingsSidebar, saved to blueprints, affects extraction
 - Emits: `palette-generated` signal with 16 colors, `open-wallpaper-editor` signal with wallpaper path
 
 **WallpaperEditor** (`src/components/WallpaperEditor.js`)
@@ -102,7 +109,7 @@ npm run dev
 - JPEG format (quality 95) for both preview and final output
 - Unique timestamped filename: `processed-wallpaper-{timestamp}.jpg`
 - Saves to `~/.cache/aether/`
-- Bypasses pywal cache (forces fresh color extraction)
+- Bypasses color extraction cache (forces fresh extraction)
 
 **Sub-components:**
 - `src/components/wallpaper-editor/FilterControls.js` - All filter UI controls, presets, tone picker
@@ -164,7 +171,7 @@ The "Find Wallpaper" tab contains a sub-navigation with 3 tabs:
 **SettingsSidebar** (`src/components/SettingsSidebar.js`)
 - Collapsible right sidebar with Adw.NavigationSplitView
 - Contains multiple sections:
-  - Light Mode toggle (for pywal light/dark scheme extraction)
+  - Light Mode toggle (for light/dark color scheme extraction)
   - Color adjustments (vibrance, contrast, brightness, hue shift, temperature, gamma)
   - Color harmony generator (complementary, analogous, triadic, split-complementary, tetradic, monochromatic)
   - Gradient generator (smooth transitions between two colors)
@@ -189,8 +196,6 @@ The "Find Wallpaper" tab contains a sub-navigation with 3 tabs:
 
 ### Services
 
-**wallpaper-service.js**: Executes pywal via `Gio.Subprocess`, reads colors from `~/.cache/wal/colors`, brightens colors 9-15 for better terminal contrast
-
 **wallhaven-service.js**: HTTP client for wallhaven.cc API v1
 - Uses `Soup.Session` (libsoup3) for async HTTP requests
 - Methods: `search(params)`, `getWallpaper(id)`, `downloadWallpaper(url, destPath)`
@@ -229,8 +234,7 @@ ConfigWriter iterates all template files, performs string substitution, and writ
 - GJS (GNOME JavaScript bindings)
 - GTK 4 + Libadwaita 1
 - libsoup3 (HTTP client for wallhaven API)
-- pywal (`python-pywal` package)
-- ImageMagick (`magick` command) - required for wallpaper filter processing
+- ImageMagick (`magick` command) - required for color extraction and wallpaper filter processing
 - omarchy theme manager (provides `omarchy-theme-set` command)
 
 **Import pattern:**
@@ -282,8 +286,7 @@ PreviewArea (click gesture) → temporarily disables filters → shows original
 ## Important Notes
 
 - Application ID is `com.aether.DesktopSynthesizer` (in main.js) but desktop file is `li.oever.aether.desktop`
-- Wallpaper extraction requires pywal installed and in PATH
-- **Wallpaper filter processing requires ImageMagick (`magick` command) installed**
+- **Color extraction and wallpaper filter processing require ImageMagick (`magick` command) installed**
 - Theme application requires `omarchy-theme-set` command available
 - Default colors defined in `src/constants/colors.js` as fallback
 - All file operations use GLib/Gio APIs (file-utils.js wrappers)

README.md

@@ -10,8 +10,10 @@ A visual theming application for Omarchy. Create beautiful desktop themes throug
 
 ## Key Features
 
-- **Wallpaper Integration** - Extract colors with pywal or browse wallhaven.cc directly
+- **Intelligent Color Extraction** - Advanced ImageMagick-based algorithm with automatic image classification (monochrome, low-diversity, chromatic)
+- **Smart Palette Generation** - Adaptive strategies ensure readability and preserve image aesthetics
 - **Image Filter Editor** - Apply blur, exposure, vignette, grain, and 12 presets before color extraction
+- **Wallpaper Browsing** - Integrated wallhaven.cc browser, local wallpaper manager, and favorites system
 - **Color Presets** - 10 popular themes: Dracula, Nord, Gruvbox, Tokyo Night, Catppuccin, and more
 - **Advanced Color Tools** - Harmony generator, gradients, and adjustment sliders (vibrance, contrast, temperature)
 - **Color Lock System** - Protect specific colors while experimenting with adjustments
@@ -27,15 +29,14 @@ A visual theming application for Omarchy. Create beautiful desktop themes throug
 - GTK 4
 - Libadwaita 1
 - libsoup3 - HTTP client library for wallhaven API
-- **pywal** - Color extraction from wallpapers
-- **ImageMagick** - Image filter processing
+- **ImageMagick** - Intelligent color extraction and image filter processing
 - **Omarchy** - Distro
 
 ## Installation
 
 1. Install system dependencies:
 ```bash
-sudo pacman -S gjs gtk4 libadwaita libsoup3 python-pywal imagemagick
+sudo pacman -S gjs gtk4 libadwaita libsoup3 imagemagick
 ```
 
 2. Clone the repository:
@@ -88,9 +89,9 @@ Example:
 ### Basic Workflow
 
 1. **Create a palette:**
-   - Upload a wallpaper and extract colors with pywal
+   - Upload a wallpaper and extract colors with intelligent ImageMagick algorithm
    - (Optional) Edit wallpaper with filters before extraction
-   - Browse wallhaven.cc and download wallpapers
+   - Browse wallhaven.cc, local wallpapers, or favorites
    - Choose from 10 color presets
    - Generate color harmonies or gradients
 
@@ -106,6 +107,16 @@ Example:
 
 Changes apply instantly via live reload.
 
+### Color Extraction Algorithm
+
+Aether uses an advanced ImageMagick-based extraction system that:
+
+- **Automatically classifies images** as monochrome, low-diversity, or chromatic
+- **Adapts palette generation** strategy based on image characteristics
+- **Ensures readability** through intelligent brightness normalization
+- **Preserves image aesthetics** by prioritizing hue accuracy
+- **Caches results** for instant re-extraction (< 0.1s)
+
 ## Development
 
 ```bash
@@ -149,10 +160,10 @@ pacman -S gjs gtk4 libadwaita libsoup3
 gjs -m src/main.js  # Check for errors
 ```
 
-**pywal not found:**
+**ImageMagick not found:**
 ```bash
-pacman -S python-pywal
-which wal  # Verify installation
+pacman -S imagemagick
+magick --version  # Verify installation
 ```
 
 **Wallhaven not loading:**

src/components/PaletteGenerator.js

@@ -6,7 +6,7 @@ import Adw from 'gi://Adw?version=1';
 import Gdk from 'gi://Gdk?version=4.0';
 import GdkPixbuf from 'gi://GdkPixbuf';
 
-import {extractColorsFromWallpaper} from '../services/wallpaper-service.js';
+import {extractColorsFromWallpaperIM} from '../utils/imagemagick-color-extraction.js';
 import {adjustColor} from '../utils/color-utils.js';
 import {ColorSwatchGrid} from './palette/color-swatch-grid.js';
 import {ColorPickerDialog} from './palette/color-picker-dialog.js';
@@ -274,34 +274,35 @@ export const PaletteGenerator = GObject.registerClass(
             selectButton.connect('clicked', () => this._selectWallpaper());
             buttonBox.append(selectButton);
 
-            // Extract button (initially hidden)
-            const extractButtonBox = new Gtk.Box({
+            // ImageMagick extract button
+            const imExtractButtonBox = new Gtk.Box({
                 orientation: Gtk.Orientation.HORIZONTAL,
                 spacing: 6,
             });
 
-            const extractIcon = new Gtk.Image({
+            const imExtractIcon = new Gtk.Image({
                 icon_name: 'color-select-symbolic',
             });
 
-            const extractLabel = new Gtk.Label({
+            const imExtractLabel = new Gtk.Label({
                 label: 'Extract',
             });
 
-            extractButtonBox.append(extractIcon);
-            extractButtonBox.append(extractLabel);
+            imExtractButtonBox.append(imExtractIcon);
+            imExtractButtonBox.append(imExtractLabel);
 
-            this._extractButton = new Gtk.Button({
-                child: extractButtonBox,
+            this._imExtractButton = new Gtk.Button({
+                child: imExtractButtonBox,
                 css_classes: ['suggested-action'],
                 visible: false,
+                tooltip_text: 'Extract colors from wallpaper',
             });
-            this._extractButton.connect('clicked', () => {
+            this._imExtractButton.connect('clicked', () => {
                 if (this._currentWallpaper) {
-                    this._extractColors(this._currentWallpaper);
+                    this._extractColorsIM(this._currentWallpaper);
                 }
             });
-            buttonBox.append(this._extractButton);
+            buttonBox.append(this._imExtractButton);
 
             // Edit wallpaper button (initially hidden)
             const editButtonBox = new Gtk.Box({
@@ -509,7 +510,7 @@ export const PaletteGenerator = GObject.registerClass(
                 this._wallpaperPreview.set_visible(true);
             }
 
-            this._extractButton.set_visible(true);
+            this._imExtractButton.set_visible(true);
             this._pickFromWallpaperBtn.set_visible(true);
             this._editWallpaperBtn.set_visible(true);
         }
@@ -540,15 +541,15 @@ export const PaletteGenerator = GObject.registerClass(
                 this._wallpaperPreview.set_visible(true);
             }
 
-            this._extractButton.set_visible(true);
+            this._imExtractButton.set_visible(true);
             this._pickFromWallpaperBtn.set_visible(true);
             this._editWallpaperBtn.set_visible(true);
         }
 
-        _extractColors(imagePath) {
+        _extractColorsIM(imagePath) {
             this._showLoading(true);
 
-            extractColorsFromWallpaper(
+            extractColorsFromWallpaperIM(
                 imagePath,
                 this._lightMode,
                 colors => {
@@ -558,7 +559,7 @@ export const PaletteGenerator = GObject.registerClass(
                     this._showLoading(false);
                 },
                 error => {
-                    console.error('Error extracting colors:', error.message);
+                    console.error('Error extracting colors with ImageMagick:', error.message);
                     this._showLoading(false);
                 }
             );
@@ -745,17 +746,21 @@ export const PaletteGenerator = GObject.registerClass(
         }
 
         reset() {
-            this._palette = [];
-            this._originalPalette = [];
             this._currentWallpaper = null;
             this._wallpaperPreview.set_file(null);
+            this._wallpaperPreview.set_visible(false);
             if (this._customWallpaperPreview) {
                 this._customWallpaperPreview.set_file(null);
                 this._customWallpaperPreview.set_visible(false);
             }
-            this._swatchGrid.setPalette([]);
+            this._imExtractButton.set_visible(false);
+            this._pickFromWallpaperBtn.set_visible(false);
+            this._editWallpaperBtn.set_visible(false);
             this._swatchGrid.setLockedColors(new Array(16).fill(false)); // Reset all locks
             this._showLoading(false);
+
+            // Reload default colors
+            this._loadDefaultCustomColors();
         }
 
         getPalette() {

src/main.js

@@ -441,6 +441,12 @@ const AetherWindow = GObject.registerClass(
             const settings = this.settingsSidebar.getSettings();
             const lightMode = this.settingsSidebar.getLightMode();
 
+            // Initialize blueprint service if not already initialized
+            if (!this.blueprintService) {
+                // Show blueprint manager first to initialize the service
+                this._showBlueprintManager();
+            }
+
             this.blueprintService.saveBlueprint(palette, settings, lightMode);
         }