Image Action And Verb Describer

async function processImage(originalImg, topK = 10, minConfidence = 0.2) {
    /**
     * Dynamically loads a script and returns a promise that resolves when it's loaded.
     * @param {string} url The URL of the script to load.
     * @returns {Promise<void>}
     */
    const loadScript = (url) => {
        // Use a map on the window object to ensure we only try to load each script once.
        window.loadedScripts = window.loadedScripts || {};
        if (window.loadedScripts[url]) {
            return window.loadedScripts[url];
        }
        window.loadedScripts[url] = new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.onload = () => resolve();
            script.onerror = (err) => {
                console.error(`Failed to load script: ${url}`, err);
                reject(new Error(`Failed to load script: ${url}`));
            };
            document.head.appendChild(script);
        });
        return window.loadedScripts[url];
    };

    /**
     * Creates and styles the main container for the output.
     * @returns {HTMLDivElement}
     */
    const createContainer = () => {
        const container = document.createElement('div');
        container.style.fontFamily = 'Arial, sans-serif';
        container.style.padding = '15px';
        container.style.border = '1px solid #ddd';
        container.style.borderRadius = '8px';
        container.style.backgroundColor = '#f9f9f9';
        container.style.maxWidth = '100%';
        container.style.boxSizing = 'border-box';
        return container;
    };

    const resultContainer = createContainer();
    resultContainer.innerHTML = '<p>Initializing AI model...</p>';

    try {
        // 1. Load the necessary TensorFlow.js and MobileNet libraries
        await Promise.all([
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js'),
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@3.0.0/dist/mobilenet.min.js')
        ]);
        resultContainer.innerHTML = '<p>AI model loaded. Analyzing image...</p>';

        // 2. Load the MobileNet model (cache it on the window object for efficiency)
        if (!window.mobilenetModel) {
            window.mobilenetModel = await mobilenet.load();
        }
        const model = window.mobilenetModel;

        // 3. Classify the image to get predictions
        const predictions = await model.classify(originalImg, topK);

        // 4. Filter predictions to find potential actions/verbs.
        // This heuristic looks for class names containing words ending in 'ing'.
        // It's not perfect but is a good starting point for identifying actions.
        const actions = predictions
            .filter(p => p.probability >= minConfidence)
            .filter(p => {
                const words = p.className.split(/,?\s+/); // Split by space or comma+space
                return words.some(word => word.endsWith('ing'));
            });

        // 5. Build the display element with the results
        resultContainer.innerHTML = ''; // Clear loading message

        const title = document.createElement('h3');
        title.textContent = 'Predicted Actions & Verbs';
        title.style.margin = '0 0 10px 0';
        title.style.color = '#333';
        resultContainer.appendChild(title);

        if (actions.length > 0) {
            const list = document.createElement('ul');
            list.style.listStyleType = 'disc';
            list.style.paddingLeft = '20px';
            list.style.margin = '0';
            actions.forEach(action => {
                const listItem = document.createElement('li');
                const confidence = (action.probability * 100).toFixed(1);
                listItem.innerHTML = `<strong>${action.className}</strong> (Confidence: ${confidence}%)`;
                list.appendChild(listItem);
            });
            resultContainer.appendChild(list);
        } else {
            const noResult = document.createElement('p');
            noResult.textContent = `No distinct actions detected with over ${minConfidence * 100}% confidence.`;
            noResult.style.margin = '0';
            resultContainer.appendChild(noResult);

            // Provide context by showing the top general predictions
            const topPredictions = predictions.slice(0, 3);
            if (topPredictions.length > 0) {
                const contextHeader = document.createElement('p');
                contextHeader.innerHTML = `<strong>Top overall predictions:</strong>`;
                contextHeader.style.marginTop = '15px';
                contextHeader.style.marginBottom = '5px';
                resultContainer.appendChild(contextHeader);

                const contextList = document.createElement('ul');
                contextList.style.listStyleType = 'circle';
                 contextList.style.paddingLeft = '20px';
                 contextList.style.margin = '0';
                topPredictions.forEach(p => {
                    const listItem = document.createElement('li');
                    const confidence = (p.probability * 100).toFixed(1);
                    listItem.textContent = `${p.className} (${confidence}%)`;
                    contextList.appendChild(listItem);
                });
                resultContainer.appendChild(contextList);
            }
        }
    } catch (error) {
        console.error("Error during image analysis:", error);
        resultContainer.innerHTML = '<p style="color: red;">Error: Could not analyze image. Check console for details.</p>';
    }

    return resultContainer;
}