add sorted color clusters

myapp/app.py

@@ -10,7 +10,7 @@ from huggingface_hub import InferenceClient
 from PIL import Image
 from qrcode_artistic import write_artistic
 
-from myapp.palette import array_to_hex, extract_color_clusters
+from myapp.palette import array_to_hex, extract_color_clusters, sort_color_clusters
 
 try:
     import dotenv
@@ -46,7 +46,7 @@ with gr.Blocks() as demo:
                 color_light = gr.ColorPicker("#FFFFFF", label="Light")
 
             with gr.Row():
-                gr.ClearButton([color_dark, color_light])
+                gr.ClearButton([color_dark, color_light], value="Reset")
                 extract_colors = gr.Button("Extract")
 
     def generate_background(data: dict[Component, Any]):
@@ -94,7 +94,7 @@ with gr.Blocks() as demo:
 
         image = Image.open(data[background])
         k_means = extract_color_clusters(image, n_clusters=2)
-        primary, secondary = map(array_to_hex, k_means.cluster_centers_)
+        primary, secondary = map(array_to_hex, sort_color_clusters(k_means))
 
         return primary, secondary
 

myapp/palette.py

@@ -27,8 +27,12 @@ def extract_color_clusters(image_array: np.ndarray | Image.Image, n_clusters=2):
     return KMeans(n_clusters=n_clusters).fit(pixels)
 
 
+def sort_color_clusters(k_means: KMeans):
+    return sorted(k_means.cluster_centers_, key=get_hsv_value)
+
+
 def iter_color_shades(k_means: KMeans, shades: tuple[float, ...]):
-    cluster_centers = sorted(k_means.cluster_centers_, key=get_hsv_value)
+    cluster_centers = sort_color_clusters(k_means)
 
     for delta, cluster_center in itertools.product(shades, cluster_centers):
         yield add_hsv_saturation(cluster_center, delta)