Image Identifier By Text Tool

/**
 * Identifies common objects in an image using a pre-trained model and draws bounding boxes around them.
 * This function dynamically loads TensorFlow.js and the COCO-SSD model to perform object detection.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} confidenceThreshold=0.5 The minimum confidence score (from 0 to 1) for a detected object to be displayed.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the original image and the identified objects highlighted.
 */
async function processImage(originalImg, confidenceThreshold = 0.5) {
    // Helper function to dynamically load a script if it's not already loaded.
    const loadScript = (url, globalName) => {
        return new Promise((resolve, reject) => {
            // Resolve immediately if the library is already available on the window object.
            if (window[globalName]) {
                return resolve();
            }
            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 canvas element 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 on the canvas.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Helper function to display messages on the canvas.
    const drawMessage = (message, isError = false) => {
        const barHeight = 40;
        const y = canvas.height / 2 - barHeight / 2;
        ctx.fillStyle = isError ? "rgba(200, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.7)";
        ctx.fillRect(0, y, canvas.width, barHeight);
        
        ctx.fillStyle = "white";
        ctx.font = "20px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(message, canvas.width / 2, canvas.height / 2);
    };

    try {
        // Sequentially load TensorFlow.js and the COCO-SSD model.
        // COCO-SSD depends on TensorFlow.js, so it must be loaded first.
        drawMessage("Loading libraries...");
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js', 'tf');
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js', 'cocoSsd');

        // Load the COCO-SSD model.
        drawMessage("Loading object detection model...");
        const model = await cocoSsd.load();
        
        // Redraw image to clear the message.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        drawMessage("Identifying objects in the image...");

        // Detect objects in the image.
        const predictions = await model.detect(originalImg);
        
        // Clear the "identifying" message by redrawing the original image.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // Filter predictions based on the confidence threshold and draw them.
        predictions
            .filter(p => p.score >= confidenceThreshold)
            .forEach(prediction => {
                const [x, y, width, height] = prediction.bbox;
                const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;

                // Style for the bounding box and label
                const color = '#32CD32'; // LimeGreen for high visibility
                ctx.strokeStyle = color;
                ctx.lineWidth = 3;
                ctx.font = '18px 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 = 25; // A fixed height for the label background
                ctx.fillStyle = color;
                ctx.fillRect(x, y > textHeight ? y - textHeight : y, textWidth + 10, textHeight);
                
                // Draw the label text
                ctx.fillStyle = '#000000'; // Black text for contrast
                ctx.textAlign = "left";
                ctx.textBaseline = "top";
                ctx.fillText(text, x + 5, (y > textHeight ? y - textHeight : y) + 5);
            });

    } catch (error) {
        console.error("Image identification failed:", error);
        drawMessage("Error identifying objects.", true);
    }

    return canvas;
}