Image Text Scanner Language Identifier And Translator Tool

function processImage(originalImg, targetLanguage = "es", ocrLanguage = "eng") {
    // Create the main wrapper container to hold our UI
    const wrapper = document.createElement('div');
    wrapper.style.fontFamily = "system-ui, -apple-system, sans-serif";
    wrapper.style.padding = "20px";
    wrapper.style.background = "#ffffff";
    wrapper.style.borderRadius = "8px";
    wrapper.style.boxShadow = "0 4px 10px rgba(0,0,0,0.1)";
    wrapper.style.maxWidth = "600px";
    wrapper.style.margin = "0 auto";
    wrapper.style.wordBreak = "break-word";
    wrapper.style.boxSizing = "border-box";

    // Build the header
    const header = document.createElement('h3');
    header.textContent = "Image Scanner, Language Identifier & Translator";
    header.style.marginTop = "0";
    header.style.color = "#333";
    header.style.borderBottom = "2px solid #007bff";
    header.style.paddingBottom = "10px";
    wrapper.appendChild(header);

    // Build Image Preview
    const imgPreview = document.createElement('img');
    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);
    imgPreview.src = canvas.toDataURL();
    imgPreview.style.maxWidth = "100%";
    imgPreview.style.maxHeight = "250px";
    imgPreview.style.display = "block";
    imgPreview.style.margin = "15px auto";
    imgPreview.style.borderRadius = "4px";
    wrapper.appendChild(imgPreview);

    // Initial Loading State Container
    const statusAndResultDiv = document.createElement('div');
    statusAndResultDiv.innerHTML = `
        <div style="text-align:center; padding: 20px;">
            <div style="display:inline-block; width:40px; height:40px; border:4px solid #f3f3f3; border-top:4px solid #007bff; border-radius:50%; animation: spinImageScanner 1s linear infinite;"></div>
            <p style="color:#555; margin-top:15px; font-weight: 500;" id="status-text">Fetching Text Extraction Engine...</p>
        </div>
        <style>@keyframes spinImageScanner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
    `;
    wrapper.appendChild(statusAndResultDiv);

    // Execute heavy tasks asynchronously to instantly return the HTML component UI
    (async () => {
        try {
            const updateStatus = (text) => {
                const el = statusAndResultDiv.querySelector('#status-text');
                if (el) el.textContent = text;
            };

            // 1. Load Tesseract.js if not available
            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;
                    document.head.appendChild(script);
                });
            }

            // 2. Perform OCR
            updateStatus(`Scanning image text (${ocrLanguage})...`);
            const worker = await Tesseract.createWorker(ocrLanguage);
            const { data: { text } } = await worker.recognize(originalImg);
            await worker.terminate();

            const cleanText = text.trim();
            if (!cleanText) {
                statusAndResultDiv.innerHTML = `<p style="color:#d9534f; font-weight:bold; text-align:center;">No text could be identified in the given image.</p>`;
                return;
            }

            // 3. Identify and Translate via Free MyMemory API
            updateStatus("Identifying Language & Translating...");
            let translatedText = "";
            let detectedLang = "Language Detected Automatically";
            let translationError = false;

            try {
                // Free API generally errors on too long URIs, capping at 500 characters
                const textToTranslate = cleanText.substring(0, 500);
                const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(textToTranslate)}&langpair=Autodetect|${targetLanguage}`;
                
                const res = await fetch(url);
                if (!res.ok) throw new Error("Translation API encountered an error.");
                const json = await res.json();
                
                if (json.responseData && json.responseData.translatedText) {
                    translatedText = json.responseData.translatedText;
                    
                    // Attempt to extract identified source language
                    if (json.matches && json.matches[0] && json.matches[0].source) {
                        detectedLang = json.matches[0].source;
                    }
                } else {
                    throw new Error("Invalid translation response format.");
                }
            } catch (err) {
                console.error("Translation Api Error:", err);
                translationError = true;
            }

            // 4. Render Final Results
            const safeTextHtml = cleanText.replace(/</g, "&lt;");
            const safeTranslatedHtml = translatedText.replace(/</g, "&lt;");
            
            let finalHTML = `
                <div style="margin-bottom: 20px;">
                    <strong style="color:#333; display:block; margin-bottom:8px;">Extracted Text:</strong>
                    <div style="background:#f8f9fa; padding:15px; border:1px solid #dee2e6; border-radius:6px; font-family:monospace; white-space:pre-wrap; max-height: 200px; overflow-y: auto;">${safeTextHtml}</div>
                </div>
            `;

            if (!translationError) {
                const truncationNote = cleanText.length > 500 ? `<div style="margin-top:10px; color:#856404; font-size:12px;">*Note: Text was truncated to 500 characters due to translation API limits.</div>` : "";
                
                finalHTML += `
                    <div style="margin-bottom: 20px; display:flex; align-items:center; gap: 10px;">
                        <strong style="color:#333;">Detected Language:</strong>
                        <span style="background:#d4edda; color:#155724; padding:5px 12px; border:1px solid #c3e6cb; border-radius:20px; font-weight:600; font-size:14px;">${detectedLang}</span>
                    </div>
                    <div style="margin-bottom: 10px;">
                        <strong style="color:#333; display:block; margin-bottom:8px;">Translated Result (${targetLanguage}):</strong>
                        <div style="background:#e2e3e5; padding:15px; border:1px solid #d6d8db; border-radius:6px; white-space:pre-wrap;">${safeTranslatedHtml}${truncationNote}</div>
                    </div>
                `;
            } else {
                finalHTML += `
                    <div style="margin-bottom: 15px; padding:15px; background:#f8d7da; border:1px solid #f5c6cb; border-radius:6px;">
                        <strong style="color:#721c24; display:block; margin-bottom:10px;">Translation limit exceeded or API error occurred.</strong>
                        <a href="https://translate.google.com/?sl=auto&tl=${targetLanguage}&text=${encodeURIComponent(cleanText)}&op=translate" target="_blank" style="background:#007bff; color:#fff; padding:10px 18px; text-decoration:none; border-radius:6px; display:inline-block; font-weight:500;">Open globally in Google Translate</a>
                    </div>
                `;
            }

            statusAndResultDiv.innerHTML = finalHTML;

        } catch (error) {
            console.error("Image Processing Error:", error);
            statusAndResultDiv.innerHTML = `
                <div style="background:#f8d7da; padding:15px; border:1px solid #f5c6cb; border-radius:6px; color:#721c24;">
                    <strong>Process Interrupted:</strong> ${error.message}
                </div>`;
        }
    })();

    return wrapper;
}