Image Topic Identifier Tool

async function processImage(originalImg, maxTopics = 3, overlayOpacity = 0.75) {
    // Create a new canvas to draw the image and text overlay
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the source image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Helper function to dynamically load JS scripts (TensorFlow & MobileNet)
    const loadScript = (src, globalVarName) => {
        return new Promise((resolve, reject) => {
            if (window[globalVarName]) { return resolve(); }
            const script = document.createElement('script');
            script.src = src;
            script.crossOrigin = "anonymous";
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load ${src}`));
            document.head.appendChild(script);
        });
    };

    try {
        // Load TensorFlow.js core first, then the MobileNet image classification model
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');

        // Load the AI model
        const model = await window.mobilenet.load();
        
        // Classify the image to extract the topics/objects
        const predictions = await model.classify(canvas);
        
        // Format parameters
        const limit = typeof maxTopics === 'string' ? parseInt(maxTopics, 10) : maxTopics;
        const opacityVal = typeof overlayOpacity === 'string' ? parseFloat(overlayOpacity) : overlayOpacity;
        const opacity = isNaN(opacityVal) ? 0.75 : Math.max(0, Math.min(1, opacityVal));
        
        // Extract the top requested number of limit topics
        const topics = predictions.slice(0, limit > 0 ? limit : 3);
        
        // Prepare display text
        const fontSize = Math.max(16, Math.floor(height * 0.04));
        const padding = fontSize;
        const textLines = ["Identified Image Topics:"].concat(
            topics.map(p => `• ${p.className} (${(p.probability * 100).toFixed(1)}%)`)
        );
        
        const boxHeight = (textLines.length * fontSize * 1.5) + padding;
        
        // Draw the background overlay for the text at the bottom
        ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
        ctx.fillRect(0, height - boxHeight, width, boxHeight);
        
        // Draw the topic information lines
        ctx.textBaseline = 'top';
        textLines.forEach((line, idx) => {
            const y = height - boxHeight + (padding / 2) + (idx * fontSize * 1.5);
            
            // Format title differently from items
            if (idx === 0) {
                ctx.font = `bold ${fontSize}px Arial, sans-serif`;
                ctx.fillStyle = '#f9d342'; 
            } else {
                ctx.font = `${fontSize}px Arial, sans-serif`;
                ctx.fillStyle = '#ffffff';
            }
            
            ctx.fillText(line, padding, y);
        });

    } catch (err) {
        console.error("Topic identification error:", err);
        // Draw error message overlay in case of failure
        ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
        ctx.fillRect(0, 0, width, 50);
        ctx.fillStyle = '#ffffff';
        ctx.font = '20px Arial, sans-serif';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error Identifying Topic', 10, 25);
    }

    return canvas;
}