Image Language Translator

async function processImage(originalImg, language = 'en') {
    /**
     * Dynamically loads a script and returns a promise that resolves when the script is loaded.
     * @param {string} url The URL of the script to load.
     * @returns {Promise<void>}
     */
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            // Check if the script is a Tesseract worker script
            const isWorker = url.includes('worker');
            // Use a unique attribute to track loading status
            const scriptId = `script-${url.replace(/[^a-zA-Z0-9]/g, '')}`;
            
            // For worker scripts, Tesseract.js handles loading, so we just need the main library.
            // For the main library, we check if it's already on the page.
            if (!isWorker && document.getElementById(scriptId)) {
                 // If the script element exists and is marked as loaded, resolve immediately.
                if (document.getElementById(scriptId).dataset.loaded === 'true') {
                    resolve();
                    return;
                }
                // If it exists but is still loading, wait for it to finish.
                document.getElementById(scriptId).addEventListener('load', () => resolve());
                document.getElementById(scriptId).addEventListener('error', () => reject(new Error(`Script load error for ${url}`)));
                return;
            }

            // If the script doesn't exist, create and append it.
            const script = document.createElement('script');
            script.id = scriptId;
            script.src = url;
            script.onload = () => {
                script.dataset.loaded = 'true';
                resolve();
            };
            script.onerror = () => reject(new Error(`Script load error for ${url}`));
            document.head.appendChild(script);
        });
    };

    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';

    const statusDiv = document.createElement('div');
    statusDiv.style.padding = '20px';
    statusDiv.style.fontSize = '1.1em';
    statusDiv.textContent = 'Initializing...';
    container.appendChild(statusDiv);

    try {
        // 1. Load the Tesseract.js library from a CDN
        statusDiv.textContent = 'Loading OCR Engine...';
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');

        // 2. Perform OCR on the image
        // We assume the source language is English ('eng') for recognition.
        // A more advanced tool might allow the user to specify the source language.
        statusDiv.textContent = 'Recognizing text from image...';
        const {
            data: {
                text
            }
        } = await Tesseract.recognize(
            originalImg,
            'eng', {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        const progress = Math.round(m.progress * 100);
                        statusDiv.textContent = `Recognizing text... (${progress}%)`;
                    }
                }
            }
        );

        if (!text || text.trim() === '') {
            statusDiv.textContent = 'No text was found in the image.';
            const imgClone = originalImg.cloneNode();
            imgClone.style.maxWidth = '100%';
            imgClone.style.maxHeight = '400px';
            imgClone.style.display = 'block';
            imgClone.style.margin = '10px auto';
            container.insertBefore(imgClone, statusDiv);
            return container;
        }

        // 3. Translate the extracted text
        statusDiv.textContent = `Translating text to '${language}'...`;

        // We use a free, public translation API. It may have rate limits or other restrictions.
        // The source language is assumed to be English ('en').
        const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=en|${language}`;

        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`Translation API request failed with status: ${response.status}`);
        }

        const translationData = await response.json();
        if (translationData.responseStatus !== 200) {
            throw new Error(`Translation API error: ${translationData.responseDetails}`);
        }

        const translatedText = translationData.responseData.translatedText;

        // 4. Create the final display element
        container.innerHTML = ''; // Clear status messages

        // Add original image
        const imgClone = originalImg.cloneNode();
        imgClone.style.maxWidth = '100%';
        imgClone.style.maxHeight = '400px';
        imgClone.style.display = 'block';
        imgClone.style.margin = '0 auto 10px';
        imgClone.title = "Original Image";
        container.appendChild(imgClone);

        // Add a horizontal rule for visual separation
        container.appendChild(document.createElement('hr'));

        // Add header for the translation
        const header = document.createElement('h3');
        header.textContent = `Translated Text (to ${language}):`;
        header.style.marginTop = '15px';
        header.style.marginBottom = '10px';
        header.style.fontWeight = 'bold';
        container.appendChild(header);

        // Add the translated text in a styled box
        const translationResultDiv = document.createElement('div');
        translationResultDiv.textContent = translatedText;
        translationResultDiv.style.padding = '15px';
        translationResultDiv.style.border = '1px solid #ccc';
        translationResultDiv.style.borderRadius = '5px';
        translationResultDiv.style.backgroundColor = '#f9f9f9';
        translationResultDiv.style.whiteSpace = 'pre-wrap'; // Preserves line breaks
        translationResultDiv.style.textAlign = 'left';
        translationResultDiv.style.lineHeight = '1.5';
        container.appendChild(translationResultDiv);

        return container;

    } catch (error) {
        console.error('Image processing failed:', error);
        statusDiv.textContent = `An error occurred: ${error.message}`;
        statusDiv.style.color = 'red';
        return container; // Return the container with the error message
    }
}