Image Description Tool

function processImage(originalImg, minWidth = 400, initialDescriptionHeight = 80) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Ensure the canvas is wide enough so the AI text description remains readable
    let width = originalImg.width || minWidth;
    let imgHeight = originalImg.height || minWidth;
    
    if (width < minWidth) {
        const ratio = minWidth / width;
        width = minWidth;
        imgHeight = imgHeight * ratio;
    }
    
    // Set initial size properties
    canvas.width = width;
    canvas.height = imgHeight + initialDescriptionHeight;
    canvas.style.maxWidth = "100%";
    canvas.style.borderRadius = "8px";
    canvas.style.boxShadow = "0px 4px 10px rgba(0,0,0,0.15)";
    
    // Core function to draw the current states (Loading / Error / Result)
    function drawState(text, isError = false, isLoading = false) {
        ctx.font = '16px Arial, sans-serif';
        const padding = 20;
        const maxTextWidth = Math.max(150, width - padding * 2);
        
        // Word Wraps for description string
        const words = text.split(' ');
        let line = '';
        let lines = [];
        
        for (let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            const metrics = ctx.measureText(testLine);
            if (metrics.width > maxTextWidth && n > 0) {
                lines.push(line);
                line = words[n] + ' ';
            } else {
                line = testLine;
            }
        }
        lines.push(line);
        
        const lineHeight = 24;
        const totalTextHeight = lines.length * lineHeight;
        let currentDescHeight = initialDescriptionHeight;
        
        // Dynamically increase footer height if text overflows
        if (totalTextHeight + 40 > currentDescHeight) {
            currentDescHeight = totalTextHeight + 40;
        }
        
        // Resizing canvas resets states, must strictly declare before drawing operations
        canvas.height = imgHeight + currentDescHeight;
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.font = '16px Arial, sans-serif';
        
        // 1. Draw scaled original Image
        ctx.drawImage(originalImg, 0, 0, width, imgHeight);
        
        // 2. Draw description background block area
        ctx.fillStyle = isError ? '#ffebee' : (isLoading ? '#fff8e1' : '#f1f8e9');
        ctx.fillRect(0, imgHeight, width, currentDescHeight);
        
        // 3. Draw separating line
        ctx.strokeStyle = '#e0e0e0';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0, imgHeight);
        ctx.lineTo(width, imgHeight);
        ctx.stroke();
        
        // 4. Fill text content
        ctx.fillStyle = isError ? '#c62828' : (isLoading ? '#e65100' : '#2e7d32');
        let startY = imgHeight + (currentDescHeight - totalTextHeight) / 2 + (lineHeight / 2);
        
        for (let i = 0; i < lines.length; i++) {
            ctx.fillText(lines[i].trim(), width / 2, startY + (i * lineHeight));
        }
    }

    // Set immediate loading state
    drawState("⏳ Initializing AI tool...", false, true);
    
    // Invoke pipeline asynchronously so we can return the canvas directly 
    // to be appended to the user viewport via generic frameworks synchronously
    (async () => {
        try {
            drawState("⏳ Downloading/Caching AI Image Classifier Model (might take minutes on first run)...", false, true);
            
            // Dynamically import lightweight version of transformer.js directly from CDN
            const transformers = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1');
            transformers.env.allowLocalModels = false; 
            
            drawState("✨ Analyzing visual context into descriptions...", false, true);
            
            // Generate the pipeline model 'vit-gpt2-image-captioning' (Highly popular for describing standard images)
            const captioner = await transformers.pipeline('image-to-text', 'Xenova/vit-gpt2-image-captioning');
            
            // Isolate base64 data to safely handle cross-domain image fetches inside of local model
            let imageSource;
            try {
                const tempProxyCanvas = document.createElement('canvas');
                tempProxyCanvas.width = width;
                tempProxyCanvas.height = imgHeight;
                tempProxyCanvas.getContext('2d').drawImage(originalImg, 0, 0, width, imgHeight);
                imageSource = tempProxyCanvas.toDataURL('image/jpeg', 0.9);
            } catch (canvasErr) {
                // Tainted canvas fallback logic
                imageSource = originalImg.src; 
            }

            // Output the extracted context representation
            const output = await captioner(imageSource);
            const descriptionString = output[0]?.generated_text;

            if (descriptionString) {
                const finalSentence = descriptionString.charAt(0).toUpperCase() + descriptionString.slice(1);
                drawState("Описание / Result: " + finalSentence, false, false);
            } else {
                throw new Error("Could not construct a description based on the image contents.");
            }
        } catch (err) {
            console.error("AI Transformer Pipeline exception:", err);
            drawState("❌ Error: " + err.message, true, false);
        }
    })();
    
    return canvas;
}