Image Search Topic Finder

function processImage(originalImg, maxTopics = 5) {
    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.maxWidth = "600px";
    container.style.margin = "0 auto";
    container.style.padding = "24px";
    container.style.boxShadow = "0 8px 24px rgba(0,0,0,0.1)";
    container.style.borderRadius = "12px";
    container.style.backgroundColor = "#ffffff";
    container.style.textAlign = "center";

    // Create image preview element
    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.maxWidth = "100%";
    imgPreview.style.maxHeight = "400px";
    imgPreview.style.borderRadius = "8px";
    imgPreview.style.objectFit = "contain";
    imgPreview.style.boxShadow = "0 2px 8px rgba(0,0,0,0.05)";
    container.appendChild(imgPreview);

    // Create title and status text
    const title = document.createElement('h3');
    title.innerText = "Initializing AI Model...";
    title.style.color = "#334155";
    title.style.margin = "20px 0 10px 0";
    title.style.fontSize = "1.25rem";
    container.appendChild(title);

    // Container for the generated topic badges
    const topicsDiv = document.createElement('div');
    topicsDiv.style.display = "flex";
    topicsDiv.style.flexWrap = "wrap";
    topicsDiv.style.gap = "10px";
    topicsDiv.style.justifyContent = "center";
    topicsDiv.style.marginTop = "15px";
    container.appendChild(topicsDiv);

    // Creates an animated loading spinner
    const spinner = document.createElement('div');
    spinner.style.border = "4px solid #f3f3f3";
    spinner.style.borderTop = "4px solid #0ea5e9";
    spinner.style.borderRadius = "50%";
    spinner.style.width = "30px";
    spinner.style.height = "30px";
    spinner.style.animation = "spin 1s linear infinite";
    spinner.style.margin = "10px auto";
    
    // Add keyframes for spinner if not present
    if (!document.getElementById('spinner-style')) {
        const style = document.createElement('style');
        style.id = 'spinner-style';
        style.innerHTML = `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
        document.head.appendChild(style);
    }
    topicsDiv.appendChild(spinner);

    // Process everything asynchronously so we can return the container right away
    const analyzeImage = async () => {
        try {
            // Helper to dynamically load external JS libraries (Tensorflow.js + MobileNet)
            const loadScript = (src, globalObj) => {
                return new Promise((resolve, reject) => {
                    if (window[globalObj]) return resolve(window[globalObj]);
                    const script = document.createElement('script');
                    script.src = src;
                    script.crossOrigin = "anonymous";
                    script.onload = () => resolve(window[globalObj]);
                    script.onerror = () => reject(new Error(`Failed to load ${src}`));
                    document.head.appendChild(script);
                });
            };

            // Load TensorFlow.js first, then MobileNet image classification model
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js', 'tf');
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');

            title.innerText = "Analyzing Image Content...";
            const model = await window.mobilenet.load({ version: 2, alpha: 1.0 });

            // Draw image to internal canvas consistently to avoid format/size quirks
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth;
            canvas.height = originalImg.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);

            // Get predictions
            const predictions = await model.classify(canvas, parseInt(maxTopics, 10));

            // Extract, clean up, and deduplicate class names natively grouped by commas
            const uniqueTopics = new Set();
            predictions.forEach(prediction => {
                const labels = prediction.className.split(',');
                labels.forEach(label => {
                    // Capitalize each logical topic word
                    const formattedTopic = label.trim().replace(/\b\w/g, char => char.toUpperCase());
                    uniqueTopics.add(formattedTopic);
                });
            });

            // Update UI
            title.innerText = "Suggested Search Topics";
            topicsDiv.innerHTML = ""; // Clear spinner

            if (uniqueTopics.size === 0) {
                topicsDiv.innerHTML = "<p style='color: #64748b;'>No specific topics could be identified.</p>";
                return;
            }

            // Create interactive search tags/badges for each topic
            uniqueTopics.forEach(topic => {
                const pill = document.createElement('a');
                pill.innerText = topic;
                pill.href = `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(topic)}`;
                pill.target = "_blank";
                pill.rel = "noopener noreferrer";
                pill.title = `Search images for: ${topic}`;
                
                // Styling the topic pills
                pill.style.textDecoration = "none";
                pill.style.padding = "8px 18px";
                pill.style.backgroundColor = "#e0f2fe";
                pill.style.color = "#0369a1";
                pill.style.borderRadius = "20px";
                pill.style.fontSize = "14px";
                pill.style.fontWeight = "600";
                pill.style.border = "1px solid #bae6fd";
                pill.style.cursor = "pointer";
                pill.style.transition = "all 0.2s ease-in-out";
                
                // Hover effects
                pill.onmouseover = () => { 
                    pill.style.backgroundColor = "#bae6fd"; 
                    pill.style.transform = "translateY(-2px)";
                    pill.style.boxShadow = "0 4px 6px rgba(0,0,0,0.1)";
                };
                pill.onmouseout = () => { 
                    pill.style.backgroundColor = "#e0f2fe"; 
                    pill.style.transform = "translateY(0)";
                    pill.style.boxShadow = "none";
                };

                topicsDiv.appendChild(pill);
            });

            const hint = document.createElement('p');
            hint.innerText = "Click any topic to search similar images on Google.";
            hint.style.fontSize = "12px";
            hint.style.color = "#94a3b8";
            hint.style.marginTop = "16px";
            hint.style.width = "100%";
            topicsDiv.appendChild(hint);

        } catch (err) {
            title.innerText = "Error Analyzing Image";
            title.style.color = "#ef4444";
            topicsDiv.innerHTML = `<p style='color:#ef4444; font-size:14px; background:#fee2e2; padding:10px; border-radius:6px;'>${err.message}</p>`;
            console.error(err);
        }
    };

    // Trigger analysis processes asynchronously
    analyzeImage();

    // Return the container immediately while it populates data in the background
    return container;
}