Image Description Generator

function processImage(originalImg, modelName = 'Xenova/vit-gpt2-image-captioning') {
    // Create the main container div
    const container = document.createElement('div');
    container.style.cssText = `
        font-family: system-ui, -apple-system, sans-serif;
        padding: 24px;
        border-radius: 12px;
        max-width: 500px;
        margin: 0 auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        background: #ffffff;
        text-align: center;
        border: 1px solid #e5e7eb;
        color: #111827;
    `;

    // Title
    const title = document.createElement('h2');
    title.innerText = 'Image Description Generator';
    title.style.cssText = 'margin-top: 0; font-size: 1.25rem; margin-bottom: 16px;';
    container.appendChild(title);

    // Create a copy of the image to display
    const imgCopy = document.createElement('img');
    imgCopy.style.cssText = 'max-width: 100%; max-height: 250px; border-radius: 8px; margin-bottom: 16px; object-fit: contain; background: #f3f4f6;';
    
    // Resolve image data safely (handling potential cross-origin taint)
    let imageUrl = originalImg.src;
    try {
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);
        imageUrl = canvas.toDataURL('image/jpeg', 0.9);
    } catch (e) {
        console.warn('Canvas tainted by cross-origin data. Using original src as fallback.');
    }
    imgCopy.src = imageUrl;
    container.appendChild(imgCopy);

    // Status / Loading text
    const statusText = document.createElement('div');
    statusText.style.cssText = 'color: #4b5563; font-size: 0.9rem; font-style: italic; background: #f9fafb; padding: 12px; border-radius: 6px;';
    statusText.innerText = 'Initializing AI engine...';
    container.appendChild(statusText);

    // Result container
    const resultBox = document.createElement('div');
    resultBox.style.cssText = 'display: none; margin-top: 16px; padding: 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; color: #166534; font-size: 1.1rem; font-weight: 500; line-height: 1.5;';
    container.appendChild(resultBox);

    // Load AI model asynchronously to prevent UI blocking
    (async () => {
        try {
            statusText.innerText = `Loading Transformers.js...`;
            
            // Dynamically import the Transformers.js library
            const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.16.0/dist/transformers.min.js');
            
            // Disable local models since we are running in a browser
            env.allowLocalModels = false;
            
            statusText.innerText = `Downloading AI model (${modelName})...\nThis may take a moment (approx ~60MB-200MB) on the first run.`;

            // Initialize the image captioning pipeline
            const captioner = await pipeline('image-to-text', modelName, {
                progress_callback: (x) => {
                    if (x.status === 'progress' && x.progress) {
                        statusText.innerText = `Downloading model chunk (${x.file})... ${Math.round(x.progress)}%`;
                    } else if (x.status === 'done') {
                        statusText.innerText = 'Model loaded successfully! Analyzing image...';
                    }
                }
            });

            statusText.innerText = 'Analyzing image...';

            // Generate description
            const result = await captioner(imageUrl);

            // Hide status, show result
            statusText.style.display = 'none';
            resultBox.style.display = 'block';

            if (result && result.length > 0 && result[0].generated_text) {
                const text = result[0].generated_text;
                // Capitalize first letter and add a period
                const formattedText = text.charAt(0).toUpperCase() + text.slice(1) + (text.endsWith('.') ? '' : '.');
                resultBox.innerText = `"${formattedText}"`;
            } else {
                resultBox.style.background = '#fef2f2';
                resultBox.style.borderColor = '#fecaca';
                resultBox.style.color = '#991b1b';
                resultBox.innerText = 'Unable to generate a description.';
            }

        } catch (error) {
            console.error('Error in Image Description Generator:', error);
            statusText.style.background = '#fef2f2';
            statusText.style.color = '#991b1b';
            statusText.style.fontStyle = 'normal';
            statusText.innerText = 'Error: ' + error.message;
        }
    })();

    // Immediately return the container so the UI can mount it
    return container;
}