Image Topic Finder SEO Tool

async function processImage(originalImg, maxTopics = "5") {
    // Determine the number of topics to find (default to 5)
    let topK = parseInt(maxTopics, 10);
    if (isNaN(topK) || topK <= 0) topK = 5;

    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.padding = '24px';
    container.style.border = '1px solid #e1e4e8';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';
    container.style.maxWidth = '600px';
    container.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';

    // Initial loading state
    container.innerHTML = `
        <h2 style="margin-top: 0; color: #24292e; font-size: 20px;">SEO Image Topic Finder</h2>
        <div style="display: flex; align-items: center; gap: 12px; color: #586069;">
            <div style="width: 16px; height: 16px; border: 3px solid #0366d6; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div>
            <span>Loading AI models & analyzing image... this may take a moment.</span>
        </div>
        <style>
            @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        </style>
    `;

    // Helper function to dynamically load JS libraries
    const loadScript = (id, src, globalVar) => {
        return new Promise((resolve, reject) => {
            if (window[globalVar]) return resolve();
            
            if (document.getElementById(id)) {
                // Script tag exists, wait for the global variable to become available
                const checkInterval = setInterval(() => {
                    if (window[globalVar]) {
                        clearInterval(checkInterval);
                        resolve();
                    }
                }, 100);
                return;
            }

            const script = document.createElement('script');
            script.id = id;
            script.src = src;
            script.crossOrigin = "anonymous";
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load ${src}`));
            document.head.appendChild(script);
        });
    };

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

        // Load the model and classify the image
        const model = await window.mobilenet.load();
        const predictions = await model.classify(originalImg, topK);

        // Clear loading state
        container.innerHTML = `<h2 style="margin-top: 0; color: #24292e; font-size: 20px;">SEO Image Topic Finder Results</h2>`;

        // Parse keywords from predictions
        let keywords = [];
        predictions.forEach(p => {
            // MobileNet classes are often comma-separated (e.g. "pug, pug-dog")
            const classes = p.className.split(',').map(s => s.trim().toLowerCase());
            keywords.push(...classes);
        });
        
        // Ensure unique keywords
        keywords = [...new Set(keywords)];

        // --- Keywords Section ---
        const keywordsSection = document.createElement('div');
        keywordsSection.style.marginBottom = '24px';

        const keywordsTitle = document.createElement('strong');
        keywordsTitle.textContent = 'Suggested SEO Keywords / Tags:';
        keywordsTitle.style.display = 'block';
        keywordsTitle.style.marginBottom = '12px';
        keywordsTitle.style.color = '#24292e';

        const keywordsWrapper = document.createElement('div');
        keywordsWrapper.style.display = 'flex';
        keywordsWrapper.style.flexWrap = 'wrap';
        keywordsWrapper.style.gap = '8px';
        keywordsWrapper.style.marginBottom = '12px';

        keywords.forEach(kw => {
            const badge = document.createElement('span');
            badge.textContent = kw;
            badge.style.backgroundColor = '#e1effa';
            badge.style.color = '#0366d6';
            badge.style.padding = '6px 12px';
            badge.style.borderRadius = '16px';
            badge.style.fontSize = '14px';
            badge.style.fontWeight = '500';
            keywordsWrapper.appendChild(badge);
        });

        // Copy button for easy SEO workflow
        const copyBtn = document.createElement('button');
        copyBtn.textContent = 'Copy Keywords';
        copyBtn.style.padding = '6px 16px';
        copyBtn.style.backgroundColor = '#fafbfc';
        copyBtn.style.color = '#24292e';
        copyBtn.style.border = '1px solid #d1d5da';
        copyBtn.style.borderRadius = '6px';
        copyBtn.style.cursor = 'pointer';
        copyBtn.style.fontSize = '13px';
        copyBtn.style.fontWeight = '600';
        copyBtn.onmouseover = () => copyBtn.style.backgroundColor = '#f3f4f6';
        copyBtn.onmouseout = () => copyBtn.style.backgroundColor = '#fafbfc';
        copyBtn.onclick = () => {
            navigator.clipboard.writeText(keywords.join(', '));
            const originalText = copyBtn.textContent;
            copyBtn.textContent = 'Copied!';
            setTimeout(() => { copyBtn.textContent = originalText; }, 2000);
        };

        keywordsSection.appendChild(keywordsTitle);
        keywordsSection.appendChild(keywordsWrapper);
        keywordsSection.appendChild(copyBtn);
        container.appendChild(keywordsSection);

        // --- Divider ---
        const hr = document.createElement('hr');
        hr.style.border = '0';
        hr.style.borderTop = '1px solid #eaecef';
        hr.style.margin = '24px 0';
        container.appendChild(hr);

        // --- Confidence Scores Section ---
        const confidenceTitle = document.createElement('strong');
        confidenceTitle.textContent = 'Identified Topics & Confidence Scores:';
        confidenceTitle.style.display = 'block';
        confidenceTitle.style.marginBottom = '16px';
        confidenceTitle.style.color = '#24292e';
        container.appendChild(confidenceTitle);

        const list = document.createElement('div');
        predictions.forEach(p => {
            const item = document.createElement('div');
            item.style.marginBottom = '12px';
            
            const probabilityPercentage = (p.probability * 100).toFixed(2);
            
            const labelContainer = document.createElement('div');
            labelContainer.style.display = 'flex';
            labelContainer.style.justifyContent = 'space-between';
            labelContainer.style.marginBottom = '6px';
            labelContainer.style.fontSize = '14px';
            labelContainer.style.color = '#24292e';
            
            const labelName = document.createElement('span');
            labelName.textContent = p.className;
            labelName.style.fontWeight = '500';
            labelName.style.textTransform = 'capitalize';
            
            const labelScore = document.createElement('span');
            labelScore.textContent = `${probabilityPercentage}%`;
            labelScore.style.color = '#586069';

            labelContainer.appendChild(labelName);
            labelContainer.appendChild(labelScore);

            const barBg = document.createElement('div');
            barBg.style.backgroundColor = '#eaecef';
            barBg.style.height = '8px';
            barBg.style.borderRadius = '4px';
            barBg.style.overflow = 'hidden';

            const barFg = document.createElement('div');
            barFg.style.backgroundColor = p.probability > 0.5 ? '#28a745' : '#0366d6';
            barFg.style.height = '100%';
            barFg.style.width = `${probabilityPercentage}%`;
            barFg.style.borderRadius = '4px';

            barBg.appendChild(barFg);
            item.appendChild(labelContainer);
            item.appendChild(barBg);
            list.appendChild(item);
        });

        container.appendChild(list);

    } catch (error) {
        container.innerHTML = `
            <h3 style="margin-top:0; color:#cb2431;">Analysis Failed</h3>
            <p style="color:#586069;">Error: ${error.message}</p>
            <p style="font-size:12px; color:#6a737d;">Note: Ensuring the image satisfies CORS policy may be required for local/cross-origin AI processing.</p>
        `;
    }

    return container;
}