Upload app.js

app.js

@@ -1,513 +1,471 @@
-// Дані про робочий процес науки про дані
-const workflowData = {
-  "title": "Робочий процес науки про дані",
-  "introduction": "Кожен проект з науки про дані включає кілька важливих етапів. Ця інтерактивна панель допоможе вам зрозуміти кожен етап робочого процесу та його важливість.",
-  "steps": [
+// Application data
+const appData = {
+  "lifecycleStages": [
     {
       "id": 1,
-      "title": "Формулювання проблеми",
-      "shortTitle": "Проблема",
-      "description": "Кожен проект з науки про дані починається з визначення проблеми. Незалежно від того, чи це прогнозування результатів пацієнтів або оптимізація бізнес-операцій, переклад реальної проблеми у питання, що базується на даних, є вирішальним.",
-      "keyPoints": [
-        "Визначення конкретної проблеми, яку потрібно вирішити",
-        "Формулювання питань, на які потрібно відповісти за допомогою даних",
-        "Вибір підходу до вирішення (машинне навчання, статистичний аналіз тощо)"
-      ],
-      "example": "У галузі охорони здоров'я, прогнозування часу відновлення пацієнта на основі медичної історії. Формулювання проблеми: лікарям потрібен інструмент для прогнозування тривалості відновлення пацієнта після лікування.",
-      "tips": [
-        "Завжди консультуйтеся з експертами в предметній області",
-        "Переконайтеся, що проблема може бути вирішена за допомогою даних",
-        "Визначте чіткі критерії успіху"
-      ],
-      "quiz": [
-        {
-          "question": "Що є першим кроком у проекті науки про дані?",
-          "options": [
-            "Збір даних",
-            "Визначення проблеми",
-            "Побудова моделі",
-            "Оцінка результатів"
-          ],
-          "answer": 1
-        }
-      ]
+      "name": "Problem Formulation",
+      "icon": "💡",
+      "description": "Transform real-world problems into data-driven questions",
+      "example": "Healthcare: Predicting patient recovery time based on medical history",
+      "keyPoints": ["Define business objectives", "Identify success metrics", "Translate to ML problem", "Set constraints and requirements"],
+      "status": "completed"
     },
     {
-      "id": 2,
-      "title": "Збір даних",
-      "shortTitle": "Дані",
-      "description": "Наступним кроком є збір відповідних даних з надійних джерел. Це може включати бази даних, публічні набори даних або дані, зібрані через сенсори та додатки.",
-      "keyPoints": [
-        "Визначення потрібних даних для вирішення проблеми",
-        "Ідентифікація джерел даних",
-        "Розуміння регуляторних вимог та етичних міркувань"
-      ],
-      "example": "Збір клінічних записів з баз даних охорони здоров'я для аналізу часу відновлення пацієнтів.",
-      "tips": [
-        "Переконайтеся, що ви маєте дозвіл на використання даних",
-        "Перевірте якість та надійність джерел даних",
-        "Зберігайте дані безпечно та відповідно до норм"
-      ],
-      "quiz": [
-        {
-          "question": "Що Ендрю Нг назвав 'їжею для ШІ'?",
-          "options": [
-            "Алгоритми",
-            "Дані",
-            "Обчислювальні потужності",
-            "Програмний код"
-          ],
-          "answer": 1
-        }
-      ]
+      "id": 2, 
+      "name": "Data Collection",
+      "icon": "📊",
+      "description": "Gather relevant data from reliable sources",
+      "sources": ["Clinical databases", "IoT sensors", "Public datasets", "APIs"],
+      "compliance": {"HIPAA": true, "GDPR": true, "SOX": false},
+      "status": "completed"
     },
     {
       "id": 3,
-      "title": "Підготовка даних",
-      "shortTitle": "Підготовка",
-      "description": "Сирі дані часто містять невідповідності, відсутні значення або викиди. Підготовка даних забезпечує, що дані чисті та стандартизовані.",
-      "keyPoints": [
-        "Очищення даних від невідповідностей",
-        "Обробка відсутніх значень",
-        "Нормалізація та стандартизація даних"
-      ],
-      "example": "Очищення клінічних даних для забезпечення послідовності в аналізі.",
-      "tips": [
-        "Документуйте всі зміни, внесені до вихідних даних",
-        "Використовуйте автоматизовані інструменти для очищення великих наборів даних",
-        "Перевірте дані після очищення, щоб переконатися, що вони все ще відображають реальність"
-      ],
-      "quiz": [
-        {
-          "question": "Які проблеми вирішує етап підготовки даних?",
-          "options": [
-            "Невідповідності, відсутні значення, викиди",
-            "Формулювання проблеми та вибір алгоритму",
-            "Вибір метрик оцінки",
-            "Розгортання моделі в виробництво"
-          ],
-          "answer": 0
-        }
-      ]
+      "name": "Data Preprocessing", 
+      "icon": "🔧",
+      "description": "Clean and standardize data for analysis",
+      "metrics": {"missingValues": 12, "normalization": "StandardScaler", "categoricalEncoding": "OneHot", "outliers": 8},
+      "status": "in-progress"
     },
     {
       "id": 4,
-      "title": "Моделювання",
-      "shortTitle": "Модель",
-      "description": "Вибір правильного алгоритму є критичним. В залежності від проблеми, ми можемо використовувати регресію, класифікацію або кластеризацію, тощо.",
-      "keyPoints": [
-        "Вибір алгоритму на основі типу проблеми",
-        "Оцінка доступних даних (кількість та якість)",
-        "Врахування обчислювальних ресурсів та часу навчання"
-      ],
-      "example": "Вибір алгоритму машинного навчання для прогнозування часу відновлення пацієнта на основі історичних даних.",
-      "tips": [
-        "Почніть з простих моделей перед переходом до складніших",
-        "Розділіть дані на тренувальні та тестові набори",
-        "Експериментуйте з різними алгоритмами для порівняння результатів"
-      ],
-      "quiz": [
-        {
-          "question": "Які фактори слід враховувати при виборі алгоритму?",
-          "options": [
-            "Тільки тип проблеми",
-            "Тільки обчислювальні ресурси",
-            "Тип проблеми, доступні дані та обчислювальні ресурси",
-            "Тільки розмір набору даних"
-          ],
-          "answer": 2
-        }
-      ]
+      "name": "Modeling",
+      "icon": "🤖", 
+      "description": "Select and apply appropriate algorithms",
+      "modelTypes": ["Classification", "Regression", "Clustering"],
+      "algorithms": ["Random Forest", "Logistic Regression", "SVM", "Neural Networks"],
+      "status": "pending"
     },
     {
       "id": 5,
-      "title": "Оцінювання",
-      "shortTitle": "Оцінка",
-      "description": "Після навчання, оцінка моделі є важливою для забезпечення точності та надійності.",
-      "keyPoints": [
-        "Вибір відповідних метрик для оцінки моделі",
-        "Порівняння результатів з бізнес-цілями",
-        "Виявлення областей для покращення"
-      ],
-      "example": "Оцінка моделі для виявлення ранніх симптомів захворювання за допомогою метрик точності, чутливості та специфічності.",
-      "tips": [
-        "Використовуйте метрики, що відповідають бізнес-цілям",
-        "Проведіть крос-валідацію для надійності оцінки",
-        "Порівняйте результати з базовими моделями"
-      ],
-      "quiz": [
-        {
-          "question": "Які метрики можуть використовуватися для оцінки моделі?",
-          "options": [
-            "Тільки точність (accuracy)",
-            "Точність, повнота, F1-оцінка та інші",
-            "Тільки час навчання",
-            "Тільки розмір моделі"
-          ],
-          "answer": 1
-        }
-      ]
+      "name": "Evaluation",
+      "icon": "📈",
+      "description": "Assess model performance and reliability", 
+      "metrics": {"accuracy": 0.94, "precision": 0.91, "recall": 0.89, "f1Score": 0.90},
+      "status": "pending"
     },
     {
       "id": 6,
-      "title": "Розгортання",
-      "shortTitle": "Розгортання",
-      "description": "Розгортання — це процес інтеграції навченої моделі в виробниче середовище, роблячи її доступною для реального використання. Цей крок є вирішальним для забезпечення того, щоб прогнози моделі були постійно доступні та надійні для кінцевих користувачів або автоматизованих систем.",
-      "keyPoints": [
-        "Контейнеризація моделі для портативності",
-        "Створення API для доступу до моделі",
-        "Налаштування безперервної інтеграції та доставки (CI/CD)",
-        "Забезпечення масштабованості та доступності"
-      ],
-      "example": "Розгортання моделі прогнозування часу відновлення пацієнта в хмарній платформі (AWS, Azure) та інтеграція з системою електронних медичних карт через API.",
-      "tips": [
-        "Тестуйте модель в середовищі, подібному до виробничого",
-        "Впровадіть моніторинг для відстеження продуктивності",
-        "Плануйте для масштабування від початку"
-      ],
-      "quiz": [
-        {
-          "question": "Що таке контейнеризація в контексті розгортання моделі?",
-          "options": [
-            "Упаковка моделі в фізичний контейнер для транспортування",
-            "Упаковка моделі, залежностей і середовища в програмний контейнер (як Docker)",
-            "Обмеження доступу до моделі",
-            "Зменшення розміру моделі"
-          ],
-          "answer": 1
-        }
-      ]
+      "name": "Deployment",
+      "icon": "🚀",
+      "description": "Deploy model to production environment",
+      "pipeline": {"docker": true, "kubernetes": true, "cicd": "Jenkins", "api": "REST"},
+      "status": "pending"
     },
     {
       "id": 7,
-      "title": "Моніторинг та підтримка",
-      "shortTitle": "Моніторинг",
-      "description": "Моделі потребують постійного моніторингу, щоб залишатися точними та ефективними. Зміни в розподілі даних можуть погіршити продуктивність з часом.",
-      "keyPoints": [
-        "Відстеження продуктивності моделі в реальному часі",
-        "Виявлення зміщення даних (data drift)",
-        "Регулярне перенавчання моделі з новими даними",
-        "Автоматизація розгортання оновлених моделей"
-      ],
-      "example": "Використання інструментів моніторингу, таких як Prometheus і Grafana, для відстеження точності моделі прогнозування часу відновлення пацієнта та виявлення будь-яких змін у розподілі даних.",
-      "tips": [
-        "Встановіть сповіщення для виявлення зниження продуктивності",
-        "Плануйте регулярні огляди моделі",
-        "Документуйте всі зміни та оновлення"
-      ],
-      "quiz": [
-        {
-          "question": "Чому важливий моніторинг моделі після р��згортання?",
-          "options": [
-            "Він не важливий, якщо модель добре навчена",
-            "Тільки для задоволення регуляторних вимог",
-            "Для виявлення зміщення даних та підтримки продуктивності моделі",
-            "Тільки для економії обчислювальних ресурсів"
-          ],
-          "answer": 2
-        }
-      ]
+      "name": "Monitoring & Maintenance", 
+      "icon": "🔍",
+      "description": "Monitor performance and maintain model accuracy",
+      "alerts": {"dataDrift": false, "accuracyDecay": 2.1, "retrainingDue": "2025-07-15"},
+      "status": "pending"
     }
-  ]
+  ],
+  "industries": [
+    {"name": "Healthcare", "examples": ["Patient recovery prediction", "Disease diagnosis", "Drug discovery"]},
+    {"name": "Retail", "examples": ["Customer segmentation", "Demand forecasting", "Price optimization"]}, 
+    {"name": "Finance", "examples": ["Fraud detection", "Credit scoring", "Algorithmic trading"]},
+    {"name": "Manufacturing", "examples": ["Predictive maintenance", "Quality control", "Supply chain optimization"]},
+    {"name": "Education", "examples": ["Student performance prediction", "Personalized learning", "Dropout prevention"]}
+  ],
+  "modelTypes": [
+    {"name": "Logistic Regression", "type": "Classification", "accuracy": 0.85},
+    {"name": "Random Forest", "type": "Classification", "accuracy": 0.92}, 
+    {"name": "SVM", "type": "Classification", "accuracy": 0.88},
+    {"name": "Neural Networks", "type": "Classification", "accuracy": 0.94},
+    {"name": "Linear Regression", "type": "Regression", "rmse": 0.23},
+    {"name": "K-Means", "type": "Clustering", "silhouette": 0.67}
+  ],
+  "complianceRequirements": {
+    "Healthcare": ["HIPAA", "FDA", "HITECH"],
+    "Finance": ["SOX", "GDPR", "PCI-DSS"], 
+    "Retail": ["GDPR", "CCPA"],
+    "Manufacturing": ["ISO 27001", "GDPR"],
+    "Education": ["FERPA", "COPPA"]
+  }
 };
 
-// Глобальні змінні стану
-let currentStepId = null;
-let visitedSteps = new Set();
-let selectedQuizOption = null;
-let quizAnswered = false;
-
-// Іконки для етапів
-const stepIcons = {
-  1: '❓',
-  2: '📊',
-  3: '🔧',
-  4: '🤖',
-  5: '📈',
-  6: '🚀',
-  7: '👁️'
+// Global state
+let currentStage = null;
+let currentFilters = {
+  industry: '',
+  model: '',
+  version: ''
 };
+let evaluationChart = null;
 
-// Ініціалізація додатка
+// Initialize the application
 document.addEventListener('DOMContentLoaded', function() {
-  initializeApp();
-  setupEventListeners();
+  initializeTimeline();
+  initializeFilters();
+  updateProgressSummary();
 });
 
-function initializeApp() {
-  // Встановлення заголовку та вступу
-  document.getElementById('introText').textContent = workflowData.introduction;
-  
-  // Рендер бічної панелі
-  renderSidebar();
-  
-  // Рендер візуалізації робочого процесу
-  renderWorkflowDiagram();
-  
-  // Оновлення прогресу
-  updateProgress();
+// Initialize timeline with stages
+function initializeTimeline() {
+  const timelineStages = document.getElementById('timelineStages');
   
-  // Приховати деталі етапу спочатку
-  document.getElementById('stepDetailsSection').classList.remove('active');
-}
-
-function setupEventListeners() {
-  // Кнопки навігації
-  document.getElementById('nextStepBtn').addEventListener('click', () => navigateStep(1));
-  document.getElementById('prevStepBtn').addEventListener('click', () => navigateStep(-1));
-  
-  // Кнопка скидання прогресу
-  document.getElementById('resetProgressBtn').addEventListener('click', resetProgress);
-  
-  // Кнопка перевірки відповіді
-  document.getElementById('checkAnswerBtn').addEventListener('click', checkQuizAnswer);
-}
-
-function renderSidebar() {
-  const sidebarList = document.getElementById('sidebarStepsList');
-  sidebarList.innerHTML = '';
-  
-  workflowData.steps.forEach(step => {
-    const listItem = document.createElement('li');
-    
-    const link = document.createElement('a');
-    link.href = '#';
-    link.className = 'step-link';
-    link.dataset.stepId = step.id;
-    
-    const stepNumber = document.createElement('span');
-    stepNumber.className = 'step-number';
-    stepNumber.textContent = step.id;
-    
-    const stepTitle = document.createElement('span');
-    stepTitle.textContent = step.shortTitle;
-    
-    link.appendChild(stepNumber);
-    link.appendChild(stepTitle);
-    
-    link.addEventListener('click', (e) => {
-      e.preventDefault();
-      showStepDetails(step.id);
-    });
-    
-    listItem.appendChild(link);
-    sidebarList.appendChild(listItem);
+  appData.lifecycleStages.forEach((stage, index) => {
+    const stageElement = createTimelineStage(stage, index);
+    timelineStages.appendChild(stageElement);
   });
 }
 
-function renderWorkflowDiagram() {
-  const diagram = document.getElementById('workflowDiagram');
-  diagram.innerHTML = '';
-  
-  workflowData.steps.forEach(step => {
-    const stepElement = document.createElement('div');
-    stepElement.className = 'workflow-step';
-    stepElement.dataset.stepId = step.id;
-    
-    const icon = document.createElement('div');
-    icon.className = 'step-icon';
-    icon.textContent = stepIcons[step.id] || '⚡';
-    
-    const title = document.createElement('h3');
-    title.textContent = step.shortTitle;
-    
-    stepElement.appendChild(icon);
-    stepElement.appendChild(title);
-    
-    stepElement.addEventListener('click', () => {
-      showStepDetails(step.id);
-    });
-    
-    diagram.appendChild(stepElement);
-  });
+// Create timeline stage element
+function createTimelineStage(stage, index) {
+  const stageDiv = document.createElement('div');
+  stageDiv.className = `timeline-stage timeline-stage--${index % 2 === 0 ? 'left' : 'right'} timeline-stage--${stage.status}`;
+  stageDiv.setAttribute('data-stage-id', stage.id);
+  
+  stageDiv.innerHTML = `
+    <div class="timeline-stage__card">
+      <h3 class="timeline-stage__title">${stage.name}</h3>
+      <p class="timeline-stage__description">${stage.description}</p>
+      <span class="timeline-stage__status status--${stage.status}">${stage.status.replace('-', ' ')}</span>
+    </div>
+    <div class="timeline-stage__node">${stage.icon}</div>
+  `;
+  
+  stageDiv.addEventListener('click', () => selectStage(stage.id));
+  
+  return stageDiv;
 }
 
-function showStepDetails(stepId) {
-  const step = workflowData.steps.find(s => s.id === stepId);
-  if (!step) return;
-  
-  currentStepId = stepId;
-  visitedSteps.add(stepId);
-  
-  // Оновити активний стан
-  updateActiveStates();
-  
-  // Заповнити деталі етапу
-  document.getElementById('stepTitle').textContent = step.title;
-  document.getElementById('stepDescription').textContent = step.description;
-  
-  // Ключові моменти
-  const keyPointsList = document.getElementById('stepKeyPoints');
-  keyPointsList.innerHTML = '';
-  step.keyPoints.forEach(point => {
-    const li = document.createElement('li');
-    li.textContent = point;
-    keyPointsList.appendChild(li);
+// Initialize filters
+function initializeFilters() {
+  const industryFilter = document.getElementById('industryFilter');
+  const modelFilter = document.getElementById('modelFilter');
+  const versionFilter = document.getElementById('versionFilter');
+  
+  industryFilter.addEventListener('change', (e) => {
+    currentFilters.industry = e.target.value;
+    applyFilters();
   });
   
-  // Приклад
-  document.getElementById('stepExample').textContent = step.example;
-  
-  // Поради
-  const tipsList = document.getElementById('stepTips');
-  tipsList.innerHTML = '';
-  step.tips.forEach(tip => {
-    const li = document.createElement('li');
-    li.textContent = tip;
-    tipsList.appendChild(li);
+  modelFilter.addEventListener('change', (e) => {
+    currentFilters.model = e.target.value;
+    applyFilters();
   });
   
-  // Вікторина
-  setupQuiz(step.quiz[0]);
-  
-  // Показати панель деталей
-  document.getElementById('introSection').style.display = 'none';
-  document.getElementById('stepDetailsSection').classList.add('active');
-  
-  // Оновити кнопки навігації
-  updateNavigationButtons();
-  
-  // Оновити прогрес
-  updateProgress();
-  
-  // Прокрутити до верху
-  document.getElementById('stepDetailsSection').scrollIntoView({ behavior: 'smooth' });
+  versionFilter.addEventListener('change', (e) => {
+    currentFilters.version = e.target.value;
+    applyFilters();
+  });
 }
 
-function updateActiveStates() {
-  // Оновити бічну панель
-  document.querySelectorAll('.step-link').forEach(link => {
-    const stepId = parseInt(link.dataset.stepId);
-    link.classList.remove('active');
-    if (visitedSteps.has(stepId)) {
-      link.classList.add('visited');
-    }
-    if (stepId === currentStepId) {
-      link.classList.add('active');
-    }
-  });
-  
-  // Оновити діаграму
-  document.querySelectorAll('.workflow-step').forEach(step => {
-    const stepId = parseInt(step.dataset.stepId);
-    step.classList.remove('active');
-    if (visitedSteps.has(stepId)) {
-      step.classList.add('visited');
-    }
-    if (stepId === currentStepId) {
-      step.classList.add('active');
-    }
-  });
+// Apply filters (placeholder for future filtering logic)
+function applyFilters() {
+  // This could filter content based on selected industry, model, etc.
+  console.log('Filters applied:', currentFilters);
 }
 
-function setupQuiz(quiz) {
-  document.getElementById('quizQuestion').textContent = quiz.question;
-  
-  const optionsContainer = document.getElementById('quizOptions');
-  optionsContainer.innerHTML = '';
-  
-  quiz.options.forEach((option, index) => {
-    const optionElement = document.createElement('div');
-    optionElement.className = 'quiz-option';
-    optionElement.textContent = option;
-    optionElement.dataset.index = index;
-    
-    optionElement.addEventListener('click', () => {
-      if (quizAnswered) return;
-      
-      document.querySelectorAll('.quiz-option').forEach(opt => {
-        opt.classList.remove('selected');
-      });
-      optionElement.classList.add('selected');
-      selectedQuizOption = index;
-    });
-    
-    optionsContainer.appendChild(optionElement);
+// Select a stage and show its details
+function selectStage(stageId) {
+  // Remove active class from all stages
+  document.querySelectorAll('.timeline-stage').forEach(stage => {
+    stage.classList.remove('timeline-stage--active');
   });
   
-  // Скинути стан вікторини
-  selectedQuizOption = null;
-  quizAnswered = false;
-  document.getElementById('quizResult').classList.remove('show', 'correct', 'incorrect');
-  document.getElementById('checkAnswerBtn').style.display = 'block';
+  // Add active class to selected stage
+  const selectedStage = document.querySelector(`[data-stage-id="${stageId}"]`);
+  if (selectedStage) {
+    selectedStage.classList.add('timeline-stage--active');
+  }
+  
+  // Find stage data
+  const stage = appData.lifecycleStages.find(s => s.id === stageId);
+  if (stage) {
+    currentStage = stage;
+    showStageDetails(stage);
+  }
 }
 
-function checkQuizAnswer() {
-  if (selectedQuizOption === null) {
-    alert('Будь ласка, оберіть відповідь');
-    return;
+// Show detailed information for a stage
+function showStageDetails(stage) {
+  const stageDetail = document.getElementById('stageDetail');
+  
+  let content = `
+    <div class="stage-content">
+      <div class="stage-header">
+        <div class="stage-icon">${stage.icon}</div>
+        <div>
+          <h2 class="stage-title">${stage.name}</h2>
+          <p class="stage-description">${stage.description}</p>
+        </div>
+      </div>
+      <div class="stage-sections">
+  `;
+  
+  // Generate content based on stage type
+  switch(stage.id) {
+    case 1: // Problem Formulation
+      content += `
+        <div class="stage-section">
+          <h4>Real-world Example</h4>
+          <p>${stage.example}</p>
+        </div>
+        <div class="stage-section">
+          <h4>Key Activities</h4>
+          <ul class="key-points">
+            ${stage.keyPoints.map(point => `<li>${point}</li>`).join('')}
+          </ul>
+        </div>
+      `;
+      break;
+      
+    case 2: // Data Collection
+      content += `
+        <div class="stage-section">
+          <h4>Data Sources</h4>
+          <ul class="key-points">
+            ${stage.sources.map(source => `<li>${source}</li>`).join('')}
+          </ul>
+        </div>
+        <div class="stage-section">
+          <h4>Compliance Status</h4>
+          <div class="compliance-badges">
+            ${Object.entries(stage.compliance).map(([key, value]) => 
+              `<span class="compliance-badge compliance-badge--${value ? 'active' : 'inactive'}">${key}</span>`
+            ).join('')}
+          </div>
+        </div>
+      `;
+      break;
+      
+    case 3: // Data Preprocessing
+      content += `
+        <div class="stage-section">
+          <h4>Data Quality Metrics</h4>
+          <div class="metrics-grid">
+            <div class="metric-item">
+              <span class="metric-label">Missing Values</span>
+              <span class="metric-value">${stage.metrics.missingValues}%</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Normalization</span>
+              <span class="metric-value">${stage.metrics.normalization}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Categorical Encoding</span>
+              <span class="metric-value">${stage.metrics.categoricalEncoding}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Outliers Detected</span>
+              <span class="metric-value">${stage.metrics.outliers}</span>
+            </div>
+          </div>
+        </div>
+      `;
+      break;
+      
+    case 4: // Modeling
+      content += `
+        <div class="stage-section">
+          <h4>Select Model Type</h4>
+          <div class="model-selector">
+            ${stage.modelTypes.map(type => 
+              `<div class="model-option" data-model-type="${type}">${type}</div>`
+            ).join('')}
+          </div>
+          <div id="modelOutput" class="mt-8"></div>
+        </div>
+      `;
+      break;
+      
+    case 5: // Evaluation
+      content += `
+        <div class="stage-section">
+          <h4>Performance Metrics</h4>
+          <div class="metrics-grid">
+            <div class="metric-item">
+              <span class="metric-label">Accuracy</span>
+              <span class="metric-value">${(stage.metrics.accuracy * 100).toFixed(1)}%</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Precision</span>
+              <span class="metric-value">${(stage.metrics.precision * 100).toFixed(1)}%</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Recall</span>
+              <span class="metric-value">${(stage.metrics.recall * 100).toFixed(1)}%</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">F1-Score</span>
+              <span class="metric-value">${(stage.metrics.f1Score * 100).toFixed(1)}%</span>
+            </div>
+          </div>
+          <div class="chart-container">
+            <canvas id="evaluationChart"></canvas>
+          </div>
+        </div>
+      `;
+      break;
+      
+    case 6: // Deployment
+      content += `
+        <div class="stage-section">
+          <h4>Infrastructure Status</h4>
+          <div class="metrics-grid">
+            <div class="metric-item">
+              <span class="metric-label">Docker</span>
+              <span class="metric-value">${stage.pipeline.docker ? '✓ Ready' : '✗ Not Ready'}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Kubernetes</span>
+              <span class="metric-value">${stage.pipeline.kubernetes ? '✓ Ready' : '✗ Not Ready'}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">CI/CD</span>
+              <span class="metric-value">${stage.pipeline.cicd}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">API Type</span>
+              <span class="metric-value">${stage.pipeline.api}</span>
+            </div>
+          </div>
+        </div>
+      `;
+      break;
+      
+    case 7: // Monitoring & Maintenance
+      content += `
+        <div class="stage-section">
+          <h4>System Health</h4>
+          <div class="alert alert--${stage.alerts.dataDrift ? 'warning' : 'success'}">
+            <strong>Data Drift:</strong> ${stage.alerts.dataDrift ? 'Detected - Review required' : 'No drift detected'}
+          </div>
+          <div class="alert alert--warning">
+            <strong>Accuracy Decay:</strong> ${stage.alerts.accuracyDecay}% decline detected
+          </div>
+          <div class="alert alert--info">
+            <strong>Next Retraining:</strong> Scheduled for ${stage.alerts.retrainingDue}
+          </div>
+        </div>
+      `;
+      break;
   }
   
-  const step = workflowData.steps.find(s => s.id === currentStepId);
-  const quiz = step.quiz[0];
-  const isCorrect = selectedQuizOption === quiz.answer;
+  content += `
+      </div>
+    </div>
+  `;
   
-  // Показати результат
-  const resultElement = document.getElementById('quizResult');
-  resultElement.classList.add('show');
+  stageDetail.innerHTML = content;
   
-  if (isCorrect) {
-    resultElement.classList.add('correct');
-    resultElement.textContent = '✅ Правильно! Відмінна робота!';
-  } else {
-    resultElement.classList.add('incorrect');
-    resultElement.textContent = `❌ Неправильно. Правильна відповідь: ${quiz.options[quiz.answer]}`;
+  // Add event listeners for interactive elements
+  if (stage.id === 4) {
+    setupModelSelector();
+  } else if (stage.id === 5) {
+    setTimeout(() => createEvaluationChart(stage.metrics), 100);
   }
-  
-  // Підсвітити правильну та неправильну відповіді
-  document.querySelectorAll('.quiz-option').forEach((option, index) => {
-    if (index === quiz.answer) {
-      option.classList.add('correct');
-    } else if (index === selectedQuizOption && !isCorrect) {
-      option.classList.add('incorrect');
-    }
-  });
-  
-  quizAnswered = true;
-  document.getElementById('checkAnswerBtn').style.display = 'none';
 }
 
-function navigateStep(direction) {
-  if (!currentStepId) return;
-  
-  const currentIndex = workflowData.steps.findIndex(s => s.id === currentStepId);
-  const newIndex = currentIndex + direction;
-  
-  if (newIndex >= 0 && newIndex < workflowData.steps.length) {
-    showStepDetails(workflowData.steps[newIndex].id);
-  }
+// Setup model selector for modeling stage
+function setupModelSelector() {
+  document.querySelectorAll('.model-option').forEach(option => {
+    option.addEventListener('click', function() {
+      // Remove selected class from all options
+      document.querySelectorAll('.model-option').forEach(opt => {
+        opt.classList.remove('model-option--selected');
+      });
+      
+      // Add selected class to clicked option
+      this.classList.add('model-option--selected');
+      
+      // Show sample output
+      const modelType = this.getAttribute('data-model-type');
+      showModelOutput(modelType);
+    });
+  });
 }
 
-function updateNavigationButtons() {
-  const currentIndex = workflowData.steps.findIndex(s => s.id === currentStepId);
+// Show model output based on selected type
+function showModelOutput(modelType) {
+  const outputDiv = document.getElementById('modelOutput');
+  const relevantModels = appData.modelTypes.filter(model => model.type === modelType);
+  
+  let output = `
+    <h5>Available ${modelType} Models:</h5>
+    <div class="model-selector">
+  `;
+  
+  relevantModels.forEach(model => {
+    const metric = model.accuracy ? `Accuracy: ${(model.accuracy * 100).toFixed(1)}%` : 
+                  model.rmse ? `RMSE: ${model.rmse}` : 
+                  `Silhouette Score: ${model.silhouette}`;
+    
+    output += `
+      <div class="model-option">
+        <strong>${model.name}</strong><br>
+        <small>${metric}</small>
+      </div>
+    `;
+  });
   
-  document.getElementById('prevStepBtn').disabled = currentIndex === 0;
-  document.getElementById('nextStepBtn').disabled = currentIndex === workflowData.steps.length - 1;
+  output += '</div>';
+  outputDiv.innerHTML = output;
 }
 
-function updateProgress() {
-  const totalSteps = workflowData.steps.length;
-  const completedSteps = visitedSteps.size;
-  const percentage = (completedSteps / totalSteps) * 100;
+// Create evaluation chart
+function createEvaluationChart(metrics) {
+  const ctx = document.getElementById('evaluationChart');
+  if (!ctx) return;
+  
+  // Destroy existing chart if it exists
+  if (evaluationChart) {
+    evaluationChart.destroy();
+  }
   
-  document.getElementById('progressFill').style.width = `${percentage}%`;
-  document.getElementById('progressText').textContent = `${completedSteps}/${totalSteps} етапів вивчено`;
+  evaluationChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Accuracy', 'Precision', 'Recall', 'F1-Score'],
+      datasets: [{
+        label: 'Performance Metrics',
+        data: [metrics.accuracy, metrics.precision, metrics.recall, metrics.f1Score],
+        backgroundColor: ['#1FB8CD', '#FFC185', '#B4413C', '#5D878F'],
+        borderColor: ['#1FB8CD', '#FFC185', '#B4413C', '#5D878F'],
+        borderWidth: 2,
+        borderRadius: 8
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          callbacks: {
+            label: function(context) {
+              return `${context.label}: ${(context.parsed.y * 100).toFixed(1)}%`;
+            }
+          }
+        }
+      },
+      scales: {
+        y: {
+          beginAtZero: true,
+          max: 1,
+          ticks: {
+            callback: function(value) {
+              return (value * 100).toFixed(0) + '%';
+            }
+          }
+        }
+      }
+    }
+  });
 }
 
-function resetProgress() {
-  if (confirm('Ви впевнені, що хочете скинути свій прогрес?')) {
-    visitedSteps.clear();
-    currentStepId = null;
-    
-    // Приховати деталі етапу та показати вступ
-    document.getElementById('stepDetailsSection').classList.remove('active');
-    document.getElementById('introSection').style.display = 'block';
-    
-    // Оновити стани
-    updateActiveStates();
-    updateProgress();
-    
-    // Прокрутити до верху
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
+// Update progress summary
+function updateProgressSummary() {
+  const completed = appData.lifecycleStages.filter(stage => stage.status === 'completed').length;
+  const inProgress = appData.lifecycleStages.filter(stage => stage.status === 'in-progress').length;
+  const pending = appData.lifecycleStages.filter(stage => stage.status === 'pending').length;
+  
+  document.getElementById('completedCount').textContent = completed;
+  document.getElementById('inProgressCount').textContent = inProgress;
+  document.getElementById('pendingCount').textContent = pending;
 }