Image Scene Or Photo Identifier

/**
 * Identifies scenes, objects, or concepts within an image using a pre-trained machine learning model.
 * This function dynamically loads TensorFlow.js and the MobileNet model to perform image classification
 * directly in the browser. It then displays the original image and a list of the top predictions
 * with their confidence scores.
 *
 * @param {Image} originalImg The original javascript Image object to be analyzed.
 * @param {number} [topK=5] The number of top predictions to return.
 * @returns {Promise<HTMLElement>} A promise that resolves to a single div element containing the
 *   original image and the classification results. This element is ready to be displayed.
 */
async function processImage(originalImg, topK = 5) {
    // Create a container for all output elements
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.maxWidth = `${originalImg.naturalWidth}px`;
    container.style.margin = 'auto';

    // Display the original image on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    canvas.getContext('2d').drawImage(originalImg, 0, 0);
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    container.appendChild(canvas);

    // Create a status element to show the loading/processing state
    const statusDiv = document.createElement('div');
    statusDiv.style.marginTop = '10px';
    statusDiv.style.textAlign = 'center';
    statusDiv.style.fontWeight = 'bold';
    statusDiv.innerText = 'Preparing for analysis...';
    container.appendChild(statusDiv);

    // Helper function to dynamically load a script and return a promise
    const loadScript = (url) => {
        return new Promise((resolve, reject) => {
            // Check if the script is already on the page
            if (document.querySelector(`script[src="${url}"]`)) {
                return resolve();
            }
            const script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
            document.head.appendChild(script);
        });
    };

    try {
        // Load the necessary TensorFlow.js and MobileNet model scripts
        statusDiv.innerText = 'Loading machine learning model...';
        await Promise.all([
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js'),
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@latest/dist/mobilenet.min.js')
        ]);

        // Load the MobileNet model
        statusDiv.innerText = 'Initializing model...';
        const model = await mobilenet.load();

        // Classify the image
        statusDiv.innerText = 'Analyzing image...';
        const predictions = await model.classify(originalImg, topK);

        // Display the results
        statusDiv.innerText = `Top ${predictions.length} Predictions:`;
        statusDiv.style.textAlign = 'left';
        
        const resultsList = document.createElement('div');
        resultsList.style.marginTop = '10px';

        predictions.forEach(p => {
            const predictionItem = document.createElement('div');
            predictionItem.style.display = 'flex';
            predictionItem.style.alignItems = 'center';
            predictionItem.style.marginBottom = '8px';

            const label = document.createElement('span');
            // Capitalize the first letter
            let className = p.className.split(',')[0];
            className = className.charAt(0).toUpperCase() + className.slice(1);
            label.innerText = className;
            label.style.width = '40%';
            label.style.marginRight = '10px';
            label.title = p.className;
            
            const confidenceWrapper = document.createElement('div');
            confidenceWrapper.style.width = '60%';
            confidenceWrapper.style.backgroundColor = '#f0f0f0';
            confidenceWrapper.style.borderRadius = '5px';
            confidenceWrapper.style.overflow = 'hidden';
            
            const confidenceBar = document.createElement('div');
            const confidence = p.probability * 100;
            confidenceBar.style.width = `${confidence}%`;
            confidenceBar.style.backgroundColor = '#2196F3';
            confidenceBar.style.padding = '4px 8px';
            confidenceBar.style.color = 'white';
            confidenceBar.style.whiteSpace = 'nowrap';
            confidenceBar.style.boxSizing = 'border-box';
            confidenceBar.innerText = `${confidence.toFixed(1)}%`;
            
            confidenceWrapper.appendChild(confidenceBar);
            predictionItem.appendChild(label);
            predictionItem.appendChild(confidenceWrapper);
            resultsList.appendChild(predictionItem);
        });

        container.appendChild(resultsList);

    } catch (error) {
        console.error('Image classification error:', error);
        statusDiv.innerText = 'An error occurred during analysis. Please check the console.';
        statusDiv.style.color = 'red';
    }

    return container;
}