Web Interface URL Scanner And Identifier Tool

async function processImage(originalImg, scanLanguage = "eng+rus", ocrHighlightColor = "#FF0000") {
    // Create the main container
    const container = document.createElement('div');
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.alignItems = "center";
    container.style.fontFamily = "Arial, sans-serif";
    container.style.width = "100%";
    container.style.boxSizing = "border-box";

    // Create a status notification
    const statusDiv = document.createElement('div');
    statusDiv.style.margin = "20px";
    statusDiv.style.padding = "15px";
    statusDiv.style.backgroundColor = "#eef7ff";
    statusDiv.style.border = "1px solid #cce5ff";
    statusDiv.style.borderRadius = "5px";
    statusDiv.style.textAlign = "center";
    statusDiv.innerHTML = `
        <div style="font-size: 1.1em; color: #004085; font-weight: bold;">Analyzing Web Interface...</div>
        <div style="font-size: 0.9em; color: #5a6268; margin-top: 5px;">Loading OCR engine and language data. Scanning image for URLs/Web Addresses. Please wait.</div>
    `;
    container.appendChild(statusDiv);

    // Prepare canvas to draw original image and highlights
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const foundUrls = new Set();
    // Comprehensive regex to capture URLs in text blocks
    const urlRegex = /\b(?:https?:\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]|\b(?:[a-z0-9](?:[-a-z0-9]*[a-z0-9])?\.)+(?:com|org|net|edu|gov|mil|biz|info|mobi|name|aero|jobs|museum|ru|[a-z]{2})\b(?:\/[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|])?/i;

    // 1. Try to detect embedded QR Codes/Barcodes using native BarcodeDetector API if available
    if ('BarcodeDetector' in window) {
        try {
            const supportedFormats = await BarcodeDetector.getSupportedFormats();
            if (supportedFormats.length > 0) {
                const barcodeDetector = new BarcodeDetector({ formats: supportedFormats });
                const barcodes = await barcodeDetector.detect(canvas);
                
                barcodes.forEach(barcode => {
                    const match = barcode.rawValue.match(urlRegex);
                    if (match) {
                        foundUrls.add(match[0]);
                        // Highlight detected QR Code area with a green box
                        ctx.lineWidth = Math.max(3, originalImg.width / 300);
                        ctx.strokeStyle = "#00FF00";
                        ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
                        ctx.beginPath();
                        if (barcode.cornerPoints && barcode.cornerPoints.length >= 3) {
                            ctx.moveTo(barcode.cornerPoints[0].x, barcode.cornerPoints[0].y);
                            barcode.cornerPoints.forEach(p => ctx.lineTo(p.x, p.y));
                            ctx.closePath();
                            ctx.stroke();
                            ctx.fill();
                        }
                    }
                });
            }
        } catch(e) {
            console.warn("BarcodeDetector encountered an issue:", e);
        }
    }

    // 2. Load Tesseract.js dynamically for OCR functionality
    await new Promise((resolve, reject) => {
        if (window.Tesseract) {
            resolve();
            return;
        }
        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 optical character recognition on the interface image
        const { data } = await Tesseract.recognize(canvas, scanLanguage);

        // Highlight configuration for OCR text matches
        ctx.lineWidth = Math.max(2, originalImg.width / 500);
        ctx.strokeStyle = ocrHighlightColor;
        
        // Convert to RGB for transparent fill
        let fillRgba = "rgba(255, 0, 0, 0.2)"; // Fallback
        if (/^#([A-Fa-f0-9]{6})$/.test(ocrHighlightColor)) {
            const r = parseInt(ocrHighlightColor.slice(1, 3), 16);
            const g = parseInt(ocrHighlightColor.slice(3, 5), 16);
            const b = parseInt(ocrHighlightColor.slice(5, 7), 16);
            fillRgba = `rgba(${r}, ${g}, ${b}, 0.2)`;
        }
        ctx.fillStyle = fillRgba;

        data.words.forEach(word => {
            const match = word.text.match(urlRegex);
            if (match) {
                // Ensure there's no trailing punctuation hooked from poor OCR
                let cleanUrl = match[0].replace(/[.,;:!)"']$/, "");
                foundUrls.add(cleanUrl);
                
                const bbox = word.bbox;
                if (bbox) {
                    ctx.beginPath();
                    ctx.rect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
                    ctx.stroke();
                    ctx.fill();
                }
            }
        });
        
        statusDiv.style.display = "none";
    } catch(err) {
        statusDiv.style.backgroundColor = "#fff3cd";
        statusDiv.style.borderColor = "#ffeeba";
        statusDiv.innerHTML = `<div style="color: #856404;"><strong>Note:</strong> Partial error during OCR parsing. Displaying best results.</div>`;
        console.error("Tesseract.js error:", err);
    }

    // Prepare Results Section
    const resultsContainer = document.createElement('div');
    resultsContainer.style.width = "100%";
    resultsContainer.style.padding = "20px";
    resultsContainer.style.boxSizing = "border-box";
    resultsContainer.style.background = "#f9f9f9";
    resultsContainer.style.borderTop = "1px solid #ddd";

    const urlsArray = Array.from(foundUrls);

    if (urlsArray.length > 0) {
        resultsContainer.innerHTML = `<h3 style="margin-top:0; color: #333;">Identified URLs / Web Interfaces:</h3>`;
        const ul = document.createElement('ul');
        ul.style.wordBreak = "break-all";
        ul.style.paddingLeft = "20px";
        ul.style.lineHeight = "1.8";
        
        urlsArray.forEach(url => {
            const li = document.createElement('li');
            const a = document.createElement('a');
            
            // Format logical link structure
            let href = url;
            if (!/^https?:\/\//i.test(url)) {
                href = 'http://' + url;
            }
            
            a.href = href;
            a.target = "_blank";
            a.rel = "noopener noreferrer";
            a.textContent = url;
            a.style.color = "#0056b3";
            a.style.textDecoration = "none";
            a.style.fontWeight = "bold";
            
            a.onmouseenter = () => { a.style.textDecoration = "underline"; };
            a.onmouseleave = () => { a.style.textDecoration = "none"; };

            li.appendChild(a);
            ul.appendChild(li);
        });
        resultsContainer.appendChild(ul);
    } else {
        resultsContainer.innerHTML = `<h3 style="margin-top:0; color: #666; font-weight: normal;">No valid web URLs or addresses were detected in the image.</h3>`;
    }

    // Set styles for final displayed canvas
    canvas.style.maxWidth = "100%";
    canvas.style.height = "auto";
    canvas.style.border = "1px solid #ccc";
    canvas.style.boxShadow = "0 4px 8px rgba(0,0,0,0.1)";
    canvas.style.borderRadius = "4px";
    canvas.style.marginBottom = "20px";

    // Embed all UI elements into main container layout
    container.appendChild(canvas);
    container.appendChild(resultsContainer);

    return container;
}