Website Interface Address Image Extractor

function processImage(originalImg, language = "eng") {
    // Create the main container
    const container = document.createElement("div");
    container.style.fontFamily = "system-ui, -apple-system, sans-serif";
    container.style.margin = "0 auto";
    container.style.padding = "25px";
    container.style.backgroundColor = "#f9fafb";
    container.style.border = "1px solid #e5e7eb";
    container.style.borderRadius = "16px";
    container.style.boxShadow = "0 10px 25px rgba(0, 0, 0, 0.05)";
    container.style.maxWidth = "950px";
    container.style.boxSizing = "border-box";

    // Create a Header
    const title = document.createElement("h2");
    title.textContent = "Website Interface Address Extractor";
    title.style.marginTop = "0";
    title.style.marginBottom = "5px";
    title.style.color = "#111827";
    title.style.textAlign = "center";
    container.appendChild(title);
    
    const subtitle = document.createElement("p");
    subtitle.textContent = "Automatically extracts web URLs from website screenshots and UI images";
    subtitle.style.textAlign = "center";
    subtitle.style.color = "#6b7280";
    subtitle.style.fontSize = "14px";
    subtitle.style.marginBottom = "25px";
    container.appendChild(subtitle);

    // Status / Loading Indicator
    const statusBox = document.createElement("div");
    statusBox.style.padding = "12px 20px";
    statusBox.style.backgroundColor = "#eff6ff";
    statusBox.style.color = "#1d4ed8";
    statusBox.style.border = "1px solid #bfdbfe";
    statusBox.style.borderRadius = "8px";
    statusBox.style.marginBottom = "25px";
    statusBox.style.fontSize = "15px";
    statusBox.style.textAlign = "center";
    statusBox.style.fontWeight = "500";
    statusBox.textContent = "Initializing Extractor...";
    container.appendChild(statusBox);

    // Main layout flexbox
    const mainLayout = document.createElement("div");
    mainLayout.style.display = "flex";
    mainLayout.style.gap = "25px";
    mainLayout.style.flexWrap = "wrap";
    
    // Left panel: Canvas Annotations
    const leftPanel = document.createElement("div");
    leftPanel.style.flex = "1 1 450px";
    leftPanel.style.display = "flex";
    leftPanel.style.flexDirection = "column";
    
    const canvasLabel = document.createElement("div");
    canvasLabel.textContent = "Interface Analysis Overview:";
    canvasLabel.style.fontWeight = "600";
    canvasLabel.style.marginBottom = "12px";
    canvasLabel.style.fontSize = "15px";
    canvasLabel.style.color = "#374151";
    leftPanel.appendChild(canvasLabel);

    const canvas = document.createElement("canvas");
    canvas.width = originalImg.width || 800; // Fallback width
    canvas.height = originalImg.height || 600; // Fallback height
    canvas.style.maxWidth = "100%";
    canvas.style.height = "auto";
    canvas.style.borderRadius = "8px";
    canvas.style.border = "1px solid #d1d5db";
    canvas.style.boxShadow = "0 4px 6px rgba(0,0,0,0.05)";
    canvas.style.backgroundColor = "#fff";
    leftPanel.appendChild(canvas);

    // Ensure the image can be drawn accurately when originalImg is ready
    const ctx = canvas.getContext("2d");
    if (originalImg.complete && originalImg.naturalWidth !== 0) {
        ctx.drawImage(originalImg, 0, 0);
    } else {
        originalImg.addEventListener('load', () => {
            canvas.width = originalImg.width;
            canvas.height = originalImg.height;
            ctx.drawImage(originalImg, 0, 0);
        });
    }

    // Right panel: Results List
    const rightPanel = document.createElement("div");
    rightPanel.style.flex = "1 1 300px";
    rightPanel.style.display = "flex";
    rightPanel.style.flexDirection = "column";
    
    const resultLabel = document.createElement("div");
    resultLabel.textContent = "Extracted Addresses (URLs):";
    resultLabel.style.fontWeight = "600";
    resultLabel.style.marginBottom = "12px";
    resultLabel.style.fontSize = "15px";
    resultLabel.style.color = "#374151";
    rightPanel.appendChild(resultLabel);

    const addressesList = document.createElement("ul");
    addressesList.style.listStyleType = "none";
    addressesList.style.padding = "0";
    addressesList.style.margin = "0";
    addressesList.style.display = "flex";
    addressesList.style.flexDirection = "column";
    addressesList.style.gap = "10px";
    rightPanel.appendChild(addressesList);

    mainLayout.appendChild(leftPanel);
    mainLayout.appendChild(rightPanel);
    container.appendChild(mainLayout);

    // Main extraction function
    const runOCR = async () => {
        try {
            const worker = window.Tesseract;
            statusBox.textContent = "Reading text across the interface layout...";
            
            // Perform OCR using Tesseract.js
            const { data } = await worker.recognize(
                originalImg,
                language,
                {
                    logger: m => {
                        if (m.status === "recognizing text") {
                            statusBox.textContent = `Analyzing image content... ${Math.round(m.progress * 100)}%`;
                        }
                    }
                }
            );

            statusBox.textContent = "Scanning recognized text for website addresses...";
            
            // Regex to aggressively parse valid web urls domains from OCR output
            const urlRegex = /^(?:https?:\/\/|www\.)?(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?$/i;
            
            let foundUrls = [];

            if (data && data.words) {
                for (const word of data.words) {
                    const wText = word.text.trim();
                    // Strip trailing punctuation common in OCR output
                    const cleanText = wText.replace(/[.,:;!?\'\"]+$/, '');

                    if (urlRegex.test(cleanText) && cleanText.length > 4 && !cleanText.includes('@')) {
                        foundUrls.push({
                            text: cleanText,
                            bbox: word.bbox
                        });
                    }
                }
            }

            statusBox.style.display = "none";

            // Filter down to unique text strings so the list is clean
            const uniqueTexts = [...new Set(foundUrls.map(u => u.text))];

            if (uniqueTexts.length === 0) {
                const noResult = document.createElement("li");
                noResult.textContent = "No valid website addresses found in the image.";
                noResult.style.color = "#6b7280";
                noResult.style.fontStyle = "italic";
                noResult.style.padding = "16px";
                noResult.style.backgroundColor = "#fff";
                noResult.style.border = "1px solid #e5e7eb";
                noResult.style.borderRadius = "8px";
                addressesList.appendChild(noResult);
            } else {
                // Draw highlighted bounding boxes on the canvas to point out where URLs were found
                foundUrls.forEach(item => {
                    const { x0, y0, x1, y1 } = item.bbox;
                    ctx.beginPath();
                    ctx.rect(x0, y0, x1 - x0, y1 - y0);
                    ctx.lineWidth = Math.max(2, canvas.width * 0.004);
                    ctx.strokeStyle = "#10b981"; // Emerald green outline
                    ctx.stroke();
                    
                    // Add a semi-transparent colored highlight overlay
                    ctx.fillStyle = "rgba(16, 185, 129, 0.25)";
                    ctx.fill();
                });

                // Populate extracted links lists
                uniqueTexts.forEach(urlStr => {
                    const li = document.createElement("li");
                    li.style.backgroundColor = "#fff";
                    li.style.border = "1px solid #d1fae5";
                    li.style.borderLeft = "4px solid #10b981";
                    li.style.borderRadius = "8px";
                    li.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";
                    li.style.overflow = "hidden";
                    
                    const a = document.createElement("a");
                    // Prepend http protocol if no scheme is provided to ensure correct redirect
                    const hrefStr = urlStr.startsWith('http') ? urlStr : `http://${urlStr}`;
                    a.href = hrefStr;
                    a.textContent = urlStr;
                    a.target = "_blank";
                    a.style.display = "block";
                    a.style.padding = "12px 16px";
                    a.style.color = "#047857";
                    a.style.textDecoration = "none";
                    a.style.fontWeight = "500";
                    a.style.wordBreak = "break-all";
                    a.style.transition = "background-color 0.2s";
                    
                    a.onmouseover = () => a.style.backgroundColor = "#ecfdf5";
                    a.onmouseout = () => a.style.backgroundColor = "transparent";
                    
                    li.appendChild(a);
                    addressesList.appendChild(li);
                });
            }
        } catch (err) {
            statusBox.textContent = "Error processing image: " + err.message;
            statusBox.style.backgroundColor = "#fef2f2";
            statusBox.style.color = "#b91c1c";
            statusBox.style.border = "1px solid #fecaca";
        }
    };

    // Dynamically load the Tesseract.js script if not available natively
    if (window.Tesseract) {
        runOCR();
    } else {
        statusBox.textContent = "Downloading Tesseract.js OCR engine...";
        const script = document.createElement('script');
        script.src = "https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js";
        script.onload = runOCR;
        script.onerror = () => {
            statusBox.textContent = "System Error: Failed to load OCR engine. Please verify your internet connection setup.";
            statusBox.style.backgroundColor = "#fef2f2";
            statusBox.style.color = "#b91c1c";
            statusBox.style.border = "1px solid #fecaca";
        };
        document.head.appendChild(script);
    }

    return container;
}