Photo Physical Features Editor

/**
 * Edits facial features in an image, such as applying lip color and changing eye color.
 * This function uses a machine learning model (TensorFlow.js Face Landmarks Detection)
 * to accurately locate facial features.
 *
 * @param {Image} originalImg The original JavaScript Image object to process.
 * @param {string} eyeColor The desired color for the eyes (e.g., 'blue', '#00FF00', 'rgba(0,255,0,0.5)'). Default is 'transparent' (no change).
 * @param {number} eyeColorOpacity The opacity of the eye color overlay, from 0.0 to 1.0. Default is 0.5.
 * @param {string} lipColor The desired color for the lips. Default is 'transparent' (no change).
 * @param {number} lipColorOpacity The opacity of the lip color overlay, from 0.0 to 1.0. Default is 0.5.
 * @returns {Promise<HTMLCanvasElement>} A Promise that resolves to a new canvas element with the edits applied.
 */
async function processImage(originalImg, eyeColor = 'transparent', eyeColorOpacity = 0.5, lipColor = 'transparent', lipColorOpacity = 0.5) {
    const canvas = document.createElement('canvas');
    // Use { willReadFrequently: true } for performance with repeated getImageData/putImageData calls, which TF.js uses.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image first, which will be the base layer.
    ctx.drawImage(originalImg, 0, 0);

    // If no actual edits are requested, return the canvas with the original image.
    const noEyeEdit = eyeColor === 'transparent' || eyeColorOpacity <= 0;
    const noLipEdit = lipColor === 'transparent' || lipColorOpacity <= 0;
    if (noEyeEdit && noLipEdit) {
        return canvas;
    }

    try {
        // Dynamically import TFJS and the face landmarks model.
        // This avoids polluting the global scope and loads scripts only when needed.
        if (!window.faceLandmarksDetection) {
            // TFJS dependencies are required for the model to work.
            // Using specific versions for stability.
            await import('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@3.13.0/dist/tf-core.min.js');
            await import('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@3.13.0/dist/tf-converter.min.js');
            await import('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@3.13.0/dist/tf-backend-webgl.min.js');
            // The main face detection model.
            await import('https://cdn.jsdelivr.net/npm/@tensorflow-models/face-landmarks-detection@1.0.1/dist/face-landmarks-detection.min.js');
        }

        // Load the MediaPipe Facemesh model.
        const model = await faceLandmarksDetection.load(
            faceLandmarksDetection.SupportedPackages.mediapipeFacemesh, {
                maxFaces: 1, // Optimize for processing the most prominent face.
            }
        );

        // Detect facial landmarks. predictIrises is crucial for eye color.
        const predictions = await model.estimateFaces({
            input: originalImg,
            predictIrises: true,
        });

        if (predictions.length === 0) {
            console.warn('No face detected in the image.');
            return canvas; // Return the original image if no face is found.
        }
        
        // Helper function to draw a closed path from a set of 2D/3D points.
        const drawPath = (points) => {
            ctx.beginPath();
            ctx.moveTo(points[0][0], points[0][1]);
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(points[i][0], points[i][1]);
            }
            ctx.closePath();
        };

        for (const prediction of predictions) {
            // The model provides pre-grouped landmarks called 'annotations'.
            const annotations = prediction.annotations;

            // --- 1. Apply Lipstick ---
            if (!noLipEdit) {
                ctx.save();
                ctx.fillStyle = lipColor;
                ctx.globalAlpha = lipColorOpacity;
                // 'multiply' or 'overlay' blend modes often look more natural for makeup.
                ctx.globalCompositeOperation = 'multiply';
                
                // Create the outer lip shape by combining upper and lower outer lip contours.
                drawPath(annotations.lipsUpperOuter);
                drawPath(annotations.lipsLowerOuter);
                
                // Cut out the inner mouth area using the inner lip contours.
                drawPath(annotations.lipsUpperInner);
                drawPath(annotations.lipsLowerInner);
                
                // Use the 'evenodd' fill rule to only color the area between the outer and inner paths.
                ctx.fill('evenodd');
                ctx.restore();
            }

            // --- 2. Change Eye Color ---
            if (!noEyeEdit && annotations.leftIris && annotations.rightIris) {
                ctx.save();
                ctx.fillStyle = eyeColor;
                ctx.globalAlpha = eyeColorOpacity;
                // 'overlay' or 'color' blend modes work well for changing eye color.
                ctx.globalCompositeOperation = 'overlay';

                // Color the left and right irises using their landmark paths.
                drawPath(annotations.leftIris);
                ctx.fill();

                drawPath(annotations.rightIris);
                ctx.fill();
                
                ctx.restore();
            }
        }
    } catch (err) {
        console.error("Error during image feature detection:", err);
        // In case of any error (e.g., network, model load), return the original unedited image.
        return canvas;
    }

    return canvas;
}