Image Based Website Domain Interface Identifier

async function processImage(originalImg, recognizedTLDs = "com,org,net,io,co,edu,gov,app,ai,us,uk,ca,au,info,biz,tv", boxColor = "#00BFFF") {
    // Create the main container for the tool interface
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.textAlign = 'center';
    container.style.padding = '20px';
    container.style.backgroundColor = '#f9fafb';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';

    // Container for the canvas to allow relative positioning if needed
    const canvasContainer = document.createElement('div');
    canvasContainer.style.position = 'relative';
    canvasContainer.style.display = 'inline-block';
    canvasContainer.style.maxWidth = '100%';
    container.appendChild(canvasContainer);

    // Setup canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Scale image down if it's too large to keep OCR processing fast
    const maxDim = 1200;
    let w = originalImg.width;
    let h = originalImg.height;

    if (w > maxDim || h > maxDim) {
        const ratio = Math.min(maxDim / w, maxDim / h);
        w = Math.round(w * ratio);
        h = Math.round(h * ratio);
    }

    canvas.width = w;
    canvas.height = h;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '4px';
    
    // Draw initial image
    ctx.drawImage(originalImg, 0, 0, w, h);
    canvasContainer.appendChild(canvas);

    // Create status label
    const statusLabel = document.createElement('div');
    statusLabel.textContent = "Loading OCR Engine. Please wait...";
    statusLabel.style.marginTop = '15px';
    statusLabel.style.fontWeight = 'bold';
    statusLabel.style.color = '#555';
    container.appendChild(statusLabel);

    // Create results display container
    const resultsContainer = document.createElement('div');
    resultsContainer.style.marginTop = '15px';
    resultsContainer.style.display = 'flex';
    resultsContainer.style.flexWrap = 'wrap';
    resultsContainer.style.gap = '10px';
    resultsContainer.style.justifyContent = 'center';
    container.appendChild(resultsContainer);

    // Immediately return the container, and perform OCR asynchronously to not block the UI
    (async () => {
        try {
            // Dynamically load Tesseract.js if not available
            if (typeof window.Tesseract === 'undefined') {
                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.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            statusLabel.textContent = "Scanning interface to identify website domains...";

            // Initialize Tesseract worker
            const worker = await window.Tesseract.createWorker('eng');
            
            // Perform text recognition
            const { data } = await worker.recognize(canvas);
            await worker.terminate();

            // Prepare Regex for identifying domains
            const tldArray = recognizedTLDs.split(',').map(t => t.trim().toLowerCase());
            const tldPattern = tldArray.join('|');
            // Matches formats like domain.com, www.domain.com, https://domain.com/path
            const domainRegex = new RegExp(`(?:https?:\\/\\/)?(?:www\\.)?([a-zA-Z0-9-]+\\.(?:${tldPattern}))(?:[\\w\\-._~:/?#[\\]@!$&'()*+,;=]*)?`, 'i');

            const foundDomains = new Set(); // Use a Set to store unique domains visually

            // Re-draw clean image (removes any previous compression artifacts if needed)
            ctx.clearRect(0, 0, w, h);
            ctx.drawImage(originalImg, 0, 0, w, h);

            if (data && data.words) {
                data.words.forEach(word => {
                    const match = word.text.match(domainRegex);
                    if (match) {
                        const domainStr = match[0].toLowerCase();
                        foundDomains.add(domainStr);
                        
                        // Draw bounding box over identified domain text
                        const bbox = word.bbox;
                        ctx.beginPath();
                        ctx.roundRect(bbox.x0 - 4, bbox.y0 - 4, (bbox.x1 - bbox.x0) + 8, (bbox.y1 - bbox.y0) + 8, 4);
                        
                        // Convert hex boxColor to rgba for the fill
                        ctx.fillStyle = boxColor + '40'; // 40 hex is ~25% alpha
                        ctx.fill();

                        ctx.lineWidth = 2;
                        ctx.strokeStyle = boxColor;
                        ctx.stroke();
                    }
                });
            }

            // Update UI with results
            if (foundDomains.size === 0) {
                statusLabel.textContent = "No website domains identified in this interface.";
                statusLabel.style.color = '#dc2626'; // Red
            } else {
                statusLabel.textContent = `Identified ${foundDomains.size} domain reference(s):`;
                statusLabel.style.color = '#16a34a'; // Green
                
                foundDomains.forEach(domain => {
                    const badge = document.createElement('div');
                    badge.textContent = domain;
                    badge.style.padding = '8px 16px';
                    badge.style.backgroundColor = '#1f2937'; // Dark gray
                    badge.style.color = '#10b981'; // Emerald green
                    badge.style.borderRadius = '9999px';
                    badge.style.fontFamily = 'monospace';
                    badge.style.fontSize = '14px';
                    badge.style.fontWeight = '500';
                    badge.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
                    resultsContainer.appendChild(badge);
                });
            }
        } catch (err) {
            console.error("Domain Identification Error:", err);
            statusLabel.textContent = "An error occurred during domain identification.";
            statusLabel.style.color = '#dc2626';
        }
    })();

    return container;
}