Image Hyper-Realistic Portrait Triptych Generator

/**
 * Generates an artistic triptych from a single portrait image.
 *
 * NOTE: The user-provided description asks for hyper-realistic generation of three distinct views
 * (a front view, a 90° left profile, and a 90° right profile) from a single source image. This task,
 * known as novel view synthesis, involves complex 3D reconstruction and AI-powered image generation,
 * which is far beyond the capabilities of client-side JavaScript and standard browser APIs.
 *
 * This function provides a practical and achievable interpretation of the request by creating a
 * stylistic triptych that honors the aesthetic and structural goals. The central panel displays the
 * original, full-color portrait. The side panels are presented as mirrored, stylized "studies" of the
 * same portrait, creating a balanced and artistically compelling composition with an aligned eye-level,
 * as requested.
 *
 * @param {HTMLImageElement} originalImg The source image object, which should ideally be a portrait.
 * @param {number} [panelSpacing=10] The space in pixels between the panels of the triptych.
 * @param {string} [sideEffect='grayscale'] The visual effect for the side panels. Valid options are 'grayscale', 'sepia', 'blur', or 'none'.
 * @param {string} [backgroundColor='#1a1a1a'] The background color of the triptych canvas, specified as a CSS color string.
 * @returns {HTMLCanvasElement} A canvas element displaying the final triptych image.
 */
function processImage(originalImg, panelSpacing = 10, sideEffect = 'grayscale', backgroundColor = '#1a1a1a') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Set canvas dimensions to accommodate three image panels and the spacing between them.
    canvas.width = (imgWidth * 3) + (panelSpacing * 2);
    canvas.height = imgHeight;

    // Fill the canvas with the specified background color.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Determine the CSS filter string based on the sideEffect parameter.
    let filterString = 'none';
    switch (sideEffect) {
        case 'grayscale':
            filterString = 'grayscale(100%)';
            break;
        case 'sepia':
            filterString = 'sepia(100%)';
            break;
        case 'blur':
            // A subtle blur is often effective.
            filterString = 'blur(4px)';
            break;
    }

    // --- Draw the Left Panel ---
    // The left panel is a stylized version of the original image.
    ctx.save();
    ctx.filter = filterString;
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    ctx.restore();

    // --- Draw the Right Panel ---
    // The right panel is a horizontally flipped, stylized version to create symmetry and balance.
    ctx.save();
    // Apply the same filter as the left panel.
    ctx.filter = filterString;
    // To flip the image horizontally, we translate to the far right edge of the canvas,
    // reverse the x-axis with scale(-1, 1), and then draw the image at the new origin.
    ctx.translate(canvas.width, 0);
    ctx.scale(-1, 1);
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    ctx.restore();

    // --- Draw the Center Panel ---
    // The central panel is the original, unmodified image, drawn on top.
    const centerPanelX = imgWidth + panelSpacing;
    ctx.drawImage(originalImg, centerPanelX, 0, imgWidth, imgHeight);

    return canvas;
}