Image SEO Search Topic Finder Tool

function processImage(originalImg, maxTopics = 10, altTextPrefix = "An image featuring ") {
    // 1. Setup Main Container
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.maxWidth = '650px';
    container.style.margin = '0 auto';
    container.style.padding = '25px';
    container.style.border = '1px solid #e1e4e8';
    container.style.borderRadius = '10px';
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 6px 16px rgba(0,0,0,0.06)';

    // 2. Header Title
    const header = document.createElement('h2');
    header.innerText = 'Image SEO Search Topic Finder';
    header.style.textAlign = 'center';
    header.style.color = '#2c3e50';
    header.style.marginTop = '0';
    header.style.marginBottom = '25px';
    container.appendChild(header);

    // 3. Image Preview Area
    const imgWrapper = document.createElement('div');
    imgWrapper.style.textAlign = 'center';
    imgWrapper.style.marginBottom = '25px';
    imgWrapper.style.backgroundColor = '#f8f9fa';
    imgWrapper.style.padding = '10px';
    imgWrapper.style.borderRadius = '8px';
    
    const imgPreview = new Image();
    imgPreview.src = originalImg.src;
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '320px';
    imgPreview.style.borderRadius = '6px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
    imgWrapper.appendChild(imgPreview);
    container.appendChild(imgWrapper);

    // 4. Content / Loading Area
    const contentArea = document.createElement('div');
    container.appendChild(contentArea);

    const loadingIndicator = document.createElement('div');
    loadingIndicator.style.textAlign = 'center';
    loadingIndicator.style.padding = '30px';
    loadingIndicator.innerHTML = `
        <div style="display:inline-block;width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;"></div>
        <p style="color:#3498db;font-weight:600;margin-top:15px;font-size:1.1em;">Loading AI Model and scanning image for SEO topics...</p>
        <p style="color:#7f8c8d;font-size:0.9em;">This might take a briefly moment on the first run.</p>
        <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
    `;
    contentArea.appendChild(loadingIndicator);

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

    // 6. Asynchronous Image Processing (Won't block DOM returning)
    (async () => {
        try {
            // Load TensorFlow.js and MobileNet 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');

            // Draw to a canvas to ensure cross-origin/format stability for the model
            const canvas = document.createElement('canvas');
            const width = originalImg.naturalWidth || originalImg.width || 224;
            const height = originalImg.naturalHeight || originalImg.height || 224;
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0, width, height);

            const model = await window.mobilenet.load();
            const predictions = await model.classify(canvas);

            // Clear loading indicator
            contentArea.innerHTML = ''; 

            // Extract Keywords & Topics
            let keywordsSet = new Set();
            let mainTopic = '';

            predictions.forEach((p, index) => {
                const keywords = p.className.split(',').map(k => k.trim());
                if (index === 0) mainTopic = keywords[0]; // Subject with highest probability

                keywords.forEach(kw => {
                    if (keywordsSet.size < maxTopics) {
                        keywordsSet.add(kw);
                    }
                });
            });

            // UI Helper: Section Header Generator
            const createSectionHeader = (text) => {
                const h = document.createElement('h3');
                h.innerText = text;
                h.style.color = '#34495e';
                h.style.fontSize = '1.15em';
                h.style.borderBottom = '2px solid #ecf0f1';
                h.style.paddingBottom = '8px';
                h.style.marginTop = '20px';
                h.style.marginBottom = '15px';
                return h;
            };

            // Section 1: Generated Keywords / Tags
            contentArea.appendChild(createSectionHeader('Suggested SEO Search Topics & Tags'));

            const tagsContainer = document.createElement('div');
            tagsContainer.style.display = 'flex';
            tagsContainer.style.flexWrap = 'wrap';
            tagsContainer.style.gap = '10px';
            
            if (keywordsSet.size === 0) {
                tagsContainer.innerText = "No specific topics confidently detected.";
                tagsContainer.style.color = '#7f8c8d';
            } else {
                keywordsSet.forEach(kw => {
                    const tag = document.createElement('span');
                    // Format into proper tag (camelcase/nopadding format)
                    tag.innerText = `#${kw.replace(/\s+/g, '')}`;
                    tag.style.backgroundColor = '#e8f4f8';
                    tag.style.color = '#2980b9';
                    tag.style.padding = '8px 16px';
                    tag.style.borderRadius = '20px';
                    tag.style.fontSize = '0.95em';
                    tag.style.fontWeight = '600';
                    tag.style.border = '1px solid #bde0f0';
                    tagsContainer.appendChild(tag);
                });
            }
            contentArea.appendChild(tagsContainer);

            // Section 2: Alt Text Suggestion
            contentArea.appendChild(createSectionHeader('SEO-Optimized Alt Text Suggestion'));
            
            const altText = document.createElement('div');
            altText.style.backgroundColor = '#fdfefe';
            altText.style.padding = '14px 18px';
            altText.style.borderRadius = '6px';
            altText.style.borderLeft = '5px solid #f39c12';
            altText.style.boxShadow = 'inset 0 0 4px rgba(0,0,0,0.03)';
            altText.style.fontFamily = 'monospace';
            altText.style.fontSize = '0.95em';
            altText.style.color = '#2c3e50';
            
            if (!mainTopic) mainTopic = "unknown subject";
            altText.innerText = `${altTextPrefix}${mainTopic}.`;
            contentArea.appendChild(altText);

            // Section 3: Tech Stats Data
            contentArea.appendChild(createSectionHeader('Image Technical SEO Data'));

            const infoList = document.createElement('ul');
            infoList.style.listStyle = 'none';
            infoList.style.padding = '0';
            infoList.style.margin = '0';
            infoList.style.fontSize = '0.95em';
            infoList.style.color = '#555';

            const addInfo = (label, value, isWarning = false) => {
                const li = document.createElement('li');
                li.style.marginBottom = '10px';
                li.style.display = 'flex';
                li.style.justifyContent = 'space-between';
                li.style.borderBottom = '1px dashed #eee';
                li.style.paddingBottom = '6px';
                
                const labelSpan = document.createElement('strong');
                labelSpan.style.color = '#333';
                labelSpan.innerText = label + ':';
                
                const valSpan = document.createElement('span');
                valSpan.innerText = value;
                if (isWarning) {
                    valSpan.style.color = '#e74c3c';
                    valSpan.style.fontWeight = 'bold';
                } else {
                    valSpan.style.color = '#27ae60';
                    valSpan.style.fontWeight = 'bold';
                }

                li.appendChild(labelSpan);
                li.appendChild(valSpan);
                infoList.appendChild(li);
            };

            const aspectRatio = (width / height).toFixed(2);
            let sizeStatus = 'Optimal';
            let isWarning = false;
            
            if (width > 2000 || height > 2000) {
                sizeStatus = 'Too Large (Needs scale down)';
                isWarning = true;
            } else if (width < 300 || height < 300) {
                sizeStatus = 'Too Small';
                isWarning = true;
            }

            addInfo('Image Dimensions', `${width} x ${height} pixels`);
            addInfo('Aspect Ratio', aspectRatio);
            addInfo('Dimension Assessment', sizeStatus, isWarning);
            addInfo('AI Topic Confidence', `${(predictions[0].probability * 100).toFixed(1)}%`);
            
            contentArea.appendChild(infoList);

        } catch (error) {
            contentArea.innerHTML = '';
            const errorMsg = document.createElement('div');
            errorMsg.style.color = '#c0392b';
            errorMsg.style.backgroundColor = '#fadbd8';
            errorMsg.style.padding = '15px';
            errorMsg.style.borderRadius = '6px';
            errorMsg.style.borderLeft = '4px solid #e74c3c';
            errorMsg.innerText = 'Error executing SEO Analysis: ' + (error.message || 'Unknown error');
            contentArea.appendChild(errorMsg);
        }
    })();

    // 7. Return the wrapping container synchronously
    return container;
}