Image Language VS Translator

function processImage(originalImg, sourceLang = "eng", targetLang = "es") {
    // Create the main container
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.alignItems = 'stretch';
    container.style.justifyContent = 'space-between';
    container.style.gap = '20px';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.position = 'relative';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';
    container.style.padding = '20px';
    container.style.backgroundColor = '#f8f9fa';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';

    // Left Column: Original Image
    const leftCol = document.createElement('div');
    leftCol.style.flex = '1';
    leftCol.style.border = '2px dashed #bdc3c7';
    leftCol.style.borderRadius = '10px';
    leftCol.style.padding = '15px';
    leftCol.style.display = 'flex';
    leftCol.style.flexDirection = 'column';
    leftCol.style.alignItems = 'center';
    leftCol.style.backgroundColor = '#fff';

    const titleLeft = document.createElement('h3');
    titleLeft.innerText = "Original Image";
    titleLeft.style.margin = '0 0 15px 0';
    titleLeft.style.color = '#34495e';
    
    const imgCanvas = document.createElement('canvas');
    imgCanvas.width = originalImg.width;
    imgCanvas.height = originalImg.height;
    imgCanvas.style.maxWidth = '100%';
    imgCanvas.style.height = 'auto';
    imgCanvas.style.borderRadius = '6px';
    const ctx = imgCanvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    leftCol.appendChild(titleLeft);
    leftCol.appendChild(imgCanvas);

    // Right Column: Translated Text
    const rightCol = document.createElement('div');
    rightCol.style.flex = '1';
    rightCol.style.border = '2px solid #3498db';
    rightCol.style.borderRadius = '10px';
    rightCol.style.padding = '15px';
    rightCol.style.display = 'flex';
    rightCol.style.flexDirection = 'column';
    rightCol.style.backgroundColor = '#ecf0f1';
    rightCol.style.color = '#2c3e50';

    const titleRight = document.createElement('h3');
    titleRight.innerText = `Translated (${targetLang.toUpperCase()})`;
    titleRight.style.margin = '0 0 15px 0';
    titleRight.style.color = '#2980b9';

    const textContent = document.createElement('div');
    textContent.innerText = "Initializing translator engine...\nPlease wait.";
    textContent.style.whiteSpace = 'pre-wrap';
    textContent.style.overflowY = 'auto';
    textContent.style.flex = '1';
    textContent.style.fontSize = '16px';
    textContent.style.lineHeight = '1.6';
    
    rightCol.appendChild(titleRight);
    rightCol.appendChild(textContent);

    // "VS" Badge placed in the middle
    const vsBadge = document.createElement('div');
    vsBadge.innerText = "VS";
    vsBadge.style.position = 'absolute';
    vsBadge.style.left = '50%';
    vsBadge.style.top = '50%';
    vsBadge.style.transform = 'translate(-50%, -50%)';
    vsBadge.style.backgroundColor = '#e74c3c';
    vsBadge.style.color = '#fff';
    vsBadge.style.width = '56px';
    vsBadge.style.height = '56px';
    vsBadge.style.display = 'flex';
    vsBadge.style.alignItems = 'center';
    vsBadge.style.justifyContent = 'center';
    vsBadge.style.borderRadius = '50%';
    vsBadge.style.fontWeight = 'bold';
    vsBadge.style.fontSize = '22px';
    vsBadge.style.boxShadow = '0 4px 8px rgba(231,76,60,0.4)';
    vsBadge.style.zIndex = '10';

    // Append to container
    container.appendChild(leftCol);
    container.appendChild(rightCol);
    container.appendChild(vsBadge);

    // Run Asynchronous OCR and Translation operations without blocking the return
    (async () => {
        try {
            // 1. Dynamically load Tesseract.js if not available
            if (!window.Tesseract) {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                document.head.appendChild(script);
                await new Promise((resolve, reject) => {
                    script.onload = resolve;
                    script.onerror = () => reject(new Error("Failed to load Tesseract.js"));
                });
            }
            
            textContent.innerText = `Extracting text from image (${sourceLang})...`;
            
            // 2. Extract Text via OCR
            const worker = await window.Tesseract.createWorker(sourceLang);
            const { data: { text } } = await worker.recognize(imgCanvas);
            await worker.terminate();

            const extractedText = text.trim();
            
            if (!extractedText) {
                textContent.innerText = "No readable text found in the original image.";
                return;
            }

            textContent.innerText = `Translating to ${targetLang}...\n\nOriginal Extracted text:\n"${extractedText.substring(0, 50)}${extractedText.length > 50 ? '...' : ''}"`;

            // Limit text size slightly for the free API to prevent URI Too Long errors
            let textToTranslate = extractedText;
            if (textToTranslate.length > 500) {
                textToTranslate = textToTranslate.substring(0, 500); 
            }

            // 3. Fetch Translation from Public MyMemory Translate API
            const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(textToTranslate)}&langpair=Autodetect|${encodeURIComponent(targetLang)}`;
            const response = await fetch(url);
            const data = await response.json();

            // 4. Update the layout with Final Translated Data
            if (data && data.responseData && data.responseData.translatedText) {
                textContent.innerHTML = `<strong>Translated Text:</strong><br><br>${data.responseData.translatedText}`;
                
                // Show caution if text was truncated
                if (extractedText.length > 500) {
                    textContent.innerHTML += `<br><br><small style="color:red;">(Note: Large block of text was truncated to 500 chars to meet free translation API limitations.)</small>`;
                }
            } else {
                textContent.innerHTML = `<strong>Error:</strong><br>Translation API failed or rate limit exceeded.<br><br><strong>Original Extracted Text Context:</strong><br>${extractedText}`;
            }

        } catch (err) {
            textContent.innerHTML = `<span style="color: #c0392b;">An error occurred: ${err.message}</span>`;
        }
    })();

    // Synchronous return of the element so the page can render the pending UI instantly
    return container;
}