Image Professional Photo Enhancer

/**
 * Processes an image to give it a more professional, "portrait mode" look.
 * This is achieved by separating the person from the background using an AI model,
 * blurring the background, and applying subtle enhancements to the foreground subject.
 *
 * This function is a practical interpretation of a "professional photo enhancer". While it
 * does not perform complex generative tasks like "removing messy hair" (which is generally
 * not feasible in a browser), the combination of background blur and foreground smoothing 
 * can significantly improve a photo's quality, de-emphasize distracting backgrounds, and 
 * help soften fine details like stray hairs.
 *
 * It uses Google's MediaPipe SelfieSegmentation model, which is loaded dynamically on first use.
 *
 * @param {HTMLImageElement} originalImg The original image object to process. The image must be fully loaded.
 * @param {number} blurAmount The pixel radius for the background blur. Default is 6.
 * @param {number} brightness The percentage of brightness increase for the foreground subject (0-100). Default is 8.
 * @param {number} contrast The percentage of contrast increase for the foreground subject (0-100). Default is 8.
 * @param {number} saturation The percentage of saturation increase for the foreground subject (0-100). Default is 5.
 * @param {number} smoothing A value for a subtle blur applied to the foreground for a softening/smoothing effect. Default is 2 (equals 0.2px blur).
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a new canvas element containing the processed image.
 */
async function processImage(originalImg, blurAmount = 6, brightness = 8, contrast = 8, saturation = 5, smoothing = 2) {
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    outputCanvas.width = width;
    outputCanvas.height = height;

    try {
        // Lazily load and initialize the MediaPipe Selfie Segmentation model.
        // A promise is stored on the function itself to prevent re-loading on subsequent calls.
        if (!processImage.segmenterPromise) {
            processImage.segmenterPromise = new Promise(async (resolve, reject) => {
                try {
                    // Dynamically import the SelfieSegmentation class from a CDN.
                    const mediapipe = await import('https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js');
                    const segmenter = new mediapipe.SelfieSegmentation({
                        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`
                    });
                    
                    // Use the more accurate landscape model, which is good for portraits.
                    segmenter.setOptions({ modelSelection: 1 });
                    
                    // The model first needs to be initialized before it can be used.
                    await segmenter.initialize();
                    console.log("AI Portrait Model loaded successfully.");
                    resolve(segmenter);
                } catch (error) {
                    console.error("Failed to load or initialize AI Portrait Model:", error);
                    reject(error);
                }
            });
        }

        const segmenter = await processImage.segmenterPromise;
        
        // This promise wrapper handles the callback-based API of MediaPipe's send/onResults.
        const getSegmentationMask = (img) => {
            return new Promise((resolve, reject) => {
                segmenter.onResults(results => {
                    segmenter.onResults(() => {}); // Clear the callback to prevent memory leaks.
                    if (results.segmentationMask) {
                        resolve(results.segmentationMask);
                    } else {
                        reject("Failed to generate segmentation mask.");
                    }
                });
                segmenter.send({ image: img });
            });
        };

        const segmentationMask = await getSegmentationMask(originalImg);

        //--- Step 1: Draw the blurred background ---
        outputCtx.filter = `blur(${blurAmount}px)`;
        outputCtx.drawImage(originalImg, 0, 0, width, height);
        outputCtx.filter = 'none'; // Reset filter

        //--- Step 2: Create an isolated, enhanced foreground ---
        const fgCanvas = document.createElement('canvas');
        fgCanvas.width = width;
        fgCanvas.height = height;
        const fgCtx = fgCanvas.getContext('2d');
        
        // Apply enhancement filters to the foreground
        const enhancementFilters = `brightness(${1 + brightness / 100}) contrast(${1 + contrast / 100}) saturate(${1 + saturation / 100}) blur(${smoothing / 10}px)`;
        fgCtx.filter = enhancementFilters;
        fgCtx.drawImage(originalImg, 0, 0, width, height);

        // Use the AI mask to clip the foreground, making everything else transparent.
        fgCtx.globalCompositeOperation = 'destination-in';
        fgCtx.drawImage(segmentationMask, 0, 0, width, height);
        
        //--- Step 3: Composite the foreground on top of the background ---
        outputCtx.drawImage(fgCanvas, 0, 0, width, height);

    } catch (error) {
        console.warn("AI-based portrait enhancement failed. Falling back to a simple image filter.", error);
        // Fallback: If AI processing fails, apply a simpler enhancement to the whole image.
        const fallbackFilters = `brightness(${1 + brightness / 100}) contrast(${1 + contrast / 100}) saturate(${1 + saturation / 100})`;
        outputCtx.filter = fallbackFilters;
        outputCtx.drawImage(originalImg, 0, 0, width, height);
    }

    return outputCanvas;
}