Image AI Filter Effect Remover

/**
 * Attempts to reverse common AI filter effects by applying sharpening, contrast, and saturation adjustments.
 * Since truly reversing a complex AI filter is often impossible, this function aims to counteract
 * common artifacts like softness, haze, and muted colors to restore a more "natural" look to the image.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {number} sharpness A value from 0 (no sharpening) to 1 (max sharpening) to restore details. Defaults to 0.4.
 * @param {number} contrast A multiplier for the image contrast. >1 increases contrast, <1 decreases it. Defaults to 1.1.
 * @param {number} saturation A multiplier for color saturation. >1 increases saturation, <1 decreases it. Defaults to 1.05.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
async function processImage(originalImg, sharpness = 0.4, contrast = 1.1, saturation = 1.05) {
    // --- Parameter Validation ---
    const sharp = Math.max(0, Math.min(1, Number(sharpness)));
    const con = Math.max(0, Number(contrast));
    const sat = Math.max(0, Number(saturation));

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Create a temporary canvas for the sharpening step.
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCanvas.width = w;
    tempCanvas.height = h;
    tempCtx.drawImage(originalImg, 0, 0);

    // --- Step 1: Sharpening (if needed) ---
    // Sharpening can help restore details that are often lost or softened by AI filters.
    // This is done using a convolution with a sharpening kernel.
    if (sharp > 0) {
        const imageData = tempCtx.getImageData(0, 0, w, h);
        const data = imageData.data;
        const sourceData = new Uint8ClampedArray(data); // Create a copy to read from

        // Sharpening kernel, its effect is controlled by the `sharp` parameter.
        const kernel = [
            [0, -sharp, 0],
            [-sharp, 1 + 4 * sharp, -sharp],
            [0, -sharp, 0]
        ];

        // Iterate over each pixel (excluding the 1px border for simplicity)
        for (let y = 1; y < h - 1; y++) {
            for (let x = 1; x < w - 1; x++) {
                const i = (y * w + x) * 4;
                let r = 0, g = 0, b = 0;

                // Apply the convolution kernel to the 3x3 pixel neighborhood
                for (let ky = -1; ky <= 1; ky++) {
                    for (let kx = -1; kx <= 1; kx++) {
                        const K = kernel[ky + 1][kx + 1];
                        if (K === 0) continue;

                        const neighborIndex = ((y + ky) * w + (x + kx)) * 4;
                        r += sourceData[neighborIndex] * K;
                        g += sourceData[neighborIndex + 1] * K;
                        b += sourceData[neighborIndex + 2] * K;
                    }
                }
                data[i] = r;
                data[i + 1] = g;
                data[i + 2] = b;
            }
        }
        tempCtx.putImageData(imageData, 0, 0);
    }

    // --- Step 2: Apply Contrast and Saturation ---
    // Create the final canvas to apply color adjustments.
    const finalCanvas = document.createElement('canvas');
    const finalCtx = finalCanvas.getContext('2d');
    finalCanvas.width = w;
    finalCanvas.height = h;

    // Use the efficient built-in canvas filter API for contrast and saturation.
    const filters = [];
    if (con !== 1) filters.push(`contrast(${con})`);
    if (sat !== 1) filters.push(`saturate(${sat})`);

    if (filters.length > 0) {
        finalCtx.filter = filters.join(' ');
    }

    // Draw the (potentially sharpened) image from the temp canvas onto the final canvas.
    finalCtx.drawImage(tempCanvas, 0, 0);

    return finalCanvas;
}