AI Photo Media Idea And Review Generator

async function processImage(originalImg, language = "English", platform = "Instagram") {
    // Create the main container for the AI Review UI
    const container = document.createElement('div');
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
    container.style.padding = '24px';
    container.style.backgroundColor = '#ffffff';
    container.style.border = '1px solid #e1e4e8';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
    container.style.maxWidth = '700px';
    container.style.color = '#333';
    container.style.boxSizing = 'border-box';
    
    // Initial loading state
    container.innerHTML = `
        <div style="text-align:center; padding: 40px 0;">
            <div style="display:inline-block; width:50px; height:50px; border:4px solid #f3f3f3; border-top:4px solid #3498db; border-radius:50%; animation:spin 1s linear infinite;"></div>
            <p style="margin-top: 20px; font-size: 16px; color: #555;">AI is analyzing your image and generating media ideas...</p>
            <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
        </div>
    `;

    // Helper to dynamically load external scripts safely
    const loadScript = (url, globalVar) => {
        return new Promise((resolve, reject) => {
            if (window[globalVar]) {
                resolve(window[globalVar]);
                return;
            }
            const script = document.createElement('script');
            script.src = url;
            script.crossOrigin = "anonymous";
            script.onload = () => resolve(window[globalVar]);
            script.onerror = () => reject(new Error(`Failed to load ${url}`));
            document.head.appendChild(script);
        });
    };

    try {
        // Dynamically load TensorFlow.js and MobileNet for client-side AI image recognition
        await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js', 'tf');
        const mobilenet = await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');

        // Draw original image to a canvas for TF.js analysis and heuristic checks
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d', { willReadFrequently: true });
        canvas.width = originalImg.width;
        canvas.height = originalImg.height;
        ctx.drawImage(originalImg, 0, 0);

        // Analyze Brightness and Average Color using a 1x1 down-scaled canvas trick
        const thumbCanvas = document.createElement('canvas');
        thumbCanvas.width = 1;
        thumbCanvas.height = 1;
        const thumbCtx = thumbCanvas.getContext('2d');
        thumbCtx.drawImage(originalImg, 0, 0, 1, 1);
        const [r, g, b] = thumbCtx.getImageData(0, 0, 1, 1).data;
        const brightness = (r + g + b) / 3;
        const isDark = brightness < 100;
        const lightingStr = isDark ? 'moody and low-key' : 'bright and vibrant';
        const domColor = `rgb(${r},${g},${b})`;

        // Determine Dimension Proportions
        const isLandscape = canvas.width > canvas.height;
        let ratioStr = 'Portrait';
        if (isLandscape) ratioStr = 'Landscape';
        else if (canvas.width === canvas.height) ratioStr = 'Square';

        // Load the AI model and classify the image content
        const model = await mobilenet.load({ version: 2, alpha: 1.0 });
        const predictions = await model.classify(canvas);
        
        // Extract classification details
        const primarySubject = predictions[0] ? predictions[0].className.split(',')[0] : 'abstract layout';
        const secondarySubject = predictions[1] && predictions[1].probability > 0.1 ? predictions[1].className.split(',')[0] : '';
        const confidence = predictions[0] ? Math.round(predictions[0].probability * 100) : 0;

        // Generate the final HTML content based on selected language
        let content = '';
        
        if (language.toLowerCase().startsWith('ru')) {
            content = `
                <div style="border-bottom: 2px solid #f1f2f6; padding-bottom: 12px; margin-bottom: 20px;">
                    <h2 style="margin:0; color: #2c3e50; font-size: 24px;">🤖 AI Обзор Изображения & Идеи</h2>
                    <p style="margin: 4px 0 0 0; color: #7f8c8d; font-size: 14px;">Генератор контента для медиа</p>
                </div>
                <div style="display:flex; flex-wrap:wrap; gap: 24px; text-align: left;">
                    <div style="flex: 1; min-width: 250px; background: #f8f9fa; padding: 16px; border-radius: 8px;">
                        <h3 style="color:#2980b9; margin-top: 0; display:flex; align-items:center; gap:8px;">📊 Анализ AI</h3>
                        <p style="margin:10px 0;"><strong>Главный объект:</strong> <span style="text-transform:capitalize;">${primarySubject}</span> <em>(${confidence}% уверенности)</em></p>
                        ${secondarySubject ? `<p style="margin:10px 0;"><strong>Дополнительно:</strong> <span style="text-transform:capitalize;">${secondarySubject}</span></p>` : ''}
                        <p style="margin:10px 0;"><strong>Освещение:</strong> ${isDark ? 'Темное, атмосферное' : 'Светлое, яркое'}</p>
                        <p style="margin:10px 0;"><strong>Формат:</strong> ${ratioStr === 'Landscape' ? 'Горизонтальный' : ratioStr === 'Portrait' ? 'Вертикальный' : 'Квадрат'}</p>
                        <p style="margin:10px 0;"><strong>Доминирующий цвет:</strong> 
                            <span style="display:inline-block; vertical-align:middle; width:16px; height:16px; background:${domColor}; border:1px solid #bdc3c7; border-radius:3px; margin-left:4px;"></span>
                        </p>
                    </div>
                    <div style="flex: 1; min-width: 250px;">
                        <h3 style="color:#27ae60; margin-top: 0;">💡 Идеи для медиа (${platform})</h3>
                        <div style="margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #2ecc71;">
                            <strong>Вовлечение:</strong> "Что вам первое приходит на ум, когда вы видите ${primarySubject}? Поделитесь в комментариях!"
                        </div>
                        <div style="margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #f1c40f;">
                            <strong>Обучение:</strong> Создайте карусель с интересными фактами про ${primarySubject}, используя это фото как обложку.
                        </div>
                        <div style="margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #e74c3c;">
                            <strong>За кадром:</strong> Короткое атмосферное видео (Reel/Story) под трендовую музыку о процессе съемки (${primarySubject}).
                        </div>
                    </div>
                </div>
                <div style="margin-top: 24px; padding-top: 16px; border-top: 1px dotted #ccc;">
                    <h3 style="color:#8e44ad; margin-top: 0;">📝 Редакционный обзор</h3>
                    <p style="line-height:1.5;">Данная фотография имеет очень ${isDark ? 'выразительное и глубокое' : 'светлое и чистое'} освещение. Фокус на (${primarySubject}) выглядит отлично. При публикации в ${platform} рекомендуется немного повысить контрастность, чтобы объект лучше выделялся на экранах мобильных устройств. Общее настроение кадра отлично подходит для публикации!</p>
                </div>
            `;
        } else {
            content = `
                <div style="border-bottom: 2px solid #f1f2f6; padding-bottom: 12px; margin-bottom: 20px;">
                    <h2 style="margin:0; color: #2c3e50; font-size: 24px;">🤖 AI Photo Media Review & Ideas</h2>
                    <p style="margin: 4px 0 0 0; color: #7f8c8d; font-size: 14px;">Identify creative directions based on AI image extraction</p>
                </div>
                <div style="display:flex; flex-wrap:wrap; gap: 24px; text-align: left;">
                    <div style="flex: 1; min-width: 250px; background: #f8f9fa; padding: 16px; border-radius: 8px;">
                        <h3 style="color:#2980b9; margin-top: 0;">📊 Vision Board Analysis</h3>
                        <p style="margin:10px 0;"><strong>Main Subject:</strong> <span style="text-transform:capitalize;">${primarySubject}</span> <em>(${confidence}% confidence)</em></p>
                        ${secondarySubject ? `<p style="margin:10px 0;"><strong>Secondary Elements:</strong> <span style="text-transform:capitalize;">${secondarySubject}</span></p>` : ''}
                        <p style="margin:10px 0;"><strong>Lighting Ambience:</strong> ${lightingStr.charAt(0).toUpperCase() + lightingStr.slice(1)}</p>
                        <p style="margin:10px 0;"><strong>Aspect Ratio:</strong> ${ratioStr}</p>
                        <p style="margin:10px 0;"><strong>Dominant Tone:</strong> 
                            <span style="display:inline-block; vertical-align:middle; width:16px; height:16px; background:${domColor}; border:1px solid #bdc3c7; border-radius:3px; margin-left:4px;"></span>
                        </p>
                    </div>
                    <div style="flex: 1; min-width: 250px;">
                        <h3 style="color:#27ae60; margin-top: 0;">💡 Content Themes for ${platform}</h3>
                        <div style="margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #2ecc71;">
                            <strong>Engagement:</strong> "What is the first thing that comes to your mind when you spot a ${primarySubject}?" Ask your audience to share their thoughts!
                        </div>
                        <div style="margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #f1c40f;">
                            <strong>Educational:</strong> Create a multi-slide carousel explaining the secrets behind capturing the perfect ${primarySubject} shot.
                        </div>
                        <div style="margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #e74c3c;">
                            <strong>Behind-the-Scenes:</strong> Share a quick Story / Reel of the equipment setup for this ${isDark ? 'moody' : 'lively'} photo, paired with trending Lo-Fi audio.
                        </div>
                    </div>
                </div>
                <div style="margin-top: 24px; padding-top: 16px; border-top: 1px dotted #ccc;">
                    <h3 style="color:#8e44ad; margin-top: 0;">📝 Editorial Review</h3>
                    <p style="line-height:1.5;">This ${ratioStr.toLowerCase()} photograph presents a very ${lightingStr} composition. The focus on the ${primarySubject} is well-captured by the lens. For publishing on ${platform}, consider bumping up the vibrance slightly to make the subject pop even more on small mobile screens. The overall mood is visually balanced and ready for impact!</p>
                </div>
            `;
        }

        container.innerHTML = content;

    } catch (error) {
        container.innerHTML = `
            <div style="color: #c0392b; text-align: center; padding: 20px;">
                <h3 style="margin-top: 0;">⚠️ AI Analysis Interrupted</h3>
                <p>Failed to load the neural network or process the image.</p>
                <p style="font-size: 13px; font-family: monospace; background: #fdf5f5; padding: 10px; border-radius: 5px;">${error.message}</p>
            </div>
        `;
    }

    return container;
}