Image Topic Search Tool

function processImage(originalImg, maxResults = 5) {
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
    container.style.maxWidth = '500px';
    container.style.color = '#333';
    container.style.margin = '0 auto';

    // Status message for initial load
    const statusMsg = document.createElement('div');
    statusMsg.textContent = 'Loading AI Model & Analyzing Image... Please wait.';
    statusMsg.style.textAlign = 'center';
    statusMsg.style.padding = '30px 20px';
    statusMsg.style.color = '#5f6368';
    statusMsg.style.fontWeight = '600';
    statusMsg.style.fontSize = '16px';
    container.appendChild(statusMsg);

    // Helper to dynamically load external scripts safely
    const loadScript = (src, globalVar) => new Promise((resolve, reject) => {
        if (window[globalVar]) return resolve();
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    (async () => {
        try {
            // Load TensorFlow.js and the MobileNet image classification model
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');

            // Set up a standard canvas from the original image to feed the AI model securely
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width || 300;
            canvas.height = originalImg.naturalHeight || originalImg.height || 300;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

            // Predict image elements (topics) using MobileNet
            const model = await window.mobilenet.load();
            const predictions = await model.classify(canvas);

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

            // Add Image Preview
            const preview = document.createElement('canvas');
            preview.width = canvas.width;
            preview.height = canvas.height;
            const pCtx = preview.getContext('2d');
            pCtx.drawImage(canvas, 0, 0);
            preview.style.display = 'block';
            preview.style.maxWidth = '100%';
            preview.style.maxHeight = '250px';
            preview.style.margin = '0 auto 20px auto';
            preview.style.borderRadius = '6px';
            preview.style.boxShadow = '0 2px 6px rgba(0,0,0,0.15)';
            preview.style.objectFit = 'contain';
            container.appendChild(preview);

            // Main Title
            const title = document.createElement('h3');
            title.textContent = 'Discovered Topics';
            title.style.margin = '0 0 15px 0';
            title.style.color = '#1a73e8';
            title.style.textAlign = 'center';
            container.appendChild(title);

            // List to hold result items
            const listContainer = document.createElement('div');
            
            let count = 0;
            for (const p of predictions) {
                // MobileNet categories are often comma-separated lists of synonyms
                const classNames = p.className.split(',').map(s => s.trim());
                for (const topic of classNames) {
                    if (count >= maxResults) break;
                    
                    const item = document.createElement('div');
                    item.style.display = 'flex';
                    item.style.justifyContent = 'space-between';
                    item.style.alignItems = 'center';
                    item.style.padding = '12px 15px';
                    item.style.marginBottom = '10px';
                    item.style.backgroundColor = '#f8f9fa';
                    item.style.border = '1px solid #e8eaed';
                    item.style.borderRadius = '8px';

                    const topicInfo = document.createElement('div');
                    
                    const topicName = document.createElement('strong');
                    topicName.textContent = topic.charAt(0).toUpperCase() + topic.slice(1);
                    topicName.style.display = 'block';
                    topicName.style.fontSize = '16px';
                    topicName.style.color = '#202124';
                    
                    const confidence = document.createElement('span');
                    confidence.textContent = `Match Confidence: ${(p.probability * 100).toFixed(1)}%`;
                    confidence.style.color = '#5f6368';
                    confidence.style.fontSize = '12px';

                    topicInfo.appendChild(topicName);
                    topicInfo.appendChild(confidence);

                    // Create the Topic Search Button
                    const searchLink = document.createElement('a');
                    searchLink.href = `https://www.google.com/search?q=${encodeURIComponent(topic)}`;
                    searchLink.target = '_blank';
                    searchLink.textContent = 'Search Topic';
                    searchLink.style.textDecoration = 'none';
                    searchLink.style.color = '#ffffff';
                    searchLink.style.backgroundColor = '#1a73e8';
                    searchLink.style.padding = '8px 16px';
                    searchLink.style.borderRadius = '6px';
                    searchLink.style.fontSize = '14px';
                    searchLink.style.fontWeight = '500';
                    searchLink.style.transition = 'background-color 0.2s';
                    
                    searchLink.onmouseover = () => searchLink.style.backgroundColor = '#1557b0';
                    searchLink.onmouseout = () => searchLink.style.backgroundColor = '#1a73e8';

                    item.appendChild(topicInfo);
                    item.appendChild(searchLink);
                    listContainer.appendChild(item);
                    
                    count++;
                }
                if (count >= maxResults) break;
            }

            if (count === 0) {
                const noResult = document.createElement('div');
                noResult.textContent = 'No obvious concepts or topics could be confidently found for this image.';
                noResult.style.textAlign = 'center';
                noResult.style.padding = '15px';
                noResult.style.color = '#d93025';
                listContainer.appendChild(noResult);
            }

            container.appendChild(listContainer);

        } catch (err) {
            container.innerHTML = '';
            const errorMsg = document.createElement('div');
            errorMsg.textContent = 'An error occurred while finding topics: ' + err.message;
            errorMsg.style.color = '#d93025';
            errorMsg.style.padding = '20px';
            errorMsg.style.textAlign = 'center';
            errorMsg.style.fontWeight = 'bold';
            container.appendChild(errorMsg);
        }
    })();

    return container;
}