Image Based Address Lookup Tool

async function processImage(originalImg) {
    /**
     * Dynamically loads an external script if it's not already available.
     * @param {string} url - The URL of the script to load.
     * @param {string} globalVar - The name of the global variable the script is expected to create.
     * @returns {Promise<void>} A promise that resolves when the script is loaded and the global is available.
     */
    const loadScript = (url, globalVar) => {
        return new Promise((resolve, reject) => {
            // Check if the library is already loaded
            if (window[globalVar]) {
                return resolve();
            }

            // To prevent adding the script tag multiple times if this function is called rapidly,
            // we check if a script with this URL is already in the document.
            let script = document.querySelector(`script[src="${url}"]`);
            if (!script) {
                script = document.createElement('script');
                script.src = url;
                script.async = true;
                document.head.appendChild(script);
            }

            // Wait for the script to load and the global variable to be defined.
            const onScriptLoad = () => {
                if (window[globalVar]) {
                    resolve();
                } else {
                    reject(new Error(`Script loaded, but global variable "${globalVar}" was not found.`));
                }
            };
            const onScriptError = (err) => {
                reject(new Error(`Failed to load script: ${url}`));
            };
            
            script.addEventListener('load', onScriptLoad);
            script.addEventListener('error', onScriptError);
        });
    };

    // Create a container element to display status updates and the final result.
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.maxWidth = '600px';
    resultContainer.style.margin = 'auto';
    resultContainer.style.border = '1px solid #ddd';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    resultContainer.style.lineHeight = '1.6';
    resultContainer.innerHTML = '<p>Initializing...</p>';

    try {
        // 1. Dynamically load the ExifReader library for parsing image metadata.
        resultContainer.innerHTML = '<p>Loading EXIF library...</p>';
        const exifReaderUrl = 'https://cdn.jsdelivr.net/npm/exifreader@4.20.0/dist/exifreader.min.js';
        await loadScript(exifReaderUrl, 'ExifReader');

        // 2. Fetch the raw image data as an ArrayBuffer.
        // This is crucial because the standard HTMLImageElement does not expose EXIF data.
        // This step may fail due to CORS if the image is hosted on a different domain.
        resultContainer.innerHTML = '<p>Fetching image data...</p>';
        const response = await fetch(originalImg.src);
        if (!response.ok) {
            throw new Error(`Failed to fetch image data (status: ${response.status}). If the image is from another website, CORS policy may be blocking it.`);
        }
        const arrayBuffer = await response.arrayBuffer();

        // 3. Parse the EXIF data from the image buffer.
        resultContainer.innerHTML = '<p>Parsing image metadata (EXIF)...</p>';
        const tags = window.ExifReader.load(arrayBuffer);
        
        // 4. Extract GPS coordinates. ExifReader conveniently converts them to decimal degrees.
        const latitude = tags['GPSLatitude']?.description;
        const longitude = tags['GPSLongitude']?.description;

        if (latitude === undefined || longitude === undefined) {
            resultContainer.innerHTML = '<h2>No GPS Data Found</h2><p>This image does not contain GPS coordinates in its metadata. Many cameras, social media platforms, and messaging apps remove this information for privacy.</p>';
            return resultContainer;
        }
        
        resultContainer.innerHTML = `<p>GPS Coordinates Found: Lat ${latitude.toFixed(6)}, Lon ${longitude.toFixed(6)}</p><p>Looking up address...</p>`;

        // 5. Use the free Nominatim (OpenStreetMap) API to perform reverse geocoding.
        const apiUrl = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}&accept-language=en`;
        
        const geoResponse = await fetch(apiUrl);
        if (!geoResponse.ok) {
            throw new Error(`Geocoding API request failed with status: ${geoResponse.status}`);
        }
        const geoData = await geoResponse.json();

        // 6. Format and display the retrieved address information.
        if (geoData && geoData.display_name) {
            resultContainer.innerHTML = `
                <h2 style="margin-top:0;">Address Found</h2>
                <p style="font-size: 1.1em; margin-bottom: 20px; border-left: 3px solid #007bff; padding-left: 10px;">${geoData.display_name}</p>
                <h3>Address Details:</h3>
                <ul style="list-style-type: none; padding: 0;">
                    ${Object.entries(geoData.address).map(([key, value]) => `<li><strong style="text-transform: capitalize;">${key.replace(/_/g, ' ')}:</strong> ${value}</li>`).join('')}
                </ul>
                <p style="font-size: 0.8em; color: #888; margin-top: 20px; text-align: right;">Address data &copy; OpenStreetMap contributors.</p>
            `;
        } else if (geoData && geoData.error) {
             resultContainer.innerHTML = `<h2>Address Lookup Failed</h2><p>${geoData.error}</p>`;
        } else {
             resultContainer.innerHTML = '<h2>Address Not Found</h2><p>Could not find a corresponding address for the provided GPS coordinates.</p>';
        }

    } catch (error) {
        console.error("Error processing image:", error);
        resultContainer.innerHTML = `<h2 style="color: #d9534f;">An Error Occurred</h2><p>${error.message}</p>`;
    }

    return resultContainer;
}