Image Language Identifier And Translator Tool Creator

function processImage(originalImg, targetLang = 'en', ocrLanguages = 'eng') {
    // Create main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.maxWidth = '800px';
    container.style.margin = '20px auto';
    container.style.padding = '20px';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)';

    // Title
    const title = document.createElement('h2');
    title.innerText = 'Image Language Identifier & Translator';
    title.style.marginTop = '0';
    title.style.color = '#222';
    title.style.borderBottom = '2px solid #f0f0f0';
    title.style.paddingBottom = '10px';
    container.appendChild(title);

    // Image preview canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    ctx.drawImage(originalImg, 0, 0);

    // Style canvas for display (prevent it from being too huge visually)
    canvas.style.display = 'block';
    canvas.style.maxWidth = '100%';
    canvas.style.maxHeight = '300px';
    canvas.style.margin = '10px 0';
    canvas.style.objectFit = 'contain';
    canvas.style.backgroundColor = '#f9f9f9';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '8px';
    container.appendChild(canvas);

    // Status indicator
    const statusBox = document.createElement('div');
    statusBox.style.padding = '12px';
    statusBox.style.marginTop = '15px';
    statusBox.style.backgroundColor = '#eef6ff';
    statusBox.style.borderLeft = '4px solid #3b82f6';
    statusBox.style.color = '#1e3a8a';
    statusBox.style.fontWeight = '500';
    statusBox.style.borderRadius = '4px';
    statusBox.innerText = 'Initializing Text Recognition (OCR)...';
    container.appendChild(statusBox);

    // Wrapping async process inside an IIFE so we can return the container immediately
    (async () => {
        try {
            // 1. Load OCR Engine dynamically (Tesseract.js)
            if (typeof window.Tesseract === 'undefined') {
                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 OCR Library.'));
                    document.head.appendChild(script);
                });
            }

            // 2. Perform OCR (Extract Text)
            statusBox.innerText = `Analyzing image text using '${ocrLanguages}' model...`;
            const result = await window.Tesseract.recognize(canvas, ocrLanguages, {
                logger: m => {
                    if (m.status === 'recognizing text') {
                        statusBox.innerText = `Extracting Text... ${Math.round(m.progress * 100)}%`;
                    }
                }
            });

            const text = result.data.text.trim();
            if (!text) {
                statusBox.style.backgroundColor = '#fff0f0';
                statusBox.style.borderLeftColor = '#ef4444';
                statusBox.style.color = '#7f1d1d';
                statusBox.innerText = 'Analysis Complete: No actionable text was found in the image.';
                return;
            }

            statusBox.innerText = 'Text Extracted! Identifying language and translating...';

            // To avoid URI Too Long block on free GET API, truncate strings just in case
            let textToTranslate = text;
            let truncatedWarning = '';
            if (textToTranslate.length > 1500) {
                textToTranslate = textToTranslate.substring(0, 1500) + '...';
                truncatedWarning = '\n\n[Note: Text exceeded processing limits and was truncated.]';
            }

            // 3. Translate and Auto-Identify source language (Free Google Translate endpoint)
            const apiUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodeURIComponent(textToTranslate)}`;
            
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error('Translation API request failed.');
            }
            
            const data = await response.json();
            
            // data[0] contains array of sentences, index 0 of each sub-array is the translated part
            const translatedText = data[0].map(item => item[0]).join('') + truncatedWarning;
            
            // data[2] contains the detected source language code
            const detectedLangCode = data[2]; 
            
            // Convert language code to readable name using built-in Intl API
            const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
            let detectedLangName = detectedLangCode;
            try {
                detectedLangName = languageNames.of(detectedLangCode);
            } catch (e) {
                // Formatting might fail on unknown codes, gracefully fallback
            }

            // 4. Render Layout for Final Output
            statusBox.style.display = 'none';

            const resultsContainer = document.createElement('div');
            resultsContainer.style.display = 'grid';
            resultsContainer.style.gridTemplateColumns = '1fr';
            resultsContainer.style.gap = '16px';
            resultsContainer.style.marginTop = '20px';

            const createTextBox = (headerTitle, contentText, tagType, tagText, bgColor) => {
                const box = document.createElement('div');
                box.style.backgroundColor = bgColor;
                box.style.border = '1px solid #d1d5db';
                box.style.borderRadius = '8px';
                box.style.padding = '16px';
                
                const header = document.createElement('div');
                header.style.display = 'flex';
                header.style.justifyContent = 'space-between';
                header.style.alignItems = 'center';
                header.style.marginBottom = '12px';
                header.style.borderBottom = '1px solid #e5e7eb';
                header.style.paddingBottom = '8px';
                
                const boxLabel = document.createElement('strong');
                boxLabel.style.color = '#374151';
                boxLabel.innerText = headerTitle;
                
                const tag = document.createElement('span');
                tag.style.backgroundColor = tagType === 'primary' ? '#dbe1ff' : '#dcfce7';
                tag.style.color = tagType === 'primary' ? '#1d4ed8' : '#15803d';
                tag.style.padding = '4px 8px';
                tag.style.borderRadius = '9999px';
                tag.style.fontSize = '0.75rem';
                tag.style.fontWeight = 'bold';
                tag.innerText = tagText;

                header.appendChild(boxLabel);
                header.appendChild(tag);
                box.appendChild(header);

                const pre = document.createElement('pre');
                pre.style.margin = '0';
                pre.style.whiteSpace = 'pre-wrap';
                pre.style.wordBreak = 'break-word';
                pre.style.color = '#1f2937';
                pre.style.fontFamily = 'inherit';
                pre.style.lineHeight = '1.5';
                pre.innerText = contentText;
                box.appendChild(pre);

                return box;
            };

            const sourceBox = createTextBox('Identified Original Text', text, 'primary', `Detected: ${detectedLangName} (${detectedLangCode})`, '#f9fafb');
            const translationBox = createTextBox('Translation Result', translatedText, 'success', `Target: ${languageNames.of(targetLang)} (${targetLang})`, '#f0fdf4');

            resultsContainer.appendChild(sourceBox);
            resultsContainer.appendChild(translationBox);
            
            container.appendChild(resultsContainer);

        } catch (err) {
            console.error(err);
            statusBox.style.backgroundColor = '#fff0f0';
            statusBox.style.borderLeftColor = '#ef4444';
            statusBox.style.color = '#7f1d1d';
            statusBox.innerText = 'An error occurred during processing: ' + err.message;
        }
    })();

    return container;
}