Image Website Domain Finder Tool

function processImage(originalImg, language = 'eng') {
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.maxWidth = '600px';
    container.style.backgroundColor = '#fcfcfc';
    container.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';

    const title = document.createElement('h3');
    title.innerText = 'Image Website Domain Extractor';
    title.style.marginTop = '0';
    title.style.color = '#333';
    container.appendChild(title);

    const statusText = document.createElement('p');
    statusText.innerText = 'Initializing OCR engine...';
    statusText.style.color = '#666';
    statusText.style.fontWeight = 'bold';
    container.appendChild(statusText);

    const progressBarContainer = document.createElement('div');
    progressBarContainer.style.width = '100%';
    progressBarContainer.style.height = '12px';
    progressBarContainer.style.backgroundColor = '#e0e0e0';
    progressBarContainer.style.borderRadius = '6px';
    progressBarContainer.style.overflow = 'hidden';
    progressBarContainer.style.marginBottom = '15px';

    const progressBar = document.createElement('div');
    progressBar.style.height = '100%';
    progressBar.style.width = '0%';
    progressBar.style.backgroundColor = '#007bff';
    progressBar.style.transition = 'width 0.2s ease-in-out';
    progressBarContainer.appendChild(progressBar);
    
    container.appendChild(progressBarContainer);

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

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const runOCR = async () => {
        try {
            if (typeof Tesseract === 'undefined') {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            const { data: { text } } = await Tesseract.recognize(
                canvas,
                language,
                { 
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            const progressNum = Math.round(m.progress * 100);
                            statusText.innerText = `Scanning image: ${progressNum}%`;
                            progressBar.style.width = `${progressNum}%`;
                        } else {
                            // Capitalize first letter of status string
                            statusText.innerText = m.status.charAt(0).toUpperCase() + m.status.slice(1) + '...';
                        }
                    }
                }
            );

            statusText.style.display = 'none';
            progressBarContainer.style.display = 'none';

            // Regex pattern to extract base domains while ignoring schemes and "www."
            const domainRegex = /\b(?:https?:\/\/)?(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,63})\b/gi;
            const matches = [];
            let match;
            
            while ((match = domainRegex.exec(text)) !== null) {
                const domain = match[1].toLowerCase();
                // Filter out common false positives and avoid duplicates
                if (!matches.includes(domain)) {
                    matches.push(domain);
                }
            }

            if (matches.length > 0) {
                const resTitle = document.createElement('h4');
                resTitle.innerText = `Successfully Found ${matches.length} Domain(s):`;
                resTitle.style.marginBottom = '10px';
                resTitle.style.color = '#28a745';
                resultDiv.appendChild(resTitle);

                const list = document.createElement('ul');
                list.style.listStyleType = 'none';
                list.style.padding = '0';
                list.style.margin = '0';
                
                matches.forEach(domain => {
                    const li = document.createElement('li');
                    li.style.padding = '10px 15px';
                    li.style.marginBottom = '8px';
                    li.style.backgroundColor = '#ffffff';
                    li.style.border = '1px solid #dcdcdc';
                    li.style.borderRadius = '6px';
                    li.style.display = 'flex';
                    li.style.alignItems = 'center';
                    li.style.wordBreak = 'break-all';
                    
                    const icon = document.createElement('span');
                    icon.innerHTML = '🌐'; // Globe icon
                    icon.style.marginRight = '10px';
                    
                    const a = document.createElement('a');
                    a.href = `http://${domain}`;
                    a.target = '_blank';
                    a.innerText = domain;
                    a.style.color = '#0056b3';
                    a.style.textDecoration = 'none';
                    a.style.fontWeight = 'bold';
                    a.style.fontSize = '16px';
                    
                    // Add hover effect
                    a.addEventListener('mouseover', () => { a.style.textDecoration = 'underline'; });
                    a.addEventListener('mouseout', () => { a.style.textDecoration = 'none'; });
                    
                    li.appendChild(icon);
                    li.appendChild(a);
                    list.appendChild(li);
                });
                resultDiv.appendChild(list);
            } else {
                const noRes = document.createElement('p');
                noRes.innerText = 'No valid website domains were identified in the recognized text of this image.';
                noRes.style.color = '#856404';
                noRes.style.backgroundColor = '#fff3cd';
                noRes.style.border = '1px solid #ffeeba';
                noRes.style.padding = '12px';
                noRes.style.borderRadius = '5px';
                resultDiv.appendChild(noRes);
            }
            
            // Allow the user to see exactly what OCR extracted
            const detailsElement = document.createElement('details');
            detailsElement.style.marginTop = '20px';
            
            const detailsSummary = document.createElement('summary');
            detailsSummary.innerText = 'Show full extracted text';
            detailsSummary.style.cursor = 'pointer';
            detailsSummary.style.color = '#444';
            detailsSummary.style.fontWeight = 'bold';
            
            const rawTextContainer = document.createElement('pre');
            rawTextContainer.style.whiteSpace = 'pre-wrap';
            rawTextContainer.style.fontSize = '13px';
            rawTextContainer.style.color = '#333';
            rawTextContainer.style.backgroundColor = '#f1f1f1';
            rawTextContainer.style.padding = '12px';
            rawTextContainer.style.border = '1px solid #ccc';
            rawTextContainer.style.borderRadius = '5px';
            rawTextContainer.style.marginTop = '10px';
            rawTextContainer.style.maxHeight = '200px';
            rawTextContainer.style.overflowY = 'auto';
            rawTextContainer.innerText = text.trim() || 'No text could be recognized.';
            
            detailsElement.appendChild(detailsSummary);
            detailsElement.appendChild(rawTextContainer);
            resultDiv.appendChild(detailsElement);

        } catch (error) {
            statusText.innerText = `Evaluation Error: ${error.message}`;
            statusText.style.color = '#dc3545';
            progressBarContainer.style.display = 'none';
        }
    };

    // Initialize OCR check asynchronously
    runOCR();

    return container;
}