Image Random Metadata Generator For Los Angeles

/**
 * Generates random, plausible EXIF-like metadata for a given image,
 * themed around locations in Los Angeles.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @returns {HTMLElement} A DIV element containing a formatted list of the generated metadata.
 */
function processImage(originalImg) {
    // Helper function to get a random element from an array
    const getRandomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];

    // Helper function to get a random number in a range
    const getRandomNumber = (min, max) => Math.random() * (max - min) + min;

    // --- Data Pools for Random Generation ---
    const cameraMakers = {
        "Canon": {
            models: ["EOS R5", "EOS R6 Mark II", "EOS 5D Mark IV"],
            lenses: ["RF 24-70mm F2.8L IS USM", "RF 50mm F1.2L USM", "EF 70-200mm f/2.8L IS III USM"]
        },
        "Sony": {
            models: ["a7 IV", "a7R V", "a1"],
            lenses: ["FE 24-70mm F2.8 GM II", "FE 50mm F1.2 GM", "FE 70-200mm F2.8 GM OSS II"]
        },
        "Nikon": {
            models: ["Z9", "Z7 II", "D850"],
            lenses: ["NIKKOR Z 24-70mm f/2.8 S", "NIKKOR Z 50mm f/1.2 S", "AF-S NIKKOR 70-200mm f/2.8E FL ED VR"]
        },
        "Fujifilm": {
            models: ["X-T5", "X-H2S", "GFX 100S"],
            lenses: ["XF 16-55mm F2.8 R LM WR", "XF 33mm F1.4 R LM WR", "GF 110mm F2 R LM WR"]
        },
        "Apple": {
            models: ["iPhone 15 Pro", "iPhone 14 Pro Max"],
            lenses: ["Built-in Wide Camera", "Built-in Telephoto Camera"]
        },
        "Google": {
            models: ["Pixel 8 Pro", "Pixel 7a"],
            lenses: ["Main Camera", "Ultrawide Camera"]
        }
    };
    const firstNames = ["Chris", "Maria", "Jordan", "Alex", "Taylor", "Sam", "Casey", "Wei"];
    const lastNames = ["Garcia", "Nguyen", "Smith", "Lee", "Gonzalez", "Chen", "Martinez"];
    const laLocations = [
        { name: "Santa Monica Pier", lat: 34.0089, lon: -118.4974 },
        { name: "Griffith Observatory", lat: 34.1186, lon: -118.3004 },
        { name: "Hollywood Walk of Fame", lat: 34.1016, lon: -118.3268 },
        { name: "Venice Beach Boardwalk", lat: 33.9850, lon: -118.4720 },
        { name: "The Getty Center", lat: 34.0779, lon: -118.4741 },
        { name: "Crypto.com Arena", lat: 34.0430, lon: -118.2673 },
        { name: "Rodeo Drive", lat: 34.0689, lon: -118.4037 },
        { name: "Echo Park Lake", lat: 34.0743, lon: -118.2599 },
    ];
    const apertures = ["f/1.4", "f/1.8", "f/2.2", "f/2.8", "f/4.0", "f/5.6", "f/8.0", "f/11", "f/16"];
    const shutterSpeeds = ["1/30s", "1/60s", "1/125s", "1/250s", "1/500s", "1/1000s", "1/2000s", "1/4000s"];
    const isos = [100, 200, 400, 640, 800, 1600, 3200, 6400];

    // --- Generate Metadata Values ---

    // Photographer
    const photographer = `${getRandomItem(firstNames)} ${getRandomItem(lastNames)}`;

    // Filename
    const filename = `IMG_${Math.floor(getRandomNumber(1000, 9999))}.JPG`;

    // Date & Time (within the last 5 years)
    const now = new Date();
    const fiveYearsAgo = new Date().setFullYear(now.getFullYear() - 5);
    const randomTimestamp = getRandomNumber(fiveYearsAgo, now.getTime());
    const dateTaken = new Date(randomTimestamp).toLocaleString('en-US', {
        year: 'numeric', month: 'long', day: 'numeric',
        hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true
    });
    
    // Location
    const location = getRandomItem(laLocations);
    // Add a tiny random offset to the coordinates to make them unique
    const latitude = (location.lat + getRandomNumber(-0.005, 0.005)).toFixed(6);
    const longitude = (location.lon + getRandomNumber(-0.005, 0.005)).toFixed(6);

    // Camera & Lens (ensure lens matches camera brand)
    const makerName = getRandomItem(Object.keys(cameraMakers));
    const makerData = cameraMakers[makerName];
    const cameraModel = `${makerName} ${getRandomItem(makerData.models)}`;
    const lensModel = getRandomItem(makerData.lenses);

    // Exposure settings
    const aperture = getRandomItem(apertures);
    const shutterSpeed = getRandomItem(shutterSpeeds);
    const iso = getRandomItem(isos);
    const focalLength = (makerName === 'Apple' || makerName === 'Google')
        ? `${Math.floor(getRandomNumber(4, 12))}mm`
        : `${Math.floor(getRandomNumber(18, 200))}mm`;

    // Image Dimensions from the input image
    const dimensions = `${originalImg.naturalWidth} x ${originalImg.naturalHeight} pixels`;

    // --- Create Output HTML Element ---
    const container = document.createElement('div');
    container.style.fontFamily = 'monospace, "Courier New", Courier';
    container.style.padding = '1em';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '5px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.lineHeight = '1.5';
    container.style.color = '#333';
    container.style.maxWidth = '500px';

    const title = document.createElement('h3');
    title.textContent = 'Generated Image Metadata';
    title.style.marginTop = '0';
    title.style.borderBottom = '1px solid #eee';
    title.style.paddingBottom = '0.5em';
    title.style.marginBottom = '1em';
    container.appendChild(title);

    const metadataList = document.createElement('dl');
    metadataList.style.margin = '0';
    metadataList.style.display = 'grid';
    metadataList.style.gridTemplateColumns = 'max-content auto';
    metadataList.style.gap = '8px 15px';

    const allMetadata = {
        "Filename": filename,
        "Date Taken": dateTaken,
        "Photographer": photographer,
        "Dimensions": dimensions,
        "Location": location.name,
        "GPS Coordinates": `${latitude}, ${longitude}`,
        "Camera": cameraModel,
        "Lens": lensModel,
        "Focal Length": focalLength,
        "Aperture": aperture,
        "Shutter Speed": shutterSpeed,
        "ISO": iso,
    };
    
    for (const [key, value] of Object.entries(allMetadata)) {
        const dt = document.createElement('dt');
        dt.textContent = key + ":";
        dt.style.fontWeight = 'bold';
        dt.style.gridColumn = '1';

        const dd = document.createElement('dd');
        dd.textContent = value;
        dd.style.margin = '0';
        dd.style.gridColumn = '2';

        metadataList.appendChild(dt);
        metadataList.appendChild(dd);
    }

    container.appendChild(metadataList);

    return container;
}