Image To Google Search Topic Identifier

async function processImage(originalImg, maxResults = 3, showConfidence = "true") {
    // Parse parameters
    const limit = parseInt(maxResults, 10) || 3;
    const displayConfidence = String(showConfidence).toLowerCase() === "true";

    // Helper to dynamically load external scripts securely and reliably
    const loadScript = (src, globalVarId) => {
        return new Promise((resolve, reject) => {
            if (window[globalVarId]) {
                return resolve();
            }
            if (document.querySelector(`script[src="${src}"]`)) {
                // Wait if script tag exists but isn't fully initialized yet
                const interval = setInterval(() => {
                    if (window[globalVarId]) {
                        clearInterval(interval);
                        resolve();
                    }
                }, 50);
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.crossOrigin = "anonymous";
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load ${src}`));
            document.head.appendChild(script);
        });
    };

    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
    container.style.maxWidth = '500px';
    container.style.margin = '0 auto';
    container.style.padding = '24px';
    container.style.border = '1px solid #dfe1e5';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
    container.style.backgroundColor = '#ffffff';

    // Header Title
    const title = document.createElement('h2');
    title.textContent = 'Image Topic Identifier';
    title.style.margin = '0 0 16px 0';
    title.style.color = '#202124';
    title.style.fontSize = '20px';
    title.style.display = 'flex';
    title.style.alignItems = 'center';
    title.style.gap = '8px';
    container.appendChild(title);

    // Image preview area
    const imgWrapper = document.createElement('div');
    imgWrapper.style.textAlign = 'center';
    imgWrapper.style.marginBottom = '20px';
    imgWrapper.style.backgroundColor = '#f8f9fa';
    imgWrapper.style.borderRadius = '8px';
    imgWrapper.style.padding = '12px';
    
    const displayImg = new Image();
    displayImg.src = originalImg.src;
    displayImg.style.maxWidth = '100%';
    displayImg.style.maxHeight = '250px';
    displayImg.style.borderRadius = '6px';
    displayImg.style.objectFit = 'contain';
    imgWrapper.appendChild(displayImg);
    container.appendChild(imgWrapper);

    // Loading / Status text
    const statusText = document.createElement('div');
    statusText.textContent = 'Loading TensorFlow.js AI models...';
    statusText.style.color = '#5f6368';
    statusText.style.fontSize = '14px';
    statusText.style.textAlign = 'center';
    statusText.style.padding = '10px 0';
    container.appendChild(statusText);

    try {
        // Load the required MobileNet ML script for Image Recognition via TensorFlow.js
        await loadScript("https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js", "tf");
        statusText.textContent = 'Loading MobileNet topic model...';
        await loadScript("https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1/dist/mobilenet.min.js", "mobilenet");

        statusText.textContent = 'Analyzing image patterns...';
        const model = await window.mobilenet.load();
        
        // Draw image tightly to an offscreen canvas. 
        // This ensures compatibility with tfjs, eliminating HTML image tag sizing issues easily.
        const offCanvas = document.createElement('canvas');
        offCanvas.width = originalImg.naturalWidth || originalImg.width || 500;
        offCanvas.height = originalImg.naturalHeight || originalImg.height || 500;
        const ctx = offCanvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0, offCanvas.width, offCanvas.height);

        // Classify the image
        const predictions = await model.classify(offCanvas);
        
        // Clear status wrapper
        container.removeChild(statusText);

        // Results Section
        const resultsDiv = document.createElement('div');

        const resultsHeader = document.createElement('h3');
        resultsHeader.textContent = 'Google Search Topics Found';
        resultsHeader.style.margin = '0 0 12px 0';
        resultsHeader.style.fontSize = '15px';
        resultsHeader.style.color = '#3c4043';
        resultsDiv.appendChild(resultsHeader);

        const topPredictions = predictions.slice(0, limit);

        topPredictions.forEach((pred) => {
            const topicRow = document.createElement('div');
            topicRow.style.display = 'flex';
            topicRow.style.alignItems = 'center';
            topicRow.style.justifyContent = 'space-between';
            topicRow.style.padding = '12px 16px';
            topicRow.style.marginBottom = '10px';
            topicRow.style.backgroundColor = '#f1f3f4';
            topicRow.style.borderRadius = '8px';
            topicRow.style.transition = 'background-color 0.2s';
            
            // Allow mimicking a Google Search
            topicRow.style.cursor = 'pointer';
            topicRow.onmouseover = () => topicRow.style.backgroundColor = '#e8eaed';
            topicRow.onmouseout = () => topicRow.style.backgroundColor = '#f1f3f4';

            // Clean up class name (take the primary word and capitalize)
            let rawNames = pred.className.split(',');
            let bestName = rawNames[0].trim();
            bestName = bestName.charAt(0).toUpperCase() + bestName.slice(1);

            topicRow.onclick = () => {
                window.open(`https://www.google.com/search?q=${encodeURIComponent(bestName)}`, '_blank');
            };

            const topicInfo = document.createElement('div');
            topicInfo.style.display = 'flex';
            topicInfo.style.flexDirection = 'column';

            const topicName = document.createElement('span');
            topicName.textContent = bestName;
            topicName.style.fontWeight = '600';
            topicName.style.color = '#1a73e8'; // Google search link blue
            topicName.style.fontSize = '16px';
            
            // Subtext containing alternative keywords
            const subName = document.createElement('span');
            subName.textContent = rawNames.slice(1).join(', ').trim() || bestName;
            subName.style.fontSize = '12px';
            subName.style.color = '#70757a';
            subName.style.marginTop = '2px';

            topicInfo.appendChild(topicName);
            if (rawNames.length > 1) topicInfo.appendChild(subName);

            topicRow.appendChild(topicInfo);

            if (displayConfidence) {
                const confidence = document.createElement('div');
                const percent = (pred.probability * 100).toFixed(1);
                confidence.textContent = `${percent}% Match`;
                confidence.style.fontSize = '13px';
                confidence.style.fontWeight = '500';
                confidence.style.color = '#188038'; // Dark green success
                confidence.style.backgroundColor = '#e6f4ea'; // Light green background
                confidence.style.padding = '4px 8px';
                confidence.style.borderRadius = '12px';
                topicRow.appendChild(confidence);
            }

            resultsDiv.appendChild(topicRow);
        });

        if (topPredictions.length === 0) {
            const noRes = document.createElement('div');
            noRes.textContent = 'No defining topics could be identified for this image.';
            noRes.style.color = '#d93025';
            noRes.style.fontSize = '14px';
            resultsDiv.appendChild(noRes);
        }

        container.appendChild(resultsDiv);

    } catch (err) {
        statusText.textContent = `Error processing image: ${err.message}`;
        statusText.style.color = '#d93025';
        statusText.style.fontWeight = '600';
    }

    return container;
}