Add mechanism for extract color palette from image

apps/color-buddy/package.json

@@ -46,6 +46,7 @@
     "color-buddy-palette": "*",
     "color-buddy-palette-lint": "*",
     "colorjs.io": "^0.5.2",
+    "colorthief": "^2.6.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "driver.js": "^1.3.1",

apps/color-buddy/src/controls/NewPal.svelte

@@ -9,6 +9,7 @@
   import { buttonStyle, denseButtonStyle } from "../lib/styles";
   import Tooltip from "../components/Tooltip.svelte";
   import SuggestColorPal from "./SuggestColorPal.svelte";
+  import ColorThief from "colorthief";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal ? currentPal.colorSpace : "lab";
@@ -39,6 +40,48 @@
       return;
     }
   }
+  let palFromImgError = "";
+  let palFromImgState: "idle" | "loading" = "idle";
+  function processImg(e: any, onClick: () => void) {
+    const colorThief = new ColorThief();
+    palFromImgState = "loading";
+    try {
+      const target = e.target as HTMLInputElement;
+      const files = target?.files;
+      console.log(files);
+      if (!files) {
+        return;
+      }
+      const file = [...files].at(0);
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.src = (e.target as FileReader).result as string;
+        img.onload = () => {
+          try {
+            const colors = colorThief.getPalette(img, 5) as number[][];
+            const palRGB = colors.map((x) => `rgb(${x.join(", ")})`);
+            const pal = makePalFromString(palRGB);
+            console.log(colors);
+
+            newPal(pal, onClick);
+          } catch (e) {
+            console.error(e);
+            palFromImgState = "idle";
+            palFromImgError = "Error processing image";
+          }
+        };
+      };
+      reader.readAsDataURL(file);
+    } catch (e) {
+      console.error(e);
+      palFromImgError = "Error processing image";
+      palFromImgState = "idle";
+    }
+  }
 </script>
 
 <Tooltip>
@@ -114,6 +157,20 @@
       <div class="font-bold">Generate a new palette using AI</div>
       <SuggestColorPal />
     {/if}
+    <div class="mt-5 border-t border-black"></div>
+    <div class="font-bold">Generate From Image (png or jpg)</div>
+    <input
+      type="file"
+      accept="image/*"
+      id="file"
+      on:change={(e) => processImg(e, onClick)}
+    />
+    {#if palFromImgState === "loading"}
+      <div>Loading...</div>
+    {/if}
+    {#if palFromImgError}
+      <div class="text-red-600">{palFromImgError}</div>
+    {/if}
   </div>
   <button
     slot="target"

apps/color-buddy/src/custom-types.d.ts

@@ -3,3 +3,5 @@ declare module "color-blind" {
   const blinder: any;
   export default blinder;
 }
+
+declare module "colorthief" {}