feat(contour tracing): Suzuki-Abe-style contour tracing

src/components/WasmImageProcessor.jsx

@@ -1,38 +1,49 @@
 import { useEffect, useState, useId, useRef, useCallback, useMemo } from 'react';
 import { Upload } from 'lucide-react';
-import { loadImageToUint8Array, uint8ClampedArrayToSVG } from '@utils/image-utils';
+import { loadImageToUint8Array } from '@utils/image-utils';
 import { useWasmWorker } from '@hooks/useWasmWorker';
 import GlassCard from '@components/GlassCard';
-import styles from './WasmImageProcessor.module.css';
-import { useNavigate } from 'react-router-dom';
 import LoadingHedgehog from '@components/LoadingHedgehog';
 import Tooltip from '@components/Tooltip';
+import styles from './WasmImageProcessor.module.css';
 
 const WasmImageProcessor = () => {
-  const navigate = useNavigate();
   const inputId = useId();
   const inputRef = useRef(null);
-
-  const { bilateralFilter, blackThreshold, kmeans, mergeSmallRegionsInPlace } = useWasmWorker();
+  const contourCanvasRef = useRef(null);
+  const mergedCanvasRef = useRef(null);
+
+  const {
+    bilateralFilter,
+    blackThreshold,
+    kmeans,
+    kmeans2,
+    mergeSmallRegionsInPlace,
+    findContours,
+  } = useWasmWorker();
 
   const [originalSrc, setOriginalSrc] = useState(null);
   const [fileData, setFileData] = useState(null);
+  const [mergedData, setMergedData] = useState(null);
+  const [contourData, setContourData] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [progress, setProgress] = useState(0);
 
-  /* Cleanup object URLs on unmount or src change */
+  /* Cleanup object URLs */
   useEffect(() => {
     return () => {
       if (originalSrc) URL.revokeObjectURL(originalSrc);
     };
   }, [originalSrc]);
 
-  /* Stable loader for images */
+  /* Load image */
   const loadOriginal = useCallback(async (file) => {
     if (!file) return;
 
     const url = URL.createObjectURL(file);
     setOriginalSrc(url);
+    setMergedData(null);
+    setContourData(null);
 
     const { pixels, width, height } = await loadImageToUint8Array(file);
     setFileData({ pixels, width, height });
@@ -48,7 +59,6 @@
         }
       }
     };
-
     document.addEventListener('paste', handlePaste);
     return () => document.removeEventListener('paste', handlePaste);
   }, [loadOriginal]);
@@ -62,23 +72,23 @@
     [loadOriginal]
   );
 
-  const handleSelect = useCallback((e) => loadOriginal(e.target.files[0]), [loadOriginal]);
+  const handleSelect = useCallback(
+    (e) => loadOriginal(e.target.files[0]),
+    [loadOriginal]
+  );
 
-  /* Hashed steps to keep pipeline aligned */
   const step = useCallback((p) => setProgress(p), []);
 
   /* Main pipeline */
   const processImage = useCallback(async () => {
     if (!fileData) return;
-
     setIsProcessing(true);
     step(5);
 
     try {
       const { width, height } = fileData;
 
       step(20);
-      // NOTE: Gaussian blur destroys the sharp outlines first, preventing the Bilateral filter from detecting and preserving them
       const imgBilateralFiltered = await bilateralFilter({
         pixels: fileData.pixels,
         width,
@@ -93,43 +103,62 @@
       });
 
       step(70);
-      const kmeansed = await kmeans({
-        ...fileData,
-        pixels: thresholded,
-        num_colors: 8,
-      });
+      // const kmeansed = await kmeans({
+      //   ...fileData,
+      //   pixels: thresholded,
+      //   num_colors: 8,
+      // });
+
+      const twoPercentOrOne = (dimension) =>
+        Math.ceil(Math.max(dimension * 0.0005, 1));
 
-      // Get 2% of the input dimension (width / height), but default to 1 pixel
-      const twoPercentOrOne = (dimension) => Math.ceil(Math.max(dimension * 0.02, 1));
       const minWidth = twoPercentOrOne(width);
       const minHeight = twoPercentOrOne(height);
 
       const area = width * height;
-      // Prevents minArea from being too small
-      const minimumAllowedMinArea = area > 100_000_000 ? 25 : area > 10_000_000 ? 20 : area > 1_000_000 ? 15 : 10;
-      const minArea = Math.ceil(Math.max(area / 10_000, minimumAllowedMinArea));
-
-      const merged = await mergeSmallRegionsInPlace({
-        pixels: kmeansed,
-        width,
-        height,
-        minArea,
-        minWidth,
-        minHeight,
+      const minimumAllowedMinArea =
+        area > 100_000_000
+          ? 25
+          : area > 10_000_000
+          ? 20
+          : area > 1_000_000
+          ? 15
+          : 10;
+
+      const minArea = Math.ceil(
+        Math.max(area / 10_000, minimumAllowedMinArea)
+      );
+
+      // step(75);
+      // const merged = await mergeSmallRegionsInPlace({
+      //   pixels: kmeansed,
+      //   width,
+      //   height,
+      //   minArea,
+      //   minWidth,
+      //   minHeight,
+      // });
+
+      const kmeansed = await kmeans2({
+        ...fileData,
+        pixels: thresholded,
+        num_colors: 16,
+        min_area: minArea,
+        max_iter: 100,
       });
 
-      step(95);
-      const svg = await uint8ClampedArrayToSVG({
-        pixels: merged,
+      // Save merged image for display
+      setMergedData({ pixels: kmeansed, width, height });
+
+      step(90);
+      const contours = await findContours({
+        pixels: kmeansed,
         width,
         height,
       });
 
+      setContourData({ pixels: contours, width, height });
       step(100);
-
-      navigate('/editor', {
-        state: { svg },
-      });
     } catch (err) {
       console.error(err);
     } finally {
@@ -138,66 +167,123 @@
         step(0);
       }, 800);
     }
-  }, [fileData, bilateralFilter, blackThreshold, kmeans, mergeSmallRegionsInPlace, navigate, step]);
-
-  /* Memo'd UI fragments */
-  const EmptyState = useMemo(
-    () => (
-      <>
-        <Tooltip content="Upload an image from your device">
-          <Upload className={`anchor-style ${styles.uploadIcon}`} />
+  }, [
+    fileData,
+    bilateralFilter,
+    blackThreshold,
+    kmeans,
+    mergeSmallRegionsInPlace,
+    findContours,
+    step,
+  ]);
+
+  /* Draw merged canvas */
+  useEffect(() => {
+    if (!mergedData || !mergedCanvasRef.current) return;
+    const { pixels, width, height } = mergedData;
+    const canvas = mergedCanvasRef.current;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.putImageData(new ImageData(pixels, width, height), 0, 0);
+  }, [mergedData]);
+
+  /* Draw contours canvas */
+  useEffect(() => {
+    if (!contourData || !contourCanvasRef.current) return;
+    const { pixels, width, height } = contourData;
+    const canvas = contourCanvasRef.current;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.putImageData(new ImageData(pixels, width, height), 0, 0);
+  }, [contourData]);
+
+  /* UI fragments */
+  const EmptyState = useMemo(() => (
+    <>
+      <Tooltip content="Upload an image from your device">
+        <Upload className={`anchor-style ${styles.uploadIcon}`} />
+      </Tooltip>
+
+      <p className={`text-center ${styles.dragDropText}`}>
+        Drag & Drop or{' '}
+        <Tooltip content="Select an image file from your computer">
+          <span className={`anchor-style ${styles.noTextWrap}`}>
+            Choose File
+          </span>
         </Tooltip>
-
-        <p className={`text-center ${styles.dragDropText}`}>
-          Drag & Drop or{' '}
-          <Tooltip content="Select an image file from your computer">
-            <span className={`anchor-style ${styles.noTextWrap}`}>Choose File</span>
-          </Tooltip>
-        </p>
-      </>
-    ),
-    []
-  );
+      </p>
+    </>
+  ), []);
 
   const LoadedState = useMemo(() => {
     if (!originalSrc) return null;
 
     return (
       <>
-        <img src={originalSrc} alt="Original" className={styles.preview} />
+        <div className={styles.imageSection}>
+          <p className={styles.previewLabel}>Original Image</p>
+          <img src={originalSrc} alt="Original" className={styles.preview} />
+        </div>
+
+        {mergedData && (
+          <div className={styles.imageSection}>
+            <p className={styles.previewLabel}>Merged Regions</p>
+            <canvas ref={mergedCanvasRef} className={styles.preview} />
+          </div>
+        )}
 
         {!isProcessing ? (
-          <Tooltip content="Process the image and convert it to numbers">
+          <Tooltip content="Process the image and extract contours">
             <button
               className="uppercase button"
               onClick={(e) => {
                 e.stopPropagation();
                 processImage();
-              }}>
+              }}
+            >
               Ok
             </button>
           </Tooltip>
         ) : (
-          <LoadingHedgehog progress={progress} text={`Processing — ${Math.round(progress)}%`} />
+          <LoadingHedgehog
+            progress={progress}
+            text={`Processing – ${Math.round(progress)}%`}
+          />
+        )}
+
+        {contourData && (
+          <div className={styles.imageSection}>
+            <p className={styles.previewLabel}>Contours</p>
+            <canvas ref={contourCanvasRef} className={styles.preview} />
+          </div>
         )}
       </>
     );
-  }, [originalSrc, isProcessing, progress, processImage]);
+  }, [originalSrc, mergedData, contourData, isProcessing, progress, processImage]);
 
   return (
     <GlassCard
       className={`flex-center flex-column ${styles.dropZone}`}
       onDrop={handleDrop}
       onDragOver={(e) => e.preventDefault()}
-      onClick={() => {
-        if (!originalSrc) inputRef.current?.click();
-      }}
-      data-image-loaded={!!originalSrc}>
+      onClick={() => !originalSrc && inputRef.current?.click()}
+      data-image-loaded={!!originalSrc}
+    >
       {originalSrc ? LoadedState : EmptyState}
 
-      <input ref={inputRef} id={inputId} type="file" accept="image/*" hidden onChange={handleSelect} />
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="file"
+        accept="image/*"
+        hidden
+        onChange={handleSelect}
+      />
     </GlassCard>
   );
 };
 
 export default WasmImageProcessor;
+

src/hooks/useWasmWorker.js

@@ -57,6 +57,14 @@ export function useWasmWorker() {
     return (await call('mergeSmallRegionsInPlace', { pixels, width, height, minArea, minWidth, minHeight }, ['pixels']))
       .output.pixels;
   };
+  const kmeans2 = async ({ pixels, width, height, num_colors, max_iter, min_area }) => {
+    return (await call('kmeans_clustering_graph', { pixels, width, height, num_colors, max_iter, min_area }, ['pixels'])).output.pixels;
+  };
+
+  const findContours = async ({ pixels, width, height }) => {
+    return (await call('visualize_contours', { pixels, width, height }, ['pixels']))
+      .output.pixels;
+  }
 
-  return { call, gaussianBlur, bilateralFilter, blackThreshold, kmeans, mergeSmallRegionsInPlace };
+  return { call, gaussianBlur, bilateralFilter, blackThreshold, kmeans, kmeans2, mergeSmallRegionsInPlace, findContours };
 }

src/wasm/modules/image/include/Pixel.h

@@ -6,7 +6,7 @@
 namespace ImageLib {
 template <typename NumberT> struct Pixel {
   static_assert(std::is_arithmetic<NumberT>::value,
-                "RGBPixel<NumberT>: NumberT must be a numeric type");
+                "Pixel<NumberT>: NumberT must be a numeric type");
 
   using value_type = NumberT;
 

src/wasm/modules/image/include/contours.h

@@ -0,0 +1,31 @@
+#ifndef CONTOURS_H
+#define CONTOURS_H
+
+#include <vector>
+#include <array>
+#include <cstdint>
+#include <cmath>
+#include <stdexcept>
+#include <cstdlib>
+
+struct Point {
+    int x = 0;
+    int y = 0;
+};
+
+struct ContoursResult {
+    // contours[k] is a sequence of boundary pixels (x,y) in image coordinates (0..w-1, 0..h-1)
+    std::vector<std::vector<Point>> contours;
+
+    // hierarchy[k] = { next_sibling, prev_sibling, first_child, parent }
+    // -1 means "none"
+    std::vector<std::array<int, 4>> hierarchy;
+
+    // is_hole[k] == true if contour k is a hole border
+    std::vector<bool> is_hole;
+};
+
+namespace contours {
+    ContoursResult find_contours(const std::vector<uint8_t>& binary, int width, int height);
+}
+#endif