Image Language Code Query Tool

async function processImage(originalImg, langCode = 'eng') {
    /**
     * Dynamically loads the Tesseract.js script from a CDN.
     * Caches the promise to avoid reloading the script on subsequent calls.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadTesseractScript = () => {
        if (!window.tesseractPromise) {
            window.tesseractPromise = new Promise((resolve, reject) => {
                // If Tesseract is already available, resolve immediately.
                if (typeof Tesseract !== 'undefined') {
                    return resolve();
                }
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                script.async = true;
                document.head.appendChild(script);
                script.onload = resolve;
                script.onerror = () => {
                    console.error('Failed to load Tesseract.js from CDN.');
                    window.tesseractPromise = null; // Allow retrying on failure
                    reject(new Error('Failed to load Tesseract.js library.'));
                };
            });
        }
        return window.tesseractPromise;
    };

    // --- Main function logic starts here ---

    // 1. Create UI elements for status feedback and results.
    const container = document.createElement('div');
    container.style.fontFamily = 'sans-serif';
    container.style.textAlign = 'left';

    const statusDiv = document.createElement('div');
    statusDiv.style.marginBottom = '10px';
    statusDiv.style.color = '#333';
    statusDiv.textContent = 'Initializing...';
    container.appendChild(statusDiv);

    const resultPre = document.createElement('pre');
    resultPre.style.whiteSpace = 'pre-wrap';
    resultPre.style.wordWrap = 'break-word';
    resultPre.style.border = '1px solid #ccc';
    resultPre.style.padding = '15px';
    resultPre.style.backgroundColor = '#f9f9f9';
    resultPre.style.minHeight = '100px';
    resultPre.style.maxHeight = '400px';
    resultPre.style.overflowY = 'auto';
    resultPre.style.lineHeight = '1.5';
    resultPre.textContent = 'Awaiting OCR results...';
    container.appendChild(resultPre);

    try {
        // 2. Load the Tesseract.js script.
        statusDiv.textContent = 'Loading OCR library...';
        await loadTesseractScript();
        statusDiv.textContent = 'OCR library loaded.';

        // 3. Create a Tesseract worker. The user can pass multiple language codes
        // separated by '+' (e.g., 'eng+rus').
        statusDiv.textContent = 'Creating OCR worker...';
        const worker = await Tesseract.createWorker(langCode, 1, {
            logger: m => {
                // Provide detailed progress updates to the user.
                const statusText = m.status.replace(/_/g, ' ');
                const formattedStatus = statusText.charAt(0).toUpperCase() + statusText.slice(1);

                if (m.status === 'recognizing text') {
                    const progress = (m.progress * 100).toFixed(1);
                    statusDiv.textContent = `${formattedStatus}: ${progress}%`;
                } else {
                    statusDiv.textContent = `${formattedStatus}...`;
                }
                console.log(m); // Log full status object for debugging.
            },
        });

        // 4. Perform Optical Character Recognition on the image.
        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);

        // 5. Display the extracted text.
        statusDiv.textContent = 'OCR processing complete!';
        resultPre.textContent = text.trim() || '[No text was detected in the image]';

        // 6. Terminate the worker to release resources.
        await worker.terminate();

        // Hide the status message after a couple of seconds for a cleaner UI.
        setTimeout(() => {
            if (container.contains(statusDiv)) {
                statusDiv.style.display = 'none';
            }
        }, 2000);

    } catch (error) {
        console.error('An error occurred during the OCR process:', error);
        statusDiv.style.display = 'none'; // Hide status on error.
        resultPre.style.color = '#D8000C'; // Red text for errors.
        resultPre.style.backgroundColor = '#FFD2D2'; // Light red background.
        resultPre.textContent = `An error occurred.\n\n` +
            `Message: ${error.message}\n\n` +
            `This could be due to an invalid language code ('${langCode}') or a network issue preventing the download of language data. ` +
            `Please check your internet connection and the browser console for more details.`;
    }

    // 7. Return the self-contained container element.
    return container;
}