Image To Target Language Dubbing Text Translator

function processImage(originalImg, targetLangCode = "es", sourceLangOcrCode = "eng", sourceLangCode = "en") {
    // 1. Create a container element to be returned synchronously 
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.padding = '20px';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f8f9fa';
    container.style.border = '1px solid #dee2e6';
    container.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.lineHeight = '1.6';

    // Set initial loading state
    container.innerHTML = `
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 10px;">
            <div style="font-size: 28px; margin-bottom: 15px; animation: spin 2s linear infinite;">⏳</div>
            <div style="font-weight: 500; color: #495057; font-size: 16px;" id="translator-status">Loading OCR engine...</div>
            <div style="font-size: 13px; color: #6c757d; margin-top: 8px;">Please wait while text is extracted and translated.</div>
        </div>
    `;

    // 2. Perform async work in the background so we can return the element immediately
    const runTranslationWorkflow = async () => {
        try {
            const statusEl = container.querySelector('#translator-status');

            // --- Step A: Dynamically load Tesseract.js (OCR Engine) ---
            if (typeof 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 Tesseract.js OCR library.'));
                    document.head.appendChild(script);
                });
            }

            // --- Step B: Run OCR Extraction ---
            if (statusEl) statusEl.textContent = 'Extracting text from image...';
            
            // Create a Tesseract worker with the specified source language code (e.g. "eng", "spa", "fra")
            const worker = await Tesseract.createWorker(sourceLangOcrCode);
            
            // Recognize text directly from the Image object
            const { data: { text } } = await worker.recognize(originalImg);
            await worker.terminate();

            const extractedText = text.trim();
            
            // Handle edge case where no text is found
            if (!extractedText) {
                container.innerHTML = `
                    <div style="padding: 20px; text-align: center; color: #856404; background-color: #fff3cd; border: 1px solid #ffeeba; border-radius: 4px;">
                        <strong>No Text Found:</strong> Could not detect any readable text in the provided image.
                    </div>
                `;
                return;
            }

            // --- Step C: Translate the Extracted Text ---
            if (statusEl) statusEl.textContent = 'Translating dubbing text...';
            
            // Limit request length to ensure free translation API doesn't throw a URI Too Long error
            const maxLength = 1000;
            let textToTranslate = extractedText;
            let truncatedWarning = "";
            
            if (textToTranslate.length > maxLength) {
                textToTranslate = textToTranslate.substring(0, maxLength);
                truncatedWarning = `
                    <div style="font-size: 12px; color: #e53e3e; margin-bottom: 12px; font-style: italic;">
                        * Note: Text was truncated to ${maxLength} characters before translation.
                    </div>
                `;
            }

            // Use the free MyMemory translation API (no API key required)
            // Language Pair Format: sourceLanguageCode|targetLanguageCode (e.g., en|es)
            const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(textToTranslate)}&langpair=${sourceLangCode}|${targetLangCode}`;
            
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error('Translation API network error.');
            }
            
            const data = await response.json();
            
            let translatedText = "Translation failed or rate limit reached.";
            if (data && data.responseData && data.responseData.translatedText) {
                translatedText = data.responseData.translatedText;
            }

            // --- Step D: Construct the Final User Interface ---
            container.innerHTML = `
                <div style="margin-bottom: 20px;">
                    <h4 style="margin: 0 0 8px 0; color: #495057; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;">Original Extracted Text (${sourceLangOcrCode})</h4>
                    <div style="background: #ffffff; padding: 16px; border: 1px solid #ced4da; border-radius: 6px; white-space: pre-wrap; font-size: 15px; color: #212529; overflow-wrap: break-word;">${extractedText}</div>
                </div>
                ${truncatedWarning}
                <div>
                    <h4 style="margin: 0 0 8px 0; color: #0056b3; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;">Dubbing Target Translation (${targetLangCode})</h4>
                    <div style="background: #e6f2ff; padding: 16px; border: 1px solid #b8daff; border-radius: 6px; white-space: pre-wrap; font-size: 17px; font-weight: 500; color: #004085; overflow-wrap: break-word;">${translatedText}</div>
                </div>
            `;

        } catch (error) {
            // Handle failures gracefully
            container.innerHTML = `
                <div style="padding: 20px; text-align: center; color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
                    <strong>An error occurred:</strong> ${error.message}
                </div>
            `;
        }
    };

    // Begin execution without blocking the main thread
    runTranslationWorkflow();

    // 3. Return the DOM container so it can be appended via .html() right away
    return container;
}