Image Text Counter From Photo

/**
 * Counts the characters, words, and lines of text from an image using OCR.
 * This function dynamically loads the Tesseract.js library to perform Optical Character Recognition.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {string} lang The language code for the OCR engine (e.g., 'eng' for English, 'rus' for Russian, 'deu' for German). A full list can be found in the Tesseract.js documentation.
 * @returns {Promise<HTMLDivElement>} A promise that resolves with a div element containing the text counts and the recognized text.
 */
async function processImage(originalImg, lang = 'eng') {
    // Function to dynamically load the Tesseract.js script if it's not already loaded
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                return resolve();
            }
            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 library from CDN.'));
            document.head.appendChild(script);
        });
    };

    // Create a container for the output
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.backgroundColor = '#f9f9f9';
    resultContainer.style.maxWidth = '600px';
    resultContainer.style.textAlign = 'left';

    const statusP = document.createElement('p');
    statusP.textContent = 'Initializing OCR engine...';
    resultContainer.appendChild(statusP);

    let worker = null;
    try {
        // Load the Tesseract.js library
        await loadTesseract();

        // Create a Tesseract worker and provide progress updates
        worker = await Tesseract.createWorker(lang, 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    const progress = Math.round(m.progress * 100);
                    statusP.textContent = `Recognizing Text: ${progress}%`;
                } else {
                    // Capitalize the first letter for better readability
                    const statusText = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                    statusP.textContent = `Status: ${statusText}...`;
                }
            }
        });

        // Perform OCR on the image
        const {
            data
        } = await worker.recognize(originalImg);

        // Clear the status message
        resultContainer.removeChild(statusP);

        // Process and display the results
        const wordCount = data.words.length;
        const lineCount = data.lines.length;
        const characterCount = (data.text.replace(/\s/g, '')).length;

        const title = document.createElement('h3');
        title.textContent = 'Text Recognition Results';
        title.style.marginTop = '0';
        resultContainer.appendChild(title);

        const statsDiv = document.createElement('div');
        statsDiv.style.marginBottom = '15px';
        statsDiv.innerHTML = `
            <p style="margin: 5px 0;"><strong>Word Count:</strong> ${wordCount}</p>
            <p style="margin: 5px 0;"><strong>Line Count:</strong> ${lineCount}</p>
            <p style="margin: 5px 0;"><strong>Character Count (no spaces):</strong> ${characterCount}</p>
        `;
        resultContainer.appendChild(statsDiv);

        const textTitle = document.createElement('h4');
        textTitle.textContent = 'Detected Text:';
        textTitle.style.marginBottom = '5px';
        resultContainer.appendChild(textTitle);

        const pre = document.createElement('pre');
        pre.textContent = data.text.trim() || '(No text detected)';
        pre.style.whiteSpace = 'pre-wrap';
        pre.style.wordWrap = 'break-word';
        pre.style.padding = '10px';
        pre.style.border = '1px solid #ddd';
        pre.style.borderRadius = '4px';
        pre.style.backgroundColor = '#fff';
        pre.style.maxHeight = '300px';
        pre.style.overflowY = 'auto';
        resultContainer.appendChild(pre);

    } catch (error) {
        console.error('OCR Error:', error);
        resultContainer.innerHTML = ''; // Clear previous messages
        const errorP = document.createElement('p');
        errorP.style.color = 'red';
        errorP.textContent = `An error occurred: ${error.message}`;
        resultContainer.appendChild(errorP);
    } finally {
        // Terminate the worker to free up resources
        if (worker) {
            await worker.terminate();
        }
    }

    return resultContainer;
}