Photo Translation Assistant

/**
 * Processes an image to extract text using OCR (Optical Character Recognition),
 * serving as an assistant for translating text from photos. It overlays the
 * detected text blocks on the original image and provides the full extracted
 * text in a textarea for easy copying and pasting into a translation tool.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} lang The 3-letter ISO 639-2 language code for the text in the image (e.g., 'eng', 'rus', 'deu', 'spa'). Defaults to 'eng'.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the processed image with overlays and a textarea with the extracted text.
 */
async function processImage(originalImg, lang = 'eng') {

    // Main container for all output elements
    const finalWrapper = document.createElement('div');
    finalWrapper.style.fontFamily = 'Arial, sans-serif';
    finalWrapper.style.maxWidth = `${originalImg.width}px`;

    // A container for the canvas and overlays to keep them layered
    const imageContainer = document.createElement('div');
    imageContainer.style.position = 'relative';
    imageContainer.style.display = 'inline-block'; // Shrink-wrap to canvas size

    // Create a canvas and draw the original image onto it
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    imageContainer.appendChild(canvas);

    // Create a status/loading overlay
    const statusOverlay = document.createElement('div');
    statusOverlay.style.position = 'absolute';
    statusOverlay.style.top = '0';
    statusOverlay.style.left = '0';
    statusOverlay.style.width = '100%';
    statusOverlay.style.height = '100%';
    statusOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
    statusOverlay.style.color = 'white';
    statusOverlay.style.display = 'flex';
    statusOverlay.style.justifyContent = 'center';
    statusOverlay.style.alignItems = 'center';
    statusOverlay.style.fontSize = '1.2em';
    statusOverlay.style.textAlign = 'center';
    statusOverlay.textContent = 'Loading OCR library...';
    imageContainer.appendChild(statusOverlay);

    finalWrapper.appendChild(imageContainer);

    try {
        // Dynamically load Tesseract.js if it's not already available
        if (typeof Tesseract === 'undefined') {
            await new Promise((resolve, reject) => {
                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 script.'));
                document.head.appendChild(script);
            });
        }

        // Perform OCR on the image canvas
        const {
            data
        } = await Tesseract.recognize(
            canvas,
            lang, {
                logger: m => {
                    // Update the status overlay with OCR progress
                    const progress = m.progress ? `(${Math.round(m.progress * 100)}%)` : '';
                    statusOverlay.textContent = `OCR: ${m.status} ${progress}`;
                    console.log(m);
                }
            }
        );

        // Once OCR is complete, remove the status overlay
        statusOverlay.remove();

        // Highlight detected words on the image
        data.words.forEach(word => {
            const Bbox = word.bbox;
            const overlay = document.createElement('div');
            overlay.style.position = 'absolute';
            overlay.style.left = `${Bbox.x0}px`;
            overlay.style.top = `${Bbox.y0}px`;
            overlay.style.width = `${Bbox.width}px`;
            overlay.style.height = `${Bbox.height}px`;
            overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.4)'; // Semi-transparent yellow
            overlay.style.border = '1px solid #FFD700';
            overlay.style.boxSizing = 'border-box';
            overlay.title = `Confidence: ${Math.round(word.confidence)}% | Text: "${word.text}"`;
            imageContainer.appendChild(overlay);
        });


        // Create a section for the full extracted text
        const fullTextContainer = document.createElement('div');
        fullTextContainer.style.marginTop = '15px';

        const label = document.createElement('h3');
        label.textContent = 'Extracted Text (Ready to Translate)';
        label.style.margin = '0 0 5px 0';
        label.style.fontSize = '1em';
        fullTextContainer.appendChild(label);

        const textArea = document.createElement('textarea');
        textArea.value = data.text;
        textArea.style.width = '100%';
        textArea.style.minHeight = '120px';
        textArea.style.boxSizing = 'border-box';
        textArea.style.fontSize = '0.9em';
        // Make it easy for the user to select all text
        textArea.addEventListener('focus', () => textArea.select());
        fullTextContainer.appendChild(textArea);

        finalWrapper.appendChild(fullTextContainer);

    } catch (error) {
        // Handle errors (e.g., script loading failure, OCR engine error)
        console.error('Photo Translation Assistant failed:', error);
        statusOverlay.textContent = `Error: ${error.message || 'Could not process image.'}`;
        statusOverlay.style.backgroundColor = 'rgba(200, 0, 0, 0.7)';
    }

    return finalWrapper;
}