Image API Translation Tool

/**
 * Translates text found within an image using OCR and a translation API.
 * This function recognizes text in the provided image, translates it to a target language,
 * and then renders the translated text over the original text on a canvas.
 * Note: This function relies on external services (Tesseract.js for OCR, MyMemory for translation)
 * and requires an internet connection. The performance may vary depending on image complexity and network speed.
 *
 * @param {HTMLImageElement} originalImg The source image object to process.
 * @param {string} [sourceLang='en'] The 2-letter ISO 639-1 code for the source language of the text in the image (e.g., 'en', 'es', 'fr', 'de', 'ru').
 * @param {string} [targetLang='ru'] The 2-letter ISO 639-1 code for the target language for translation (e.g., 'en', 'es', 'fr', 'de', 'ru').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the image with translated text.
 */
async function processImage(originalImg, sourceLang = 'en', targetLang = 'ru') {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // Ensure the image is loaded before getting its dimensions
    await new Promise(resolve => {
        if (originalImg.complete) {
            resolve();
        } else {
            originalImg.onload = resolve;
        }
    });
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    // Helper function to draw status updates on the canvas
    const drawStatus = (text) => {
        // Semi-transparent overlay to make text readable
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, canvas.height / 2 - 30, canvas.width, 60);
        // White text
        ctx.fillStyle = 'white';
        ctx.font = '24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
    };

    drawStatus('Initializing OCR engine...');

    // 2. Load Tesseract.js OCR library dynamically
    const loadTesseract = () => {
        return new Promise((resolve, reject) => {
            // Check if script is already loaded
            if (window.Tesseract) {
                return resolve(window.Tesseract);
            }
            const script = document.createElement('script');
            script.src = 'https://unpkg.com/tesseract.js@5/dist/tesseract.min.js';
            script.onload = () => resolve(window.Tesseract);
            script.onerror = (err) => reject(new Error('Failed to load Tesseract.js script.'));
            document.head.appendChild(script);
        });
    };

    try {
        const Tesseract = await loadTesseract();

        // Tesseract uses 3-letter ISO 639-2 codes, a small map for common languages
        const langMap = {
            'en': 'eng', 'ru': 'rus', 'de': 'deu', 'fr': 'fra', 'es': 'spa', 'it': 'ita', 'zh': 'chi_sim'
        };
        const tesseractLang = langMap[sourceLang] || sourceLang;

        drawStatus(`Recognizing text (${sourceLang})... This may take a moment.`);

        // 3. Perform OCR on the image
        const { data: { paragraphs } } = await Tesseract.recognize(
            canvas,
            tesseractLang
        );

        if (!paragraphs || paragraphs.length === 0) {
            drawStatus('No text was found in the image.');
            return canvas;
        }

        drawStatus('Translating text...');

        // 4. Translate each recognized paragraph of text
        const translationPromises = paragraphs.map(async (p) => {
            const originalText = p.text.trim();
            const bbox = p.bbox;
            if (!originalText) {
                return null;
            }

            try {
                // Using the free MyMemory Translation API
                const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(originalText)}&langpair=${sourceLang}|${targetLang}`;
                const response = await fetch(apiUrl);
                if (!response.ok) throw new Error('API response not OK');
                const data = await response.json();
                const translatedText = data.responseData.translatedText || `[Translation Failed]`;
                return { translatedText, bbox };
            } catch (apiError) {
                console.error('Translation API error:', apiError);
                return { translatedText: `[Translation Error]`, bbox };
            }
        });

        const translatedParagraphs = (await Promise.all(translationPromises)).filter(p => p !== null);

        // Redraw original image to clear status text before drawing translations
        ctx.drawImage(originalImg, 0, 0);

        // 5. Render the translated text onto the canvas
        translatedParagraphs.forEach(({ translatedText, bbox }) => {
            const boxWidth = bbox.x1 - bbox.x0;
            const boxHeight = bbox.y1 - bbox.y0;

            // Cover the original text with a white rectangle
            ctx.fillStyle = 'white';
            ctx.fillRect(bbox.x0, bbox.y0, boxWidth, boxHeight);

            // Set text properties
            ctx.fillStyle = 'black';
            ctx.textBaseline = 'top';
            ctx.textAlign = 'left';

            // Dynamically adjust font size to fit the bounding box
            let fontSize = boxHeight * 0.8; // Start with a font size relative to box height
            ctx.font = `${fontSize}px Arial`;

            // Reduce font size until the text width fits within the box
            while (ctx.measureText(translatedText).width > boxWidth && fontSize > 8) {
                fontSize -= 1;
                ctx.font = `${fontSize}px Arial`;
            }

            // Calculate vertical offset to center the text in the replaced box
            const textMetrics = ctx.measureText(translatedText);
            // This is an approximation for vertical centering
            const yOffset = (boxHeight - (textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent)) / 2;

            ctx.fillText(translatedText, bbox.x0, bbox.y0 + yOffset);
        });

    } catch (error) {
        console.error('An error occurred during image processing:', error);
        drawStatus('An error occurred. Check console for details.');
    }
    
    // Tesseract.js v5+ `recognize` function handles worker creation and termination automatically.

    return canvas;
}