Image Title Translator And Search Generator

async function processImage(originalImg, sourceLang = 'eng', targetLang = 'en', searchEngines = 'google,bing,google_translate') {
    // This function performs Optical Character Recognition (OCR) on an image,
    // then generates search and translation links for the recognized text.

    // Main container for the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';
    container.style.lineHeight = '1.6';

    // Status display element to show progress
    const statusDiv = document.createElement('div');
    statusDiv.style.marginBottom = '15px';
    statusDiv.style.padding = '10px';
    statusDiv.style.background = '#f0f0f0';
    statusDiv.style.borderRadius = '4px';
    statusDiv.innerText = 'Initializing...';
    container.appendChild(statusDiv);

    // Helper function to dynamically load the Tesseract.js script from a CDN
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${src}"]`)) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
            document.head.appendChild(script);
        });
    };

    try {
        // Step 1: Load Tesseract.js library
        statusDiv.innerText = 'Loading OCR library...';
        await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
        
        statusDiv.innerText = 'Initializing OCR worker...';
        const { Tesseract } = window;

        // Step 2: Create a Tesseract worker with a logger to show progress updates
        const worker = await Tesseract.createWorker({
            logger: m => {
                let statusText = `Status: ${m.status.replace(/_/g, ' ')}`;
                if (m.progress) {
                    statusText += ` | Progress: ${(m.progress * 100).toFixed(0)}%`;
                }
                statusDiv.innerText = statusText;
            }
        });

        // Step 3: Perform OCR on the provided image object
        await worker.loadLanguage(sourceLang);
        await worker.initialize(sourceLang);
        const { data: { text } } = await worker.recognize(originalImg);
        await worker.terminate();

        // Step 4: Display the recognized text in the container
        statusDiv.remove(); // OCR is complete, remove the status element

        const resultHeader = document.createElement('h3');
        resultHeader.innerText = 'Recognized Text:';
        resultHeader.style.marginTop = '0';
        resultHeader.style.borderBottom = '1px solid #eee';
        resultHeader.style.paddingBottom = '5px';
        container.appendChild(resultHeader);

        const recognizedTextP = document.createElement('p');
        recognizedTextP.style.whiteSpace = 'pre-wrap';
        recognizedTextP.style.wordBreak = 'break-word';
        recognizedTextP.style.background = '#f9f9f9';
        recognizedTextP.style.border = '1px solid #eee';
        recognizedTextP.style.padding = '10px';
        recognizedTextP.style.borderRadius = '4px';
        recognizedTextP.style.minHeight = '50px';
        const trimmedText = text.trim();
        recognizedTextP.innerText = trimmedText || '[No text was recognized]';
        container.appendChild(recognizedTextP);

        // Step 5: Generate search and translation links if text was found
        if (trimmedText) {
            const linksHeader = document.createElement('h3');
            linksHeader.innerText = 'Actions:';
            linksHeader.style.borderBottom = '1px solid #eee';
            linksHeader.style.paddingBottom = '5px';
            container.appendChild(linksHeader);

            const linkContainer = document.createElement('div');
            container.appendChild(linkContainer);

            const engines = searchEngines.split(',').map(e => e.trim().toLowerCase());
            const encodedText = encodeURIComponent(trimmedText);

            engines.forEach(engine => {
                let url = '';
                let name = '';
                
                // Note: Tesseract `sourceLang` uses 3-letter codes (e.g., 'eng').
                // For Google Translate, `sl=auto` is used for robust source language detection.
                // The `targetLang` parameter expects 2-letter codes (e.g., 'en', 'es', 'fr').
                
                switch (engine) {
                    case 'google':
                        url = `https://www.google.com/search?q=${encodedText}`;
                        name = 'Search with Google';
                        break;
                    case 'bing':
                        url = `https://www.bing.com/search?q=${encodedText}`;
                        name = 'Search with Bing';
                        break;
                    case 'duckduckgo':
                        url = `https://duckduckgo.com/?q=${encodedText}`;
                        name = 'Search with DuckDuckGo';
                        break;
                    case 'google_translate':
                        url = `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}&op=translate`;
                        name = `Translate to ${targetLang.toUpperCase()} with Google`;
                        break;
                }

                if (url && name) {
                    const link = document.createElement('a');
                    link.href = url;
                    link.innerText = name;
                    link.target = '_blank';
                    link.rel = 'noopener noreferrer';
                    link.style.display = 'block';
                    link.style.marginBottom = '8px';
                    link.style.textDecoration = 'none';
                    link.style.color = '#007bff';
                    link.style.fontWeight = 'bold';
                    
                    link.onmouseover = () => link.style.textDecoration = 'underline';
                    link.onmouseout = () => link.style.textDecoration = 'none';
                    
                    linkContainer.appendChild(link);
                }
            });
        }

    } catch (error) {
        console.error('OCR Process Failed:', error);
        statusDiv.innerText = `An error occurred: ${error.message}`;
        statusDiv.style.color = '#c0392b';
        statusDiv.style.background = '#fadde1';
        statusDiv.style.border = '1px solid #f8d7da';
    }

    // Return the final HTML element containing the results
    return container;
}