app.js

// AI Dashboard Application
class AIDashboard {
    constructor() {
        this.data = {
            "approaches": [
                {
                    "name": "LLM Workflow",
                    "functionality": "Прогнозування наступного токена",
                    "bestCase": "Генерація тексту, саммаризація",
                    "strengths": "Швидкість, простота, легкість впровадження",
                    "weaknesses": "Обмежений контекст, відсутність зовнішніх знань",
                    "examples": "Чат-боти, email-генерація",
                    "workflow": "Користувач → Тригер на основі правил → LLM → Вихід",
                    "description": "Найпростіший підхід, що використовує LLM для генерації тексту на основі промпту користувача",
                    "complexity": "Низька",
                    "icon": "🔗"
                },
                {
                    "name": "RAG",
                    "functionality": "Розумний пошук знань",
                    "bestCase": "Точні Q&A з різних джерел",
                    "strengths": "Точність завдяки зовнішнім даним",
                    "weaknesses": "Чутливість до якості даних",
                    "examples": "Graph RAG, Advanced RAG, Modular RAG",
                    "workflow": "Користувач → Векторизація → Пошук у базі → LLM (збагачений даними) → Вихід",
                    "description": "Покращений підхід, що додає зовнішні знання до процесу генерації відповідей",
                    "complexity": "Середня",
                    "icon": "🔍"
                },
                {
                    "name": "AI Agent",
                    "functionality": "Автономні дії з використанням компонентів",
                    "bestCase": "Воркфлоу з інструментами та міркуванням",
                    "strengths": "Планування + міркування, виконання складних задач",
                    "weaknesses": "Потребує чітких цілей та доступу до інструментів",
                    "examples": "ReACT Agent, Rewoo Agent",
                    "workflow": "Користувач → Системний промпт → Планування → База даних/Пам'ять/Інструменти → Вихід",
                    "description": "Автономний агент, здатний планувати та виконувати складні задачі з використанням інструментів",
                    "complexity": "Висока",
                    "icon": "🤖"
                },
                {
                    "name": "Agentic AI",
                    "functionality": "Мультиагентна автономна система",
                    "bestCase": "Масштабні задачі, що потребують розподілу ролей",
                    "strengths": "Гнучкість, розподіл задач між агентами",
                    "weaknesses": "Складність розробки та контролю",
                    "examples": "CUA, Embodied Agents",
                    "workflow": "Користувач → Пам'ять/Міркування/Зворотний зв'язок → Кілька агентів → Інструменти/Дані → Вихід",
                    "description": "Найскладніша система з кількома агентами, що працюють разом для вирішення масштабних задач",
                    "complexity": "Дуже висока",
                    "icon": "🌐"
                }
            ],
            "criteria": [
                "Функціональність",
                "Найкращий кейс",
                "Сильні сторони",
                "Слабкі сторони",
                "Приклади"
            ],
            "complexityLevels": ["Низька", "Середня", "Висока", "Дуже висока"],
            "recommendations": [
                {
                    "scenario": "Прості задачі генерації тексту",
                    "recommendation": "LLM Workflow",
                    "reason": "Найпростіший у впровадженні та налаштуванні"
                },
                {
                    "scenario": "Потреба в точних відповідях з великої бази знань",
                    "recommendation": "RAG",
                    "reason": "Забезпечує високу точність завдяки зовнішнім даним"
                },
                {
                    "scenario": "Складні задачі з використанням інструментів",
                    "recommendation": "AI Agent",
                    "reason": "Може планувати та виконувати багатоетапні процеси"
                },
                {
                    "scenario": "Масштабні проекти з розподіленими ролями",
                    "recommendation": "Agentic AI",
                    "reason": "Найгнучкіший для складних багатоагентних систем"
                }
            ]
        };
        
        this.currentFilters = {
            approach: '',
            complexity: '',
            criteria: ''
        };
        
        this.init();
    }
    
    init() {
        this.setupEventListeners();
        this.renderComparisonTable();
        this.renderWorkflows();
        this.renderDetails();
        this.renderRecommendations();
    }
    
    setupEventListeners() {
        // Filter event listeners
        document.getElementById('approach-filter').addEventListener('change', (e) => {
            this.currentFilters.approach = e.target.value;
            this.applyFilters();
        });
        
        document.getElementById('complexity-filter').addEventListener('change', (e) => {
            this.currentFilters.complexity = e.target.value;
            this.applyFilters();
        });
        
        document.getElementById('criteria-filter').addEventListener('change', (e) => {
            this.currentFilters.criteria = e.target.value;
            this.applyFilters();
        });
        
        // Reset filters button
        document.getElementById('reset-filters').addEventListener('click', () => {
            this.resetFilters();
        });
    }
    
    applyFilters() {
        this.renderComparisonTable();
        this.renderWorkflows();
        this.renderDetails();
    }
    
    resetFilters() {
        this.currentFilters = {
            approach: '',
            complexity: '',
            criteria: ''
        };
        
        // Reset select elements
        document.getElementById('approach-filter').value = '';
        document.getElementById('complexity-filter').value = '';
        document.getElementById('criteria-filter').value = '';
        
        this.applyFilters();
    }
    
    getFilteredApproaches() {
        return this.data.approaches.filter(approach => {
            const matchesApproach = !this.currentFilters.approach || 
                                  approach.name === this.currentFilters.approach;
            const matchesComplexity = !this.currentFilters.complexity || 
                                     approach.complexity === this.currentFilters.complexity;
            
            return matchesApproach && matchesComplexity;
        });
    }
    
    renderComparisonTable() {
        const tableBody = document.getElementById('comparison-table-body');
        const filteredApproaches = this.getFilteredApproaches();
        
        tableBody.innerHTML = filteredApproaches.map(approach => `
            <tr class="fade-in">
                <td>
                    <div class="approach-name">
                        <span class="approach-icon">${approach.icon}</span>
                        <strong>${approach.name}</strong>
                    </div>
                </td>
                <td>${approach.functionality}</td>
                <td>${approach.bestCase}</td>
                <td>${approach.strengths}</td>
                <td>${approach.weaknesses}</td>
                <td>
                    <span class="complexity-badge ${this.getComplexityClass(approach.complexity)}">
                        ${approach.complexity}
                    </span>
                </td>
            </tr>
        `).join('');
    }
    
    getComplexityClass(complexity) {
        const classMap = {
            'Низька': 'complexity-low',
            'Середня': 'complexity-medium',
            'Висока': 'complexity-high',
            'Дуже висока': 'complexity-very-high'
        };
        return classMap[complexity] || 'complexity-low';
    }
    
    getApproachClass(name) {
        const classMap = {
            'LLM Workflow': 'llm-workflow',
            'RAG': 'rag',
            'AI Agent': 'ai-agent',
            'Agentic AI': 'agentic-ai'
        };
        return classMap[name] || 'llm-workflow';
    }
    
    renderWorkflows() {
        const workflowsGrid = document.getElementById('workflows-grid');
        const filteredApproaches = this.getFilteredApproaches();
        
        workflowsGrid.innerHTML = filteredApproaches.map(approach => {
            const steps = approach.workflow.split(' → ');
            const stepsHtml = steps.map((step, index) => {
                const isLast = index === steps.length - 1;
                return `
                    <div class="workflow-step">${step}</div>
                    ${!isLast ? '<div class="workflow-arrow">→</div>' : ''}
                `;
            }).join('');
            
            return `
                <div class="workflow-card fade-in">
                    <div class="workflow-header ${this.getApproachClass(approach.name)}">
                        <span class="approach-icon">${approach.icon}</span>
                        <h4>${approach.name}</h4>
                    </div>
                    <div class="workflow-body">
                        <div class="workflow-steps">
                            ${stepsHtml}
                        </div>
                    </div>
                </div>
            `;
        }).join('');
    }
    
    renderDetails() {
        const detailsGrid = document.getElementById('details-grid');
        const filteredApproaches = this.getFilteredApproaches();
        
        detailsGrid.innerHTML = filteredApproaches.map(approach => `
            <div class="detail-card fade-in">
                <div class="detail-header ${this.getApproachClass(approach.name)}">
                    <span class="approach-icon">${approach.icon}</span>
                    <h4>${approach.name}</h4>
                </div>
                <div class="detail-body">
                    <div class="detail-section">
                        <h5>Опис</h5>
                        <p>${approach.description}</p>
                    </div>
                    
                    <div class="detail-section">
                        <h5>Функціональність</h5>
                        <p>${approach.functionality}</p>
                    </div>
                    
                    <div class="detail-section">
                        <h5>Найкращий кейс</h5>
                        <p>${approach.bestCase}</p>
                    </div>
                    
                    <div class="detail-section">
                        <h5>Сильні сторони</h5>
                        <p>${approach.strengths}</p>
                    </div>
                    
                    <div class="detail-section">
                        <h5>Слабкі сторони</h5>
                        <p>${approach.weaknesses}</p>
                    </div>
                    
                    <div class="detail-section">
                        <h5>Приклади</h5>
                        <p>${approach.examples}</p>
                    </div>
                    
                    <div class="detail-section">
                        <h5>Складність</h5>
                        <span class="complexity-badge ${this.getComplexityClass(approach.complexity)}">
                            ${approach.complexity}
                        </span>
                    </div>
                </div>
            </div>
        `).join('');
    }
    
    renderRecommendations() {
        const recommendationsGrid = document.getElementById('recommendations-grid');
        
        recommendationsGrid.innerHTML = this.data.recommendations.map(rec => {
            const approach = this.data.approaches.find(a => a.name === rec.recommendation);
            const approachIcon = approach ? approach.icon : '💡';
            
            return `
                <div class="recommendation-card fade-in">
                    <div class="recommendation-scenario">
                        <strong>Сценарій:</strong> ${rec.scenario}
                    </div>
                    <div class="recommendation-approach">
                        ${approachIcon} ${rec.recommendation}
                    </div>
                    <div class="recommendation-reason">
                        <strong>Причина:</strong> ${rec.reason}
                    </div>
                </div>
            `;
        }).join('');
    }
}

// Initialize the dashboard when the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new AIDashboard();
    
    // Add smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Add intersection observer for fade-in animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    // Observe all cards for animation
    const observeCards = () => {
        document.querySelectorAll('.card, .workflow-card, .detail-card, .recommendation-card').forEach(card => {
            observer.observe(card);
        });
    };
    
    // Initial observation
    setTimeout(observeCards, 100);
    
    // Re-observe after filter changes
    const originalApplyFilters = AIDashboard.prototype.applyFilters;
    AIDashboard.prototype.applyFilters = function() {
        originalApplyFilters.call(this);
        setTimeout(observeCards, 100);
    };
});