Image Link Translator

/**
 * Performs Optical Character Recognition (OCR) on an image to extract text,
 * and then identifies and converts any URLs within the text into clickable links.
 * This function interprets "Image Link Translator" as a tool that "translates"
 * an image into its textual content with functional web links.
 * 
 * It dynamically loads the Tesseract.js library from a CDN to perform the OCR.
 *
 * @param {Image} originalImg The JavaScript Image object to process.
 * @param {string} lang A comma-separated string of languages for Tesseract.js to use (e.g., 'eng,rus,fra'). Defaults to 'eng,rus'.
 * @returns {Promise<HTMLDivElement>} A Promise that resolves to a div element containing the original image and the extracted text with clickable links.
 */
async function processImage(originalImg, lang = 'eng,rus') {
    // Create a container for the output. This will be the return value.
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '10px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '5px';
    container.style.maxWidth = '100%';

    // Display a copy of the original image for context.
    const displayedImg = originalImg.cloneNode();
    displayedImg.style.maxWidth = '100%';
    displayedImg.style.height = 'auto';
    displayedImg.style.marginBottom = '15px';
    container.appendChild(displayedImg);

    // Add a status element for user feedback during the process.
    const statusDiv = document.createElement('div');
    statusDiv.style.marginBottom = '10px';
    statusDiv.style.fontStyle = 'italic';
    statusDiv.style.color = '#555';
    container.appendChild(statusDiv);

    const updateStatus = (text) => {
        statusDiv.textContent = text;
    };

    // Dynamically load the Tesseract.js library from a CDN if it's not already available.
    if (typeof window.Tesseract === 'undefined') {
        updateStatus('Loading OCR library (this may take a moment on first use)...');
        try {
            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.async = true;
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load the OCR library script.'));
                document.head.appendChild(script);
            });
        } catch (error) {
            updateStatus(error.message);
            statusDiv.style.color = 'red';
            console.error(error);
            return container;
        }
    }

    // Perform the OCR process.
    let recognizedText = '';
    try {
        updateStatus('Initializing OCR engine...');
        // Tesseract.js expects languages in 'lang1+lang2' format.
        const tesseractLang = lang.replace(/,/g, '+');
        const worker = await Tesseract.createWorker(tesseractLang, 1, {
            logger: m => {
                if (m.status === 'recognizing text') {
                    const progress = Math.round(m.progress * 100);
                    updateStatus(`Recognizing text... ${progress}%`);
                } else if (m.status.startsWith('loading language')) {
                    updateStatus('Loading language data...');
                } else {
                    updateStatus(`OCR status: ${m.status}`);
                }
            },
        });

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

        await worker.terminate();
        statusDiv.remove(); // Remove status updates on success.
    } catch (error) {
        console.error('OCR Error:', error);
        statusDiv.textContent = 'An error occurred during text recognition. Please check the console for details.';
        statusDiv.style.color = 'red';
        return container;
    }

    // Process the extracted text to find and format URLs.
    const resultContainer = document.createElement('div');

    const title = document.createElement('h3');
    title.textContent = 'Extracted Text & Links';
    title.style.margin = '0 0 10px 0';
    title.style.fontSize = '1.1em';
    resultContainer.appendChild(title);

    const textDisplay = document.createElement('pre');
    textDisplay.style.whiteSpace = 'pre-wrap';
    textDisplay.style.wordWrap = 'break-word';
    textDisplay.style.padding = '10px';
    textDisplay.style.backgroundColor = '#f9f9f9';
    textDisplay.style.border = '1px solid #eee';
    textDisplay.style.borderRadius = '3px';
    textDisplay.style.maxHeight = '400px';
    textDisplay.style.overflowY = 'auto';
    textDisplay.style.lineHeight = '1.5';

    if (!recognizedText || recognizedText.trim() === '') {
        textDisplay.textContent = 'No text was found in the image.';
    } else {
        // Regex to find URLs (http, https, www, and domain.tld formats).
        const urlRegex = /(\bhttps?:\/\/[^\s<>"'()]+|\bwww\.[^\s<>"'()]+|\b[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\/(?:[^\s<>"'()]*)?)?)/gi;

        let lastIndex = 0;
        let match;
        const fragment = document.createDocumentFragment();

        // Loop through all regex matches to build the output with clickable links.
        while ((match = urlRegex.exec(recognizedText)) !== null) {
            // Append the text that comes before the matched URL.
            if (match.index > lastIndex) {
                fragment.appendChild(document.createTextNode(recognizedText.substring(lastIndex, match.index)));
            }

            // Create and append the clickable link for the matched URL.
            const url = match[0];
            const link = document.createElement('a');
            link.href = url.match(/^https?:\/\//i) ? url : `http://${url}`;
            link.textContent = url;
            link.target = '_blank';
            link.rel = 'noopener noreferrer';
            fragment.appendChild(link);

            lastIndex = urlRegex.lastIndex;
        }

        // Append any remaining text after the last URL match.
        if (lastIndex < recognizedText.length) {
            fragment.appendChild(document.createTextNode(recognizedText.substring(lastIndex)));
        }
        textDisplay.appendChild(fragment);
    }

    resultContainer.appendChild(textDisplay);
    container.appendChild(resultContainer);

    return container;
}