Image Language Translator And Text Comparison Uploader

function processImage(originalImg, tesseractLang = 'eng', translationLangPair = 'en|es') {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '900px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.color = '#333';

    // Header
    const header = document.createElement('h2');
    header.style.marginTop = '0';
    header.style.marginBottom = '15px';
    header.style.fontSize = '24px';
    header.style.color = '#111';
    header.innerText = 'Image Language Translator & Text Comparison';
    container.appendChild(header);

    // Status / Loading Indicator
    const statusDiv = document.createElement('div');
    statusDiv.style.padding = '12px 16px';
    statusDiv.style.marginBottom = '20px';
    statusDiv.style.borderRadius = '6px';
    statusDiv.style.backgroundColor = '#e0f7fa';
    statusDiv.style.color = '#006064';
    statusDiv.style.fontWeight = '500';
    statusDiv.style.display = 'flex';
    statusDiv.style.alignItems = 'center';
    statusDiv.innerText = 'Initializing Optical Character Recognition (OCR)...';
    container.appendChild(statusDiv);

    // Display Original Image
    const imgWrapper = document.createElement('div');
    imgWrapper.style.marginBottom = '20px';
    
    const imgLabel = document.createElement('div');
    imgLabel.style.fontWeight = 'bold';
    imgLabel.style.marginBottom = '8px';
    imgLabel.style.fontSize = '14px';
    imgLabel.style.color = '#555';
    imgLabel.innerText = 'Source Image:';
    imgWrapper.appendChild(imgLabel);

    const imgClone = originalImg.cloneNode();
    imgClone.style.maxWidth = '100%';
    imgClone.style.height = 'auto';
    imgClone.style.maxHeight = '300px';
    imgClone.style.borderRadius = '6px';
    imgClone.style.border = '1px solid #ddd';
    imgClone.style.objectFit = 'contain';
    imgWrapper.appendChild(imgClone);
    container.appendChild(imgWrapper);

    // Comparison Container (Original Text vs Translated Text)
    const comparisonDiv = document.createElement('div');
    comparisonDiv.style.display = 'flex';
    comparisonDiv.style.gap = '20px';
    comparisonDiv.style.flexWrap = 'wrap';
    container.appendChild(comparisonDiv);

    // Helper to create column cards
    const createCol = (title, content, bgColor, borderColor) => {
        const col = document.createElement('div');
        col.style.flex = '1 1 300px';
        col.style.padding = '20px';
        col.style.borderRadius = '8px';
        col.style.backgroundColor = bgColor;
        col.style.border = `1px solid ${borderColor}`;

        const h3 = document.createElement('h3');
        h3.style.marginTop = '0';
        h3.style.marginBottom = '12px';
        h3.style.fontSize = '18px';
        h3.style.color = '#222';
        h3.innerText = title;
        col.appendChild(h3);

        const p = document.createElement('p');
        p.style.whiteSpace = 'pre-wrap';
        p.style.margin = '0';
        p.style.fontSize = '15px';
        p.style.lineHeight = '1.5';
        p.style.color = '#444';
        p.style.wordBreak = 'break-word';
        p.innerText = content;
        col.appendChild(p);

        return col;
    };

    // Run Asynchronous Processing
    (async () => {
        try {
            // 1. Load Tesseract.js dynamically if not present
            if (!window.Tesseract) {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // 2. Prepare canvas for OCR
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.width || originalImg.naturalWidth;
            canvas.height = originalImg.height || originalImg.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            // 3. Execute OCR
            statusDiv.innerText = 'Extracting text from image... This may take a few moments.';
            const { data: { text } } = await window.Tesseract.recognize(canvas, tesseractLang, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        statusDiv.innerText = `Extracting text... ${Math.round(m.progress * 100)}%`;
                    }
                }
            });

            const extractedText = text.trim();

            if (!extractedText) {
                statusDiv.style.backgroundColor = '#fff3e0';
                statusDiv.style.color = '#e65100';
                statusDiv.innerText = 'Analysis complete: No text found in the image.';
                
                comparisonDiv.appendChild(createCol('Original Extracted Text', 'No text found.', '#fafafa', '#eaeaea'));
                comparisonDiv.appendChild(createCol(`Translated Text`, 'N/A', '#fafafa', '#eaeaea'));
                return;
            }

            // 4. Translate via Free MyMemory API
            statusDiv.innerText = `Translating extracted text to target language (${translationLangPair})...`;
            let translatedText = '';
            
            try {
                // Ensure the string isn't excessively large to prevent basic GET request failures
                const textToTranslate = extractedText.length > 2000 
                                      ? extractedText.substring(0, 2000) + '... (truncated)' 
                                      : extractedText;
                                      
                const encodedText = encodeURIComponent(textToTranslate);
                const apiUrl = `https://api.mymemory.translated.net/get?q=${encodedText}&langpair=${translationLangPair}`;
                
                const response = await fetch(apiUrl);
                const json = await response.json();
                
                if (json.responseStatus === 200) {
                    translatedText = json.responseData.translatedText;
                } else {
                    translatedText = `Translation limited/failed: ${json.responseDetails || 'Could not translate text.'}`;
                }
            } catch (translationError) {
                translatedText = "Translation service unavailable due to network error or rate limiting. Original text extracted successfully.";
            }

            // 5. Update UI with Extracted & Translated Comparison
            statusDiv.style.display = 'none'; // Processing finished

            const originalCol = createCol(
                'Original Extracted Text', 
                extractedText, 
                '#f8f9fa', 
                '#dee2e6'
            );
            
            const translatedCol = createCol(
                `Translated Text (${translationLangPair})`, 
                translatedText, 
                '#e8f4fd', 
                '#b6d4fe'
            );

            comparisonDiv.appendChild(originalCol);
            comparisonDiv.appendChild(translatedCol);

        } catch (err) {
            statusDiv.style.backgroundColor = '#ffebee';
            statusDiv.style.color = '#b71c1c';
            statusDiv.innerText = `An error occurred: ${err.message || err}`;
        }
    })();

    // Returns immediately so it can be appended into the DOM while async tasks run in the background
    return container;
}