AI Image Recognition Tool

async function processImage(originalImg, topK = 5) {
    /**
     * Helper function to dynamically load a script and return a promise.
     * It checks if the script is already on the page to avoid re-loading.
     * @param {string} src - The source URL of the script to load.
     * @returns {Promise<void>} - A promise that resolves when the script is loaded.
     */
    const loadScript = (src) => {
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${src}"]`)) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => resolve();
            script.onerror = (err) => reject(new Error(`Failed to load script: ${src}`));
            document.head.appendChild(script);
        });
    };

    // Create the main container for the output.
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';
    container.style.maxWidth = originalImg.width > 0 ? `${originalImg.width}px` : '100%';
    container.style.margin = '0 auto';

    // Display an initial loading message.
    const loadingMessage = document.createElement('p');
    loadingMessage.textContent = 'Loading AI model, this may take a moment...';
    container.appendChild(loadingMessage);

    try {
        // Dynamically load TensorFlow.js and the MobileNet model from a CDN.
        // Using specific versions for stability is better than using @latest.
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js');
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1/dist/mobilenet.min.js');

        loadingMessage.textContent = 'Model loaded. Analyzing image...';

        // Load the MobileNet model. MobileNet is a lightweight, pre-trained
        // model for image classification, perfect for running in the browser.
        const model = await mobilenet.load();

        // Classify the image and get the top K predictions.
        const predictions = await model.classify(originalImg, topK);

        // Clear the loading message from the container.
        container.innerHTML = '';

        // Clone the original image to display it along with the results.
        const displayImg = originalImg.cloneNode();
        displayImg.style.maxWidth = '100%';
        displayImg.style.height = 'auto';
        displayImg.style.borderRadius = '8px';
        displayImg.style.marginBottom = '15px';
        displayImg.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
        container.appendChild(displayImg);

        // Create a div to hold the list of predictions.
        const resultsDiv = document.createElement('div');
        resultsDiv.style.textAlign = 'left';

        if (predictions && predictions.length > 0) {
            const title = document.createElement('h3');
            title.textContent = `Top ${predictions.length} Predictions:`;
            title.style.margin = '0 0 10px 0';
            resultsDiv.appendChild(title);
            
            // Create and populate the list of predictions.
            predictions.forEach(prediction => {
                const item = document.createElement('div');
                item.style.marginBottom = '8px';

                // Format className by capitalizing the first letter.
                const className = prediction.className.split(',')[0];
                const displayName = className.charAt(0).toUpperCase() + className.slice(1);
                const probability = (prediction.probability * 100).toFixed(2);
                
                // Display the label and confidence score.
                const label = document.createElement('div');
                label.innerHTML = `<span style="font-weight: bold;">${displayName}</span>: ${probability}%`;
                item.appendChild(label);
                
                // Display a confidence bar.
                const barContainer = document.createElement('div');
                barContainer.style.backgroundColor = '#e0e0e0';
                barContainer.style.borderRadius = '5px';
                barContainer.style.height = '10px';
                barContainer.style.marginTop = '4px';
                barContainer.style.overflow = 'hidden';

                const bar = document.createElement('div');
                bar.style.backgroundColor = '#4CAF50';
                bar.style.width = `${probability}%`;
                bar.style.height = '100%';
                
                barContainer.appendChild(bar);
                item.appendChild(barContainer);
                resultsDiv.appendChild(item);
            });
        } else {
            resultsDiv.textContent = 'Could not identify any objects in the image.';
        }
        
        container.appendChild(resultsDiv);

    } catch (error) {
        console.error('AI Image Recognition Error:', error);
        container.innerHTML = `<p style="color: red; border: 1px solid red; padding: 10px; border-radius: 5px;">
            <strong>Error:</strong> Failed during image recognition. Please check the browser console for more details.
            <br><br>
            Message: ${error.message}
        </p>`;
    }

    return container;
}