Image Infobox Scanner And Identifier Tool

function processImage(originalImg, boxColor = "#00FF00", labelTextColor = "#000000", minConfidence = "0.5") {
    const minConf = parseFloat(minConfidence);
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image initially
    ctx.drawImage(originalImg, 0, 0);

    // Overlay a loading indicator
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const loadingFontSize = Math.max(16, Math.floor(canvas.width / 25));
    ctx.font = `bold ${loadingFontSize}px Arial`;
    ctx.fillStyle = '#FFFFFF';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Scanning for infoboxes/objects...', canvas.width / 2, canvas.height / 2);

    const loadScript = (src, globalVar) => {
        return new Promise((resolve, reject) => {
            if (window[globalVar]) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    };

    (async () => {
        try {
            // Dynamically load TensorFlow.js and the pre-trained COCO-SSD object detection model
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs', 'tf');
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd', 'cocoSsd');

            const model = await window.cocoSsd.load();
            const predictions = await model.detect(originalImg);

            // Clear loading overlay and redraw original image
            ctx.drawImage(originalImg, 0, 0);

            let hasDetections = false;

            predictions.forEach(prediction => {
                if (prediction.score >= minConf) {
                    hasDetections = true;
                    const [x, y, width, height] = prediction.bbox;

                    // Draw the bounding box (infobox)
                    ctx.strokeStyle = boxColor;
                    const lineWidth = Math.max(2, Math.floor(canvas.width / 300));
                    ctx.lineWidth = lineWidth;
                    ctx.strokeRect(x, y, width, height);

                    // Draw the label / info
                    const confidencePercent = Math.round(prediction.score * 100);
                    const label = `${prediction.class.toUpperCase()} (${confidencePercent}%)`;
                    const fontSize = Math.max(12, Math.floor(canvas.width / 60));
                    ctx.font = `bold ${fontSize}px Arial`;
                    
                    const textWidth = ctx.measureText(label).width;
                    const textHeight = fontSize + 8;

                    // Infobox label background
                    ctx.fillStyle = boxColor;
                    const labelY = y > textHeight ? y - textHeight : y;
                    ctx.fillRect(x - (lineWidth / 2), labelY, textWidth + 10, textHeight);

                    // Infobox label text
                    ctx.fillStyle = labelTextColor;
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'top';
                    ctx.fillText(label, x + 5 - (lineWidth / 2), labelY + 4);
                }
            });

            if (!hasDetections) {
                const noObjectsMsg = 'No notable regions identified.';
                const fontSize = Math.max(16, Math.floor(canvas.width / 40));
                ctx.font = `${fontSize}px Arial`;
                const textWidth = ctx.measureText(noObjectsMsg).width;
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(10, 10, textWidth + 20, fontSize + 10);
                ctx.fillStyle = '#FFFFFF';
                ctx.textAlign = 'left';
                ctx.textBaseline = 'top';
                ctx.fillText(noObjectsMsg, 20, 15);
            }

        } catch (error) {
            console.error('Error during infobox identification:', error);
            ctx.drawImage(originalImg, 0, 0);
            const errorFontSize = Math.max(14, Math.floor(canvas.width / 40));
            ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
            ctx.fillRect(0, 0, canvas.width, errorFontSize + 20);
            ctx.fillStyle = '#FFFFFF';
            ctx.font = `${errorFontSize}px Arial`;
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            ctx.fillText('Failed to load scanner model or process image.', 10, 10);
        }
    })();

    return canvas;
}