Image Name And Topic Identifier Tool

async function processImage(originalImg, maxPredictions = 3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    
    const minWidth = 500;
    const canvasWidth = Math.max(imgWidth, minWidth);

    try {
        // Dynamically load TensorFlow.js
        if (typeof window.tf === 'undefined') {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // Dynamically load MobileNet Image Classification Model
        if (typeof window.mobilenet === 'undefined') {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet/dist/mobilenet.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        const model = await window.mobilenet.load();
        const predictions = await model.classify(originalImg);
        
        const numPredictions = parseInt(maxPredictions) || 3;
        const topPredictions = predictions.slice(0, numPredictions);
        
        const padding = 20;
        const lineHeight = 30;
        const textSectionHeight = padding * 2 + topPredictions.length * lineHeight + 40; 
        
        const canvasHeight = imgHeight + textSectionHeight;
        
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        
        // Draw the background behind the image to center it properly if required
        ctx.fillStyle = '#222';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        const imgX = (canvas.width - imgWidth) / 2;
        ctx.drawImage(originalImg, imgX, 0, imgWidth, imgHeight);
        
        // Background block for predictions
        ctx.fillStyle = '#111';
        ctx.fillRect(0, imgHeight, canvas.width, textSectionHeight);
        
        // Draw prediction header
        ctx.fillStyle = '#FFF';
        ctx.font = 'bold 24px Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Identified Topics / Names', canvas.width / 2, imgHeight + 35);
        
        // Draw each prediction
        ctx.font = '18px Arial, sans-serif';
        topPredictions.forEach((pred, index) => {
            const y = imgHeight + 35 + 20 + (index + 1) * lineHeight;
            const probability = (pred.probability * 100).toFixed(2);
            const className = pred.className.charAt(0).toUpperCase() + pred.className.slice(1);
            const text = `${index + 1}. ${className} (${probability}%)`;
            ctx.fillText(text, canvas.width / 2, y);
        });
        
    } catch (error) {
        // Fallback layout in case of cors restrictions or script issues
        const textSectionHeight = 100;
        canvas.width = canvasWidth;
        canvas.height = imgHeight + textSectionHeight;
        
        ctx.fillStyle = '#222';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        const imgX = (canvas.width - imgWidth) / 2;
        ctx.drawImage(originalImg, imgX, 0, imgWidth, imgHeight);
        
        ctx.fillStyle = '#111';
        ctx.fillRect(0, imgHeight, canvas.width, textSectionHeight);
        
        ctx.fillStyle = 'red';
        ctx.font = '18px Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Error identifying image. Note: Cross-origin restrictions may apply.', canvas.width / 2, imgHeight + 50);
        console.error(error);
    }
    
    return canvas;
}