Photo To Text Translator

async function processImage(originalImg, language = 'eng') {
    // Create the main container
    const wrapper = document.createElement('div');
    wrapper.style.display = 'flex';
    wrapper.style.flexDirection = 'column';
    wrapper.style.gap = '12px';
    wrapper.style.width = '100%';
    wrapper.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    wrapper.style.boxSizing = 'border-box';

    // Create the status label
    const statusLabel = document.createElement('div');
    statusLabel.style.fontSize = '14px';
    statusLabel.style.fontWeight = '500';
    statusLabel.style.color = '#0284c7';
    statusLabel.style.padding = '10px 14px';
    statusLabel.style.backgroundColor = '#e0f2fe';
    statusLabel.style.border = '1px solid #bae6fd';
    statusLabel.style.borderRadius = '6px';
    statusLabel.textContent = 'Initializing OCR Engine...';
    statusLabel.style.transition = 'all 0.3s ease';

    // Create the output text area
    const textArea = document.createElement('textarea');
    textArea.style.width = '100%';
    textArea.style.minHeight = '250px';
    textArea.style.padding = '16px';
    textArea.style.border = '1px solid #cbd5e1';
    textArea.style.borderRadius = '6px';
    textArea.style.fontSize = '15px';
    textArea.style.lineHeight = '1.6';
    textArea.style.resize = 'vertical';
    textArea.style.backgroundColor = '#f1f5f9';
    textArea.style.boxSizing = 'border-box';
    textArea.style.outline = 'none';
    textArea.style.color = '#0f172a';
    textArea.placeholder = 'Extracted text will appear here...';
    textArea.readOnly = true;

    // Append children to wrapper
    wrapper.appendChild(statusLabel);
    wrapper.appendChild(textArea);

    // Dynamically load Tesseract.js if not already present
    if (!window.Tesseract) {
        try {
            let script = document.querySelector('script[src*="tesseract.min.js"]');
            if (!script) {
                script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
                script.crossOrigin = 'anonymous';
                document.head.appendChild(script);
            }
            
            await new Promise((resolve, reject) => {
                if (window.Tesseract) {
                    resolve();
                } else {
                    script.addEventListener('load', resolve);
                    script.addEventListener('error', () => reject(new Error('Network error loading Tesseract.js')));
                }
            });
        } catch (err) {
            statusLabel.textContent = 'Failed to load OCR Library';
            statusLabel.style.color = '#991b1b';
            statusLabel.style.backgroundColor = '#fee2e2';
            statusLabel.style.borderColor = '#fecaca';
            return wrapper;
        }
    }

    // Run Tesseract recognition asynchronously so the wrapper is returned without hanging
    (async () => {
        try {
            const result = await window.Tesseract.recognize(
                originalImg,
                language,
                {
                    logger: m => {
                        // Monitor progress and inform the user
                        if (m.status === 'recognizing text') {
                            const progress = Math.round(m.progress * 100);
                            statusLabel.textContent = `Extracting Text... ${progress}%`;
                        } else {
                            const statusText = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                            statusLabel.textContent = `${statusText}...`;
                        }
                    }
                }
            );

            // Update UI upon successful text extraction
            statusLabel.textContent = 'Extraction Complete';
            statusLabel.style.color = '#166534';
            statusLabel.style.backgroundColor = '#dcfce3';
            statusLabel.style.borderColor = '#bbf7d0';
            
            textArea.readOnly = false;
            textArea.style.backgroundColor = '#ffffff';
            
            const extractedText = result.data.text.trim();
            if (extractedText.length === 0) {
                textArea.value = '(No text detected in the image)';
                textArea.style.color = '#64748b';
            } else {
                textArea.value = extractedText;
            }
        } catch (error) {
            // Handle any OCR errors
            statusLabel.textContent = 'Error during text extraction';
            statusLabel.style.color = '#991b1b';
            statusLabel.style.backgroundColor = '#fee2e2';
            statusLabel.style.borderColor = '#fecaca';
            textArea.value = `Error Details: ${error.message}`;
        }
    })();

    // Immediately returns the UI element which updates live
    return wrapper;
}