Image Weather Condition Identifier

/**
 * Identifies the likely weather condition in an image using pixel color analysis.
 *
 * A NOTE ON ACCURACY: This function uses a simplified heuristic-based approach
 * to guess the weather condition based on pixel analysis (brightness, color dominance).
 * It is not a machine learning model and its accuracy is very limited. It works
 * best on outdoor landscape photos and can be easily fooled by images that are not
 * landscapes (e.g., indoor photos, close-ups, abstract art). This is a
 * demonstration of what can be achieved with basic browser APIs.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a new canvas element containing the original image with the identified weather condition overlaid as text.
 */
async function processImage(originalImg) {
    // For performance, we analyze a scaled-down version of the image.
    const analysisWidth = 100;
    const analysisHeight = 100;

    const analysisCanvas = document.createElement('canvas');
    const analysisCtx = analysisCanvas.getContext('2d', {
        willReadFrequently: true
    });
    analysisCanvas.width = analysisWidth;
    analysisCanvas.height = analysisHeight;

    // Draw the image onto the canvas, scaled down.
    analysisCtx.drawImage(originalImg, 0, 0, analysisWidth, analysisHeight);

    let imageData;
    try {
        imageData = analysisCtx.getImageData(0, 0, analysisWidth, analysisHeight);
    } catch (e) {
        console.error("Could not get image data. The image might be from a different origin (CORS issue).", e);
        // Create a fallback output canvas with an error message.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.naturalWidth;
        errorCanvas.height = originalImg.naturalHeight;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.drawImage(originalImg, 0, 0);
        errorCtx.font = `bold ${Math.max(16, errorCanvas.width / 25)}px Arial`;
        errorCtx.fillStyle = 'red';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.fillText("Error: Cannot process cross-origin image.", errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    const data = imageData.data;
    const pixelCount = analysisWidth * analysisHeight;

    let totalLuminance = 0;
    let blueishPixels = 0;
    let whitishPixels = 0;
    let greyishPixels = 0;
    let darkishPixels = 0;

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Calculate luminance (perceived brightness)
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
        totalLuminance += luminance;

        // --- Classify each pixel ---
        // Dark pixels
        if (luminance < 40) {
            darkishPixels++;
        }
        // White/very bright pixels
        if (r > 210 && g > 210 && b > 210) {
            whitishPixels++;
        }
        // Blue pixels (potential sky)
        if (b > r && b > g && b > 95 && (b > (g + r) / 2 + 20)) {
            blueishPixels++;
        }
        // Grey pixels (potential clouds)
        if (Math.abs(r - g) < 20 && Math.abs(g - b) < 20 && luminance > 80 && luminance < 200) {
            greyishPixels++;
        }
    }

    const avgLuminance = totalLuminance / pixelCount;
    const darkRatio = darkishPixels / pixelCount;
    const whiteRatio = whitishPixels / pixelCount;
    const blueRatio = blueishPixels / pixelCount;
    const greyRatio = greyishPixels / pixelCount;

    let weatherCondition = "Uncertain";

    // Apply heuristics to determine the weather condition based on aggregated pixel data
    if (darkRatio > 0.75 && avgLuminance < 30) {
        weatherCondition = "Night";
    } else if (whiteRatio > 0.60 && avgLuminance > 190) {
        weatherCondition = "Snowy";
    } else if (blueRatio > 0.35 && avgLuminance > 120) {
        weatherCondition = "Sunny / Clear Sky";
    } else if (greyRatio > 0.5 && avgLuminance > 80 && avgLuminance < 180) {
        weatherCondition = "Cloudy / Overcast";
    } else if (avgLuminance < 80 && greyRatio > 0.3) {
        weatherCondition = "Rainy / Stormy";
    } else if (avgLuminance > 150) {
        weatherCondition = "Bright Day";
    } else if (avgLuminance < 90) {
        weatherCondition = "Gloomy Day";
    }

    // --- Create the final output canvas with the result text ---
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');
    outputCanvas.width = originalImg.naturalWidth;
    outputCanvas.height = originalImg.naturalHeight;

    // Draw the original image
    outputCtx.drawImage(originalImg, 0, 0);

    // Prepare to draw the text overlay
    const fontSize = Math.max(24, Math.min(originalImg.width / 20, originalImg.height / 15));
    const font = `bold ${fontSize}px Arial`;

    // Wait for the font to be ready to avoid flicker (optional but good practice)
    if (document.fonts && document.fonts.load) {
       await document.fonts.load(font);
    }
    
    outputCtx.font = font;
    outputCtx.textAlign = 'left';
    outputCtx.textBaseline = 'bottom';

    const margin = fontSize / 2;

    // Draw text with a shadow for better visibility on any background
    outputCtx.fillStyle = 'rgba(0, 0, 0, 0.7)'; // Shadow color
    outputCtx.fillText(weatherCondition, margin + 2, outputCanvas.height - margin + 2);

    outputCtx.fillStyle = 'white'; // Text color
    outputCtx.fillText(weatherCondition, margin, outputCanvas.height - margin);

    return outputCanvas;
}