Image Identifier Search Engine

/**
 * Identifies objects in an image using a pre-trained model and provides search engine links for the identified objects.
 * This function dynamically loads TensorFlow.js and the MobileNet model to perform image classification.
 *
 * @param {HTMLImageElement} originalImg The input image element to process.
 * @param {number} [topK=3] The number of top predictions to return.
 * @param {string} [searchEngineUrl='https://www.google.com/search?q='] The base URL for the search engine to use for the identified terms.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the identification results.
 */
async function processImage(originalImg, topK = 3, searchEngineUrl = 'https://www.google.com/search?q=') {
    // Parameter validation
    if (typeof topK !== 'number' || !Number.isInteger(topK) || topK <= 0) {
        console.warn(`Invalid topK parameter: ${topK}. Defaulting to 3.`);
        topK = 3;
    }
    if (typeof searchEngineUrl !== 'string' || searchEngineUrl.trim() === '') {
        console.warn(`Invalid searchEngineUrl parameter. Defaulting to Google search.`);
        searchEngineUrl = 'https://www.google.com/search?q=';
    }

    // Create the main container for the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '10px';
    container.style.lineHeight = '1.6';

    // Helper function to dynamically load scripts. It uses a cache to prevent reloading.
    const loadScript = (src) => {
        if (!window._scriptLoaderCache) {
            window._scriptLoaderCache = {};
        }
        if (!window._scriptLoaderCache[src]) {
            window._scriptLoaderCache[src] = new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.onload = () => resolve();
                script.onerror = () => reject(new Error(`Script load error for ${src}`));
                document.head.appendChild(script);
            });
        }
        return window._scriptLoaderCache[src];
    };

    try {
        container.innerHTML = '<p>Loading required libraries...</p>';

        // Load TensorFlow.js core and the MobileNet model in parallel
        await Promise.all([
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js'),
            loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js')
        ]);
        
        container.innerHTML = '<p>Loading image recognition model...</p>';
        const model = await mobilenet.load();

        container.innerHTML = '<p>Analyzing image...</p>';
        const predictions = await model.classify(originalImg, topK);

        // Clear loading messages and display results
        container.innerHTML = ''; 

        if (predictions && predictions.length > 0) {
            const title = document.createElement('h3');
            title.textContent = 'Top Identification Results:';
            container.appendChild(title);

            const list = document.createElement('ul');
            list.style.listStyleType = 'none';
            list.style.padding = '0';
            list.style.margin = '0';

            predictions.forEach(prediction => {
                const listItem = document.createElement('li');
                listItem.style.marginBottom = '12px';
                listItem.style.padding = '10px';
                listItem.style.border = '1px solid #ddd';
                listItem.style.borderRadius = '5px';
                listItem.style.backgroundColor = '#f9f9f9';

                const probability = (prediction.probability * 100).toFixed(2);
                // Class names can be like "Siamese cat, Siamese". Take the first, most common name.
                const primaryName = prediction.className.split(', ')[0];
                const capitalizedName = primaryName.charAt(0).toUpperCase() + primaryName.slice(1);
                
                const nameElem = document.createElement('strong');
                nameElem.textContent = capitalizedName;
                nameElem.style.fontSize = '1.1em';
                
                const confidenceElem = document.createElement('div');
                confidenceElem.textContent = `Confidence: ${probability}%`;
                confidenceElem.style.fontSize = '0.9em';
                confidenceElem.style.color = '#555';

                const link = document.createElement('a');
                link.href = `${searchEngineUrl}${encodeURIComponent(primaryName)}`;
                link.textContent = `Search for "${primaryName}"`;
                link.target = '_blank';
                link.rel = 'noopener noreferrer';
                link.style.color = '#007bff';
                link.style.textDecoration = 'none';
                link.style.display = 'inline-block';
                link.style.marginTop = '5px';
                link.onmouseover = () => { link.style.textDecoration = 'underline'; };
                link.onmouseout = () => { link.style.textDecoration = 'none'; };

                listItem.appendChild(nameElem);
                listItem.appendChild(document.createElement('br'));
                listItem.appendChild(confidenceElem);
                listItem.appendChild(document.createElement('br'));
                listItem.appendChild(link);
                
                list.appendChild(listItem);
            });

            container.appendChild(list);
        } else {
            container.innerHTML = '<p>Could not identify any distinct objects in the image.</p>';
        }

    } catch (error) {
        console.error('Error during image processing:', error);
        container.innerHTML = `
            <p style="color: red; font-weight: bold;">An error occurred during image identification.</p>
            <p style="color: #333;">This may be due to a network issue or a browser security policy blocking the required scripts. Please check your browser's developer console (F12) for more details.</p>
        `;
    }

    return container;
}