Image Text Translator And Letter Counter

async function processImage(originalImg, lang = 'eng,rus', caseSensitive = 'false') {
    /**
     * Dynamically loads the Tesseract.js library.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadTesseract = () => {
        return new Promise(resolve => {
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = 'https://unpkg.com/tesseract.js@5/dist/tesseract.min.js';
            script.onload = () => resolve();
            script.onerror = () => {
                throw new Error('Could not load Tesseract.js script.');
            };
            document.head.appendChild(script);
        });
    };

    const outputContainer = document.createElement('div');
    const statusElement = document.createElement('p');
    statusElement.style.fontFamily = 'Arial, sans-serif';
    statusElement.style.textAlign = 'center';
    outputContainer.appendChild(statusElement);

    try {
        statusElement.innerText = 'Loading OCR library...';
        await loadTesseract();
        
        // Tesseract language codes are separated by '+', so we convert the comma-separated input.
        const tesseractLang = lang.replace(/,/g, '+');
        
        statusElement.innerText = 'Initializing OCR worker...';
        const worker = await Tesseract.createWorker(tesseractLang, 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    const progress = (m.progress * 100).toFixed(0);
                    statusElement.innerText = `Recognizing Text... ${progress}%`;
                } else {
                    // Capitalize the first letter of the status for better display
                    const displayStatus = m.status.charAt(0).toUpperCase() + m.status.slice(1);
                    statusElement.innerText = `${displayStatus}...`;
                }
            },
        });

        const { data: { text } } = await worker.recognize(originalImg);
        
        statusElement.innerText = 'Processing complete. Terminating worker...';
        await worker.terminate();

        // --- Letter Counting ---
        let processedText = text;
        const useCaseSensitive = String(caseSensitive).toLowerCase() === 'true';
        if (!useCaseSensitive) {
            processedText = text.toLowerCase();
        }

        const letterCounts = {};
        // Use Unicode property escapes to correctly match letters from any script.
        const letterRegex = /\p{L}/u;

        for (const char of processedText) {
            if (letterRegex.test(char)) {
                letterCounts[char] = (letterCounts[char] || 0) + 1;
            }
        }

        // --- Create Result Display ---
        outputContainer.innerHTML = ''; // Clear status message

        // 1. Extracted Text Section
        const textHeader = document.createElement('h3');
        textHeader.textContent = 'Extracted Text';
        textHeader.style.fontFamily = 'Arial, sans-serif';
        outputContainer.appendChild(textHeader);

        const textElement = document.createElement('pre');
        textElement.textContent = text || '(No text was detected in the image)';
        textElement.style.whiteSpace = 'pre-wrap';
        textElement.style.border = '1px solid #ccc';
        textElement.style.backgroundColor = '#f9f9f9';
        textElement.style.padding = '10px';
        textElement.style.maxHeight = '250px';
        textElement.style.overflowY = 'auto';
        textElement.style.fontFamily = 'monospace';
        outputContainer.appendChild(textElement);

        // 2. Letter Counts Section
        const countsHeader = document.createElement('h3');
        countsHeader.textContent = 'Letter Counts';
        countsHeader.style.fontFamily = 'Arial, sans-serif';
        countsHeader.style.marginTop = '20px';
        outputContainer.appendChild(countsHeader);

        const sortedLetters = Object.keys(letterCounts).sort();

        if (sortedLetters.length > 0) {
            const table = document.createElement('table');
            table.style.width = '100%';
            table.style.borderCollapse = 'collapse';
            table.style.fontFamily = 'Arial, sans-serif';

            const thead = table.createTHead();
            const headerRow = thead.insertRow();
            const th1 = document.createElement('th');
            th1.textContent = 'Letter';
            const th2 = document.createElement('th');
            th2.textContent = 'Count';
            [th1, th2].forEach(th => {
                th.style.border = '1px solid #ddd';
                th.style.padding = '8px';
                th.style.textAlign = 'left';
                th.style.backgroundColor = '#f2f2f2';
            });
            headerRow.appendChild(th1);
            headerRow.appendChild(th2);

            const tbody = table.createTBody();
            for (const letter of sortedLetters) {
                const row = tbody.insertRow();
                const cell1 = row.insertCell();
                cell1.textContent = letter;
                const cell2 = row.insertCell();
                cell2.textContent = letterCounts[letter];
                [cell1, cell2].forEach(cell => {
                    cell.style.border = '1px solid #ddd';
                    cell.style.padding = '8px';
                });
            }
            outputContainer.appendChild(table);
        } else {
            const noLettersPara = document.createElement('p');
            noLettersPara.textContent = 'No letters were found in the extracted text.';
            noLettersPara.style.fontFamily = 'Arial, sans-serif';
            outputContainer.appendChild(noLettersPara);
        }

    } catch (error) {
        console.error('OCR Error:', error);
        statusElement.innerText = `An error occurred: ${error.message}`;
        statusElement.style.color = 'red';
    }

    return outputContainer;
}