From f7267bdf8556abacba0eccb17e86ead43b3a51e3 Mon Sep 17 00:00:00 2001
From: CrispyBaguette <alexandre.bruyant@gmail.com>
Date: Mon, 13 Dec 2021 23:15:11 +0100
Subject: [PATCH] multi palette support (#9)

* Support dithering with other palettes

* American spelling

* Intro text tweak

* meta desc

* Removed broken build instructions and outdated URL
---
 README.md                   | 21 +-----------
 client/public/index.html    |  5 +--
 client/src/App.tsx          | 20 +++++------
 client/src/ImageInput.tsx   | 26 ++++++++++----
 client/src/ImageOutput.tsx  | 10 +++---
 client/src/ImagePreview.tsx | 10 +++---
 client/src/Palette.ts       | 68 +++++++++++++++++++++++++++++++++++++
 client/src/lib/Ditherer.ts  |  9 +++--
 src/wasm.go                 | 42 ++++++++++-------------
 9 files changed, 134 insertions(+), 77 deletions(-)
 create mode 100644 client/src/Palette.ts

diff --git a/README.md b/README.md
index 9a700ae..adb15c0 100644
--- a/README.md
+++ b/README.md
@@ -2,23 +2,4 @@
 
 Go+Wasm image palette converter
 
-Build with:
-
-```bash
-GOOS=js GOARCH=wasm go build -o dist/main.wasm .
-```
-
-Access with:
-
-```
-cd dist
-npx http-server
-```
-
-A version is also available on IPFS:
-
-```
-/ipfs/Qmdnx5vkt8qietF5BkEDTwxZUFKkh5g7FwYv1CgXYhQV1o
-```
-
-You can access it directly [here](https://ipfs.io/ipfs/Qmdnx5vkt8qietF5BkEDTwxZUFKkh5g7FwYv1CgXYhQV1o/).
+You can access it directly [here](http://paletteswitcher.bruyant.xyz), preferably using [IPFS](https://ipfs.io/).
diff --git a/client/public/index.html b/client/public/index.html
index a8aa323..806aa39 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Go+Wasm image dithering tool" />
     <link
       rel="apple-touch-icon"
       href="%PUBLIC_URL%/android-chrome-192x192.png"
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 6567fe3..0df90db 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,6 +4,7 @@ import ImageOutput from "./ImageOutput";
 import Ditherer from "./lib/Ditherer";
 import ImagePreview from "./ImagePreview";
 import Header from "./Header";
+import Palette from "./Palette";
 
 enum AppState {
   NO_IMAGE,
@@ -16,13 +17,13 @@ function App() {
   const [ditheredImage, setDitheredImage] = React.useState<Blob>();
   const [appState, setAppState] = React.useState<AppState>(AppState.NO_IMAGE);
 
-  const handleImageSubmit = async (data: Blob) => {
+  const handleImageSubmit = async (data: Blob, palette: Palette) => {
     setBaseImage(data);
     setAppState(AppState.IMAGE_LOADED);
 
     try {
       const imageArray = new Uint8ClampedArray(await data.arrayBuffer());
-      const ditheredImage = await new Ditherer().dither(imageArray);
+      const ditheredImage = await new Ditherer().dither(imageArray, palette);
       setDitheredImage(new Blob([ditheredImage], { type: "image/png" }));
       setAppState(AppState.IMAGE_PROCESSED);
     } catch (e) {
@@ -34,20 +35,19 @@ function App() {
   return (
     <div className="bg-nord-6 text-nord-0 min-h-screen">
       <Header />
-      <main className="container mx-auto">
-        <article className="max-w-prose mx-auto pb-5 px-2">
+      <main className="container mx-auto pb-5">
+        <article className="text-xl leading-relaxed max-w-prose space-y-2 mx-auto pb-5 px-2">
           <h1 className="text-3xl text-center pb-3">
             Go+Wasm image dithering tool
           </h1>
-          <aside className="text-xl text-center pb-3">
-            Featuring the Nord Color Palette
-          </aside>
           <p>
-            Load an image, click Go and wait (potentially for a while) for the
-            image to be processed using the Floyd-Steinberg algorithm.
+            Load an image, select a palette, click Go and wait for the image to
+            be processed using the Floyd-Steinberg algorithm.
           </p>
           <p>
-            WebAssembly might run out of memory when processing larger images.
+            The preview image is scaled using the nearest-neighbor algorithm,
+            which might cause artifacts in some cases. Download the image for
+            the best experience.
           </p>
         </article>
         <ImageInput onImageSubmit={handleImageSubmit}></ImageInput>
diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx
index abe2c6c..f0d2997 100644
--- a/client/src/ImageInput.tsx
+++ b/client/src/ImageInput.tsx
@@ -1,11 +1,13 @@
 import React, { FormEventHandler } from "react";
+import Palette, { palettes } from "./Palette";
 
 interface Props {
-  onImageSubmit: (image: Blob) => void;
+  onImageSubmit: (image: Blob, palette: Palette) => void;
 }
 
 function ImageInput({ onImageSubmit }: Props) {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const [paletteIndex, setPaletteIndex] = React.useState(0);
 
   const handleSubmit: FormEventHandler = (e) => {
     e.preventDefault();
@@ -17,7 +19,11 @@ function ImageInput({ onImageSubmit }: Props) {
       return;
     }
 
-    onImageSubmit(fileInputRef.current.files[0]);
+    onImageSubmit(fileInputRef.current.files[0], palettes[paletteIndex]);
+  };
+
+  const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setPaletteIndex(parseInt(event.target.value));
   };
 
   return (
@@ -34,12 +40,20 @@ function ImageInput({ onImageSubmit }: Props) {
           className="block w-full mt-1 text-sm text-nord-0 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-nord-4 file:text-nord-0 hover:file:bg-nord-5"
         />
       </label>
-      {/* <label>
+      <label>
         <span className="block">Select a color palette:</span>
-        <select className="form-select block w-full mt-1">
-          <option value="nord">Nord</option>
+        <select
+          value={paletteIndex}
+          onChange={handlePaletteChange}
+          className="form-select block w-full mt-1"
+        >
+          {palettes.map((palette, i) => (
+            <option key={i} value={i}>
+              {palette.label}
+            </option>
+          ))}
         </select>
-      </label> */}
+      </label>
       <button
         type="submit"
         value="Go"
diff --git a/client/src/ImageOutput.tsx b/client/src/ImageOutput.tsx
index f8ca746..82db465 100644
--- a/client/src/ImageOutput.tsx
+++ b/client/src/ImageOutput.tsx
@@ -9,10 +9,10 @@ interface OutputProps {
 function ImageOutput({ imageData }: OutputProps) {
   const imageUrl = URL.createObjectURL(imageData);
 
-  useEffect(() => { 
-    return () => { 
+  useEffect(() => {
+    return () => {
       URL.revokeObjectURL(imageUrl);
-    }
+    };
   }, [imageUrl]);
 
   const handleClick = () => {
@@ -21,11 +21,11 @@ function ImageOutput({ imageData }: OutputProps) {
   };
 
   return (
-    <div className="mx-auto">
+    <div className="max-w-4xl mx-auto">
       <img
         alt="dithering output"
         src={imageUrl}
-        className="object-contain max-h-96 max-w-96 mx-auto"
+        className="object-cover min-w-[70%] my-4 px-2 mx-auto"
       />
       <button
         onClick={handleClick}
diff --git a/client/src/ImagePreview.tsx b/client/src/ImagePreview.tsx
index 4a30230..4f045b6 100644
--- a/client/src/ImagePreview.tsx
+++ b/client/src/ImagePreview.tsx
@@ -7,18 +7,18 @@ interface ImagePreviewProps {
 function ImagePreview({ imageData }: ImagePreviewProps) {
   const imageUrl = URL.createObjectURL(imageData);
 
-  useEffect(() => { 
-    return () => { 
+  useEffect(() => {
+    return () => {
       URL.revokeObjectURL(imageUrl);
-    }
+    };
   }, [imageUrl]);
 
   return (
-    <div className="blur-sm mx-auto">
+    <div className="blur-sm max-w-4xl mx-auto">
       <img
         alt="preview"
         src={imageUrl}
-        className="object-contain max-h-96 max-w-96 mx-auto"
+        className="object-cover min-w-[70%] my-4 px-2 mx-auto"
       />
     </div>
   );
diff --git a/client/src/Palette.ts b/client/src/Palette.ts
new file mode 100644
index 0000000..030b8f6
--- /dev/null
+++ b/client/src/Palette.ts
@@ -0,0 +1,68 @@
+class Palette {
+  colors: string[];
+  label: string;
+
+  constructor(label: string, colors: string[]) {
+    this.label = label;
+    this.colors = colors;
+  }
+}
+
+const nord = new Palette("Nord", [
+  "2e3440",
+  "3b4252",
+  "434c5e",
+  "4c566a",
+  "d8dee9",
+  "e5e9f0",
+  "eceff4",
+  "8fbcbb",
+  "88c0d0",
+  "81a1c1",
+  "5e81ac",
+  "bf616a",
+  "d08770",
+  "ebcb8b",
+  "a3be8c",
+  "b48ead",
+]);
+
+const monokai = new Palette("Monokai", [
+  "2e2e2e",
+  "797979",
+  "d6d6d6",
+  "e5b567",
+  "b4d273",
+  "e87d3e",
+  "9e86c8",
+  "b05279",
+  "6c99bb",
+]);
+
+const grayScale1bit = new Palette("Gray Scale 1 bit (Black & White)", [
+  "000000",
+  "ffffff",
+]);
+
+const grayScale2bits = new Palette("Gray Scale 2 bits", [
+  "000000",
+  "676767",
+  "b6b6b6",
+  "ffffff",
+]);
+
+let grayColors: string[] = [];
+for (let i = 0; i < 256; i++) {
+  const hexValue = i.toString(16).padStart(2, "0");
+  grayColors.push(`${hexValue}${hexValue}${hexValue}`);
+}
+const grayScale8bits = new Palette("Gray Scale 8 bits", grayColors);
+
+export const palettes = [
+  nord,
+  monokai,
+  grayScale1bit,
+  grayScale2bits,
+  grayScale8bits,
+];
+export default Palette;
diff --git a/client/src/lib/Ditherer.ts b/client/src/lib/Ditherer.ts
index b62b124..e6819bc 100644
--- a/client/src/lib/Ditherer.ts
+++ b/client/src/lib/Ditherer.ts
@@ -1,9 +1,14 @@
+import Palette from "../Palette";
+
 class Ditherer {
-  async dither(image: Uint8ClampedArray): Promise<Uint8ClampedArray> {
+  async dither(
+    image: Uint8ClampedArray,
+    palette: Palette
+  ): Promise<Uint8ClampedArray> {
     const worker: any = await wasmWorker("./main.wasm");
     let output: Uint8ClampedArray;
     try {
-      output = await worker.dither(image);
+      output = await worker.dither(image, palette.colors);
     } finally {
       worker.terminate();
     }
diff --git a/src/wasm.go b/src/wasm.go
index f65962e..2a17192 100644
--- a/src/wasm.go
+++ b/src/wasm.go
@@ -15,25 +15,6 @@ import (
 	"github.com/makeworld-the-better-one/dither/v2"
 )
 
-var nordPalette, _ = buildPalette([]string{
-	"2e3440",
-	"3b4252",
-	"434c5e",
-	"4c566a",
-	"d8dee9",
-	"e5e9f0",
-	"eceff4",
-	"8fbcbb",
-	"88c0d0",
-	"81a1c1",
-	"5e81ac",
-	"bf616a",
-	"d08770",
-	"ebcb8b",
-	"a3be8c",
-	"b48ead",
-})
-
 func buildPalette(pal []string) (color.Palette, error) {
 	var palette = make(color.Palette, len(pal))
 
@@ -53,9 +34,9 @@ func buildPalette(pal []string) (color.Palette, error) {
 	return palette, nil
 }
 
-func ditherImage(img image.Image) image.Image {
+func ditherImage(img image.Image, palette color.Palette) image.Image {
 	// Build ditherer
-	ditherer := dither.NewDitherer(nordPalette)
+	ditherer := dither.NewDitherer(palette)
 	ditherer.Matrix = dither.FloydSteinberg
 
 	dst := ditherer.Dither(img)
@@ -79,9 +60,9 @@ func Dither() js.Func {
 		imageBytes := make([]byte, args[0].Length())
 		js.CopyBytesToGo(imageBytes, args[0])
 
-		handler := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
-			resolve := args[0]
-			reject := args[1]
+		handler := js.FuncOf(func(promiseThis js.Value, promiseArgs []js.Value) interface{} {
+			resolve := promiseArgs[0]
+			reject := promiseArgs[1]
 
 			go func() {
 				errorConstructor := js.Global().Get("Error")
@@ -94,10 +75,21 @@ func Dither() js.Func {
 					reject.Invoke(errorObject)
 				}
 
+				// Build palette
+				colors := make([]string, args[1].Length())
+				for i := 0; i < args[1].Length(); i++ {
+					colors[i] = args[1].Index(i).String()
+				}
+				palette, err := buildPalette(colors)
+				if err != nil {
+					errorObject := errorConstructor.New(err.Error())
+					reject.Invoke(errorObject)
+				}
+
 				// Perform dithering
 				log.Println("Dithering image...")
 				t1 := time.Now()
-				ditheredImage := ditherImage(img)
+				ditheredImage := ditherImage(img, palette)
 				t2 := time.Now()
 				log.Printf("Image dithered in %v\n", t2.Sub(t1))