Image Text Translator And Code Extractor

/**
 * Recognizes text, code, and links from an image using OCR, and provides a link for translation.
 * This function dynamically loads the Tesseract.js library to perform Optical Character Recognition.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {string} [lang='eng'] The language code(s) for OCR (e.g., 'eng', 'rus', 'eng+rus'). A full list can be found in Tesseract.js documentation.
 * @param {string} [translateToLang='en'] The target language code for the Google Translate link (e.g., 'en', 'es', 'fr').
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a single div element containing the extracted information and a progress indicator.
 */
async function processImage(originalImg, lang = 'eng', translateToLang = 'en') {
    // 1. Create a container for the output and status updates
    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.maxWidth = '800px';
    resultContainer.style.minHeight = '100px';

    const statusDiv = document.createElement('div');
    statusDiv.style.marginBottom = '15px';
    statusDiv.innerHTML = 'Initializing OCR engine...';
    resultContainer.appendChild(statusDiv);

    // 2. Dynamically load the Tesseract.js library from a CDN
    const TESSERACT_CDN = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';

    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            if (window.Tesseract) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`Script load error for ${url}`));
            document.head.appendChild(script);
        });
    };

    try {
        await loadScript(TESSERACT_CDN);
    } catch (error) {
        statusDiv.innerHTML = 'Error: Could not load the OCR library. Please check your internet connection.';
        statusDiv.style.color = 'red';
        console.error(error);
        return resultContainer;
    }

    // 3. Perform OCR
    try {
        const worker = await Tesseract.createWorker(lang, 1, {
            logger: m => {
                statusDiv.innerHTML = `Status: ${m.status} (${(m.progress * 100).toFixed(2)}%)`;
            }
        });

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

        // 4. Clear status and populate the container with results
        resultContainer.innerHTML = '';

        // --- Extracted Text Section ---
        const textHeader = document.createElement('h3');
        textHeader.textContent = 'Extracted Text';
        const textContent = document.createElement('pre');
        textContent.textContent = text || 'No text found.';
        textContent.style.whiteSpace = 'pre-wrap';
        textContent.style.wordWrap = 'break-word';
        textContent.style.padding = '10px';
        textContent.style.background = '#f5f5f5';
        textContent.style.border = '1px solid #ddd';
        textContent.style.borderRadius = '4px';
        resultContainer.appendChild(textHeader);
        resultContainer.appendChild(textContent);

        // --- Link Extraction ---
        const urlRegex = /(?:(?:https?|ftp):\/\/|www\.)[^\s/$.?#].[^\s]*/gi;
        const foundUrls = text.match(urlRegex);

        if (foundUrls && foundUrls.length > 0) {
            const linkHeader = document.createElement('h3');
            linkHeader.textContent = 'Potential Links Found';
            const linkList = document.createElement('ul');
            foundUrls.forEach(url => {
                const li = document.createElement('li');
                const a = document.createElement('a');
                a.href = url.startsWith('www.') ? `http://${url}` : url;
                a.textContent = url;
                a.target = '_blank';
                a.rel = 'noopener noreferrer';
                li.appendChild(a);
                linkList.appendChild(li);
            });
            resultContainer.appendChild(linkHeader);
            resultContainer.appendChild(linkList);
        }

        // --- Code Extraction (Heuristic-based) ---
        const lines = text.split('\n');
        const codeKeywords = ['function', 'var', 'let', 'const', 'if', 'else', 'for', 'while', 'class', 'import', 'export', 'return', '=>', 'async', 'await', 'public', 'private', 'static', 'void', 'int', 'string'];
        const codeSymbols = /[{}();=<>!+\-*/%&|]/;

        const codeLines = lines.filter(line => {
            const trimmedLine = line.trim();
            if (trimmedLine.length === 0) return false;
            if (codeSymbols.test(trimmedLine)) return true;
            const firstWord = trimmedLine.split(/[\s(]/)[0];
            if (codeKeywords.includes(firstWord.toLowerCase())) return true;
            return false;
        });

        if (codeLines.length > 0) {
            const codeHeader = document.createElement('h3');
            codeHeader.textContent = 'Potential Code Snippets';
            const codeBlock = document.createElement('pre');
            const codeContent = document.createElement('code');
            codeContent.textContent = codeLines.join('\n');
            codeContent.style.padding = '15px';
            codeContent.style.display = 'block';
            codeContent.style.background = '#2d2d2d';
            codeContent.style.color = '#f8f8f2';
            codeContent.style.borderRadius = '4px';
            codeContent.style.whiteSpace = 'pre-wrap';
            codeContent.style.wordWrap = 'break-word';
            codeBlock.appendChild(codeContent);
            resultContainer.appendChild(codeHeader);
            resultContainer.appendChild(codeBlock);
        }

        // --- Translation Section ---
        if (text.trim().length > 0) {
            const translationHeader = document.createElement('h3');
            translationHeader.textContent = 'Translate Text';
            const translateLink = document.createElement('a');
            const encodedText = encodeURIComponent(text);
            const translateUrl = `https://translate.google.com/?sl=auto&tl=${translateToLang}&text=${encodedText}&op=translate`;
            translateLink.href = translateUrl;
            translateLink.target = '_blank';
            translateLink.rel = 'noopener noreferrer';
            translateLink.textContent = `Translate with Google Translate`;
            translateLink.style.display = 'inline-block';
            translateLink.style.padding = '8px 12px';
            translateLink.style.backgroundColor = '#4285F4';
            translateLink.style.color = 'white';
            translateLink.style.textDecoration = 'none';
            translateLink.style.borderRadius = '4px';
            resultContainer.appendChild(translationHeader);
            resultContainer.appendChild(translateLink);
        }

    } catch (err) {
        statusDiv.innerHTML = 'An error occurred during OCR processing. Please try again or with a different image.';
        statusDiv.style.color = 'red';
        if (!resultContainer.contains(statusDiv)) {
            resultContainer.innerHTML = '';
            resultContainer.appendChild(statusDiv);
        }
        console.error(err);
    }

    return resultContainer;
}