Photo Title Translator

async function processImage(originalImg, targetLang = 'en') {
    /**
     * Helper function to dynamically load a script and return a promise.
     * Prevents re-loading the same script.
     * @param {string} url - The URL of the script to load.
     * @returns {Promise<void>} - A promise that resolves when the script is loaded.
     */
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            // Check if the script is already on the page
            if (document.querySelector(`script[src="${url}"]`)) {
                // If the global object (Tesseract) is already available, resolve.
                if (window.Tesseract) {
                    return resolve();
                }
                // If not, it might be in the process of loading, so add an event listener.
                document.querySelector(`script[src="${url}"]`).addEventListener('load', () => resolve());
                return;
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Script load error for ${url}`));
            document.head.appendChild(script);
        });
    };

    // Create a container element for the entire output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '15px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.textAlign = 'center';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Display the original image using a canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto'; // Maintain aspect ratio
    canvas.style.borderRadius = '4px';
    container.appendChild(canvas);

    // Add a status message element to provide feedback to the user
    const statusP = document.createElement('p');
    statusP.textContent = 'Initializing...';
    statusP.style.fontStyle = 'italic';
    statusP.style.color = '#555';
    statusP.style.marginTop = '15px';
    container.appendChild(statusP);

    try {
        // --- 1. OCR (Optical Character Recognition) ---
        statusP.textContent = 'Loading OCR engine...';
        // Dynamically import the Tesseract.js library from a CDN
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');

        statusP.textContent = 'Extracting text from image... (this may take a moment)';
        const worker = await Tesseract.createWorker();
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);
        await worker.terminate(); // Clean up the worker

        const extractedText = text.trim();
        if (!extractedText) {
            statusP.textContent = 'No text could be extracted from the image.';
            return container;
        }

        // --- 2. Display Extracted Text ---
        const extractedTitle = document.createElement('h3');
        extractedTitle.textContent = 'Extracted Text';
        extractedTitle.style.margin = '20px 0 5px 0';
        const extractedTextP = document.createElement('p');
        extractedTextP.textContent = `"${extractedText}"`;
        extractedTextP.style.border = '1px dashed #ccc';
        extractedTextP.style.padding = '10px';
        extractedTextP.style.backgroundColor = '#fff';
        extractedTextP.style.borderRadius = '4px';
        extractedTextP.style.margin = '0';
        container.appendChild(extractedTitle);
        container.appendChild(extractedTextP);

        // --- 3. Translation ---
        statusP.textContent = `Translating to language: '${targetLang}'...`;
        const encodedText = encodeURIComponent(extractedText);
        // Using the free MyMemory Translation API (no key required)
        const apiUrl = `https://api.mymemory.translated.net/get?q=${encodedText}&langpair=auto|${targetLang}`;

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

        if (data.responseStatus !== 200 || !data.responseData || !data.responseData.translatedText) {
            throw new Error('Translation failed or the API returned an empty result.');
        }
        const translatedText = data.responseData.translatedText;

        // --- 4. Display Translated Text ---
        const translatedTitle = document.createElement('h3');
        translatedTitle.textContent = 'Translated Text';
        translatedTitle.style.margin = '20px 0 5px 0';
        const translatedTextP = document.createElement('p');
        translatedTextP.textContent = `"${translatedText}"`;
        translatedTextP.style.border = '1px dashed #90c996';
        translatedTextP.style.padding = '10px';
        translatedTextP.style.backgroundColor = '#e8ffed';
        translatedTextP.style.borderRadius = '4px';
        translatedTextP.style.margin = '0';
        container.appendChild(translatedTitle);
        container.appendChild(translatedTextP);

        // Remove the status paragraph on success
        statusP.remove();

    } catch (error) {
        console.error('Photo Title Translator Error:', error);
        statusP.textContent = `An error occurred: ${error.message}`;
        statusP.style.color = '#d9534f'; // Red color for error
        statusP.style.fontWeight = 'bold';
    }

    return container;
}