Image Object Detector

async function processImage(originalImg, threshold = 0.5, maxObjects = 20, boxColor = '#00FF00', textColor = '#FFFFFF', font = '16px sans-serif') {

    /**
     * Helper function to dynamically load a script and return a promise.
     * Caches the promise to avoid reloading the same script.
     * @param {string} url - The URL of the script to load.
     * @returns {Promise} - A promise that resolves when the script is loaded.
     */
    const loadScript = (url) => {
        if (!window._scriptPromises) {
            window._scriptPromises = {};
        }
        if (!window._scriptPromises[url]) {
            window._scriptPromises[url] = new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = url;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }
        return window._scriptPromises[url];
    };

    /**
     * Initializes and returns the COCO-SSD model.
     * Caches the model promise to avoid reloading it on subsequent calls.
     * @returns {Promise<cocoSsd.ObjectDetection>} A promise that resolves with the loaded model.
     */
    const getModel = async () => {
        if (!window._cocoSsdModelPromise) {
            window._cocoSsdModelPromise = new Promise(async (resolve, reject) => {
                try {
                    // Load dependent libraries first
                    await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js');
                    await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js');
                    // Load the model
                    const model = await cocoSsd.load({
                        base: 'lite_mobilenet_v2'
                    });
                    resolve(model);
                } catch (error) {
                    console.error("Failed to load object detection model or its dependencies.", error);
                    reject(error);
                }
            });
        }
        return window._cocoSsdModelPromise;
    };


    // Create a canvas to draw on
    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);

    try {
        // Load the model
        const model = await getModel();

        // Perform object detection
        const predictions = await model.detect(originalImg, maxObjects, threshold);

        // Draw the predictions on the canvas
        predictions.forEach(prediction => {
            const [x, y, width, height] = prediction.bbox;
            const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;

            // Style for the bounding box
            ctx.strokeStyle = boxColor;
            ctx.lineWidth = Math.max(2, canvas.width / 300); // Scale line width with image size
            ctx.strokeRect(x, y, width, height);

            // Style and measure the text
            ctx.font = font;
            const textWidth = ctx.measureText(text).width;
            const textHeight = parseInt(font, 10);

            // Position for the label, with logic to keep it within the canvas bounds
            let rectX = x;
            let textX = x + 4;
            // Place label above the box, but if it would go off-screen, place it inside.
            let rectY = y - textHeight - (ctx.lineWidth / 2);
            let textY = y - (ctx.lineWidth / 2);

            if (rectY < 0) {
                rectY = y + (ctx.lineWidth / 2);
                textY = y + textHeight + (ctx.lineWidth / 2);
            }

            // Draw a filled background for the label for better readability
            ctx.fillStyle = boxColor;
            ctx.fillRect(rectX, rectY, textWidth + 8, textHeight + 4);

            // Draw the label text
            ctx.fillStyle = textColor;
            ctx.fillText(text, textX, textY);
        });

    } catch (error) {
        console.error("Object detection failed:", error);
        // Display an error message on the canvas if something goes wrong
        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, 50);
        ctx.fillStyle = 'white';
        ctx.font = '20px sans-serif';
        ctx.fillText('Error: Failed to perform object detection.', 10, 35);
    }

    // Return the canvas with the image and detections
    return canvas;
}