Image To Text Description Generator

async function processImage(originalImg, maxTokens = 50) {
    // Create the main container to display the image and the generated text
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.padding = '20px';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.color = '#333';
    container.style.maxWidth = '600px';
    container.style.boxSizing = 'border-box';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '20px';
    container.style.margin = '0 auto';

    // Add an image preview
    const imgPreview = document.createElement('img');
    // Draw the image onto a canvas to ensure we have a clean data URL without CORS issues directly affecting the AI pipeline inside
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    const base64Img = canvas.toDataURL('image/jpeg');
    
    imgPreview.src = base64Img;
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '350px';
    imgPreview.style.borderRadius = '8px';
    imgPreview.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
    container.appendChild(imgPreview);

    // Create a text box for the status and the description
    const textBox = document.createElement('div');
    textBox.style.width = '100%';
    textBox.style.padding = '15px';
    textBox.style.backgroundColor = '#ffffff';
    textBox.style.border = '1px solid #d1d5db';
    textBox.style.borderRadius = '8px';
    textBox.style.textAlign = 'center';
    textBox.style.fontSize = '1.1em';
    textBox.style.lineHeight = '1.6';
    textBox.style.boxShadow = 'inset 0 2px 4px rgba(0,0,0,0.02)';

    const iconSpan = document.createElement('span');
    iconSpan.innerHTML = '⏳ ';
    const statusTextSpan = document.createElement('span');
    statusTextSpan.innerText = 'Loading AI Model (this typically takes a moment on first run)...';
    
    textBox.appendChild(iconSpan);
    textBox.appendChild(statusTextSpan);
    container.appendChild(textBox);

    // Run the Machine Learning pipeline asynchronously so we return the UI container immediately
    (async () => {
        try {
            // Dynamically import Hugging Face Transformers.js
            const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.16.1');
            
            // Disable local models to fetch weights properly from the Hugging Face hub
            env.allowLocalModels = false;

            // Load the image captioning model
            const captioner = await pipeline('image-to-text', 'Xenova/vit-gpt2-image-captioning', {
                progress_callback: (progress) => {
                    if (progress.status === 'downloading' || progress.status === 'progress') {
                        let percent = 0;
                        if (progress.total) {
                            percent = Math.round((progress.loaded / progress.total) * 100);
                        }
                        statusTextSpan.innerText = `Downloading model weights... ${percent > 0 ? percent + '%' : ''}`;
                    } else if (progress.status === 'init') {
                        statusTextSpan.innerText = 'Initializing model tensor operations...';
                    } else if (progress.status === 'ready') {
                        statusTextSpan.innerText = 'Analyzing image...';
                    }
                }
            });

            statusTextSpan.innerText = 'Generating description...';

            const maxTokensNum = typeof maxTokens === 'number' ? maxTokens : parseInt(maxTokens, 10) || 50;

            // Run inference to get the text description
            const result = await captioner(base64Img, {
                max_new_tokens: maxTokensNum
            });

            let description = 'Could not generate a description for this image.';
            if (result && result.length > 0 && result[0].generated_text) {
                description = result[0].generated_text;
                // Capitalize the first letter nicely
                description = description.charAt(0).toUpperCase() + description.slice(1);
            }

            // Update UI with the final result
            iconSpan.innerHTML = '✨ ';
            statusTextSpan.innerHTML = `<strong style="color:#2563eb; display:block; margin-bottom:8px;">Generated Description:</strong><span style="font-weight: 500;">"${description}"</span>`;

        } catch (error) {
            iconSpan.innerHTML = '❌ ';
            statusTextSpan.style.color = '#dc2626';
            statusTextSpan.innerText = `Error: ${error.message}`;
            console.error('Text Generation Error:', error);
        }
    })();

    return container;
}