Image Text Translator Alphabet

/**
 * Translates text within an image from a source alphabet to a target alphabet using OCR.
 * This function performs Optical Character Recognition (OCR) to find text,
 * then replaces characters based on the provided alphabet mappings, and finally
 * redraws the translated text over the original image.
 *
 * NOTE: The first run might be slow as it needs to load the OCR engine (Tesseract.js)
 * and the specified language model. Subsequent runs will be faster.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [sourceAlphabet='абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ'] A string containing all characters of the source alphabet.
 * @param {string} [targetAlphabet='abvgdeëžzijklmnoprstufhcčšŝʼyʼeûâABVGDEËŽZIJKLMNOPRSTUFHCČŠŜʼYʼEÛÂ'] A string containing replacement characters for the target alphabet. Must be the same length as sourceAlphabet.
 * @param {string} [ocrLanguage='rus'] The language code for the OCR engine to use (e.g., 'eng', 'rus', 'deu'). See Tesseract.js documentation for available languages.
 * @param {string} [backgroundColor='auto'] The background color for the new text box. Use 'auto' to sample the color from the image, or provide a CSS color string (e.g., 'white', '#FFFFFF').
 * @param {string} [textColor='black'] The color of the new translated text. Can be any valid CSS color string.
 * @param {string} [fontFamily='Arial'] The font family for the new translated text. Should be a web-safe font.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a new canvas element containing the image with translated text.
 */
async function processImage(
    originalImg,
    sourceAlphabet = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ',
    targetAlphabet = 'abvgdeëžzijklmnoprstufhcčšŝʼyʼeûâABVGDEËŽZIJKLMNOPRSTUFHCČŠŜʼYʼEÛÂ',
    ocrLanguage = 'rus',
    backgroundColor = 'auto',
    textColor = 'black',
    fontFamily = 'Arial'
) {

    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    // Helper function to show errors on a canvas
    const drawError = (img, message) => {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth || 300;
        canvas.height = img.naturalHeight || 150;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const words = message.split(' ');
        let line = '';
        const x = canvas.width / 2;
        let y = canvas.height / 2;
        const lineHeight = 20;

        // Simple word wrap
        for (let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            if (ctx.measureText(testLine).width > canvas.width * 0.9 && n > 0) {
                ctx.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
        return canvas;
    };

    // 1. Parameter Validation
    if (sourceAlphabet.length !== targetAlphabet.length) {
        return drawError(originalImg, "Error: Source and target alphabets must have the same length.");
    }

    // 2. Dynamically load Tesseract.js if not already available
    if (typeof Tesseract === 'undefined') {
        try {
            // Use a global promise to prevent multiple script injections if function is called repeatedly
            if (!window.tesseractJsLoadingPromise) {
                 window.tesseractJsLoadingPromise = 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 from CDN. Check network connection.'));
                    document.head.appendChild(script);
                });
            }
            await window.tesseractJsLoadingPromise;
        } catch (error) {
            console.error(error);
            return drawError(originalImg, error.message);
        }
    }
    
    // 3. Create translation map
    const translationMap = new Map();
    for (let i = 0; i < sourceAlphabet.length; i++) {
        translationMap.set(sourceAlphabet[i], targetAlphabet[i]);
    }

    const transliterate = (text) => {
        return text.split('').map(char => translationMap.get(char) || char).join('');
    };

    // 4. Setup Canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    let worker;
    try {
        // 5. Setup and run Tesseract
        worker = await Tesseract.createWorker(ocrLanguage);
        const { data: { words } } = await worker.recognize(canvas);
        
        // 6. Process and redraw recognized words
        for (const word of words) {
            // Skip words with low confidence or no actual text content
            if (word.confidence < 50 || !word.text.trim()) continue;

            const bbox = word.bbox;
            const translatedText = transliterate(word.text);

            // Determine background color
            let fillBgColor = backgroundColor;
            if (backgroundColor.toLowerCase() === 'auto') {
                // Sample a corner pixel for a simple auto-background detection
                try {
                    const sampleX = Math.max(0, Math.min(bbox.x0, canvas.width - 1));
                    const sampleY = Math.max(0, Math.min(bbox.y0, canvas.height - 1));
                    const pixelData = ctx.getImageData(sampleX, sampleY, 1, 1).data;
                    fillBgColor = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
                } catch (e) {
                    // Fallback if getImageData fails
                    console.warn('Could not sample background color.', e);
                    fillBgColor = 'white';
                }
            }

            // Draw background rectangle to cover the original text
            ctx.fillStyle = fillBgColor;
            ctx.fillRect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);

            // Draw the new translated text
            ctx.fillStyle = textColor;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'left';

            // Heuristic to fit the new text inside the original's bounding box width
            let fontSize = (bbox.y1 - bbox.y0);
            do {
                ctx.font = `${fontSize--}px ${fontFamily}`;
            } while (ctx.measureText(translatedText).width > (bbox.x1 - bbox.x0) && fontSize > 5)
            
            const textY = bbox.y0 + (bbox.y1 - bbox.y0) / 2;
            ctx.fillText(translatedText, bbox.x0, textY);
        }
    } catch (error) {
        console.error("An error occurred during OCR processing:", error);
        return drawError(originalImg, `OCR Error: ${error.message || 'An unknown error occurred.'}`);
    } finally {
        // 7. Cleanup the Tesseract worker to free up resources
        if (worker) {
            await worker.terminate();
        }
    }
    
    // 8. Return the final canvas
    return canvas;
}