AI Powered Image Tool Creator

async function processImage(originalImg, defaultTool = "objects") {
    // Validate tool types to ensure robust handling
    const validTools = ['objects', 'faces', 'background', 'reset'];
    const initialTool = validTools.includes(defaultTool) ? defaultTool : 'objects';

    // 1. Create a self-contained Interactive UI Container
    const container = document.createElement('div');
    container.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 20px;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        background: #1e1e1e;
        color: #ffffff;
        padding: 24px;
        border-radius: 12px;
        max-width: 100%;
        box-sizing: border-box;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    `;

    // 2. Add Header Section
    const header = document.createElement('div');
    header.innerHTML = `
        <h2 style="margin: 0 0 8px 0; font-size: 24px; font-weight: 600; letter-spacing: 0.5px;">AI Image Tool Creator</h2>
        <p style="margin: 0; font-size: 14px; color: #aaaaaa;">
            Create AI-powered transformations by selecting a neural network model to apply dynamically.
        </p>
    `;
    container.appendChild(header);

    // 3. Add Control Buttons
    const controls = document.createElement('div');
    controls.style.cssText = 'display: flex; gap: 10px; flex-wrap: wrap;';
    container.appendChild(controls);

    // 4. Add Canvas and Loader Wrap
    const canvasContainer = document.createElement('div');
    canvasContainer.style.cssText = `
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
        overflow: hidden;
        background: #000000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        text-align: center;
    `;
    
    // Main Display Canvas
    const canvas = document.createElement('canvas');
    canvas.style.cssText = 'max-width: 100%; height: auto; display: inline-block; vertical-align: middle; transition: opacity 0.3s;';
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(originalImg, 0, 0);
    canvasContainer.appendChild(canvas);

    // Loader Element
    const loader = document.createElement('div');
    loader.style.cssText = `
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.75); color: #ffffff; display: none;
        align-items: center; justify-content: center; flex-direction: column;
        font-size: 16px; z-index: 10; backdrop-filter: blur(4px);
    `;
    
    const loaderText = document.createElement('div');
    loaderText.style.marginBottom = '15px';
    loaderText.style.fontWeight = 'bold';
    loaderText.innerText = 'Loading AI Model...';
    loader.appendChild(loaderText);

    // CSS Animated Spinner
    const spinner = document.createElement('div');
    spinner.style.cssText = 'border: 4px solid rgba(255,255,255,0.2); border-top: 4px solid #3498db; border-radius: 50%; width: 36px; height: 36px; animation: ai-spin 1s linear infinite;';
    loader.appendChild(spinner);

    const style = document.createElement('style');
    style.innerHTML = '@keyframes ai-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }';
    container.appendChild(style);

    canvasContainer.appendChild(loader);
    container.appendChild(canvasContainer);

    // 5. Button Logic and Tool States
    let currentToolId = '';
    const buttons = {};

    const tools = [
        { id: 'objects', name: 'Detect Objects' },
        { id: 'faces', name: 'Scanner (Faces)' },
        { id: 'background', name: 'Remove Background' },
        { id: 'reset', name: 'Revert to Original' }
    ];

    for (const t of tools) {
        const btn = document.createElement('button');
        btn.textContent = t.name;
        btn.style.cssText = `
            padding: 10px 18px; border: none; border-radius: 6px; 
            background: #333333; color: #ffffff; cursor: pointer; 
            font-weight: 600; font-size: 14px; transition: all 0.2s;
        `;
        
        btn.onmouseover = () => { if(currentToolId !== t.id) btn.style.background = '#444'; };
        btn.onmouseout = () => { if(currentToolId !== t.id) btn.style.background = '#333'; };
        
        btn.onclick = async () => {
            if (currentToolId === t.id && t.id !== 'reset') return;
            await runTool(t.id);
        };
        
        buttons[t.id] = btn;
        controls.appendChild(btn);
    }

    // Dynamic Script Loading Utility for TensorFlow & AI Models
    const loadScript = async (src, globalVar) => {
        if (window[globalVar]) return window[globalVar];
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.crossOrigin = "anonymous";
            script.onload = () => resolve(window[globalVar]);
            script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
            document.head.appendChild(script);
        });
    };

    const resetCanvas = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(originalImg, 0, 0);
        canvas.style.background = 'transparent';
    };

    // 6. Primary Engine Method that executes the selected AI transformation
    async function runTool(toolId) {
        // UI Updates for active tab
        currentToolId = toolId;
        Object.keys(buttons).forEach(id => {
            buttons[id].style.background = (id === toolId) ? '#3498db' : '#333333';
            if (id === toolId) buttons[id].style.boxShadow = '0 0 12px rgba(52,152,219,0.5)';
            else buttons[id].style.boxShadow = 'none';
        });

        if (toolId === 'reset') {
            resetCanvas();
            return;
        }

        // Show Processing Screen & reset visual state
        loader.style.display = 'flex';
        resetCanvas();

        try {
            // Guarantee Deep Learning Core is Ready
            await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs', 'tf');
            
            if (toolId === 'objects') {
                loaderText.innerText = 'Downloading Object Detection Params...';
                await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd', 'cocoSsd');
                const model = await window.cocoSsd.load();
                const predictions = await model.detect(canvas);
                
                predictions.forEach(prediction => {
                    if (prediction.score >= 0.5) {
                        const [x, y, width, height] = prediction.bbox;
                        
                        // Draw Bounding Box
                        ctx.strokeStyle = '#00FF00';
                        ctx.lineWidth = Math.max(2, canvas.width * 0.005);
                        ctx.strokeRect(x, y, width, height);

                        // Draw Label
                        const text = `${prediction.class} (${Math.round(prediction.score * 100)}%)`;
                        ctx.font = `bold ${Math.max(14, canvas.width * 0.02)}px sans-serif`;
                        const textWidth = ctx.measureText(text).width;
                        const textHeight = parseInt(ctx.font, 10);
                        const boxY = Math.max(y, textHeight + 8);
                        
                        ctx.fillStyle = 'rgba(0, 255, 0, 0.85)';
                        ctx.fillRect(x, boxY - textHeight - 8, textWidth + 10, textHeight + 8);

                        ctx.fillStyle = '#000000';
                        ctx.fillText(text, x + 5, boxY - 4);
                    }
                });
            } else if (toolId === 'faces') {
                loaderText.innerText = 'Activating BlazeFace Scanner...';
                await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface', 'blazeface');
                const model = await window.blazeface.load();
                const predictions = await model.estimateFaces(canvas, false);
                
                predictions.forEach(prediction => {
                    const start = prediction.topLeft;
                    const end = prediction.bottomRight;
                    const size = [end[0] - start[0], end[1] - start[1]];
                    
                    ctx.strokeStyle = '#FF00FF';
                    ctx.lineWidth = Math.max(2, canvas.width * 0.005);
                    ctx.strokeRect(start[0], start[1], size[0], size[1]);

                    // Render prominent facial landmarks (eyes, nose, mouth nodes)
                    ctx.fillStyle = '#FF00FF';
                    if (prediction.landmarks) {
                        prediction.landmarks.forEach(landmark => {
                            ctx.beginPath();
                            ctx.arc(landmark[0], landmark[1], Math.max(3, canvas.width * 0.005), 0, 2 * Math.PI);
                            ctx.fill();
                        });
                    }
                });
            } else if (toolId === 'background') {
                loaderText.innerText = 'Generating Mask via BodyPix...';
                await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix', 'bodyPix');
                const net = await window.bodyPix.load({
                    architecture: 'MobileNetV1',
                    outputStride: 16,
                    multiplier: 0.75,
                    quantBytes: 2
                });
                const segmentation = await net.segmentPerson(canvas, {
                    flipHorizontal: false,
                    internalResolution: 'medium',
                    segmentationThreshold: 0.5
                });
                
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const data = imageData.data;
                
                // Set non-person pixels to transparent
                for (let i = 0; i < data.length; i += 4) {
                    if (segmentation.data[i / 4] === 0) data[i + 3] = 0; 
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // Add checkered background mapping for transparent visualization
                canvas.style.background = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYNgfQEhjx8DAyHAAy2F8asCMxoGBYXwwo8EGBg0NhKMGjEYk+DDiGAA07REtDE8wFAAAAABJRU5ErkJggg==") repeat';
                ctx.putImageData(imageData, 0, 0);
            }
        } catch (err) {
            console.error("AI Evaluation Error:", err);
            ctx.fillStyle = 'rgba(231, 76, 60, 0.85)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#ffffff';
            ctx.font = `bold ${Math.max(16, canvas.width * 0.03)}px sans-serif`;
            ctx.textAlign = 'center';
            ctx.fillText("Failed to process AI model.", canvas.width / 2, canvas.height / 2);
        }

        // Hide Pre-loader wrapper
        loader.style.display = 'none';
    }

    // Run heavily loaded async task strictly inline prior to component return 
    // This allows the test runtime to verify processed results from the get-go.
    await runTool(initialTool);

    return container;
}