Online Image Web Interface Domain Finder

async function processImage(originalImg, highlightColor = 'red', lineWidth = 3) {
    // Ensure the lineWidth is parsed as a number
    lineWidth = typeof lineWidth === 'string' ? parseFloat(lineWidth) || 3 : lineWidth;

    // Create a container to hold the canvas and results
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.position = 'relative';
    container.style.width = '100%';
    container.style.maxWidth = '1000px';

    // Status / Loading indicator
    const status = document.createElement('div');
    status.innerText = 'Loading OCR Engine and scanning image for domains/URLs... Please wait, this may take a few moments.';
    status.style.padding = '15px';
    status.style.backgroundColor = '#e1f5fe';
    status.style.color = '#0277bd';
    status.style.border = '1px solid #81d4fa';
    status.style.borderRadius = '5px';
    status.style.marginBottom = '10px';
    status.style.fontWeight = 'bold';
    container.appendChild(status);

    // Canvas to display image and bounding boxes
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width || originalImg.naturalWidth;
    canvas.height = originalImg.height || originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ccc';
    canvas.style.borderRadius = '5px';
    canvas.style.display = 'block';

    // Div to list extracted domains
    const resultsPanel = document.createElement('div');
    resultsPanel.style.marginTop = '15px';
    resultsPanel.style.padding = '15px';
    resultsPanel.style.backgroundColor = '#f9f9f9';
    resultsPanel.style.border = '1px solid #ddd';
    resultsPanel.style.borderRadius = '5px';
    resultsPanel.innerHTML = '<h3 style="margin-top:0; color:#333; font-size: 16px;">Found Domains & Web Addresses:</h3><ul style="margin: 0; padding-left: 20px; color: #555;"></ul>';
    const ul = resultsPanel.querySelector('ul');

    container.appendChild(canvas);
    container.appendChild(resultsPanel);

    // Load Tesseract.js dynamically if not already loaded
    if (!window.Tesseract) {
        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);
        });
    }

    try {
        // Run OCR on the image
        const { data } = await Tesseract.recognize(canvas, 'eng', {
            logger: m => {
                if (m.status === 'recognizing text') {
                    status.innerText = `Scanning image: ${Math.round(m.progress * 100)}%`;
                }
            }
        });

        // Hide status indicator once done
        status.style.display = 'none';

        // Regex to identify URL or domain structure
        // Ex: example.com, www.test.net, https://domain.org/path
        const domainRegex = /^(?:https?:\/\/)?(?:www\.)?(?:[a-zA-Z0-9][a-zA-Z0-9-]*\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?$/i;
        const looseDomainRegex = /(?:https?:\/\/)?(?:www\.)?(?:[a-zA-Z0-9][a-zA-Z0-9-]*\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?/gi;

        let foundCount = 0;
        const foundSet = new Set();

        // Examine each word found in the image by OCR
        if (data && data.words && data.words.length > 0) {
            for (const word of data.words) {
                // Remove trailing punctuation that OCR might have accidentally attached
                const cleanWord = word.text.replace(/^[^\w:/]+|[^\w/]+$/g, '');
                
                if (domainRegex.test(cleanWord)) {
                    foundCount++;
                    foundSet.add(cleanWord.toLowerCase());
                    
                    // Draw a bounding box around the matched web address
                    ctx.strokeStyle = highlightColor;
                    ctx.lineWidth = lineWidth * (canvas.width / 1000); // Scale line width relative to image size
                    ctx.strokeRect(
                        word.bbox.x0,
                        word.bbox.y0,
                        word.bbox.x1 - word.bbox.x0,
                        word.bbox.y1 - word.bbox.y0
                    );

                    // Add to the list
                    const li = document.createElement('li');
                    li.textContent = cleanWord;
                    li.style.wordBreak = 'break-all';
                    li.style.marginBottom = '4px';
                    ul.appendChild(li);
                }
            }
        }

        // Secondary fallback search if domains were split improperly or missed in word-by-word analysis
        const fullTextMatches = data.text.match(looseDomainRegex);
        if (fullTextMatches && fullTextMatches.length > 0) {
            const uniqueMatches = [...new Set(fullTextMatches.map(m => m.trim().replace(/[.,;!?]$/, '')))];
            for (const match of uniqueMatches) {
                if (!foundSet.has(match.toLowerCase()) && domainRegex.test(match)) {
                    foundCount++;
                    foundSet.add(match.toLowerCase());
                    const li = document.createElement('li');
                    li.textContent = match + ' (Location in image not highlighted)';
                    li.style.wordBreak = 'break-all';
                    li.style.marginBottom = '4px';
                    li.style.color = '#777';
                    ul.appendChild(li);
                }
            }
        }

        if (foundCount === 0) {
            const li = document.createElement('li');
            li.textContent = 'No domains or web addresses were detected in this image.';
            li.style.color = '#777';
            li.style.listStyle = 'none';
            ul.style.paddingLeft = '0';
            ul.appendChild(li);
        }

    } catch (error) {
        status.innerText = 'An error occurred during OCR text extraction: ' + error.message;
        status.style.backgroundColor = '#ffebee';
        status.style.color = '#c62828';
        status.style.border = '1px solid #ef9a9a';
    }

    return container;
}