Image Product Finder

async function processImage(originalImg) {
    /**
     * Dynamically loads a script and returns a promise that resolves when the script is loaded.
     * Prevents re-loading the same script if the function is called multiple times.
     * @param {string} url - The URL of the script to load.
     * @param {string} globalVar - The name of the global variable the script is expected to create.
     * @returns {Promise<void>}
     */
    const loadScript = (url, globalVar) => {
        return new Promise((resolve, reject) => {
            // If the global variable already exists, the script is loaded.
            if (window[globalVar]) {
                return resolve();
            }
            // Check if a script tag with this src already exists to prevent duplicate downloads.
            if (document.querySelector(`script[src="${url}"]`)) {
                // If it exists but the global isn't ready, wait for it.
                const interval = setInterval(() => {
                    if (window[globalVar]) {
                        clearInterval(interval);
                        resolve();
                    }
                }, 100);
            } else {
                // Otherwise, create and append the script tag.
                const script = document.createElement('script');
                script.src = url;
                script.onload = () => resolve();
                script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
                document.head.appendChild(script);
            }
        });
    };

    // Create a main container that will hold the canvas and all overlay elements.
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block'; // Ensures the container fits the canvas size.

    // Create a canvas to draw the image on.
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    container.appendChild(canvas);

    // Create and display a loading indicator.
    const loadingIndicator = document.createElement('div');
    loadingIndicator.textContent = 'Analyzing image...';
    loadingIndicator.style.position = 'absolute';
    loadingIndicator.style.top = '50%';
    loadingIndicator.style.left = '50%';
    loadingIndicator.style.transform = 'translate(-50%, -50%)';
    loadingIndicator.style.padding = '10px 20px';
    loadingIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
    loadingIndicator.style.color = 'white';
    loadingIndicator.style.borderRadius = '8px';
    loadingIndicator.style.fontFamily = 'Arial, sans-serif';
    container.appendChild(loadingIndicator);

    try {
        // Load TensorFlow.js and the COCO-SSD model.
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js', 'tf');
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest/dist/coco-ssd.min.js', 'cocoSsd');

        loadingIndicator.textContent = 'Loading model...';

        // Load the pre-trained object detection model.
        const model = await cocoSsd.load();
        
        loadingIndicator.textContent = 'Detecting products...';

        // Detect objects in the image.
        const predictions = await model.detect(originalImg);
        
        container.removeChild(loadingIndicator); // Remove the loading indicator.

        if (predictions.length === 0) {
            const noResult = document.createElement('div');
            noResult.textContent = 'No products found.';
            // Reuse loading indicator styles for the message.
            Object.assign(noResult.style, loadingIndicator.style);
            noResult.style.backgroundColor = 'rgba(255, 100, 0, 0.8)';
            container.appendChild(noResult);
        } else {
            // Draw a bounding box and a link for each detected object.
            predictions.forEach(prediction => {
                const [x, y, width, height] = prediction.bbox;

                // Create a clickable link that wraps the bounding box and label.
                const boxLink = document.createElement('a');
                const query = encodeURIComponent(prediction.class);
                boxLink.href = `https://www.google.com/search?tbm=shop&q=${query}`;
                boxLink.target = '_blank'; // Open search results in a new tab.
                boxLink.rel = 'noopener noreferrer';
                boxLink.title = `Find "${prediction.class}" products`;

                boxLink.style.position = 'absolute';
                boxLink.style.left = `${x}px`;
                boxLink.style.top = `${y}px`;
                boxLink.style.width = `${width}px`;
                boxLink.style.height = `${height}px`;
                boxLink.style.border = '3px solid #00FFFF';
                boxLink.style.boxSizing = 'border-box';
                boxLink.style.cursor = 'pointer';
                boxLink.style.textDecoration = 'none';

                // Create a label for the detected object.
                const label = document.createElement('div');
                label.textContent = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;
                label.style.position = 'absolute';
                label.style.left = '0px';
                label.style.top = '-22px';
                label.style.backgroundColor = '#00FFFF';
                label.style.color = '#000000';
                label.style.padding = '2px 5px';
                label.style.fontSize = '14px';
                label.style.fontFamily = 'Arial, sans-serif';
                label.style.whiteSpace = 'nowrap';
                
                boxLink.appendChild(label);
                container.appendChild(boxLink);
            });
        }
    } catch (error) {
        console.error("Error during image product finding:", error);
        loadingIndicator.textContent = 'Error processing image.';
        loadingIndicator.style.backgroundColor = 'rgba(200, 0, 0, 0.8)';
    }

    return container;
}