init commit

.github/workflows/deploy-hf.yml

@@ -0,0 +1,25 @@
+name: Deploy to Hugging Face spaces
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Dev Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+
+      - name: Push to HF
+        env:
+          HFTOKEN: ${{ secrets.HFTOKEN }}
+
+        run: |
+          git remote add hf https://thiagohersan:$HFTOKEN@huggingface.co/spaces/visualizedata/PSAM5020-ColorSort-Gradio
+          git push -f hf main

.gitignore

@@ -0,0 +1,7 @@
+.DS_S*
+__pycache__/
+gradio_cached_examples/
+.gradio/
+.ipynb_checkpoints/
+flowers.tar.gz
+data/image

README.md

@@ -0,0 +1,11 @@
+---
+title: PSAM5020 Color Sort by Clustering
+emoji: 🌸
+colorFrom: blue
+colorTo: pink
+sdk: gradio
+python_version: 3.10.12
+sdk_version: 5.0.2
+app_file: app.py
+pinned: false
+---

app.py

@@ -0,0 +1,135 @@
+import gradio as gr
+import json
+import numpy as np
+import re
+import tarfile
+
+import PIL.Image as PImage
+
+from os import listdir, path, remove
+from sklearn.cluster import KMeans
+from urllib import request
+
+def download_extract():
+  url = "https://github.com/PSAM-5020-2025S-A/5020-utils/releases/latest/download/flowers.tar.gz"
+  target_path = "flowers.tar.gz"
+
+  with request.urlopen(request.Request(url), timeout=15.0) as response:
+    if response.status == 200:
+      with open(target_path, "wb") as f:
+        f.write(response.read())
+  
+  tar = tarfile.open(target_path, "r:gz")
+  tar.extractall()
+  tar.close()
+  remove("flowers.tar.gz")
+
+# Posterize image and get representative colors
+def top_colors(fpath, n_clusters=8, n_colors=4):
+  pimg = PImage.open(fpath).convert("RGB")
+  pimg_pxs = list(pimg.getdata())
+
+  posterizer = KMeans(n_clusters=n_clusters)
+  px_clusters = posterizer.fit_predict(pimg_pxs)
+  cluster_colors = posterizer.cluster_centers_
+
+  _, ccounts = np.unique(px_clusters, return_counts=True)
+  ccounts_order = np.argsort(-ccounts)
+  ccolors_sorted = [[round(rgb) for rgb in cluster_colors[idx]] for idx in ccounts_order]
+
+  return ccolors_sorted[:n_colors]
+
+# Cluster all images
+def get_top_colors(flower_image_dir):
+  flower_files = sorted([f for f in listdir(flower_image_dir) if f.endswith(".png")])
+
+  file_colors = []
+  for fname in flower_files:
+    file_colors.append({
+      "filename": fname,
+      "colors": top_colors(f"{flower_image_dir}/{fname}", n_clusters=8, n_colors=4)
+    })
+  return file_colors
+
+# Euclidean distance between 2 RGB color tuples
+def color_distance(c0, c1):
+  return ((c0[0] - c1[0])**2 + (c0[1] - c1[1])**2 + (c0[2] - c1[2])**2) ** 0.5
+
+# Function that returns minimum distance between a reference color and colors from a list
+def min_color_distance(ref_color, color_list):
+  c_dists = [color_distance(ref_color, c) for c in color_list]
+  return min(c_dists)
+
+# Turns a css color string in the form `#12AB56` or
+#                                      `rgb(18, 171, 87)` or
+#                                      `rgba(18, 171, 87, 1)`
+#   into an RGB list [18, 171, 87]
+def css_to_rgb(css_str):
+  if css_str[0] == "#":
+    return [int(css_str[i:i+2], 16) for i in range(1,6,2)]
+
+  COLOR_PATTERN = r"([^(]+)\(([0-9.]+), ?([0-9.]+%?), ?([0-9.]+%?)(, ?([0-9.]+))?\)"
+  match = re.match(COLOR_PATTERN, css_str)
+  if not match:
+    return [0,0,0]
+
+  if "rgb" in match.group(1):
+    return [int(float(match.group(i))) for i in range(2,5)]
+
+  if "hsl" in match.group(1):
+    print("hsl not supported")
+    return [0,0,0]
+
+def order_by_color(center_color_str):
+  center_color = css_to_rgb(center_color_str)
+
+  # Function that returns how close an image is to a given color
+  def by_color_dist(A):
+    return min_color_distance(center_color, A["colors"])
+
+  file_colors_sorted = sorted(FILE_COLORS, key=by_color_dist)
+  files_sorted = [A["filename"] for A in file_colors_sorted]
+
+  file_order = {
+    "color": center_color,
+    "files": files_sorted
+  }
+
+  return json.dumps(file_order)
+
+my_inputs = [
+  gr.ColorPicker(value="#ffdf00", label="center_color", interactive=True)
+]
+
+my_outputs = [
+  gr.JSON(show_label=False, show_indices=False, height=200, container=False)
+]
+
+my_examples = [
+  ["#FFFFFF"],
+  ["#FFD700"],
+  ["#7814BE"]
+]
+
+def setup():
+  global FILE_COLORS
+  FLOWER_IMG_DIR = "./data/image/flowers"
+  if not path.isdir(FLOWER_IMG_DIR):
+    download_extract()
+  FILE_COLORS = get_top_colors(FLOWER_IMG_DIR)
+
+setup()
+
+with gr.Blocks() as demo:
+  gr.Interface(
+    fn=order_by_color,
+    inputs=my_inputs,
+    outputs=my_outputs,
+    cache_examples=True,
+    examples=my_examples,
+    allow_flagging="never",
+    fill_width=True
+  )
+
+if __name__ == "__main__":
+  demo.launch()

index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    .container {
+      max-width: 768px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin: 0 auto;
+    }
+
+    .color-picker {
+      position: sticky;
+      top: 20px;
+      height: 50px;
+    }
+
+    .img-img {
+      width: 128px;
+    }
+  </style>
+
+  <script>
+    let mClient;
+    async function preload() {
+      const Gradio = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js");
+      mClient = await Gradio.Client.connect("visualizedata/PSAM5020-ColorSort-Gradio");
+      document.getElementById("color-picker").dispatchEvent(new Event('change'));
+    }
+    preload();
+
+    const IMGS_URL = "https://raw.githubusercontent.com/PSAM-5020-2025F-A/5020-utils/main/datasets/image/flowers";
+
+    function orderImages(imageFiles) {
+      const container = document.getElementById('main-container');
+      container.innerHTML = "";
+
+      imageFiles.forEach((fname, i) => {
+        const imgDivEl = document.createElement("div");
+        imgDivEl.classList.add("img-container");
+        container.appendChild(imgDivEl);
+
+        const imgEl = document.createElement("img");
+        imgEl.setAttribute("src", `${IMGS_URL}/${fname}`);
+        imgEl.classList.add("img-img");
+        imgDivEl.appendChild(imgEl);
+      });
+    }
+
+    window.addEventListener("load", (event) => {
+      const colorEl = document.getElementById("color-picker");
+      colorEl.addEventListener("change", async (event) => {
+        document.getElementById('main-container').innerHTML = "Loading...";
+        const result = await mClient.predict("/predict", { 		
+		      center_color_str: event.target.value
+        });
+        orderImages(result.data[0].files);
+      });
+    });
+  </script>
+</head>
+
+<body>
+  <input type="color" id="color-picker" class="color-picker" value="#fffffe">
+  <div id="main-container" class="container"></div>
+</body>
+
+</html>

requirements.txt

@@ -0,0 +1,3 @@
+pydantic==2.8.2
+huggingface-hub==0.34.3
+scikit-learn