Image Translation Finder

/**
 * Detects text in an image using OCR and provides a link to translate it.
 * This function requires the Tesseract.js library, which will be loaded dynamically.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} sourceLangs A string of language codes for Tesseract.js to use for OCR, separated by '+'. E.g., 'eng' for English, 'rus' for Russian, 'eng+rus' for both. See Tesseract.js documentation for available language codes.
 * @param {string} targetLang The 2-letter language code for the translation link target language (e.g., 'en', 'es', 'fr').
 * @returns {Promise<HTMLElement>} A promise that resolves to an HTML element containing the original image, detected text, and a translation link.
 */
async function processImage(originalImg, sourceLangs = 'eng', targetLang = 'en') {
    // 1. Create a main container for the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '15px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.maxWidth = `${originalImg.width}px`;
    container.style.boxSizing = 'border-box';

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

    // 3. Add a status message area to show OCR progress
    const statusDiv = document.createElement('div');
    statusDiv.style.marginTop = '15px';
    statusDiv.style.border = '1px dashed #aaa';
    statusDiv.style.padding = '10px';
    statusDiv.style.backgroundColor = '#fff';
    statusDiv.style.borderRadius = '4px';
    statusDiv.innerHTML = 'Initializing OCR engine...';
    container.appendChild(statusDiv);

    // 4. Dynamically load Tesseract.js library if it's not already available
    if (typeof Tesseract === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
        script.defer = true;
        document.head.appendChild(script);
        try {
            await new Promise((resolve, reject) => {
                script.onload = resolve;
                script.onerror = () => reject('Failed to load Tesseract.js script.');
            });
        } catch (error) {
            statusDiv.innerHTML = `<strong>Error:</strong> ${error}`;
            statusDiv.style.color = 'red';
            return container;
        }
    }

    let worker;

    try {
        // 5. Create a Tesseract worker and set up a logger for progress updates
        worker = await Tesseract.createWorker({
            logger: m => {
                let progress = '';
                if (m.progress) {
                    progress = ` (${Math.round(m.progress * 100)}%)`;
                }
                // Capitalize the first letter of the status message
                const statusText = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                statusDiv.innerHTML = `<em>${statusText}${progress}</em>`;
            }
        });

        // 6. Load the specified language(s) and initialize the worker
        await worker.loadLanguage(sourceLangs);
        await worker.initialize(sourceLangs);

        // 7. Perform OCR on the image
        const { data: { text } } = await worker.recognize(originalImg);

        // OCR is done, remove the status div
        container.removeChild(statusDiv);

        // 8. Display the extracted text
        const textResultDiv = document.createElement('div');
        textResultDiv.style.marginTop = '15px';

        const textHeader = document.createElement('h3');
        textHeader.innerText = 'Detected Text:';
        textHeader.style.margin = '0 0 8px 0';
        textHeader.style.color = '#333';
        textResultDiv.appendChild(textHeader);

        const textBlock = document.createElement('blockquote');
        textBlock.innerText = text.trim() || 'No text detected.';
        textBlock.style.whiteSpace = 'pre-wrap';
        textBlock.style.borderLeft = '4px solid #ccc';
        textBlock.style.padding = '10px';
        textBlock.style.margin = '0';
        textBlock.style.backgroundColor = '#fff';
        textResultDiv.appendChild(textBlock);

        container.appendChild(textResultDiv);

        // 9. Create and display the translation link if text was found
        if (text.trim()) {
            const linkDiv = document.createElement('div');
            linkDiv.style.marginTop = '15px';
            linkDiv.style.textAlign = 'center';

            const encodedText = encodeURIComponent(text);
            const translateUrl = `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}&op=translate`;

            const link = document.createElement('a');
            link.href = translateUrl;
            link.target = '_blank';
            link.rel = 'noopener noreferrer';
            link.innerText = `Translate with Google`;
            link.style.display = 'inline-block';
            link.style.padding = '10px 20px';
            link.style.backgroundColor = '#4285F4';
            link.style.color = 'white';
            link.style.textDecoration = 'none';
            link.style.borderRadius = '4px';
            link.style.fontWeight = 'bold';

            linkDiv.appendChild(link);
            container.appendChild(linkDiv);
        }

    } catch (error) {
        statusDiv.innerHTML = '<strong>An error occurred during OCR.</strong><br>Please check the console for details.';
        statusDiv.style.color = 'red';
        console.error('OCR Error:', error);
    } finally {
        // 10. Terminate the worker to free up resources
        if (worker) {
            await worker.terminate();
        }
    }

    // 11. Return the final container element
    return container;
}