AI Image Editor

function processImage(originalImg, aiStyleMode = 'auto_enhance', intensityLevel = '5') {
    // Determine dimensions to maintain original size
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Ensure we have a valid rendering target
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Parse parameters setup
    // Ensure intensity is a safe integer between 1 and 10
    let strength = parseInt(intensityLevel, 10);
    if (isNaN(strength) || strength < 1) strength = 1;
    if (strength > 10) strength = 10;

    // Define supported AI-simulated modes
    const validStyles = ['auto_enhance', 'magic_sketch', 'portrait_blur', 'cyberpunk'];
    const style = validStyles.includes(aiStyleMode) ? aiStyleMode : 'auto_enhance';

    // Helper to dry up repeated code
    const drawOriginal = () => ctx.drawImage(originalImg, 0, 0, width, height);

    if (style === 'auto_enhance') {
        // AI Auto-Enhance: Smart contrast, intelligent saturation boost, and synthetic shadow/highlight recovery
        
        // 1. Base vibrant layer (Contrast & Color dynamics)
        const saturationBoost = 100 + (strength * 10); // 110% to 200%
        const contrastBoost = 100 + (strength * 5);  // 105% to 150%
        ctx.filter = `saturate(${saturationBoost}%) contrast(${contrastBoost}%)`;
        drawOriginal();
        ctx.filter = 'none';

        // 2. Synthetic HDR / Shadow lift (Screen composite mode)
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = strength * 0.03; // Lightly lift dark areas
        drawOriginal();

        // 3. Punch/Clarity addition (Overlay composite mode to increase micro-contrast)
        ctx.globalCompositeOperation = 'overlay';
        ctx.globalAlpha = strength * 0.04; 
        drawOriginal();

    } else if (style === 'magic_sketch') {
        // AI Magic Sketch: Algorithmic edge separation rendering a highly detailed pencil drawing effect
        
        // 1. Base graphite grayscale layer
        ctx.filter = 'grayscale(100%)';
        drawOriginal();
        
        // 2. Process negative blurred layer on a secondary canvas
        const topCanvas = document.createElement('canvas');
        topCanvas.width = width; topCanvas.height = height;
        const topCtx = topCanvas.getContext('2d');
        
        const blurAmount = Math.max(1, strength * 1.5);
        topCtx.filter = `grayscale(100%) invert(100%) blur(${blurAmount}px)`;
        topCtx.drawImage(originalImg, 0, 0, width, height);
        
        // 3. Isolate edges mapping inverted blurry pixels to base layer using Color Dodge
        ctx.filter = 'none';
        ctx.globalCompositeOperation = 'color-dodge';
        ctx.drawImage(topCanvas, 0, 0, width, height);
        
        // 4. Line density adjustment (Darken faint lines softly)
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = strength * 0.015; 
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, width, height);

    } else if (style === 'portrait_blur') {
        // AI Depth map simulation (Portrait Mode): Sharp center focus dropping into radial bokeh blur
        
        const blurRadius = strength * 2.5; 
        
        // 1. Process depth layer (background)
        ctx.filter = `blur(${blurRadius}px) saturate(110%)`; 
        drawOriginal();
        ctx.filter = 'none';
        
        // 2. Construct spatial gradient mask for depth estimation fake
        const maskCanvas = document.createElement('canvas');
        maskCanvas.width = width; maskCanvas.height = height;
        const mCtx = maskCanvas.getContext('2d');
        
        const cx = width / 2;
        const cy = height / 2;
        const maxRad = Math.max(width, height);
        
        // Scale depth of field focusing plane based on strength parameter
        const innerRad = maxRad * (0.35 - (strength * 0.025)); 
        const outerRad = maxRad * (0.65 - (strength * 0.025));
        
        const grad = mCtx.createRadialGradient(cx, cy, Math.max(10, innerRad), cx, cy, Math.max(20, outerRad));
        grad.addColorStop(0, 'rgba(0,0,0,1)'); // Solid focus center
        grad.addColorStop(1, 'rgba(0,0,0,0)'); // Infinite blur drop off
        
        mCtx.fillStyle = grad;
        mCtx.fillRect(0, 0, width, height);
        
        // 3. Extract the sharp foreground subject based on map
        const foregroundCanvas = document.createElement('canvas');
        foregroundCanvas.width = width; foregroundCanvas.height = height;
        const fCtx = foregroundCanvas.getContext('2d');
        fCtx.drawImage(originalImg, 0, 0, width, height);
        fCtx.globalCompositeOperation = 'destination-in';
        fCtx.drawImage(maskCanvas, 0, 0, width, height);
        
        // 4. Optically composite sharp subject over blurred background
        ctx.drawImage(foregroundCanvas, 0, 0, width, height);

    } else if (style === 'cyberpunk') {
        // AI Stylistic Transfer (Cyberpunk): Remaps lighting and luminance data into a vibrant synthwave aesthetic
        
        // 1. Setup structural base (crushed blacks, muted native color)
        ctx.filter = 'contrast(160%) saturate(60%)';
        drawOriginal();
        ctx.filter = 'none';
        
        // 2. AI Colorize Shadows: Flood deep blues into dark luminance mapping (Hard-light)
        ctx.globalCompositeOperation = 'hard-light';
        ctx.fillStyle = `rgba(10, 0, 60, ${0.4 + (strength * 0.06)})`;
        ctx.fillRect(0, 0, width, height);
        
        // 3. AI Colorize Lights: Project pink/cyan gradient across highlights (Overlay)
        ctx.globalCompositeOperation = 'overlay';
        const synthGrad = ctx.createLinearGradient(0, height, width, 0); 
        synthGrad.addColorStop(0, `rgba(255, 0, 150, ${0.3 + (strength * 0.05)})`); // Neon Pink
        synthGrad.addColorStop(1, `rgba(0, 255, 255, ${0.3 + (strength * 0.05)})`);  // Neon Cyan
        ctx.fillStyle = synthGrad;
        ctx.fillRect(0, 0, width, height);
        
        // 4. Structural recovery: Bring back native texture outlines without dropping stylized palette (Luminosity mode)
        ctx.globalCompositeOperation = 'luminosity';
        ctx.globalAlpha = 1.0 - (strength * 0.08); // Higher intensity yields pure synthetic color
        drawOriginal();
    }

    // Strict reset of rendering environment filters to prevent artifacts
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;
    
    return canvas;
}