Image Search By Website Translator

/**
 * Interprets an image by extracting text (OCR) and provides links to search for or translate that text on various websites.
 * This function interprets "Image Search By Website Translator" as a tool to extract text from an image and then use that text
 * to perform searches on specified websites or translate it.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} languages A string of Tesseract.js language codes to use for OCR, separated by '+'. E.g., 'eng' for English, 'eng+fra' for English and French.
 * @param {string} searchEngines A comma-separated string of search engines to provide links for. Supported: 'google', 'bing', 'duckduckgo', 'yandex'.
 * @returns {HTMLElement} A div element that will asynchronously be populated with the OCR results and action links.
 */
function processImage(originalImg, languages = 'eng', searchEngines = 'google,bing,duckduckgo') {
    // Create a container element to return. This element will be updated with progress and results.
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '10px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';
    container.innerHTML = `<p>Initializing text recognition engine...</p>`;

    // Helper function to render the final UI with extracted text and action links
    const renderResults = (targetContainer, extractedText) => {
        const sanitizedText = extractedText.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        const encodedText = encodeURIComponent(extractedText);
        const hasText = extractedText.trim().length > 0;

        let searchLinksHtml = '';
        if (hasText) {
            const engines = searchEngines.split(',').map(s => s.trim().toLowerCase());
            const availableEngines = {
                google: `<a href="https://www.google.com/search?q=${encodedText}" target="_blank" rel="noopener noreferrer">Google</a>`,
                bing: `<a href="https://www.bing.com/search?q=${encodedText}" target="_blank" rel="noopener noreferrer">Bing</a>`,
                duckduckgo: `<a href="https://duckduckgo.com/?q=${encodedText}" target="_blank" rel="noopener noreferrer">DuckDuckGo</a>`,
                yandex: `<a href="https://yandex.com/search/?text=${encodedText}" target="_blank" rel="noopener noreferrer">Yandex</a>`
            };
            engines.forEach(engine => {
                if (availableEngines[engine]) {
                    searchLinksHtml += availableEngines[engine];
                }
            });
        }

        targetContainer.innerHTML = `
            <style>
                .ocr-results-textarea { box-sizing: border-box; width: 100%; height: 150px; margin: 10px 0; font-size: 14px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; }
                .ocr-results-actions span { font-weight: bold; }
                .ocr-results-actions a {
                    display: inline-block;
                    margin: 5px 5px 5px 0;
                    padding: 8px 12px;
                    background-color: #007bff;
                    color: white;
                    text-decoration: none;
                    border-radius: 5px;
                    font-size: 14px;
                    transition: background-color 0.2s;
                }
                .ocr-results-actions a:hover { background-color: #0056b3; }
                .ocr-results-actions a.translate { background-color: #28a745; }
                .ocr-results-actions a.translate:hover { background-color: #218838; }
            </style>
            <div>
                <h3>Extracted Text (Languages: ${languages})</h3>
                <textarea class="ocr-results-textarea" readonly>${hasText ? sanitizedText : 'No text could be recognized in the image.'}</textarea>
                ${hasText ? `
                <div class="ocr-results-actions">
                    <span>Search text on:</span><br>
                    ${searchLinksHtml}
                    <br><br>
                    <span>Or:</span><br>
                    <a href="https://translate.google.com/?sl=auto&text=${encodedText}" target="_blank" rel="noopener noreferrer" class="translate">Translate with Google</a>
                </div>
                ` : ''}
            </div>
        `;
    };

    // Run the main async logic inside an IIFE
    (async () => {
        const tesseractUrl = 'https://unpkg.com/tesseract.js@5.0.5/dist/tesseract.min.js';
        
        // Dynamically load Tesseract.js if not already present
        if (typeof Tesseract === 'undefined') {
            try {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = tesseractUrl;
                    script.onload = resolve;
                    script.onerror = () => reject(new Error('Failed to load Tesseract.js script.'));
                    document.head.appendChild(script);
                });
            } catch (error) {
                container.innerHTML = `<p style="color: red;">Error: Could not load the text recognition library. Please check your internet connection.</p>`;
                console.error(error);
                return;
            }
        }
        
        container.innerHTML = `<p>Loading recognition model for language(s): ${languages}...</p>`;

        try {
            // Create a Tesseract worker. This will download language data which can be slow the first time.
            const worker = await Tesseract.createWorker(languages, 1, {
                logger: m => {
                    // Provide real-time feedback to the user
                    const statusText = m.status.charAt(0).toUpperCase() + m.status.slice(1).replace(/_/g, ' ');
                    if (m.status === 'recognizing text') {
                       container.innerHTML = `<p>${statusText}... (${(m.progress * 100).toFixed(0)}%)</p>`;
                    } else if (m.status) {
                       container.innerHTML = `<p>${statusText}...</p>`;
                    }
                }
            });
            
            const { data: { text } } = await worker.recognize(originalImg);
            await worker.terminate();

            renderResults(container, text);

        } catch (error) {
            container.innerHTML = `<p style="color: red;">An error occurred during text recognition. Please ensure the language code '${languages}' is correct (e.g., 'eng', 'fra', 'rus') and the image is clear.</p>`;
            console.error("Tesseract.js OCR error:", error);
        }
    })();

    // Return the container immediately. It will be updated by the async function.
    return container;
}