Image World Languages Translator Identifier

async function processImage(originalImg, ocrLanguages = 'eng+rus+spa+fra+deu', targetLanguage = 'en') {
    // Create the main container for the tool UI
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, Helvetica, sans-serif';
    container.style.maxWidth = '600px';
    container.style.margin = '20px auto';
    container.style.padding = '25px';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    container.style.borderRadius = '10px';
    container.style.backgroundColor = '#fdfdfd';
    container.style.color = '#333';

    // Title
    const title = document.createElement('h2');
    title.innerText = 'World Languages Translator & Identifier';
    title.style.marginTop = '0';
    title.style.marginBottom = '20px';
    title.style.textAlign = 'center';
    title.style.color = '#2c3e50';
    container.appendChild(title);

    // Canvas wrapper to display original image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const MAX_WIDTH = 450;
    const scale = Math.min(1, MAX_WIDTH / originalImg.width);
    canvas.width = originalImg.width * scale;
    canvas.height = originalImg.height * scale;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    const canvasWrapper = document.createElement('div');
    canvasWrapper.style.textAlign = 'center';
    canvasWrapper.style.marginBottom = '20px';
    canvasWrapper.style.backgroundColor = '#eee';
    canvasWrapper.style.padding = '10px';
    canvasWrapper.style.borderRadius = '5px';
    canvasWrapper.appendChild(canvas);
    container.appendChild(canvasWrapper);

    // Status label for progress updates
    const statusLabel = document.createElement('div');
    statusLabel.innerText = 'Initializing Optical Character Recognition (OCR)...';
    statusLabel.style.fontWeight = 'bold';
    statusLabel.style.color = '#e67e22';
    statusLabel.style.marginBottom = '20px';
    statusLabel.style.textAlign = 'center';
    container.appendChild(statusLabel);

    // Results container (hidden until loading finishes)
    const resultBox = document.createElement('div');
    resultBox.style.display = 'none';
    resultBox.style.flexDirection = 'column';
    resultBox.style.gap = '15px';
    container.appendChild(resultBox);

    // Helper to create content sections
    const createSection = (titleText, bgColor) => {
        const wrapper = document.createElement('div');
        const heading = document.createElement('strong');
        heading.innerText = titleText;
        heading.style.display = 'block';
        heading.style.marginBottom = '5px';
        heading.style.color = '#34495e';
        
        const content = document.createElement('div');
        content.style.padding = '15px';
        content.style.backgroundColor = bgColor;
        content.style.border = '1px solid #dcdde1';
        content.style.borderRadius = '5px';
        content.style.whiteSpace = 'pre-wrap';
        content.style.lineHeight = '1.5';
        content.style.wordBreak = 'break-word';
        
        wrapper.appendChild(heading);
        wrapper.appendChild(content);
        return { wrapper, content };
    };

    const extractedSection = createSection('Extracted Original Text:', '#ffffff');
    const languageSection = createSection('Detected Language:', '#f0f3f4');
    const translatedSection = createSection(`Translated Text (${targetLanguage.toUpperCase()}):`, '#f4f6f7');

    resultBox.appendChild(extractedSection.wrapper);
    resultBox.appendChild(languageSection.wrapper);
    resultBox.appendChild(translatedSection.wrapper);

    // Extensive ISO 639-1 Language Code map for readable display
    const langMap = {
        "af": "Afrikaans", "sq": "Albanian", "ar": "Arabic", "hy": "Armenian", "az": "Azerbaijani",
        "eu": "Basque", "be": "Belarusian", "bn": "Bengali", "bg": "Bulgarian", "ca": "Catalan",
        "zh-CN": "Chinese (Simplified)", "zh-TW": "Chinese (Traditional)", "hr": "Croatian", 
        "cs": "Czech", "da": "Danish", "nl": "Dutch", "en": "English", "et": "Estonian", 
        "tl": "Filipino", "fi": "Finnish", "fr": "French", "gl": "Galician", "ka": "Georgian",
        "de": "German", "el": "Greek", "gu": "Gujarati", "ha": "Hausa", "iw": "Hebrew", "he": "Hebrew",
        "hi": "Hindi", "hu": "Hungarian", "is": "Icelandic", "id": "Indonesian", "ga": "Irish", 
        "it": "Italian", "ja": "Japanese", "ko": "Korean", "la": "Latin", "lv": "Latvian", 
        "lt": "Lithuanian", "ms": "Malay", "mt": "Maltese", "no": "Norwegian", "fa": "Persian", 
        "pl": "Polish", "pt": "Portuguese", "ro": "Romanian", "ru": "Russian", "sr": "Serbian", 
        "sk": "Slovak", "sl": "Slovenian", "es": "Spanish", "sw": "Swahili", "sv": "Swedish", 
        "ta": "Tamil", "th": "Thai", "tr": "Turkish", "uk": "Ukrainian", "ur": "Urdu", "vi": "Vietnamese", "cy": "Welsh"
    };

    // Actual processing logic encapsuled in an async function
    const performIdentificationAndTranslation = async () => {
        try {
            // 1. Dynamically load Tesseract.js if not available
            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(new Error('Failed to load Tesseract.js'));
                    document.head.appendChild(script);
                });
            }

            statusLabel.innerText = 'Extracting text from image... (This may take a moment to download language data)';
            
            // 2. Perform OCR using Tesseract
            const { data: { text } } = await Tesseract.recognize(originalImg, ocrLanguages);
            const cleanText = text.trim();

            if (!cleanText) {
                statusLabel.innerText = 'No readable text was detected in the given image.';
                statusLabel.style.color = '#c0392b';
                return;
            }

            extractedSection.content.innerText = cleanText;
            statusLabel.innerText = 'Translating and Identifying language structure...';

            // 3. Perform Language Detection and Translation via open Google Translate endpoint
            const translateUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLanguage}&dt=t&q=${encodeURIComponent(cleanText)}`;
            
            const response = await fetch(translateUrl);
            const json = await response.json();
            
            // Extract Translation Sequence
            let translatedText = '';
            if (json[0] && Array.isArray(json[0])) {
                translatedText = json[0].map(segment => segment[0]).join('');
            }
            
            // Extract Detected Language ID
            let detectedCode = json[2];
            let detectedLang = langMap[detectedCode] ? `${langMap[detectedCode]} (${detectedCode.toUpperCase()})` : (detectedCode || 'Unknown');

            languageSection.content.innerText = detectedLang;
            translatedSection.content.innerText = translatedText || 'Translation unavailable.';
            
            // 4. Update UI to present results
            statusLabel.innerText = 'Process Complete!';
            statusLabel.style.color = '#27ae60';
            resultBox.style.display = 'flex';

        } catch (err) {
            statusLabel.innerText = 'Error occurred: ' + err.message;
            statusLabel.style.color = '#c0392b';
        }
    };

    // Kickstart the translation process
    performIdentificationAndTranslation();

    return container;
}