Image Visual Search And Object Recognition Tool

async function processImage(originalImg, minScore = 0.5, highlightColor = "#00FFFF", fontString = "16px Arial") {
    // Creating the canvas and context
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Dynamically load TensorFlow.js and the COCO-SSD object detection model
    if (!window.tfjsCocoSsdPromise) {
        window.tfjsCocoSsdPromise = (async () => {
            const loadScript = (src) => new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.crossOrigin = "anonymous";
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
            
            // Load base TensorFlow.js library
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs');
            // Load the COCO-SSD model (Common Objects in Context)
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd');
        })();
    }
    
    try {
        // Wait for scripts to finish loading
        await window.tfjsCocoSsdPromise;

        // Overlay a temporary loading message natively if analyzing is expected to be slow
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, canvas.width, 40);
        ctx.fillStyle = '#FFFFFF';
        ctx.font = fontString;
        ctx.textBaseline = 'top';
        ctx.fillText("Analyzing image...", 10, 10);

        // Load the model (this downloads the weights if not cached)
        const model = await cocoSsd.load();
        
        // Detect objects in the image
        const predictions = await model.detect(canvas);

        // Redraw image to clear the "Analyzing image..." text
        ctx.drawImage(originalImg, 0, 0);

        // Keep track of valid predictions to display empty state if needed
        let objectsFound = 0;

        // Draw predictions to mimic a visual search / object recognition tool
        predictions.forEach(prediction => {
            if (prediction.score >= minScore) {
                objectsFound++;
                const [x, y, width, height] = prediction.bbox;
                const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;
                
                // Draw bounding box
                ctx.strokeStyle = highlightColor;
                ctx.lineWidth = 3;
                ctx.strokeRect(x, y, width, height);

                // Setup font to measure text width and dynamic positioning
                ctx.font = fontString;
                const textWidth = ctx.measureText(text).width;
                const textHeight = parseInt(fontString, 10) || 16;
                
                // Make sure the label isn't drawn completely outside the canvas
                let boxY = y - textHeight - 8;
                if (boxY < 0) {
                    boxY = y; 
                }
                
                // Draw label background for better visibility
                ctx.fillStyle = highlightColor;
                ctx.fillRect(x, boxY, textWidth + 8, textHeight + 8);
                
                // Draw label text
                ctx.fillStyle = '#000000'; // Contrast color for text
                ctx.textBaseline = 'top';
                ctx.fillText(text, x + 4, boxY + 4);
            }
        });

        // Notify user if no objects met the threshold criteria
        if (objectsFound === 0) {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
            ctx.fillRect(0, 0, canvas.width, 40);
            ctx.fillStyle = highlightColor;
            ctx.font = fontString;
            ctx.textBaseline = 'top';
            ctx.fillText(`No notable objects detected (threshold: ${minScore * 100}%).`, 10, 10);
        }

    } catch (error) {
        // Redraw image to clear the "Analyzing image..." text on error
        ctx.drawImage(originalImg, 0, 0);
        
        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, 40);
        ctx.fillStyle = '#FFFFFF';
        ctx.font = fontString;
        ctx.textBaseline = 'top';
        ctx.fillText("Error: Failed to load visual recognition model.", 10, 10);
        console.error("TFJS Object Detection Error:", error);
    }
    
    return canvas;
}