AI Image Topic Identifier And Idea Generator

async function processImage(originalImg, maxPredictions = "4", themeColor = "#8B5CF6") {
    const numPredictions = parseInt(maxPredictions, 10) || 4;

    // Create the main container element
    const container = document.createElement('div');
    container.style.fontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
    container.style.padding = "24px";
    container.style.backgroundColor = "#ffffff";
    container.style.borderRadius = "16px";
    container.style.boxShadow = "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
    container.style.maxWidth = "650px";
    container.style.margin = "0 auto";
    container.style.color = "#1f2937";
    container.style.border = "1px solid #f3f4f6";

    // Initial Loading State
    container.innerHTML = `
        <div style="text-align: center; padding: 40px 20px;">
            <div style="width: 48px; height: 48px; border: 4px solid ${themeColor}22; border-top: 4px solid ${themeColor}; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px auto;"></div>
            <h3 style="margin: 0 0 8px 0; color: #111827; font-size: 1.25rem;">AI is analyzing your image...</h3>
            <p style="margin: 0; color: #6b7280; font-size: 0.95rem;">Loading neural networks and classifying visual topics.</p>
            <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
        </div>
    `;

    // Helper to dynamically load external scripts securely
    const loadScript = (src, checkVarName) => {
        return new Promise((resolve, reject) => {
            // Check if already loaded globally
            if (window[checkVarName]) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = src;
            script.crossOrigin = "anonymous";
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
            document.head.appendChild(script);
        });
    };

    try {
        // Ensure the original image is fully loaded
        if (!originalImg.complete || originalImg.naturalWidth === 0) {
            await new Promise((resolve, reject) => {
                originalImg.onload = resolve;
                originalImg.onerror = reject;
            });
        }

        // Draw to a temporary canvas to ensure proper formatting and prevent CORS texture issues
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = originalImg.naturalWidth;
        tempCanvas.height = originalImg.naturalHeight;
        const ctx = tempCanvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

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

        // Load the model instance
        const model = await window.mobilenet.load({ version: 2, alpha: 1.0 });

        // Classify the image
        const predictions = await model.classify(tempCanvas, numPredictions);

        if (!predictions || predictions.length === 0) {
            throw new Error("The AI couldn't identify any clear topics in this image.");
        }

        // Process topics
        const topicsList = predictions.map(p => {
            const cleanName = p.className.split(',')[0].trim();
            // Capitalize first letter
            return cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
        });

        const mainTopic = topicsList[0];

        // Idea Templates based on the top prediction
        const ideaTemplates = [
            `Write an ultimate guide or history piece about <strong>${mainTopic.toLowerCase()}s</strong>.`,
            `Create a "Top list" compilation reviewing the best <strong>${mainTopic.toLowerCase()}</strong> products.`,
            `Design a creative aesthetic moodboard revolving around the theme of <strong>${mainTopic}</strong>.`,
            `Produce a short-form video tutorial or "how-to" related to a <strong>${mainTopic}</strong>.`,
            `Start a community discussion exploring unique ways to utilize or style a <strong>${mainTopic}</strong>.`
        ];

        // SVG Lightbulb Icon
        const lightbulbIcon = `
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${themeColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
                <path d="M9 18h6"></path><path d="M10 22h4"></path><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 12 3a4.65 4.65 0 0 0-4.5 4.5c0 1.93 1.16 3.42 2.1 4.5.76.76 1.23 1.52 1.41 2.5"></path>
            </svg>`;

        // SVG Tag Icon
        const tagIcon = `
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px; opacity: 0.7;">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line>
            </svg>`;

        // Generate the final UI
        container.innerHTML = `
            <div style="display: flex; flex-direction: column; gap: 24px;">
                
                <!-- Top Section: Image Preview & Detected Topics -->
                <div style="display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; border-bottom: 2px dashed #f3f4f6; padding-bottom: 24px;">
                    <div style="flex-shrink: 0; width: 100%; max-width: 160px;">
                        <img src="${tempCanvas.toDataURL('image/jpeg', 0.8)}" style="width: 100%; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 1px solid #e5e7eb;" />
                    </div>
                    
                    <div style="flex-grow: 1; min-width: 250px;">
                        <h2 style="margin: 0 0 16px 0; font-size: 1.25rem; color: #111827; display: flex; align-items: center;">
                            ${tagIcon} AI Identified Topics
                        </h2>
                        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                            ${predictions.map(p => {
                                const cleanName = p.className.split(',')[0].trim();
                                const probability = (p.probability * 100).toFixed(1);
                                return `
                                <div style="background-color: ${themeColor}12; color: ${themeColor}; padding: 6px 14px; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; border: 1px solid ${themeColor}33; display: flex; align-items: center; gap: 6px;">
                                    ${cleanName.charAt(0).toUpperCase() + cleanName.slice(1)}
                                    <span style="background-color: #ffffff; padding: 2px 6px; border-radius: 8px; font-size: 0.75rem; color: #4b5563;">${probability}%</span>
                                </div>
                                `;
                            }).join('')}
                        </div>
                    </div>
                </div>

                <!-- Bottom Section: Generated Content Ideas -->
                <div>
                    <h2 style="margin: 0 0 16px 0; font-size: 1.25rem; color: #111827; display: flex; align-items: center;">
                        ${lightbulbIcon} Generated Content Ideas
                    </h2>
                    <div style="display: flex; flex-direction: column; gap: 12px;">
                        ${ideaTemplates.map((idea, index) => `
                            <div style="display: flex; align-items: flex-start; gap: 12px; background-color: #f9fafb; padding: 14px 18px; border-radius: 10px; border: 1px solid #f3f4f6;">
                                <div style="background-color: ${themeColor}; color: white; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8rem; font-weight: bold; flex-shrink: 0; outline: 3px solid ${themeColor}22;">
                                    ${index + 1}
                                </div>
                                <div style="color: #4b5563; font-size: 0.95rem; line-height: 1.5; padding-top: 1px;">
                                    ${idea}
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
                
            </div>
        `;

    } catch (error) {
        container.innerHTML = `
            <div style="text-align: center; padding: 40px 20px;">
                <div style="background-color: #fee2e2; color: #ef4444; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 16px auto;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                </div>
                <h3 style="margin: 0 0 8px 0; color: #991b1b; font-size: 1.25rem;">Analysis Failed</h3>
                <p style="margin: 0; color: #7f1d1d; font-size: 0.95rem;">${error.message || 'An unexpected error occurred during AI processing.'}</p>
            </div>
        `;
    }

    return container;
}