Spaces:

alexdatamed
/

Lecture5_LLM_RAG_Agent

Running

Upload 4 files

c452959 verified over 1 year ago

15.9 kB

// 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);
    };
});

	// 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);
	};
	});