Image Logo Identifier

/**
 * Identifies objects in an image using a pre-trained machine learning model.
 * Note: This function uses the COCO-SSD model, which is a general-purpose object detector.
 * It can identify 90 common objects (like 'person', 'car', 'cup'), but it is NOT
 * specifically trained to recognize commercial logos (e.g., Nike, Apple).
 * True logo identification would require a model specifically trained on a logo dataset.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the original image and bounding boxes drawn around detected objects.
 */
async function processImage(originalImg) {
    // Helper function to dynamically load a script and return a promise
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            // Check if script is already loaded
            if (document.querySelector(`script[src="${src}"]`)) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Script load error for ${src}`));
            document.head.appendChild(script);
        });
    };

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

    // Provide initial user feedback
    const drawCenteredText = (text, color = 'white') => {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
        ctx.fillRect(0, canvas.height / 2 - 20, canvas.width, 40);
        ctx.font = '24px Arial';
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
    };
    
    drawCenteredText('Loading AI Model...');

    // These are the URLs for TensorFlow.js and the COCO-SSD model
    const TFJS_URL = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.13.0/dist/tf.min.js';
    const COCO_SSD_URL = 'https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js';

    try {
        // Load the necessary scripts
        await Promise.all([loadScript(TFJS_URL), loadScript(COCO_SSD_URL)]);
    } catch (error) {
        console.error("Failed to load AI model scripts:", error);
        ctx.drawImage(originalImg, 0, 0); // Redraw original image
        drawCenteredText('Error: Failed to load AI model', 'red');
        return canvas;
    }

    // Now that scripts are loaded, we can use `cocoSsd`
    ctx.drawImage(originalImg, 0, 0); // Redraw to clear previous text
    drawCenteredText('Analyzing Image...');

    try {
        // Load the COCO-SSD model.
        const model = await cocoSsd.load();

        // Detect objects in the image.
        const predictions = await model.detect(originalImg);
        
        // Clear analyzing text and redraw image
        ctx.drawImage(originalImg, 0, 0);

        if (predictions.length > 0) {
            // Draw bounding boxes and labels for each prediction
            predictions.forEach(prediction => {
                const [x, y, width, height] = prediction.bbox;
                const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;

                // Set styling for the bounding box and text
                const color = '#00FFFF'; // Bright Cyan
                ctx.strokeStyle = color;
                ctx.lineWidth = 2;
                ctx.font = '16px Arial';
                
                // Draw the bounding box
                ctx.beginPath();
                ctx.rect(x, y, width, height);
                ctx.stroke();

                // Draw the label background
                const textWidth = ctx.measureText(text).width;
                const textHeight = 18;
                ctx.fillStyle = color;
                ctx.fillRect(x - 1, y, textWidth + 8, textHeight);

                // Draw the label text in black
                ctx.fillStyle = '#000000';
                ctx.fillText(text, x + 4, y + 14);
            });
        } else {
            drawCenteredText('No objects detected.');
        }

    } catch (error) {
        console.error("Error during model execution:", error);
        ctx.drawImage(originalImg, 0, 0); // Redraw original image
        drawCenteredText('Error: Analysis failed', 'red');
    }

    return canvas;
}