Image Character Finder

/**
 * A variable to cache the loaded COCO-SSD model promise.
 * This is defined outside the function scope to persist across multiple calls.
 */
let cocoSsdModelPromise;

/**
 * Finds and highlights human characters (persons) in an image using a pre-trained model.
 * This function dynamically loads TensorFlow.js and the COCO-SSD model if not already present.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} confidenceThreshold The minimum confidence score (0-1) for a detection to be considered valid. Default is 0.5.
 * @param {string} boxColor The color of the bounding box drawn around the character. Default is '#FF0000' (red).
 * @param {string} textColor The color of the label text. Default is '#FFFFFF' (white).
 * @param {number} lineWidth The width of the bounding box lines in pixels. Default is 2.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a new canvas element with the original image and bounding boxes drawn on it.
 */
async function processImage(originalImg, confidenceThreshold = 0.5, boxColor = '#FF0000', textColor = '#FFFFFF', lineWidth = 2) {

    /**
     * Helper function to dynamically load a script and return a promise.
     * @param {string} src The URL of the script to load.
     * @returns {Promise<void>} A promise that resolves when the script has loaded.
     */
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            // Check if the script is already on the page
            if (document.querySelector(`script[src="${src}"]`)) {
                // A more robust check might wait for the global variable to be defined,
                // but for this sequential load, this is sufficient.
                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);
        });
    };

    // Dynamically load TensorFlow.js and the COCO-SSD model if they aren't already available.
    // The scripts are loaded sequentially as coco-ssd depends on tfjs.
    if (typeof tf === 'undefined') {
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.13.0/dist/tf.min.js');
    }
    if (typeof cocoSsd === 'undefined') {
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js');
    }

    // Load the COCO-SSD model. If the model is already being loaded,
    // this will wait for the existing promise to resolve.
    if (!cocoSsdModelPromise) {
        cocoSsdModelPromise = cocoSsd.load();
    }
    const model = await cocoSsdModelPromise;

    // Perform object detection on the image.
    const predictions = await model.detect(originalImg);

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

    // Filter the predictions to only include 'person' class with a high enough score.
    const personPredictions = predictions.filter(prediction => {
        return prediction.class === 'person' && prediction.score >= confidenceThreshold;
    });

    // Draw a bounding box and label for each detected person.
    personPredictions.forEach(prediction => {
        const [x, y, width, height] = prediction.bbox;
        const score = Math.round(prediction.score * 100);
        const text = `person (${score}%)`;

        // Set up font and measure text for background
        ctx.font = '16px sans-serif';
        const textMetrics = ctx.measureText(text);
        const textHeight = 16; // Approximation for font height
        const textBgPadding = 4;

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

        // Draw a filled background for the text for better readability
        ctx.fillStyle = boxColor;
        // Position the label at the top-left corner of the box
        const textX = x + lineWidth / 2;
        const textY = y + lineWidth / 2;
        ctx.fillRect(
            textX,
            textY,
            textMetrics.width + textBgPadding * 2,
            textHeight + textBgPadding
        );

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

    return canvas;
}