Image Creation Tool Powered By AI

/**
 * Simulates an "AI Powered Creator" by applying a painterly, abstract filter to an image.
 * This function turns the input image into a mosaic of colored blocks, where each block
 * is the average color of the original pixels it covers. This mimics the stylized output
 * of some AI image-to-image models.
 *
 * @param {HTMLImageElement} originalImg The original JavaScript Image object to process.
 * @param {string} [prompt="An abstract painting"] A text prompt to display on the image, simulating AI generation.
 * @param {number} [blockSize=8] The size of the pixel blocks for the painterly effect. Smaller numbers mean more detail.
 * @returns {Promise<HTMLCanvasElement>} A canvas element containing the stylized image.
 */
async function processImage(originalImg, prompt = "An abstract painting", blockSize = 8) {
    // Create a canvas element to work with
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image.
    // Use naturalWidth/Height to ensure the image has loaded.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    if (canvas.width === 0 || canvas.height === 0) {
        console.error("Image has not loaded or has zero dimensions.");
        return canvas; // Return empty canvas
    }

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Ensure block size is a positive integer to avoid infinite loops
    const safeBlockSize = Math.max(1, Math.floor(blockSize));

    // Process the image in blocks to create the painterly effect
    for (let y = 0; y < canvas.height; y += safeBlockSize) {
        for (let x = 0; x < canvas.width; x += safeBlockSize) {

            let totalR = 0,
                totalG = 0,
                totalB = 0;
            let count = 0;

            // Calculate the average color of the current block
            for (let blockY = y; blockY < y + safeBlockSize && blockY < canvas.height; blockY++) {
                for (let blockX = x; blockX < x + safeBlockSize && blockX < canvas.width; blockX++) {
                    const index = (blockY * canvas.width + blockX) * 4;
                    totalR += data[index];
                    totalG += data[index + 1];
                    totalB += data[index + 2];
                    count++;
                }
            }

            const avgR = totalR / count;
            const avgG = totalG / count;
            const avgB = totalB / count;

            // Fill the entire block with the calculated average color
            for (let blockY = y; blockY < y + safeBlockSize && blockY < canvas.height; blockY++) {
                for (let blockX = x; blockX < x + safeBlockSize && blockX < canvas.width; blockX++) {
                    const index = (blockY * canvas.width + blockX) * 4;
                    data[index] = avgR;
                    data[index + 1] = avgG;
                    data[index + 2] = avgB;
                }
            }
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Add the "prompt" text to complete the AI tool simulation
    const textBarHeight = Math.min(Math.max(30, canvas.height * 0.08), 60);
    const fontSize = textBarHeight * 0.5;

    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
    ctx.fillRect(0, canvas.height - textBarHeight, canvas.width, textBarHeight);

    ctx.fillStyle = 'white';
    ctx.font = `${fontSize}px "Helvetica Neue", Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Add a simple text shadow for better readability
    ctx.shadowColor = 'black';
    ctx.shadowBlur = 4;
    
    ctx.fillText(prompt, canvas.width / 2, canvas.height - (textBarHeight / 2));

    // Return the final canvas element
    return canvas;
}