Image Analyzer Identifier Idea Generator And Search Tool

function processImage(originalImg, title = "Creator Studio AI Analyzer", themeColor = "#6366f1", currentYear = new Date().getFullYear().toString()) {
    // Create main container
    const container = document.createElement('div');
    container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.padding = "20px";
    container.style.background = "#ffffff";
    container.style.border = `2px solid ${themeColor}`;
    container.style.borderRadius = "12px";
    container.style.boxShadow = "0 8px 24px rgba(0,0,0,0.1)";
    container.style.color = "#333";
    container.style.maxWidth = "850px";
    container.style.margin = "0 auto";
    container.style.boxSizing = "border-box";

    // Create header
    const header = document.createElement('h2');
    header.textContent = title;
    header.style.marginTop = "0";
    header.style.color = themeColor;
    header.style.borderBottom = `1px solid ${themeColor}40`;
    header.style.paddingBottom = "10px";
    container.appendChild(header);

    // Create layout wrapper
    const contentWrapper = document.createElement('div');
    contentWrapper.style.display = "flex";
    contentWrapper.style.flexWrap = "wrap";
    contentWrapper.style.gap = "20px";
    contentWrapper.style.marginTop = "20px";
    container.appendChild(contentWrapper);

    // Image preview section
    const imgContainer = document.createElement('div');
    imgContainer.style.flex = "1 1 300px";
    contentWrapper.appendChild(imgContainer);

    const canvas = document.createElement('canvas');
    canvas.style.maxWidth = "100%";
    canvas.style.height = "auto";
    canvas.style.borderRadius = "8px";
    canvas.style.boxShadow = "0 4px 12px rgba(0,0,0,0.05)";
    imgContainer.appendChild(canvas);

    // Draw the image to avoid mutation and maintain aspect ratio safely
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    ctx.drawImage(originalImg, 0, 0);

    // Results section
    const resultsContainer = document.createElement('div');
    resultsContainer.style.flex = "2 1 350px";
    resultsContainer.style.display = "flex";
    resultsContainer.style.flexDirection = "column";
    resultsContainer.style.gap = "15px";
    contentWrapper.appendChild(resultsContainer);

    // Loading indicator
    const loadingDiv = document.createElement('div');
    loadingDiv.style.background = "#f3f4f6";
    loadingDiv.style.padding = "20px";
    loadingDiv.style.borderRadius = "8px";
    loadingDiv.style.textAlign = "center";
    loadingDiv.innerHTML = `
        <div style="font-size:24px; margin-bottom:10px; animation: spin 2s linear infinite;">⏳</div>
        <b style="color:${themeColor}">Analyzing image & generating ideas...</b><br/>
        <small style="color:#666;">(Downloading lightweight AI model, please wait...)</small>
        <style>@keyframes spin { 100% { transform: rotate(360deg); } }</style>
    `;
    resultsContainer.appendChild(loadingDiv);

    // Dynamic Script Loader Promisified
    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 script: ${src}`));
            document.head.appendChild(script);
        });
    };

    // Main Async Analysis logic
    const performAnalysis = async () => {
        try {
            // Dynamically import TensorFlow.js and MobileNet
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest', 'tf');
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@latest', 'mobilenet');

            const model = await window.mobilenet.load();
            
            // Classify the drawn canvas
            const predictions = await model.classify(canvas);
            
            loadingDiv.style.display = 'none';

            if (predictions && predictions.length > 0) {
                const topMatch = predictions[0];
                const concept = topMatch.className.split(',')[0].trim();
                const capitalizedConcept = concept.charAt(0).toUpperCase() + concept.slice(1);
                const confidence = (topMatch.probability * 100).toFixed(1);

                // 1. Identifier Block
                const idBlock = document.createElement('div');
                idBlock.style.background = "#f8f9fa";
                idBlock.style.padding = "15px";
                idBlock.style.borderRadius = "8px";
                idBlock.style.borderLeft = `4px solid ${themeColor}`;
                idBlock.innerHTML = `
                    <h3 style="margin:0 0 10px 0; color:#333; font-size:1.1em;">🔍 AI Identifier Results</h3>
                    <p style="margin: 5px 0;"><strong>Primary Subject:</strong> <span style="color:${themeColor}; font-size:1.2em; font-weight:bold;">${capitalizedConcept}</span> <em>(${confidence}% confidence)</em></p>
                    <p style="margin: 5px 0; font-size: 0.9em; color:#666;"><strong>Other tags found:</strong> ${predictions.slice(1).map(p => p.className.split(',')[0]).join(', ')}</p>
                `;
                resultsContainer.appendChild(idBlock);

                // 2. Idea Generator Block
                const ideaBlock = document.createElement('div');
                ideaBlock.style.background = "#eef2ff";
                ideaBlock.style.padding = "15px";
                ideaBlock.style.borderRadius = "8px";
                ideaBlock.style.borderLeft = `4px solid #4f46e5`;
                ideaBlock.innerHTML = `
                    <h3 style="margin:0 0 10px 0; color:#333; font-size:1.1em;">💡 Creator Studio Idea Generator (${currentYear})</h3>
                    <p style="margin:0 0 10px 0; font-size:0.9em; color:#555;">Topic formats generated based on "${capitalizedConcept}":</p>
                    <ul style="margin:0; padding-left:20px; line-height:1.6; color:#111;">
                        <li><strong>Tutorial:</strong> "The Ultimate Guide to ${capitalizedConcept} in ${currentYear}"</li>
                        <li><strong>Listicle:</strong> "10 Creative Ways to Use Your ${capitalizedConcept}"</li>
                        <li><strong>Vlog:</strong> "Behind the Scenes: My Aesthetic ${capitalizedConcept} Setup"</li>
                        <li><strong>Review:</strong> "Why Every Creator Needs a ${capitalizedConcept}"</li>
                    </ul>
                `;
                resultsContainer.appendChild(ideaBlock);

                // 3. Search Tool Block
                const searchBlock = document.createElement('div');
                searchBlock.style.marginTop = "auto";
                searchBlock.style.background = "#fff";
                searchBlock.style.padding = "15px";
                searchBlock.style.borderRadius = "8px";
                searchBlock.style.border = "1px solid #eaeaea";
                
                const btnStyle = `display:inline-block; padding:10px 15px; margin: 5px 5px 0 0; background:${themeColor}; color:#fff; text-decoration:none; border-radius:6px; font-weight:bold; font-size:0.9em; transition: 0.2s;`;
                
                searchBlock.innerHTML = `
                    <h3 style="margin:0 0 10px 0; color:#333; font-size:1.1em;">🌐 Explore & Search Tool</h3>
                    <div style="display:flex; flex-wrap:wrap;">
                        <a href="https://www.google.com/search?q=${encodeURIComponent(concept + ' creator studio ideas ' + currentYear)}" target="_blank" style="${btnStyle}">Google Ideas</a>
                        <a href="https://www.pinterest.com/search/pins/?q=${encodeURIComponent(concept + ' aesthetic')}" target="_blank" style="${btnStyle}; background:#bd081c;">Pinterest Inspiration</a>
                        <a href="https://www.youtube.com/results?search_query=${encodeURIComponent(concept + ' trends ' + currentYear)}" target="_blank" style="${btnStyle}; background:#ff0000;">YouTube Trends</a>
                    </div>
                `;
                resultsContainer.appendChild(searchBlock);
            } else {
                loadingDiv.innerHTML = `<span style="color:#d9534f; font-weight:bold;">No identifiable objects found in the image. Try a clearer picture.</span>`;
                loadingDiv.style.display = 'block';
            }
        } catch (error) {
            loadingDiv.innerHTML = `<span style="color:#d9534f; font-weight:bold;">Error during analysis:</span><br/><small>${error.message}</small>`;
            // Specifically check for Canvas Tainted Error which happens if image is loaded from external URL without CORS
            if(error.message.toLowerCase().includes('tainted')) {
                 loadingDiv.innerHTML += `<br/><br/><small>(This usually occurs due to cross-origin restrictions on external images. Try processing a local image instead.)</small>`;
            }
            loadingDiv.style.display = 'block';
        }
    };

    // Start background analysis
    performAnalysis();

    return container;
}