(0);
+
+ React.useEffect(() => {
+ if (isProcessing) {
+ // Show immediately when processing starts
+ setVisible(true);
+ showTimeRef.current = Date.now();
+ } else if (visible) {
+ // Calculate how long we've been visible
+ const elapsed = Date.now() - showTimeRef.current;
+ const remaining = Math.max(0, minDisplayTime - elapsed);
+
+ // Only hide after minimum display time
+ const timeout = setTimeout(() => {
+ setVisible(false);
+ }, remaining);
+
+ return () => clearTimeout(timeout);
+ }
+ }, [isProcessing, visible, minDisplayTime]);
+
+ if (!visible) return null;
return (
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 551eb74..d9d31ee 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -207,6 +207,69 @@ const FILTER_CATEGORIES: FilterCategory[] = [
},
],
},
+ {
+ id: 'edge',
+ name: 'Edge Detection',
+ filters: [
+ {
+ id: 'sobelX',
+ name: 'Sobel X',
+ description: 'Detects vertical edges',
+ formula: 'G_x = \\begin{bmatrix} -1 & 0 & 1 \\\\ -2 & 0 & 2 \\\\ -1 & 0 & 1 \\end{bmatrix}',
+ },
+ {
+ id: 'sobelY',
+ name: 'Sobel Y',
+ description: 'Detects horizontal edges',
+ formula: 'G_y = \\begin{bmatrix} -1 & -2 & -1 \\\\ 0 & 0 & 0 \\\\ 1 & 2 & 1 \\end{bmatrix}',
+ },
+ {
+ id: 'sobelMagnitude',
+ name: 'Sobel Magnitude',
+ description: 'Combined edge magnitude',
+ formula: 'G = \\sqrt{G_x^2 + G_y^2}',
+ },
+ ],
+ },
+ {
+ id: 'noise',
+ name: 'Noise Reduction',
+ filters: [
+ {
+ id: 'median',
+ name: 'Median Filter',
+ description: 'Removes salt-and-pepper noise',
+ formula: 's = \\text{median}(N)',
+ params: [
+ { key: 'kernelSize', label: 'Size', min: 3, max: 7, step: 2 },
+ ],
+ },
+ ],
+ },
+ {
+ id: 'color',
+ name: 'Color Filters',
+ filters: [
+ {
+ id: 'grayscale',
+ name: 'Grayscale',
+ description: 'Converts to black and white',
+ formula: 'Y = 0.299R + 0.587G + 0.114B',
+ },
+ {
+ id: 'sepia',
+ name: 'Sepia',
+ description: 'Vintage brownish tone',
+ formula: '\\begin{bmatrix} 0.393 & 0.769 & 0.189 \\\\ 0.349 & 0.686 & 0.168 \\\\ 0.272 & 0.534 & 0.131 \\end{bmatrix}',
+ },
+ {
+ id: 'swapChannels',
+ name: 'Swap RGB',
+ description: 'Rotates color channels',
+ formula: 'R \\rightarrow G \\rightarrow B \\rightarrow R',
+ },
+ ],
+ },
{
id: 'custom',
name: 'Custom Operations',
@@ -246,9 +309,9 @@ export const Sidebar: React.FC = ({
canRedo,
hasImage,
}) => {
- // Track which categories are expanded
+ // Track which categories are expanded (all collapsed by default)
const [expandedCategories, setExpandedCategories] = useState>(
- new Set(['point', 'spatial'])
+ new Set()
);
// Track About modal visibility
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index eee6367..06d734e 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,3 @@
export { useHistory } from './useHistory';
-export type { HistoryState } from './useHistory';
+export { useImageWorker } from './useImageWorker';
+
diff --git a/src/hooks/useImageWorker.ts b/src/hooks/useImageWorker.ts
new file mode 100644
index 0000000..83e1c2d
--- /dev/null
+++ b/src/hooks/useImageWorker.ts
@@ -0,0 +1,164 @@
+/**
+ * ImageVisLab - useImageWorker Hook
+ *
+ * React hook for managing image processing Web Worker.
+ * Handles worker lifecycle, request queuing, and cleanup.
+ *
+ * @module useImageWorker
+ * @author ImageVisLab Contributors
+ * @license MIT
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { FilterType, FilterParams } from '../types';
+import type { WorkerRequest, WorkerResponse } from '../workers/imageWorker';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface UseImageWorkerOptions {
+ /** Whether to use the worker (can disable for debugging) */
+ enabled?: boolean;
+}
+
+interface UseImageWorkerResult {
+ /** Process an image with a filter */
+ processImage: (
+ imageData: ImageData,
+ filter: FilterType,
+ params: FilterParams
+ ) => Promise;
+ /** Whether processing is in progress */
+ isProcessing: boolean;
+ /** Last processing time in ms */
+ lastProcessingTime: number | null;
+ /** Whether worker is ready */
+ isReady: boolean;
+ /** Any error that occurred */
+ error: string | null;
+}
+
+// =============================================================================
+// Hook Implementation
+// =============================================================================
+
+export function useImageWorker(
+ options: UseImageWorkerOptions = {}
+): UseImageWorkerResult {
+ const { enabled = true } = options;
+
+ const workerRef = useRef(null);
+ const requestIdRef = useRef(0);
+ const pendingRequestsRef = useRef void;
+ reject: (error: Error) => void;
+ }>>(new Map());
+
+ const [isProcessing, setIsProcessing] = useState(false);
+ const [lastProcessingTime, setLastProcessingTime] = useState(null);
+ const [isReady, setIsReady] = useState(false);
+ const [error, setError] = useState(null);
+
+ // Initialize worker
+ useEffect(() => {
+ if (!enabled) {
+ setIsReady(true);
+ return;
+ }
+
+ try {
+ // Create worker with Vite's worker syntax
+ workerRef.current = new Worker(
+ new URL('../workers/imageWorker.ts', import.meta.url),
+ { type: 'module' }
+ );
+
+ workerRef.current.onmessage = (event: MessageEvent) => {
+ const data = event.data;
+
+ if (data.type === 'ready') {
+ setIsReady(true);
+ return;
+ }
+
+ const pending = pendingRequestsRef.current.get(data.requestId);
+ if (!pending) return;
+
+ pendingRequestsRef.current.delete(data.requestId);
+
+ if (data.type === 'result' && data.imageData) {
+ setLastProcessingTime(data.processingTime);
+ setIsProcessing(pendingRequestsRef.current.size > 0);
+ pending.resolve(data.imageData);
+ } else if (data.type === 'error') {
+ setError(data.error || 'Unknown error');
+ setIsProcessing(pendingRequestsRef.current.size > 0);
+ pending.reject(new Error(data.error || 'Worker error'));
+ }
+ };
+
+ workerRef.current.onerror = (err) => {
+ console.error('Worker error:', err);
+ setError(err.message);
+ setIsReady(false);
+ };
+ } catch (err) {
+ console.error('Failed to create worker:', err);
+ setError(err instanceof Error ? err.message : 'Failed to create worker');
+ setIsReady(true); // Allow fallback to main thread
+ }
+
+ return () => {
+ workerRef.current?.terminate();
+ workerRef.current = null;
+ pendingRequestsRef.current.clear();
+ };
+ }, [enabled]);
+
+ // Process image function
+ const processImage = useCallback(
+ async (
+ imageData: ImageData,
+ filter: FilterType,
+ params: FilterParams
+ ): Promise => {
+ setError(null);
+
+ // If worker not available, we could fall back to main thread
+ // but for now just return original
+ if (!enabled || !workerRef.current) {
+ return imageData;
+ }
+
+ const requestId = ++requestIdRef.current;
+
+ return new Promise((resolve, reject) => {
+ pendingRequestsRef.current.set(requestId, { resolve, reject });
+ setIsProcessing(true);
+
+ const request: WorkerRequest = {
+ type: 'process',
+ imageData,
+ filter,
+ params,
+ requestId,
+ };
+
+ // Transfer the buffer for better performance
+ workerRef.current!.postMessage(request, [imageData.data.buffer]);
+ });
+ },
+ [enabled]
+ );
+
+ return {
+ processImage,
+ isProcessing,
+ lastProcessingTime,
+ isReady,
+ error,
+ };
+}
+
+export default useImageWorker;
diff --git a/src/types/index.ts b/src/types/index.ts
index e216c7d..08f399f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -96,6 +96,16 @@ export type FilterType =
| 'gaussianBlur'
| 'sharpen'
| 'laplacian'
+ // Edge Detection
+ | 'sobelX'
+ | 'sobelY'
+ | 'sobelMagnitude'
+ // Noise Reduction
+ | 'median'
+ // Color Filters
+ | 'grayscale'
+ | 'sepia'
+ | 'swapChannels'
// Morphology Operations
| 'threshold'
| 'erosion'
diff --git a/src/utils/colorFilters.ts b/src/utils/colorFilters.ts
new file mode 100644
index 0000000..6c92458
--- /dev/null
+++ b/src/utils/colorFilters.ts
@@ -0,0 +1,99 @@
+/**
+ * ImageVisLab - Color Filters
+ *
+ * Color manipulation filters: grayscale, sepia, and channel swapping.
+ *
+ * @module colorFilters
+ * @author ImageVisLab Contributors
+ * @license MIT
+ */
+
+// =============================================================================
+// Grayscale
+// =============================================================================
+
+/**
+ * Converts an image to grayscale using the luminance formula.
+ * Formula: gray = 0.299*R + 0.587*G + 0.114*B
+ *
+ * @param imageData - Source ImageData
+ * @returns Grayscale ImageData
+ */
+export function applyGrayscale(imageData: ImageData): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+
+ for (let i = 0; i < data.length; i += 4) {
+ const gray = Math.round(
+ 0.299 * data[i] +
+ 0.587 * data[i + 1] +
+ 0.114 * data[i + 2]
+ );
+
+ result[i] = gray;
+ result[i + 1] = gray;
+ result[i + 2] = gray;
+ result[i + 3] = data[i + 3];
+ }
+
+ return new ImageData(result, width, height);
+}
+
+// =============================================================================
+// Sepia
+// =============================================================================
+
+/**
+ * Applies a sepia (vintage brownish) tone to an image.
+ *
+ * Transformation matrix:
+ * newR = 0.393*R + 0.769*G + 0.189*B
+ * newG = 0.349*R + 0.686*G + 0.168*B
+ * newB = 0.272*R + 0.534*G + 0.131*B
+ *
+ * @param imageData - Source ImageData
+ * @returns Sepia-toned ImageData
+ */
+export function applySepia(imageData: ImageData): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i];
+ const g = data[i + 1];
+ const b = data[i + 2];
+
+ result[i] = Math.min(255, Math.round(0.393 * r + 0.769 * g + 0.189 * b));
+ result[i + 1] = Math.min(255, Math.round(0.349 * r + 0.686 * g + 0.168 * b));
+ result[i + 2] = Math.min(255, Math.round(0.272 * r + 0.534 * g + 0.131 * b));
+ result[i + 3] = data[i + 3];
+ }
+
+ return new ImageData(result, width, height);
+}
+
+// =============================================================================
+// Channel Swapping
+// =============================================================================
+
+/**
+ * Swaps color channels: R→G, G→B, B→R
+ * Creates a psychedelic color shift effect.
+ *
+ * @param imageData - Source ImageData
+ * @returns ImageData with swapped channels
+ */
+export function applySwapChannels(imageData: ImageData): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+
+ for (let i = 0; i < data.length; i += 4) {
+ // R → G, G → B, B → R
+ result[i] = data[i + 2]; // New R = old B
+ result[i + 1] = data[i]; // New G = old R
+ result[i + 2] = data[i + 1]; // New B = old G
+ result[i + 3] = data[i + 3]; // Keep alpha
+ }
+
+ return new ImageData(result, width, height);
+}
diff --git a/src/utils/convolution.ts b/src/utils/convolution.ts
index 720fb08..a1fad87 100644
--- a/src/utils/convolution.ts
+++ b/src/utils/convolution.ts
@@ -15,31 +15,9 @@
/**
* Collection of commonly used convolution kernels.
+ * Only includes kernels that are actively used by the application.
*/
export const KERNELS = {
- /** 3x3 Box blur (mean filter) */
- boxBlur3: [
- [1 / 9, 1 / 9, 1 / 9],
- [1 / 9, 1 / 9, 1 / 9],
- [1 / 9, 1 / 9, 1 / 9],
- ],
-
- /** 5x5 Box blur */
- boxBlur5: [
- [1 / 25, 1 / 25, 1 / 25, 1 / 25, 1 / 25],
- [1 / 25, 1 / 25, 1 / 25, 1 / 25, 1 / 25],
- [1 / 25, 1 / 25, 1 / 25, 1 / 25, 1 / 25],
- [1 / 25, 1 / 25, 1 / 25, 1 / 25, 1 / 25],
- [1 / 25, 1 / 25, 1 / 25, 1 / 25, 1 / 25],
- ],
-
- /** 3x3 Gaussian blur (approximation) */
- gaussian3: [
- [1 / 16, 2 / 16, 1 / 16],
- [2 / 16, 4 / 16, 2 / 16],
- [1 / 16, 2 / 16, 1 / 16],
- ],
-
/** Sharpening kernel */
sharpen: [
[0, -1, 0],
@@ -53,15 +31,9 @@ export const KERNELS = {
[1, -4, 1],
[0, 1, 0],
],
-
- /** Laplacian with diagonals */
- laplacian8: [
- [1, 1, 1],
- [1, -8, 1],
- [1, 1, 1],
- ],
};
+
// =============================================================================
// Kernel Generation
// =============================================================================
diff --git a/src/utils/customFilters.ts b/src/utils/customFilters.ts
index 480e2a0..16b3c1c 100644
--- a/src/utils/customFilters.ts
+++ b/src/utils/customFilters.ts
@@ -123,51 +123,6 @@ export function applyCustomFormula(imageData: ImageData, formula: string): Image
return new ImageData(result, width, height);
}
-// =============================================================================
-// Custom Kernel
-// =============================================================================
-
-/**
- * Generates an empty kernel of specified size.
- *
- * @param size - Kernel size (3, 5, or 7)
- * @returns 2D array of zeros
- */
-export function createEmptyKernel(size: number): number[][] {
- return Array.from({ length: size }, () => Array(size).fill(0));
-}
-
-/**
- * Common preset kernels for quick selection.
- */
-export const PRESET_KERNELS = {
- identity: [
- [0, 0, 0],
- [0, 1, 0],
- [0, 0, 0],
- ],
- sharpen: [
- [0, -1, 0],
- [-1, 5, -1],
- [0, -1, 0],
- ],
- edgeDetect: [
- [-1, -1, -1],
- [-1, 8, -1],
- [-1, -1, -1],
- ],
- emboss: [
- [-2, -1, 0],
- [-1, 1, 1],
- [0, 1, 2],
- ],
- blur: [
- [1 / 9, 1 / 9, 1 / 9],
- [1 / 9, 1 / 9, 1 / 9],
- [1 / 9, 1 / 9, 1 / 9],
- ],
-};
-
/**
* Applies a custom convolution kernel to an image.
*
@@ -178,3 +133,4 @@ export const PRESET_KERNELS = {
export function applyCustomKernel(imageData: ImageData, kernel: number[][]): ImageData {
return applyConvolution(imageData, kernel);
}
+
diff --git a/src/utils/edgeDetection.ts b/src/utils/edgeDetection.ts
new file mode 100644
index 0000000..1b3198d
--- /dev/null
+++ b/src/utils/edgeDetection.ts
@@ -0,0 +1,155 @@
+/**
+ * ImageVisLab - Edge Detection Filters
+ *
+ * Sobel operator implementation for edge detection.
+ *
+ * @module edgeDetection
+ * @author ImageVisLab Contributors
+ * @license MIT
+ */
+
+// =============================================================================
+// Sobel Kernels
+// =============================================================================
+
+/**
+ * Sobel kernel for horizontal edges (detects vertical edges).
+ */
+const SOBEL_X = [
+ [-1, 0, 1],
+ [-2, 0, 2],
+ [-1, 0, 1],
+];
+
+/**
+ * Sobel kernel for vertical edges (detects horizontal edges).
+ */
+const SOBEL_Y = [
+ [-1, -2, -1],
+ [0, 0, 0],
+ [1, 2, 1],
+];
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Converts RGB to grayscale using luminance formula.
+ */
+function toGray(r: number, g: number, b: number): number {
+ return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+
+/**
+ * Applies a 3x3 convolution at a specific pixel position.
+ */
+function convolve3x3(
+ data: Uint8ClampedArray,
+ width: number,
+ height: number,
+ x: number,
+ y: number,
+ kernel: number[][]
+): number {
+ let sum = 0;
+
+ for (let ky = 0; ky < 3; ky++) {
+ for (let kx = 0; kx < 3; kx++) {
+ const px = Math.max(0, Math.min(width - 1, x + kx - 1));
+ const py = Math.max(0, Math.min(height - 1, y + ky - 1));
+ const idx = (py * width + px) * 4;
+
+ const gray = toGray(data[idx], data[idx + 1], data[idx + 2]);
+ sum += gray * kernel[ky][kx];
+ }
+ }
+
+ return sum;
+}
+
+// =============================================================================
+// Sobel Filter Functions
+// =============================================================================
+
+/**
+ * Applies Sobel X filter (detects vertical edges).
+ *
+ * @param imageData - Source ImageData
+ * @returns Edge-detected ImageData showing vertical edges
+ */
+export function applySobelX(imageData: ImageData): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const gx = convolve3x3(data, width, height, x, y, SOBEL_X);
+ const value = Math.min(255, Math.abs(gx));
+
+ const idx = (y * width + x) * 4;
+ result[idx] = value;
+ result[idx + 1] = value;
+ result[idx + 2] = value;
+ result[idx + 3] = data[idx + 3];
+ }
+ }
+
+ return new ImageData(result, width, height);
+}
+
+/**
+ * Applies Sobel Y filter (detects horizontal edges).
+ *
+ * @param imageData - Source ImageData
+ * @returns Edge-detected ImageData showing horizontal edges
+ */
+export function applySobelY(imageData: ImageData): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const gy = convolve3x3(data, width, height, x, y, SOBEL_Y);
+ const value = Math.min(255, Math.abs(gy));
+
+ const idx = (y * width + x) * 4;
+ result[idx] = value;
+ result[idx + 1] = value;
+ result[idx + 2] = value;
+ result[idx + 3] = data[idx + 3];
+ }
+ }
+
+ return new ImageData(result, width, height);
+}
+
+/**
+ * Applies Sobel Magnitude filter (combines X and Y gradients).
+ * Formula: magnitude = sqrt(Gx² + Gy²)
+ *
+ * @param imageData - Source ImageData
+ * @returns Edge-detected ImageData with full edge magnitude
+ */
+export function applySobelMagnitude(imageData: ImageData): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const gx = convolve3x3(data, width, height, x, y, SOBEL_X);
+ const gy = convolve3x3(data, width, height, x, y, SOBEL_Y);
+
+ const magnitude = Math.sqrt(gx * gx + gy * gy);
+ const value = Math.min(255, magnitude);
+
+ const idx = (y * width + x) * 4;
+ result[idx] = value;
+ result[idx + 1] = value;
+ result[idx + 2] = value;
+ result[idx + 3] = data[idx + 3];
+ }
+ }
+
+ return new ImageData(result, width, height);
+}
diff --git a/src/utils/noiseReduction.ts b/src/utils/noiseReduction.ts
new file mode 100644
index 0000000..a03769c
--- /dev/null
+++ b/src/utils/noiseReduction.ts
@@ -0,0 +1,72 @@
+/**
+ * ImageVisLab - Noise Reduction Filters
+ *
+ * Median filter implementation for noise removal.
+ *
+ * @module noiseReduction
+ * @author ImageVisLab Contributors
+ * @license MIT
+ */
+
+// =============================================================================
+// Median Filter
+// =============================================================================
+
+/**
+ * Applies median filter to an image.
+ * Effective for removing salt-and-pepper noise while preserving edges.
+ *
+ * For each pixel:
+ * 1. Collect NxN neighborhood values
+ * 2. Sort values
+ * 3. Select the median (middle value)
+ *
+ * @param imageData - Source ImageData
+ * @param size - Kernel size (3, 5, or 7)
+ * @returns Filtered ImageData with noise reduced
+ */
+export function applyMedian(imageData: ImageData, size: number = 3): ImageData {
+ const { width, height, data } = imageData;
+ const result = new Uint8ClampedArray(data.length);
+ const halfSize = Math.floor(size / 2);
+ const neighborhoodSize = size * size;
+ const medianIndex = Math.floor(neighborhoodSize / 2);
+
+ // Pre-allocate arrays for each channel
+ const rValues: number[] = new Array(neighborhoodSize);
+ const gValues: number[] = new Array(neighborhoodSize);
+ const bValues: number[] = new Array(neighborhoodSize);
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ let count = 0;
+
+ // Collect neighborhood values
+ for (let ky = -halfSize; ky <= halfSize; ky++) {
+ for (let kx = -halfSize; kx <= halfSize; kx++) {
+ const px = Math.max(0, Math.min(width - 1, x + kx));
+ const py = Math.max(0, Math.min(height - 1, y + ky));
+ const idx = (py * width + px) * 4;
+
+ rValues[count] = data[idx];
+ gValues[count] = data[idx + 1];
+ bValues[count] = data[idx + 2];
+ count++;
+ }
+ }
+
+ // Sort and get median for each channel
+ rValues.sort((a, b) => a - b);
+ gValues.sort((a, b) => a - b);
+ bValues.sort((a, b) => a - b);
+
+ const outIdx = (y * width + x) * 4;
+ result[outIdx] = rValues[medianIndex];
+ result[outIdx + 1] = gValues[medianIndex];
+ result[outIdx + 2] = bValues[medianIndex];
+ result[outIdx + 3] = data[outIdx + 3];
+ }
+ }
+
+ return new ImageData(result, width, height);
+}
diff --git a/src/workers/imageWorker.ts b/src/workers/imageWorker.ts
new file mode 100644
index 0000000..21fb995
--- /dev/null
+++ b/src/workers/imageWorker.ts
@@ -0,0 +1,197 @@
+/**
+ * ImageVisLab - Image Processing Web Worker
+ *
+ * Handles heavy image processing operations in a separate thread
+ * to keep the UI responsive.
+ *
+ * @module imageWorker
+ * @author ImageVisLab Contributors
+ * @license MIT
+ */
+
+// Import filter functions (will be bundled with worker)
+import {
+ applyNegative,
+ applyGamma,
+ applyLog,
+ applyQuantization,
+ applySampling,
+ applyEqualization,
+} from '../utils/imageFilters';
+
+import {
+ applyBoxBlur,
+ applyGaussianBlur,
+ applySharpen,
+ applyLaplacian,
+} from '../utils/convolution';
+
+import {
+ applyThreshold,
+ applyErosion,
+ applyDilation,
+ applyOpening,
+ applyClosing,
+} from '../utils/morphology';
+
+import {
+ applyCustomFormula,
+ applyCustomKernel,
+} from '../utils/customFilters';
+
+import {
+ applySobelX,
+ applySobelY,
+ applySobelMagnitude,
+} from '../utils/edgeDetection';
+
+import { applyMedian } from '../utils/noiseReduction';
+
+import {
+ applyGrayscale,
+ applySepia,
+ applySwapChannels,
+} from '../utils/colorFilters';
+
+import type { FilterType, FilterParams } from '../types';
+
+// =============================================================================
+// Worker Message Types
+// =============================================================================
+
+export interface WorkerRequest {
+ type: 'process';
+ imageData: ImageData;
+ filter: FilterType;
+ params: FilterParams;
+ requestId: number;
+}
+
+export interface WorkerResponse {
+ type: 'result' | 'error';
+ imageData?: ImageData;
+ error?: string;
+ requestId: number;
+ processingTime: number;
+}
+
+// =============================================================================
+// Process Image Function
+// =============================================================================
+
+function processImage(
+ imageData: ImageData,
+ filter: FilterType,
+ params: FilterParams
+): ImageData {
+ switch (filter) {
+ // Point Operations
+ case 'negative':
+ return applyNegative(imageData);
+ case 'gamma':
+ return applyGamma(imageData, params.gamma, params.gammaConstant);
+ case 'log':
+ return applyLog(imageData, params.logConstant);
+ case 'quantization':
+ return applyQuantization(imageData, params.quantizationLevels);
+ case 'sampling':
+ return applySampling(imageData, params.samplingFactor);
+ case 'equalization':
+ return applyEqualization(imageData);
+
+ // Spatial Filters
+ case 'boxBlur':
+ return applyBoxBlur(imageData, params.kernelSize);
+ case 'gaussianBlur':
+ return applyGaussianBlur(imageData, params.kernelSize, params.gaussianSigma);
+ case 'sharpen':
+ return applySharpen(imageData);
+ case 'laplacian':
+ return applyLaplacian(imageData);
+
+ // Morphology Operations
+ case 'threshold':
+ return applyThreshold(imageData, params.threshold);
+ case 'erosion':
+ return applyErosion(applyThreshold(imageData, params.threshold));
+ case 'dilation':
+ return applyDilation(applyThreshold(imageData, params.threshold));
+ case 'opening':
+ return applyOpening(applyThreshold(imageData, params.threshold));
+ case 'closing':
+ return applyClosing(applyThreshold(imageData, params.threshold));
+
+ // Custom Operations
+ case 'customFormula':
+ return applyCustomFormula(imageData, params.customFormula);
+ case 'customKernel':
+ return applyCustomKernel(imageData, params.customKernel);
+
+ // Edge Detection
+ case 'sobelX':
+ return applySobelX(imageData);
+ case 'sobelY':
+ return applySobelY(imageData);
+ case 'sobelMagnitude':
+ return applySobelMagnitude(imageData);
+
+ // Noise Reduction
+ case 'median':
+ return applyMedian(imageData, params.kernelSize);
+
+ // Color Filters
+ case 'grayscale':
+ return applyGrayscale(imageData);
+ case 'sepia':
+ return applySepia(imageData);
+ case 'swapChannels':
+ return applySwapChannels(imageData);
+
+ // No filter
+ case 'none':
+ default:
+ return imageData;
+ }
+}
+
+// =============================================================================
+// Worker Message Handler
+// =============================================================================
+
+self.onmessage = (event: MessageEvent) => {
+ const { type, imageData, filter, params, requestId } = event.data;
+
+ if (type !== 'process') {
+ return;
+ }
+
+ const startTime = performance.now();
+
+ try {
+ const result = processImage(imageData, filter, params);
+ const processingTime = performance.now() - startTime;
+
+ const response: WorkerResponse = {
+ type: 'result',
+ imageData: result,
+ requestId,
+ processingTime,
+ };
+
+ self.postMessage(response, { transfer: [result.data.buffer] });
+ } catch (error) {
+ const processingTime = performance.now() - startTime;
+
+ const response: WorkerResponse = {
+ type: 'error',
+ error: error instanceof Error ? error.message : 'Unknown error',
+ requestId,
+ processingTime,
+ };
+
+ self.postMessage(response);
+ }
+};
+
+// Signal that worker is ready
+self.postMessage({ type: 'ready' });