Image Keyword And Topic Search Tool

async function processImage(originalImg, maxResults = 5) {
    // Parameter validation and default setting
    maxResults = parseInt(maxResults, 10);
    if (isNaN(maxResults) || maxResults < 1) maxResults = 5;

    // Create the main wrapper container
    const container = document.createElement('div');
    container.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.gap = "20px";
    container.style.padding = "20px";
    container.style.border = "1px solid #e5e7eb";
    container.style.borderRadius = "12px";
    container.style.maxWidth = "600px";
    container.style.background = "#ffffff";
    container.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
    container.style.margin = "0 auto";

    // Image preview section
    const imgContainer = document.createElement('div');
    imgContainer.style.textAlign = "center";
    imgContainer.style.background = "#f3f4f6";
    imgContainer.style.borderRadius = "8px";
    imgContainer.style.padding = "10px";
    
    const previewImg = document.createElement('img');
    previewImg.src = originalImg.src;
    previewImg.style.maxWidth = "100%";
    previewImg.style.maxHeight = "350px";
    previewImg.style.borderRadius = "4px";
    previewImg.style.objectFit = "contain";
    imgContainer.appendChild(previewImg);
    
    // Results section
    const resultsContainer = document.createElement('div');
    resultsContainer.innerHTML = `
        <div style="display: flex; align-items: center; justify-content: center; gap: 10px; color: #4b5563; padding: 20px 0;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spinner"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
            <style>
                @keyframes spin { 100% { transform: rotate(360deg); } }
                .spinner { animation: spin 1s linear infinite; }
            </style>
            <span>Loading AI models and analyzing image...</span>
        </div>
    `;

    container.appendChild(imgContainer);
    container.appendChild(resultsContainer);

    // Helper function to dynamically load JS libraries
    const loadScript = (src, globalVar) => {
        return new Promise((resolve, reject) => {
            if (window[globalVar]) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = () => reject(new Error(`Failed to load ${src}`));
            document.head.appendChild(script);
        });
    };

    // Define main processing logic as an inner function so we can return the DOM element immediately
    // while the processing happens asynchronously in the background.
    const analyzeImage = async () => {
        try {
            // Load TensorFlow.js
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
            // Load MobileNet Model
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');
        } catch (e) {
            resultsContainer.innerHTML = `<div style="color: #dc2626; text-align: center; padding: 10px;">Error: Could not load required AI libraries. Check your internet connection.</div>`;
            return;
        }

        try {
            resultsContainer.innerHTML = `
                <div style="display: flex; align-items: center; justify-content: center; gap: 10px; color: #4b5563; padding: 20px 0;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spinner"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
                    <span>Extracting keywords and topics...</span>
                </div>
            `;
            
            // Load the MobileNet model
            const model = await window.mobilenet.load({version: 2, alpha: 1.0});
            
            // Classify the image
            const predictions = await model.classify(originalImg, maxResults);

            // Render Results
            resultsContainer.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <h3 style="margin: 0; font-size: 1.1rem; color: #1f2937; font-weight: 600;">Detected Topics & Keywords</h3>
                    <span style="font-size: 0.85rem; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 12px;">Ranked by Confidence</span>
                </div>
            `;
            
            const tagsWrapper = document.createElement('div');
            tagsWrapper.style.display = 'flex';
            tagsWrapper.style.flexWrap = 'wrap';
            tagsWrapper.style.gap = '10px';

            if (predictions && predictions.length > 0) {
                predictions.forEach(p => {
                    // Split the classNames array (MobileNet returns classes separated by commas)
                    const keywords = p.className.split(',').map(item => item.trim());
                    
                    keywords.forEach(keyword => {
                        const tag = document.createElement('div');
                        tag.style.background = '#eff6ff';
                        tag.style.color = '#1d4ed8';
                        tag.style.padding = '8px 14px';
                        tag.style.borderRadius = '20px';
                        tag.style.fontSize = '14px';
                        tag.style.display = 'flex';
                        tag.style.alignItems = 'center';
                        tag.style.gap = '8px';
                        tag.style.border = '1px solid #bfdbfe';
                        tag.style.transition = 'all 0.2s ease-in-out';
                        tag.style.cursor = 'default';
                        
                        // Hover effect
                        tag.onmouseover = () => { tag.style.background = '#dbeafe'; };
                        tag.onmouseout = () => { tag.style.background = '#eff6ff'; };

                        const name = document.createElement('span');
                        name.textContent = keyword;
                        name.style.fontWeight = '600';
                        name.style.textTransform = 'capitalize';

                        const probability = document.createElement('span');
                        probability.textContent = `${Math.round(p.probability * 100)}%`;
                        probability.style.fontSize = '12px';
                        probability.style.opacity = '0.75';
                        probability.style.background = 'rgba(255,255,255,0.5)';
                        probability.style.padding = '2px 6px';
                        probability.style.borderRadius = '10px';

                        tag.appendChild(name);
                        tag.appendChild(probability);
                        tagsWrapper.appendChild(tag);
                    });
                });
            } else {
                tagsWrapper.innerHTML = '<div style="color: #6b7280; width: 100%; text-align: center; padding: 10px;">No distinct topics recognized from this image.</div>';
            }
            resultsContainer.appendChild(tagsWrapper);

        } catch (err) {
            console.error(err);
            resultsContainer.innerHTML = `<div style="color: #dc2626; text-align: center; padding: 10px;">Error analyzing image: ${err.message}</div>`;
        }
    };

    // Start background analysis
    analyzeImage();

    // Return the container immediately so it can be appended and visually display the loading state
    return container;
}