AI Image Identifier Idea Generator Tool

async function processImage(originalImg, ideaCount = "5", theme = "Creative") {
    // Parameter parsing and validation
    const count = Math.max(1, Math.min(10, parseInt(ideaCount, 10) || 5));
    const validThemes = ["Creative", "Business", "Educational"];
    const selectedTheme = validThemes.includes(theme) ? theme : "Creative";

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

    // Load TensorFlow.js and MobileNet
    if (typeof window.tf === 'undefined') {
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.20.0/dist/tf.min.js');
    }
    if (typeof window.mobilenet === 'undefined') {
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js');
    }

    // Draw the image onto a canvas for resizing and consistent API
    const canvas = document.createElement('canvas');
    const MAX_DIM = 400;
    let w = originalImg.width;
    let h = originalImg.height;
    
    // Scale down if necessary
    if (w > MAX_DIM || h > MAX_DIM) {
        const ratio = Math.min(MAX_DIM / w, MAX_DIM / h);
        w *= ratio;
        h *= ratio;
    }
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, w, h);

    // AI Classification
    let predictions = [];
    try {
        const model = await window.mobilenet.load();
        predictions = await model.classify(canvas);
    } catch (e) {
        console.warn("AI Classification failed (possibly due to CORS or network), using fallback.", e);
        predictions = [{ className: "mysterious visual object", probability: 0.99 }];
    }

    // Pick the most confident identification as our subject
    const topItem = predictions[0] ? predictions[0].className.split(',')[0].toLowerCase() : 'image subject';

    // Idea Templates
    const templates = {
        Creative: [
            "Write a short fiction story featuring a {item}.",
            "Paint or draw a surrealist interpretation of a {item}.",
            "Compose a poem exploring the essence of a {item}.",
            "Design a futuristic version of a {item}.",
            "Create a character whose personality is based on a {item}.",
            "Compose an instrumental track inspired by the vibe of a {item}.",
            "Write a script for a short film revolving around a {item}.",
            "Design a piece of quirky furniture shaped like a {item}."
        ],
        Business: [
            "Brainstorm a startup idea centered around a {item}.",
            "Write an SEO-optimized blog post reviewing the best {item}s.",
            "Design a minimalist logo for a brand selling {item}s.",
            "Create a marketing campaign tailored for a new {item}.",
            "Pitch a subscription box service that includes a {item}.",
            "Draft a business plan for an app that identifies a {item}.",
            "Design packaging for a luxury version of a {item}.",
            "Generate an elevator pitch for a sustainable {item}."
        ],
        Educational: [
            "Create a 5-minute lesson plan explaining the history of the {item}.",
            "Design a science experiment using a {item}.",
            "Write an essay on the cultural significance of the {item}.",
            "Draft a quiz containing 10 questions about a {item}.",
            "Explain the manufacturing process of a {item} to a 5-year-old.",
            "Create an infographic showing the anatomy of a {item}.",
            "Develop a timeline of the evolution of the {item}.",
            "Plan a field trip or virtual tour centered around a {item}."
        ]
    };

    // Generate Idea List
    const ideas = [];
    const pool = [...templates[selectedTheme]].sort(() => 0.5 - Math.random());
    
    // Pick requested amount of ideas
    for (let i = 0; i < Math.min(count, pool.length); i++) {
        ideas.push(pool[i].replace(/\{item\}/g, topItem));
    }
    
    // Fill remaining if requested count is larger than template pool
    for (let i = pool.length; i < count; i++) {
        ideas.push(`Think of an unconventional use case for a ${topItem}.`);
    }

    // Wrap everything in a nice UI container
    const container = document.createElement('div');
    container.style.fontFamily = '"Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.maxWidth = '650px';
    container.style.margin = '20px auto';
    container.style.padding = '24px';
    container.style.border = '1px solid #e2e8f0';
    container.style.borderRadius = '16px';
    container.style.backgroundColor = '#f8fafc';
    container.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
    container.style.color = '#1e293b';

    // Header
    const header = document.createElement('h2');
    header.innerHTML = '✨ AI Image Identifier & Idea Generator';
    header.style.marginTop = '0';
    header.style.color = '#0f172a';
    header.style.borderBottom = '2px solid #e2e8f0';
    header.style.paddingBottom = '12px';
    container.appendChild(header);

    // Layout Container for Image & Tags side-by-side
    const topSection = document.createElement('div');
    topSection.style.display = 'flex';
    topSection.style.flexWrap = 'wrap';
    topSection.style.gap = '24px';
    topSection.style.marginBottom = '24px';
    topSection.style.alignItems = 'flex-start';

    // Image side
    const imgWrapper = document.createElement('div');
    imgWrapper.style.flexShrink = '0';
    canvas.style.borderRadius = '12px';
    canvas.style.border = '4px solid #fff';
    canvas.style.boxShadow = '0 4px 6px -1px rgba(0,0,0,0.1)';
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    imgWrapper.appendChild(canvas);
    topSection.appendChild(imgWrapper);

    // Identifications side
    const identSection = document.createElement('div');
    identSection.style.flex = '1';
    identSection.style.minWidth = '200px';
    const identTitle = document.createElement('h3');
    identTitle.innerText = '🔍 Detected Objects:';
    identTitle.style.marginTop = '0';
    identTitle.style.marginBottom = '16px';
    identTitle.style.fontSize = '1.1rem';
    identSection.appendChild(identTitle);

    predictions.forEach(p => {
        const badge = document.createElement('div');
        badge.style.display = 'inline-block';
        badge.style.backgroundColor = '#e0f2fe';
        badge.style.color = '#0369a1';
        badge.style.padding = '6px 14px';
        badge.style.borderRadius = '9999px';
        badge.style.margin = '0 8px 8px 0';
        badge.style.fontSize = '14px';
        badge.style.fontWeight = '600';
        badge.innerText = `${p.className} (${(p.probability * 100).toFixed(1)}%)`;
        identSection.appendChild(badge);
    });
    
    topSection.appendChild(identSection);
    container.appendChild(topSection);

    // Ideas Section
    const ideasDiv = document.createElement('div');
    ideasDiv.style.backgroundColor = '#ffffff';
    ideasDiv.style.padding = '20px';
    ideasDiv.style.borderRadius = '12px';
    ideasDiv.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1)';

    const ideasTitle = document.createElement('h3');
    ideasTitle.innerText = `💡 Generated Inspiration (${selectedTheme} Theme):`;
    ideasTitle.style.marginTop = '0';
    ideasTitle.style.color = '#334155';
    ideasDiv.appendChild(ideasTitle);

    const ideaList = document.createElement('ul');
    ideaList.style.paddingLeft = '20px';
    ideaList.style.marginBottom = '0';
    ideaList.style.lineHeight = '1.7';
    
    ideas.forEach((idea, index) => {
        const li = document.createElement('li');
        li.style.marginBottom = index === ideas.length - 1 ? '0' : '10px';
        li.style.color = '#475569';
        // Bold the detected item in the idea text if it exists
        li.innerHTML = idea.replace(new RegExp(topItem, 'gi'), match => `<strong style="color:#0f172a;">${match}</strong>`);
        ideaList.appendChild(li);
    });
    
    ideasDiv.appendChild(ideaList);
    container.appendChild(ideasDiv);

    return container;
}