Image To Text Generator Tool

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

    // Status banner to display loading and progress states
    const statusBanner = document.createElement('div');
    statusBanner.style.padding = '12px 16px';
    statusBanner.style.borderRadius = '6px';
    statusBanner.style.backgroundColor = '#e0f2fe';
    statusBanner.style.color = '#0284c7';
    statusBanner.style.fontWeight = '600';
    statusBanner.style.textAlign = 'center';
    statusBanner.style.transition = 'all 0.3s ease';
    statusBanner.style.fontSize = '15px';
    statusBanner.textContent = 'Initializing Image-to-Text OCR Engine...';
    
    // Text area to hold the extracted text
    const textArea = document.createElement('textarea');
    textArea.style.width = '100%';
    textArea.style.minHeight = '300px';
    textArea.style.padding = '15px';
    textArea.style.borderRadius = '6px';
    textArea.style.border = '1px solid #cbd5e1';
    textArea.style.fontSize = '14px';
    textArea.style.lineHeight = '1.6';
    textArea.style.resize = 'vertical';
    textArea.style.boxSizing = 'border-box';
    textArea.style.fontFamily = '"Courier New", Courier, monospace';
    textArea.style.backgroundColor = '#f8fafc';
    textArea.placeholder = 'Extracted text will appear here...';
    textArea.readOnly = true;

    // Action buttons container
    const btnContainer = document.createElement('div');
    btnContainer.style.display = 'flex';
    btnContainer.style.gap = '10px';

    // Copy to clipboard button
    const copyBtn = document.createElement('button');
    copyBtn.textContent = 'Copy to Clipboard';
    copyBtn.style.padding = '10px 18px';
    copyBtn.style.border = 'none';
    copyBtn.style.borderRadius = '6px';
    copyBtn.style.backgroundColor = '#2563eb';
    copyBtn.style.color = '#ffffff';
    copyBtn.style.cursor = 'pointer';
    copyBtn.style.fontWeight = '600';
    copyBtn.style.fontSize = '14px';
    copyBtn.style.display = 'none';
    copyBtn.style.transition = 'background-color 0.2s';
    
    copyBtn.onmouseover = () => {
        if (copyBtn.textContent !== 'Copied!') copyBtn.style.backgroundColor = '#1d4ed8';
    };
    copyBtn.onmouseout = () => {
        if (copyBtn.textContent !== 'Copied!') copyBtn.style.backgroundColor = '#2563eb';
    };

    copyBtn.onclick = () => {
        navigator.clipboard.writeText(textArea.value).then(() => {
            const originalText = copyBtn.textContent;
            copyBtn.textContent = 'Copied!';
            copyBtn.style.backgroundColor = '#16a34a';
            setTimeout(() => {
                copyBtn.textContent = originalText;
                copyBtn.style.backgroundColor = '#2563eb';
            }, 2000);
        });
    };

    btnContainer.appendChild(copyBtn);
    container.appendChild(statusBanner);
    container.appendChild(textArea);
    container.appendChild(btnContainer);

    // Asynchronously load Tesseract and process the image
    const runOCR = async () => {
        try {
            // Dynamically load Tesseract.js if not available
            if (typeof window.Tesseract === 'undefined') {
                statusBanner.textContent = 'Loading Tesseract.js resources...';
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = () => reject(new Error('Failed to load Tesseract.js. Please check your internet connection.'));
                    document.head.appendChild(script);
                });
            }

            // Draw image on canvas to fetch pixel data reliably
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.width;
            canvas.height = originalImg.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            // Run Tesseract
            const { data: { text } } = await window.Tesseract.recognize(
                canvas,
                language,
                {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            const progress = Math.round(m.progress * 100);
                            statusBanner.textContent = `Analyzing image & extracting text... ${progress}%`;
                            statusBanner.style.backgroundColor = '#fef08a';
                            statusBanner.style.color = '#854d0e';
                        } else {
                            const statusTxt = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                            statusBanner.textContent = `${statusTxt}...`;
                        }
                    }
                }
            );

            // Populate extracted text
            textArea.value = text;
            textArea.readOnly = false;
            textArea.style.backgroundColor = '#ffffff';
            
            // Completion Status
            if (text.trim().length > 0) {
                statusBanner.textContent = 'Text extracted successfully!';
                statusBanner.style.backgroundColor = '#dcfce7';
                statusBanner.style.color = '#166534';
                copyBtn.style.display = 'block';
            } else {
                statusBanner.textContent = 'No text could be found in the image.';
                statusBanner.style.backgroundColor = '#fee2e2';
                statusBanner.style.color = '#991b1b';
            }

        } catch (err) {
            console.error('OCR Error:', err);
            statusBanner.textContent = 'An error occurred during text extraction.';
            statusBanner.style.backgroundColor = '#fee2e2';
            statusBanner.style.color = '#991b1b';
            textArea.value = err.message || err.toString();
        }
    };

    // Trigger OCR immediately but don't await, permitting the container element to render & dynamically update
    runOCR();

    return container;
}