Image To Detailed Audio Description Generator

function processImage(originalImg, modelName = 'Xenova/vit-gpt2-image-captioning', speechRate = 0.9) {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.textAlign = 'center';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    // Title
    const title = document.createElement('h2');
    title.textContent = 'Audio Description Generator';
    title.style.marginTop = '0';
    title.style.color = '#333';
    container.appendChild(title);

    // Status Text
    const statusText = document.createElement('p');
    statusText.textContent = 'Loading AI vision model... (Downloads approx ~200MB on first run)';
    statusText.style.fontSize = '15px';
    statusText.style.color = '#666';
    statusText.style.lineHeight = '1.4';
    container.appendChild(statusText);

    // Spinner
    const spinner = document.createElement('div');
    spinner.style.border = '4px solid #f3f3f3';
    spinner.style.borderTop = '4px solid #3b82f6';
    spinner.style.borderRadius = '50%';
    spinner.style.width = '35px';
    spinner.style.height = '35px';
    spinner.style.margin = '15px auto';
    
    // Inject keyframes to the document to allow the spinner to animate
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spinner-audio-description {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    container.appendChild(style);
    spinner.style.animation = 'spinner-audio-description 1.5s linear infinite';
    container.appendChild(spinner);

    // Asynchronous processing function
    (async () => {
        try {
            // Load Xenova Transformers.js library
            const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/transformers.min.js');
            env.allowLocalModels = false;
            env.useBrowserCache = true;

            // Load the image-to-text pipeline
            const captioner = await pipeline('image-to-text', modelName);
            statusText.textContent = 'Model loaded. Analyzing your image to generate detailed description...';

            let inputImg;
            try {
                // Attempt to retrieve image data through an offscreen canvas
                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);
                inputImg = canvas.toDataURL('image/jpeg');
            } catch (e) {
                // If context is tainted by CORS, fallback to utilizing the source URL directly
                inputImg = originalImg.src;
            }

            // Generate caption with transformer options to get better details
            const output = await captioner(inputImg, {
                max_new_tokens: 60,
                num_beams: 3,
                no_repeat_ngram_size: 2
            });
            
            let caption = '';
            if (output && output.length > 0) {
                caption = output[0].generated_text;
            } else {
                throw new Error("The AI model was unable to generate a description.");
            }
            
            // Format the text properly
            caption = caption.charAt(0).toUpperCase() + caption.slice(1).trim();
            if (!caption.endsWith('.')) {
                caption += '.';
            }

            // Clean up loader UI
            statusText.style.display = 'none';
            spinner.style.display = 'none';

            // Show Result text
            const resultBox = document.createElement('div');
            resultBox.style.backgroundColor = '#f8fafc';
            resultBox.style.padding = '15px';
            resultBox.style.borderRadius = '8px';
            resultBox.style.border = '1px solid #e2e8f0';
            resultBox.style.marginBottom = '20px';

            const resultText = document.createElement('p');
            resultText.textContent = `"${caption}"`;
            resultText.style.fontSize = '18px';
            resultText.style.fontStyle = 'italic';
            resultText.style.color = '#0f172a';
            resultText.style.lineHeight = '1.6';
            resultText.style.margin = '0';
            resultBox.appendChild(resultText);
            
            container.appendChild(resultBox);

            // Container for audio buttons
            const buttonsContainer = document.createElement('div');
            buttonsContainer.style.display = 'flex';
            buttonsContainer.style.justifyContent = 'center';
            buttonsContainer.style.gap = '15px';

            // Play Button
            const playBtn = document.createElement('button');
            playBtn.textContent = '🔊 Play Audio';
            playBtn.style.padding = '12px 24px';
            playBtn.style.fontSize = '16px';
            playBtn.style.fontWeight = 'bold';
            playBtn.style.cursor = 'pointer';
            playBtn.style.border = 'none';
            playBtn.style.borderRadius = '6px';
            playBtn.style.backgroundColor = '#10b981';
            playBtn.style.color = 'white';
            playBtn.style.boxShadow = '0 2px 4px rgba(16,185,129,0.3)';
            playBtn.style.transition = 'all 0.2s';
            
            playBtn.onmouseover = () => { playBtn.style.backgroundColor = '#059669'; };
            playBtn.onmouseout = () => { playBtn.style.backgroundColor = '#10b981'; };

            // Stop Button
            const stopBtn = document.createElement('button');
            stopBtn.textContent = '⏹ Stop';
            stopBtn.style.padding = '12px 24px';
            stopBtn.style.fontSize = '16px';
            stopBtn.style.fontWeight = 'bold';
            stopBtn.style.cursor = 'pointer';
            stopBtn.style.border = 'none';
            stopBtn.style.borderRadius = '6px';
            stopBtn.style.backgroundColor = '#ef4444';
            stopBtn.style.color = 'white';
            stopBtn.style.boxShadow = '0 2px 4px rgba(239,68,68,0.3)';
            stopBtn.style.transition = 'all 0.2s';
            
            stopBtn.onmouseover = () => { stopBtn.style.backgroundColor = '#dc2626'; };
            stopBtn.onmouseout = () => { stopBtn.style.backgroundColor = '#ef4444'; };

            // Interaction logic for TTS Web Audio API built into browsers
            playBtn.onclick = () => {
                if ('speechSynthesis' in window) {
                    window.speechSynthesis.cancel(); // Stop previously playing audio
                    const utterance = new SpeechSynthesisUtterance(caption);
                    utterance.rate = parseFloat(speechRate) || 0.9;
                    utterance.pitch = 1.0;
                    window.speechSynthesis.speak(utterance);
                } else {
                    alert('Sorry, the Web Speech Synthesis API is not supported by your current browser.');
                }
            };

            stopBtn.onclick = () => {
                if ('speechSynthesis' in window) {
                    window.speechSynthesis.cancel();
                }
            };

            buttonsContainer.appendChild(playBtn);
            buttonsContainer.appendChild(stopBtn);
            container.appendChild(buttonsContainer);

        } catch (err) {
            spinner.style.display = 'none';
            statusText.textContent = `Error generating description: ${err.message}`;
            statusText.style.color = '#ef4444';
            console.error('[Audio Description Tool Error]', err);
        }
    })();

    return container;
}