Build a tool to sort digital art by color

To build a tool that sorts digital art by color, you need to process image files, extract dominant colors, and group artworks based on color similarity. Below is a high-level breakdown of how to build this tool using Python with optional frontend support.

Tech Stack

• Backend: Python (Flask or FastAPI)

• Image Processing: PIL, OpenCV, scikit-learn

• Color Extraction: KMeans clustering

• Frontend: HTML/CSS + JS (optional for UI)

• Database (optional): SQLite or MongoDB to store image metadata

Step-by-Step Implementation

1. Install Required Libraries

bash
CopyEdit
pip install pillow opencv-python numpy scikit-learn flask

2. Extract Dominant Colors from Artworks

python
CopyEdit
from PIL import Image
import numpy as np
from sklearn.cluster import KMeans

def extract_dominant_color(image_path, k=3):
    image = Image.open(image_path).convert('RGB')
    image = image.resize((100, 100))  # Resize for faster processing
    pixels = np.array(image).reshape(-1, 3)

    kmeans = KMeans(n_clusters=k)
    kmeans.fit(pixels)
    dominant_colors = kmeans.cluster_centers_.astype(int)
    return dominant_colors  # Returns list of RGB colors

3. Sort Images Based on Dominant Color

python
CopyEdit
import os

def sort_images_by_color(image_folder):
    image_color_map = {}
    for filename in os.listdir(image_folder):
        if filename.endswith(('.jpg', '.png', '.jpeg')):
            full_path = os.path.join(image_folder, filename)
            dominant_color = extract_dominant_color(full_path, k=1)[0]
            image_color_map[filename] = tuple(dominant_color)

    # Sort by hue
    def rgb_to_hsv(rgb):
        r, g, b = [x / 255.0 for x in rgb]
        mx = max(r, g, b)
        mn = min(r, g, b)
        df = mx - mn
        if df == 0:
            h = 0
        elif mx == r:
            h = (60 * ((g - b) / df) + 360) % 360
        elif mx == g:
            h = (60 * ((b - r) / df) + 120) % 360
        else:
            h = (60 * ((r - g) / df) + 240) % 360
        return h

    sorted_images = sorted(image_color_map.items(), key=lambda x: rgb_to_hsv(x[1]))
    return sorted_images

4. Flask API to View Sorted Images

python
CopyEdit
from flask import Flask, render_template_string, send_from_directory

app = Flask(__name__)
IMAGE_FOLDER = "path/to/your/images"

@app.route('/')
def gallery():
    sorted_images = sort_images_by_color(IMAGE_FOLDER)
    html = '<h1>Sorted Digital Art by Color</h1><div style="display:flex;flex-wrap:wrap;">'
    for filename, color in sorted_images:
        html += f'<div style="margin:10px;text-align:center;"><img src="/images/{filename}" width="150"><br>{color}</div>'
    html += '</div>'
    return render_template_string(html)

@app.route('/images/<path:filename>')
def image(filename):
    return send_from_directory(IMAGE_FOLDER, filename)

if __name__ == '__main__':
    app.run(debug=True)

Optional Enhancements

• Color filters: Add UI filters to view images by color range.

• Multiple dominant colors: Display secondary or tertiary tones.

• Database integration: Store and query based on extracted color data.

• Drag-and-drop upload: Enable users to upload and sort new artwork live.

This tool enables automatic organization of digital artworks by color, helping artists, curators, and collectors manage visual collections more intuitively.