Image Analysis Tool For Negative Sentiment Detection

/**
 * Analyzes an image to detect faces with "negative" sentiment based on facial expressions.
 * This function uses the face-api.js library to perform face detection and expression recognition.
 * It will dynamically load the required library and AI models from a CDN on first run.
 * 
 * @param {Image} originalImg The original image object to analyze.
 * @param {number} negativeThreshold A number between 0 and 1. A detected negative expression is only shown if its confidence score is above this threshold. Default is 0.5.
 * @param {string} expressions A comma-separated string of facial expressions to consider "negative". Possible values are: angry, disgusted, fearful, sad, surprised, neutral. Default is 'angry,sad,fearful,disgusted'.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a new canvas element. The canvas contains the original image with red bounding boxes and labels drawn around faces exhibiting the specified negative emotions. If an error occurs (e.g., cannot load models), it returns a canvas with an error message drawn on it.
 */
async function processImage(originalImg, negativeThreshold = 0.5, expressions = 'angry,sad,fearful,disgusted') {

    // Singleton promise to ensure the face-api.js library and its models are loaded only once,
    // even if this function is called multiple times.
    if (!window.faceApiPromise) {
        window.faceApiPromise = new Promise((resolve, reject) => {
            // Check if library is already available
            if (window.faceapi && window.faceApiModelsLoaded) {
                return resolve();
            }

            // Create a script element to load face-api.js
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js';
            script.async = true;

            script.onload = async () => {
                try {
                    // Once the script is loaded, load the necessary pre-trained models.
                    const MODEL_URL = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/weights';
                    await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);
                    await faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL);
                    window.faceApiModelsLoaded = true; // Set a flag to indicate successful model loading
                    resolve();
                } catch (error) {
                    console.error('Error loading face-api.js models:', error);
                    delete window.faceApiPromise; // Allow retrying on next call
                    reject(error);
                }
            };

            script.onerror = (error) => {
                console.error('Error loading face-api.js script:', error);
                delete window.faceApiPromise; // Allow retrying on next call
                reject(error);
            };

            document.head.appendChild(script);
        });
    }

    try {
        // Wait for the library and models to be fully loaded and ready.
        await window.faceApiPromise;

        // Create a canvas and draw the original image onto it.
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        // Perform face detection with expression analysis.
        const detections = await faceapi.detectAllFaces(originalImg, new faceapi.TinyFaceDetectorOptions()).withFaceExpressions();

        // If no faces are detected, return the canvas with a simple message.
        if (!detections || detections.length === 0) {
            ctx.font = `bold ${Math.min(30, canvas.width / 15)}px Arial`;
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('No faces detected', canvas.width / 2, canvas.height / 2);
            return canvas;
        }

        // Parse the user-provided string of negative expressions into a Set for efficient lookup.
        const negativeExpressionsSet = new Set(expressions.split(',').map(e => e.trim().toLowerCase()));

        // Iterate over each detected face.
        detections.forEach(detection => {
            let dominantNegativeExpression = null;
            let maxScore = 0;

            // Find the most prominent expression among those defined as "negative".
            for (const [expression, score] of Object.entries(detection.expressions)) {
                if (negativeExpressionsSet.has(expression) && score > maxScore) {
                    maxScore = score;
                    dominantNegativeExpression = expression;
                }
            }

            // If a dominant negative expression is found with a score above the threshold, draw annotations.
            if (dominantNegativeExpression && maxScore > negativeThreshold) {
                const box = detection.detection.box;
                const label = `${dominantNegativeExpression} (${Math.round(maxScore * 100)}%)`;

                // Set up drawing styles. Font size and line width are dynamic based on box size.
                const fontSize = Math.max(12, box.width / 8);
                ctx.font = `bold ${fontSize}px Arial`;
                ctx.lineWidth = Math.max(2, box.width / 100);

                // Draw the label background rectangle.
                ctx.fillStyle = '#FF0000';
                const textWidth = ctx.measureText(label).width;
                const textHeight = fontSize * 1.2;
                // Position label above face, but move it below if the face is at the top edge of the image.
                const labelY = box.y > textHeight ? box.y : box.y + box.height + textHeight;
                ctx.fillRect(box.x, labelY - textHeight, textWidth + 8, textHeight);

                // Draw the label text.
                ctx.fillStyle = '#FFFFFF';
                ctx.textBaseline = 'bottom';
                ctx.fillText(label, box.x + 4, labelY - (textHeight * 0.1));

                // Draw the red bounding box around the face.
                ctx.strokeStyle = '#FF0000';
                ctx.strokeRect(box.x, box.y, box.width, box.height);
            }
        });

        return canvas;

    } catch (error) {
        console.error("Image analysis failed:", error);
        // In case of an error, return a canvas with the original image and an error message overlay.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.naturalWidth;
        errorCanvas.height = originalImg.naturalHeight;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.drawImage(originalImg, 0, 0);
        errorCtx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        errorCtx.fillStyle = 'white';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.font = `bold ${Math.min(30, errorCanvas.width / 15)}px Arial`;
        errorCtx.fillText('Could not analyze image.', errorCanvas.width / 2, errorCanvas.height / 2 - 20);
        errorCtx.font = `${Math.min(20, errorCanvas.width / 20)}px Arial`;
        errorCtx.fillText('Check browser console for errors.', errorCanvas.width / 2, errorCanvas.height / 2 + 20);
        return errorCanvas;
    }
}