Image Alphabet Character Recognition And Translation Tool

/**
 * Recognizes text from an image using Tesseract.js and optionally translates it.
 * This function loads the Tesseract.js library dynamically. It provides progress
 * updates during the OCR process and cleans up resources afterward.
 *
 * @param {Image} originalImg The source image object for OCR.
 * @param {string} lang The language code for Tesseract to use for recognition (e.g., 'eng', 'rus', 'deu').
 * @param {string} translateToLang The 2-letter language code to translate the recognized text to (e.g., 'es', 'fr', 'de'). If empty, no translation is performed.
 * @returns {Promise<HTMLElement>} A promise that resolves to an HTML div element containing the results.
 */
async function processImage(originalImg, lang = 'eng', translateToLang = '') {
    // Main container for all output
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '15px';
    resultContainer.style.border = '1px solid #e0e0e0';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.maxWidth = `${originalImg.width}px` || '100%';

    // Status element to show progress
    const statusElement = document.createElement('p');
    statusElement.style.color = '#333';
    statusElement.style.margin = '0';
    statusElement.style.padding = '10px';
    statusElement.style.backgroundColor = '#f0f0f0';
    statusElement.style.borderRadius = '4px';
    statusElement.textContent = 'Initializing...';
    resultContainer.appendChild(statusElement);

    // Helper function to update the status message
    const updateStatus = (message, prefix = 'Status:') => {
        let statusText = '';
        if (typeof message === 'string') {
            statusText = `${prefix} ${message}`;
        } else if (message && message.status) { // Tesseract.js progress object
            const progress = (message.progress * 100).toFixed(0);
            statusText = `${prefix} ${message.status} (${progress}%)`;
        }
        statusElement.textContent = statusText;
    };

    // Dynamically load the Tesseract.js library if it's not already loaded
    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
    if (typeof Tesseract === 'undefined') {
        updateStatus('Loading OCR library...');
        try {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = TESSERACT_CDN;
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load Tesseract.js library from CDN.'));
                document.head.appendChild(script);
            });
        } catch (error) {
            statusElement.textContent = error.message;
            statusElement.style.color = 'red';
            return resultContainer;
        }
    }

    let worker;
    try {
        // --- 1. OCR Step ---
        updateStatus('Creating OCR worker...');
        worker = await Tesseract.createWorker(lang, 1, {
            logger: m => updateStatus(m, 'OCR Status:')
        });

        const {
            data: {
                text
            }
        } = await worker.recognize(originalImg);

        // Display recognized text
        const ocrTitle = document.createElement('h3');
        ocrTitle.textContent = 'Recognized Text';
        ocrTitle.style.margin = '20px 0 10px 0';

        const ocrOutput = document.createElement('pre');
        ocrOutput.textContent = text || '[No text recognized]';
        ocrOutput.style.whiteSpace = 'pre-wrap';
        ocrOutput.style.wordWrap = 'break-word';
        ocrOutput.style.padding = '10px';
        ocrOutput.style.backgroundColor = '#f9f9f9';
        ocrOutput.style.border = '1px solid #ddd';
        ocrOutput.style.borderRadius = '4px';
        ocrOutput.style.minHeight = '50px';

        resultContainer.appendChild(ocrTitle);
        resultContainer.appendChild(ocrOutput);

        // --- 2. Translation Step (optional) ---
        if (translateToLang && text.trim()) {
            updateStatus('Translating text...');
            // MyMemory API uses 2-letter lang codes. Tesseract often uses 3.
            // We'll take the first two letters as a heuristic.
            const sourceLangPair = lang.substring(0, 2);
            const targetLangPair = translateToLang.substring(0, 2);

            const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${sourceLangPair}|${targetLangPair}`;

            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`Translation API request failed: ${response.statusText}`);
            }
            const data = await response.json();

            if (data.responseData && data.responseStatus === 200) {
                const translatedText = data.responseData.translatedText;

                const transTitle = document.createElement('h3');
                transTitle.textContent = `Translation (to ${translateToLang.toUpperCase()})`;
                transTitle.style.margin = '20px 0 10px 0';

                const transOutput = document.createElement('pre');
                transOutput.textContent = translatedText;
                transOutput.style.whiteSpace = 'pre-wrap';
                transOutput.style.wordWrap = 'break-word';
                transOutput.style.padding = '10px';
                transOutput.style.backgroundColor = '#f0f8ff'; // A different color for translated text
                transOutput.style.border = '1px solid #cce';
                transOutput.style.borderRadius = '4px';
                transOutput.style.minHeight = '50px';

                resultContainer.appendChild(transTitle);
                resultContainer.appendChild(transOutput);
            } else {
                throw new Error(data.responseDetails || 'Unknown translation error.');
            }
        }

        // Remove the status element on success
        statusElement.remove();

    } catch (error) {
        console.error('An error occurred during image processing:', error);
        statusElement.textContent = `Error: ${error.message}`;
        statusElement.style.color = 'red';
    } finally {
        // --- 3. Cleanup ---
        if (worker) {
            await worker.terminate();
            console.log('Tesseract worker terminated.');
        }
    }

    return resultContainer;
}