Image Text Extraction Tool

// Helper function to dynamically load Tesseract.js and ensure it's loaded only once.
async function ensureTesseractLoaded() {
    // Pinning to a specific version of Tesseract.js v5 for stability.
    const TESSERACT_CDN_URL = 'https://cdn.jsdelivr.net/npm/tesseract.js@5.0.5/dist/tesseract.min.js';

    if (typeof window.Tesseract === 'undefined') {
        // If Tesseract is not loaded, and no attempt to load it is in progress
        if (!window.tesseractLoadingPromise) {
            // console.log('Tesseract.js not found. Loading script from CDN...');
            window.tesseractLoadingPromise = new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = TESSERACT_CDN_URL;
                script.async = true; // Load asynchronously
                script.onload = () => {
                    // console.log('Tesseract.js script loaded successfully.');
                    // The promise resolves once Tesseract is globally available.
                    // No need to delete the promise, subsequent calls will await and then find Tesseract defined.
                    resolve();
                };
                script.onerror = (err) => {
                    // console.error('Failed to load Tesseract.js script:', err);
                    delete window.tesseractLoadingPromise; // Allow retrying if it failed
                    reject(new Error(`Failed to load Tesseract.js from ${TESSERACT_CDN_URL}. OCR functionality will not be available.`));
                };
                document.head.appendChild(script);
            });
        }
        // Wait for the loading process to complete
        await window.tesseractLoadingPromise;
    } else {
        // console.log('Tesseract.js already loaded.');
    }
}

async function processImage(originalImg, language = 'eng') {
    try {
        await ensureTesseractLoaded();
    } catch (error) {
        // console.error(error.message);
        const errorElement = document.createElement('div');
        errorElement.style.color = 'red';
        errorElement.style.padding = '10px';
        errorElement.style.border = '1px solid #ff7f7f';
        errorElement.style.backgroundColor = '#ffebeb';
        errorElement.style.fontFamily = 'sans-serif';
        errorElement.textContent = error.message;
        return errorElement;
    }

    let worker = null;

    try {
        // console.log(`Creating Tesseract worker for language: ${language}...`);
        worker = await Tesseract.createWorker(language, undefined, { // lang, oem (default), options
            logger: m => {
                // Log progress to console for developer/user feedback
                if (m.status === 'recognizing text') {
                    console.log(`OCR Progress: ${m.status} - ${(m.progress * 100).toFixed(0)}%`);
                } else if (m.status) {
                    console.log(`OCR Status: ${m.status}`);
                }
            },
            // Optional: Specify paths if not using default CDN for language data/core
            // langPath: 'https://tessdata.projectnaptha.com/4.0.0_best', // Example for specific data path
            // corePath: 'https://cdn.jsdelivr.net/npm/tesseract.js-core@version/tesseract-core.wasm.js',
        });

        // console.log('Recognizing text from image...');
        const { data: { text } } = await worker.recognize(originalImg);
        // console.log('Text recognized.');

        const outputElement = document.createElement('pre');
        // Basic styling for the output element
        outputElement.style.whiteSpace = 'pre-wrap';    // Preserve whitespace and wrap lines
        outputElement.style.wordBreak = 'break-word';   // Break long words
        outputElement.style.padding = '15px';
        outputElement.style.border = '1px solid #ddd';
        outputElement.style.borderRadius = '4px';
        outputElement.style.backgroundColor = '#f8f9fa';
        outputElement.style.fontFamily = 'monospace'; // Monospaced font for text output
        outputElement.style.fontSize = '14px';
        outputElement.style.lineHeight = '1.6';
        outputElement.style.color = '#212529'; // Dark text color

        if (text && text.trim() !== '') {
            outputElement.textContent = text;
        } else {
            outputElement.textContent = "No text found or text is not clear enough to recognize.";
            outputElement.style.color = '#6c757d'; // Muted color for "no text found" message
        }
        
        return outputElement;

    } catch (error) {
        // console.error('Error during OCR process:', error);
        const errorElement = document.createElement('div');
        errorElement.style.color = '#D8000C'; // Error text color
        errorElement.style.backgroundColor = '#FFD2D2'; // Light red background
        errorElement.style.border = '1px solid #D8000C';
        errorElement.style.padding = '10px';
        errorElement.style.borderRadius = '4px';
        errorElement.style.fontFamily = 'sans-serif';
        errorElement.style.whiteSpace = 'pre-wrap'; // Ensure error message formatting is preserved

        let detailedMessage = `OCR Error: ${error.message || 'An unknown error occurred.'}\n\n`;
        detailedMessage += `Troubleshooting tips:\n`;
        detailedMessage += `1. Language Code: Ensure '${language}' is a valid Tesseract language code (e.g., 'eng' for English, 'spa' for Spanish, 'fra' for French). Full list: https://tesseract-ocr.github.io/tessdoc/Data-Files.\n`;
        detailedMessage += `2. Network Issues: Check your internet connection. Tesseract.js may need to download language data files (~several MBs) from a CDN.\n`;
        detailedMessage += `3. Image Quality: For best results, use clear, high-resolution images with good contrast. Blurry, skewed, or very small text might not be recognized.\n`;
        detailedMessage += `4. Browser Environment: Check the browser's developer console for more specific errors. Content Security Policy (CSP), ad-blockers, or disabled WebAssembly/WebWorkers can interfere.\n`;
        
        errorElement.textContent = detailedMessage;
        return errorElement;
    } finally {
        if (worker) {
            // console.log('Terminating Tesseract worker.');
            await worker.terminate();
        }
    }
}