Add image optimization feature

rosslh · rosslh · commit c2db7237339e · 2025-04-27T13:46:15.000-04:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -115,7 +115,7 @@ Now you can run the project and start making changes to the code! We recommend u
 
 ### Running the Project
 
-Once you've cloned the repository, you can begin working on the project. This project requires [Node.js](https://nodejs.org/) and [Rust](https://rust-lang.org/) to be installed on your system. Check the [`.nvmrc`](client/.nvmrc) file for the recommended Node.js version. [Rust](https://rust-lang.org/) is also required to build the project.
+Once you've cloned the repository, you can begin working on the project. This project requires [Node.js](https://nodejs.org/) and [Rust](https://rust-lang.org/) to be installed on your system. Check the [`.nvmrc`](client/.nvmrc) file for the recommended Node.js version.
 
 Run all commands from within the `client` directory:
 
diff --git a/client/html/index.html b/client/html/index.html
@@ -147,7 +147,10 @@ <h1 class="nav-heading">
             </button>
           </div>
           <div class="input-wrapper mobile-hidden">
-            <label for="exponent">Exponent</label>
+            <label for="exponent" class="label-with-subtitle">
+              <span>Exponent</span>
+              <span class="secondary">Symmetry</span>
+            </label>
             <input type="number" required id="exponent" name="exponent" />
           </div>
           <div class="checkbox-wrapper mobile-hidden">
@@ -470,6 +473,12 @@ <h1 class="nav-heading">
           <label for="imageHeight">Height (px)</label>
           <input type="number" required id="imageHeight" name="imageHeight" />
         </div>
+        <div class="checkbox-wrapper">
+          <input type="checkbox" id="optimizeImage" name="optimizeImage" />
+          <label for="optimizeImage"
+            >Reduce file size <span class="secondary">(slow)</span></label
+          >
+        </div>
         <div class="submit-or-cancel">
           <button type="submit" id="saveImageSubmit">Save</button>
           <button type="button" id="saveImageCancel" class="underline-button">
diff --git a/client/js/MandelbrotControls.ts b/client/js/MandelbrotControls.ts
@@ -14,6 +14,7 @@ import {
 } from "./types";
 
 const DETAILS_STATE_STORAGE_KEY = "mandelbrot-details-state";
+const OPTIMIZE_IMAGE_STORAGE_KEY = "mandelbrot-optimize-image";
 const SMALL_SCREEN_WIDTH_PX = 800;
 
 class MandelbrotControls {
@@ -434,6 +435,9 @@ class MandelbrotControls {
     ) as HTMLInputElement;
     const saveImageSubmitButton = document.getElementById("saveImageSubmit");
     const closeModalButton = document.getElementById("saveImageCancel");
+    const optimizeImageCheckbox = document.getElementById(
+      "optimizeImage",
+    ) as HTMLInputElement;
 
     const ignoreSubmitListener: EventListener = (event) =>
       event.preventDefault();
@@ -449,7 +453,11 @@ class MandelbrotControls {
       saveImageSubmitButton.removeAttribute("disabled");
       saveImageForm.removeEventListener("submit", ignoreSubmitListener);
       closeModalButton.removeAttribute("disabled");
+
+      const currentOptimizeState = optimizeImageCheckbox.checked;
       saveImageForm.reset();
+      optimizeImageCheckbox.checked = currentOptimizeState;
+
       if (saveImageDialog.open) {
         saveImageDialog.close();
       } else {
@@ -463,6 +471,18 @@ class MandelbrotControls {
       }
     };
 
+    const savedOptimizeState = localStorage.getItem(OPTIMIZE_IMAGE_STORAGE_KEY);
+    if (savedOptimizeState !== null) {
+      optimizeImageCheckbox.checked = JSON.parse(savedOptimizeState);
+    }
+
+    optimizeImageCheckbox.onchange = () => {
+      localStorage.setItem(
+        OPTIMIZE_IMAGE_STORAGE_KEY,
+        JSON.stringify(optimizeImageCheckbox.checked),
+      );
+    };
+
     if (typeof Blob !== "undefined") {
       saveImageButton.onclick = (e) => {
         e.stopPropagation();
@@ -495,8 +515,20 @@ class MandelbrotControls {
 
       this.logEvent("imageSave");
 
+      saveImageSubmitButton.innerText = "Generating...";
+      const shouldOptimize = optimizeImageCheckbox.checked;
+
       this.map
-        .saveVisibleImage(width, height)
+        .saveVisibleImage(
+          width,
+          height,
+          shouldOptimize,
+          shouldOptimize
+            ? () => {
+                saveImageSubmitButton.innerText = "Optimizing...";
+              }
+            : undefined,
+        )
         .catch((error) => {
           alert("Error saving image\n\n" + error);
           console.error(error);
diff --git a/client/js/MandelbrotLayer.ts b/client/js/MandelbrotLayer.ts
@@ -37,24 +37,28 @@ class MandelbrotLayer extends L.GridLayer {
       canvas.width = imageWidth;
       canvas.height = imageHeight;
 
-      this._map.pool.queue(async (getTile) => {
+      this._map.pool.queue(async (workerTask) => {
         try {
-          const data = await getTile({
-            bounds,
-            iterations: this._map.config.iterations,
-            exponent: this._map.config.exponent,
-            imageWidth,
-            imageHeight,
-            colorScheme: this._map.config.colorScheme,
-            reverseColors: this._map.config.reverseColors,
-            lightenAmount: this._map.config.lightenAmount,
-            saturateAmount: this._map.config.saturateAmount,
-            shiftHueAmount: this._map.config.shiftHueAmount,
-            colorSpace: this._map.config.colorSpace,
-            smoothColoring: this._map.config.smoothColoring,
-            paletteMinIter: this._map.config.paletteMinIter,
-            paletteMaxIter: this._map.config.paletteMaxIter,
-          });
+          const request = {
+            type: "calculate" as const,
+            payload: {
+              bounds,
+              iterations: this._map.config.iterations,
+              exponent: this._map.config.exponent,
+              imageWidth,
+              imageHeight,
+              colorScheme: this._map.config.colorScheme,
+              reverseColors: this._map.config.reverseColors,
+              lightenAmount: this._map.config.lightenAmount,
+              saturateAmount: this._map.config.saturateAmount,
+              shiftHueAmount: this._map.config.shiftHueAmount,
+              colorSpace: this._map.config.colorSpace,
+              smoothColoring: this._map.config.smoothColoring,
+              paletteMinIter: this._map.config.paletteMinIter,
+              paletteMaxIter: this._map.config.paletteMaxIter,
+            },
+          };
+          const data = (await workerTask(request)) as Uint8Array;
 
           const imageData = new ImageData(
             Uint8ClampedArray.from(data),
@@ -153,23 +157,27 @@ class MandelbrotLayer extends L.GridLayer {
         ? crypto.randomUUID()
         : Date.now().toString();
 
-    const tileTask = this._map.pool.queue(async (getTile) => {
-      const data = await getTile({
-        bounds,
-        iterations: this._map.config.iterations,
-        exponent: this._map.config.exponent,
-        imageWidth: scaledTileSize,
-        imageHeight: scaledTileSize,
-        colorScheme: this._map.config.colorScheme,
-        reverseColors: this._map.config.reverseColors,
-        lightenAmount: this._map.config.lightenAmount,
-        saturateAmount: this._map.config.saturateAmount,
-        shiftHueAmount: this._map.config.shiftHueAmount,
-        colorSpace: this._map.config.colorSpace,
-        smoothColoring: this._map.config.smoothColoring,
-        paletteMinIter: this._map.config.paletteMinIter,
-        paletteMaxIter: this._map.config.paletteMaxIter,
-      });
+    const tileTask = this._map.pool.queue(async (workerTask) => {
+      const request = {
+        type: "calculate" as const,
+        payload: {
+          bounds,
+          iterations: this._map.config.iterations,
+          exponent: this._map.config.exponent,
+          imageWidth: scaledTileSize,
+          imageHeight: scaledTileSize,
+          colorScheme: this._map.config.colorScheme,
+          reverseColors: this._map.config.reverseColors,
+          lightenAmount: this._map.config.lightenAmount,
+          saturateAmount: this._map.config.saturateAmount,
+          shiftHueAmount: this._map.config.shiftHueAmount,
+          colorSpace: this._map.config.colorSpace,
+          smoothColoring: this._map.config.smoothColoring,
+          paletteMinIter: this._map.config.paletteMinIter,
+          paletteMaxIter: this._map.config.paletteMaxIter,
+        },
+      };
+      const data = (await workerTask(request)) as Uint8Array;
 
       const imageData = new ImageData(
         Uint8ClampedArray.from(data),
diff --git a/client/js/MandelbrotMap.ts b/client/js/MandelbrotMap.ts
@@ -10,19 +10,28 @@ type MapWithResetView = MandelbrotMap & {
   _resetView: (center: L.LatLng | [number, number], zoom: number) => void;
 };
 
-type MandelbrotThread = FunctionThread<[WasmRequestPayload], Uint8Array>;
+type MandelbrotRequest = { type: "calculate"; payload: WasmRequestPayload };
+type OptimisePayload = { buffer: ArrayBuffer };
+type OptimiseRequest = { type: "optimise"; payload: OptimisePayload };
+type WorkerRequest = MandelbrotRequest | OptimiseRequest;
+
+type MandelbrotResponse = Uint8Array;
+type OptimiseResponse = ArrayBuffer;
+type WorkerResponse = MandelbrotResponse | OptimiseResponse;
+
+type TaskThread = FunctionThread<[WorkerRequest], WorkerResponse>;
 
 class MandelbrotMap extends L.Map {
   mandelbrotLayer: MandelbrotLayer;
   mapId: string;
   controls: MandelbrotControls;
   initialConfig: MandelbrotConfig;
   config: MandelbrotConfig;
-  pool: Pool<MandelbrotThread>;
+  pool: Pool<TaskThread>;
   queuedTileTasks: {
     id: string;
     position: L.Coords;
-    task: QueuedTask<MandelbrotThread, void>;
+    task: QueuedTask<TaskThread, void>;
   }[] = [];
 
   constructor({
@@ -178,7 +187,12 @@ class MandelbrotMap extends L.Map {
     }
   }
 
-  async saveVisibleImage(totalWidth: number, totalHeight: number) {
+  async saveVisibleImage(
+    totalWidth: number,
+    totalHeight: number,
+    optimize: boolean,
+    onStartOptimizing?: () => void,
+  ) {
     const bounds = this.adjustBoundsForAspectRatio(
       this.mapBoundsAsComplexParts,
       totalWidth,
@@ -194,7 +208,7 @@ class MandelbrotMap extends L.Map {
       totalWidth,
       totalHeight,
     );
-    this.saveCanvasAsImage(finalCanvas);
+    await this.saveCanvasAsImage(finalCanvas, optimize, onStartOptimizing);
   }
 
   private adjustBoundsForAspectRatio(
@@ -265,15 +279,40 @@ class MandelbrotMap extends L.Map {
     return finalCanvas;
   }
 
-  private saveCanvasAsImage(canvas: HTMLCanvasElement) {
-    canvas.toBlob((blob) => {
-      saveAs(
-        blob,
-        `mandelbrot${Date.now()}_r${this.config.re}_im${this.config.im}_z${
-          this.config.zoom
-        }.png`,
-      );
-    });
+  private async saveCanvasAsImage(
+    canvas: HTMLCanvasElement,
+    optimize: boolean,
+    onStartOptimizing?: () => void,
+  ) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      console.error("Could not get canvas context");
+      return;
+    }
+    const dataUrl = canvas.toDataURL("image/png");
+    const response = await fetch(dataUrl);
+    const rawPngBuffer = await response.arrayBuffer();
+
+    let finalBuffer = rawPngBuffer;
+
+    if (optimize) {
+      onStartOptimizing?.();
+      finalBuffer = (await this.pool.queue((worker) =>
+        worker({
+          type: "optimise",
+          payload: { buffer: rawPngBuffer },
+        }),
+      )) as ArrayBuffer;
+    }
+
+    const blob = new Blob([finalBuffer], { type: "image/png" });
+
+    saveAs(
+      blob,
+      `mandelbrot${Date.now()}_r${this.config.re}_im${this.config.im}_z${
+        this.config.zoom
+      }.png`,
+    );
   }
 
   getShareUrl() {
diff --git a/client/js/worker.js b/client/js/worker.js
@@ -1,28 +1,67 @@
 import { expose } from "threads/worker";
+import initOxipngST, {
+  optimise as optimiseST,
+} from "../node_modules/@jsquash/oxipng/codec/pkg/squoosh_oxipng.js";
 
-import("../../mandelbrot/pkg").then((wasm) => {
-  wasm.init();
+let oxipngInitialized = false;
 
-  const getTile = (params) =>
-    wasm.get_mandelbrot_set_image(
-      params.bounds.reMin,
-      params.bounds.reMax,
-      params.bounds.imMin,
-      params.bounds.imMax,
-      params.iterations,
-      params.exponent,
-      params.imageWidth,
-      params.imageHeight,
-      params.colorScheme,
-      params.reverseColors,
-      params.shiftHueAmount,
-      params.saturateAmount,
-      params.lightenAmount,
-      params.colorSpace,
-      params.smoothColoring,
-      params.paletteMinIter,
-      params.paletteMaxIter,
-    );
+async function ensureOxipngInitialized() {
+  if (!oxipngInitialized) {
+    await initOxipngST();
+    oxipngInitialized = true;
+  }
+}
 
-  expose(getTile);
-});
+import("../../mandelbrot/pkg")
+  .then(async (wasm) => {
+    wasm.init();
+
+    const getTile = (params) =>
+      wasm.get_mandelbrot_set_image(
+        params.bounds.reMin,
+        params.bounds.reMax,
+        params.bounds.imMin,
+        params.bounds.imMax,
+        params.iterations,
+        params.exponent,
+        params.imageWidth,
+        params.imageHeight,
+        params.colorScheme,
+        params.reverseColors,
+        params.shiftHueAmount,
+        params.saturateAmount,
+        params.lightenAmount,
+        params.colorSpace,
+        params.smoothColoring,
+        params.paletteMinIter,
+        params.paletteMaxIter,
+      );
+
+    const optimiseImage = async (payload) => {
+      await ensureOxipngInitialized();
+      const result = optimiseST(
+        new Uint8Array(payload.buffer),
+        2,
+        false,
+        false,
+      );
+      return result.buffer;
+    };
+
+    expose(async (request) => {
+      switch (request.type) {
+        case "calculate":
+          return getTile(request.payload);
+        case "optimise":
+          return await optimiseImage(request.payload);
+        default:
+          throw new Error(`Unknown worker request type: ${request.type}`);
+      }
+    });
+  })
+  .catch((err) => {
+    console.error("Error loading WASM module in worker:", err);
+    expose(() => {
+      throw new Error("Worker initialization failed");
+    });
+  });
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
diff --git a/client/webpack.config.js b/client/webpack.config.js
