Image AI Powered Detector Creator

async function processImage(originalImg, minScore = 0.5) {

    /**
     * Dynamically loads a script only if it hasn't been loaded yet.
     * @param {string} src The URL of the script to load.
     * @returns {Promise<void>} A promise that resolves when the script is loaded.
     */
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            // Resolve immediately if the script is already on the page
            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);
        });
    };
    
    /**
     * Renders an error message onto a canvas.
     * @param {string} message The error message to display.
     * @returns {HTMLCanvasElement} A canvas element with the error message.
     */
    const createErrorCanvas = (message) => {
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.naturalWidth > 0 ? originalImg.naturalWidth : 500;
        errorCanvas.height = originalImg.naturalHeight > 0 ? originalImg.naturalHeight : 300;
        const ctx = errorCanvas.getContext('2d');
        ctx.fillStyle = "#f0f0f0";
        ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        ctx.fillStyle = "#d9534f";
        ctx.font = "bold 16px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(message, errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    };

    try {
        // Load TensorFlow.js and the COCO-SSD model scripts if they aren't already available.
        // cocoSsd is attached to the window object by its script.
        if (typeof cocoSsd === 'undefined') {
            // These scripts must be loaded in order.
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.20.0/dist/tf.min.js');
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.3/dist/coco-ssd.min.js');
        }
    } catch (error) {
        console.error("Failed to load AI model scripts:", error);
        return createErrorCanvas("Error: Could not load required AI libraries.");
    }

    // Create a new canvas to draw the image and detection results.
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

    // Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    try {
        // Load the COCO-SSD model. We cache it in the window scope to avoid reloading.
        if (!window.cocoSsdModel) {
            console.log("Loading AI object detection model (this may take a moment)...");
            window.cocoSsdModel = await cocoSsd.load();
            console.log("AI model loaded successfully.");
        }

        // Run the model to detect objects in the image.
        const predictions = await window.cocoSsdModel.detect(originalImg);

        // Iterate through each prediction and draw it on the canvas.
        predictions.forEach(prediction => {
            // Filter out predictions below the minimum score threshold.
            if (prediction.score > minScore) {
                const [x, y, width, height] = prediction.bbox;
                const label = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;

                // Set styling for the bounding box and label.
                const color = '#00BFFF'; // DeepSkyBlue
                ctx.strokeStyle = color;
                ctx.lineWidth = 2;
                ctx.fillStyle = color;
                ctx.font = '16px Arial';
                ctx.textBaseline = 'top';

                // Draw the bounding box.
                ctx.beginPath();
                ctx.rect(x, y, width, height);
                ctx.stroke();

                // Draw the label background.
                const textWidth = ctx.measureText(label).width;
                const textHeight = parseInt(ctx.font, 10); // Approximation
                ctx.fillRect(x, y, textWidth + 8, textHeight + 4);

                // Draw the label text over the background.
                ctx.fillStyle = '#FFFFFF';
                ctx.fillText(label, x + 4, y + 2);
            }
        });
    } catch (error) {
        console.error("Error during object detection:", error);
         return createErrorCanvas("An error occurred during object detection.");
    }

    // Return the canvas with the detection results.
    return canvas;
}