| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Yahoo Webscope Anomaly Detection Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .chart-container { |
| position: relative; |
| height: 300px; |
| width: 100%; |
| } |
| .anomaly-marker { |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: #ef4444; |
| transform: translate(-50%, -50%); |
| z-index: 10; |
| } |
| .tooltip { |
| position: absolute; |
| background: rgba(0, 0, 0, 0.8); |
| color: white; |
| padding: 5px 10px; |
| border-radius: 4px; |
| font-size: 12px; |
| pointer-events: none; |
| z-index: 100; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0"> |
| <div class="p-4 border-b border-indigo-700"> |
| <h1 class="text-xl font-bold flex items-center"> |
| <i class="fas fa-chart-line mr-2"></i> |
| AnomalyScope |
| </h1> |
| </div> |
| <nav class="p-4"> |
| <div class="mb-6"> |
| <h2 class="text-sm uppercase text-indigo-300 font-semibold mb-2">Datasets</h2> |
| <ul> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded bg-indigo-700"> |
| <i class="fas fa-server mr-3"></i> |
| A1 Benchmark |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
| <i class="fas fa-server mr-3"></i> |
| A2 Benchmark |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
| <i class="fas fa-server mr-3"></i> |
| A3 Benchmark |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
| <i class="fas fa-server mr-3"></i> |
| A4 Benchmark |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h2 class="text-sm uppercase text-indigo-300 font-semibold mb-2">Analysis Tools</h2> |
| <ul> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
| <i class="fas fa-search mr-3"></i> |
| Anomaly Detection |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
| <i class="fas fa-chart-bar mr-3"></i> |
| Time Series Analysis |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700"> |
| <i class="fas fa-cogs mr-3"></i> |
| Model Settings |
| </a> |
| </li> |
| </ul> |
| </div> |
| </nav> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
| <div> |
| <h2 class="text-xl font-semibold text-gray-800">Yahoo Webscope Anomaly Detection</h2> |
| <p class="text-sm text-gray-500">Analyzing time series anomalies in real-world data</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white"> |
| <i class="fas fa-user"></i> |
| </div> |
| <span class="text-sm font-medium">Analyst</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Total Data Points</p> |
| <p class="text-2xl font-bold text-gray-800">67,000</p> |
| </div> |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> |
| <i class="fas fa-database text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Anomalies Detected</p> |
| <p class="text-2xl font-bold text-gray-800">1,450</p> |
| </div> |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> |
| <i class="fas fa-exclamation-triangle text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Detection Accuracy</p> |
| <p class="text-2xl font-bold text-gray-800">92.3%</p> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Processing Time</p> |
| <p class="text-2xl font-bold text-gray-800">1.2s</p> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-stopwatch text-xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800">Time Series with Anomaly Detection</h3> |
| <div class="flex space-x-2"> |
| <select class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>Last 7 days</option> |
| <option>Last 30 days</option> |
| <option selected>Last 90 days</option> |
| <option>Last year</option> |
| </select> |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-download mr-1"></i> Export |
| </button> |
| </div> |
| </div> |
| <div class="chart-container"> |
| <canvas id="mainChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow p-6 col-span-2"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Anomalies</h3> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expected</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deviation</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-15 14:30</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">142.56</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">98.23</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">+45.1%</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Spike</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-12 09:15</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">32.11</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">68.45</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-53.1%</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Drop</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-10 18:45</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">215.78</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">102.34</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">+110.8%</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Spike</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-08 11:20</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">45.67</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72.89</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-37.3%</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Drop</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-05 16:10</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">178.92</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">95.67</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">+87.0%</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Spike</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Model Performance</h3> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Precision</span> |
| <span class="text-sm font-medium text-gray-700">89.2%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 89.2%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">Recall</span> |
| <span class="text-sm font-medium text-gray-700">92.3%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 92.3%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">F1 Score</span> |
| <span class="text-sm font-medium text-gray-700">90.7%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 90.7%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <h4 class="text-md font-medium text-gray-700 mb-2">Confusion Matrix</h4> |
| <div class="grid grid-cols-3 gap-1 text-center text-xs"> |
| <div class="p-2"></div> |
| <div class="p-2 font-medium">Predicted Anomaly</div> |
| <div class="p-2 font-medium">Predicted Normal</div> |
| <div class="p-2 font-medium">Actual Anomaly</div> |
| <div class="p-2 bg-green-100 text-green-800 rounded">1,234 (TP)</div> |
| <div class="p-2 bg-red-100 text-red-800 rounded">102 (FN)</div> |
| <div class="p-2 font-medium">Actual Normal</div> |
| <div class="p-2 bg-red-100 text-red-800 rounded">114 (FP)</div> |
| <div class="p-2 bg-green-100 text-green-800 rounded">65,550 (TN)</div> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <i class="fas fa-cog mr-2"></i> Tune Model Parameters |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function generateTimeSeriesData() { |
| const data = []; |
| const anomalies = []; |
| let value = 100; |
| |
| for (let i = 0; i < 90; i++) { |
| |
| value = 100 + Math.sin(i / 5) * 30 + (Math.random() * 10 - 5); |
| |
| |
| if (i === 15 || i === 45 || i === 70) { |
| value += 60 + Math.random() * 40; |
| anomalies.push({x: i, y: value}); |
| } else if (i === 30 || i === 60) { |
| value -= 50 + Math.random() * 30; |
| anomalies.push({x: i, y: value}); |
| } |
| |
| data.push(value); |
| } |
| |
| return {data, anomalies}; |
| } |
| |
| |
| function initMainChart() { |
| const {data, anomalies} = generateTimeSeriesData(); |
| const ctx = document.getElementById('mainChart').getContext('2d'); |
| |
| const chart = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: Array.from({length: 90}, (_, i) => `Day ${i+1}`), |
| datasets: [ |
| { |
| label: 'Time Series Data', |
| data: data, |
| borderColor: 'rgb(79, 70, 229)', |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', |
| borderWidth: 2, |
| fill: true, |
| tension: 0.1 |
| }, |
| { |
| label: 'Anomalies', |
| data: data.map((val, idx) => { |
| const anomaly = anomalies.find(a => a.x === idx); |
| return anomaly ? anomaly.y : null; |
| }), |
| pointBackgroundColor: 'rgb(239, 68, 68)', |
| pointRadius: 5, |
| pointHoverRadius: 7, |
| showLine: false |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| tooltip: { |
| mode: 'index', |
| intersect: false, |
| }, |
| legend: { |
| position: 'top', |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: false, |
| grid: { |
| color: 'rgba(0, 0, 0, 0.05)', |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| }, |
| interaction: { |
| mode: 'nearest', |
| axis: 'x', |
| intersect: false |
| } |
| } |
| }); |
| |
| |
| const chartContainer = document.querySelector('.chart-container'); |
| anomalies.forEach(anomaly => { |
| const marker = document.createElement('div'); |
| marker.className = 'anomaly-marker'; |
| marker.style.left = `${(anomaly.x / 89) * 100}%`; |
| marker.style.top = `${100 - ((anomaly.y - 50) / 200) * 100}%`; |
| |
| const tooltip = document.createElement('div'); |
| tooltip.className = 'tooltip'; |
| tooltip.innerHTML = ` |
| <div class="font-bold">Anomaly Detected</div> |
| <div>Value: ${anomaly.y.toFixed(2)}</div> |
| <div>Day ${anomaly.x + 1}</div> |
| `; |
| |
| marker.addEventListener('mouseover', () => { |
| tooltip.style.opacity = '1'; |
| tooltip.style.left = `${(anomaly.x / 89) * 100 + 2}%`; |
| tooltip.style.top = `${100 - ((anomaly.y - 50) / 200) * 100 - 10}%`; |
| }); |
| |
| marker.addEventListener('mouseout', () => { |
| tooltip.style.opacity = '0'; |
| }); |
| |
| chartContainer.appendChild(marker); |
| chartContainer.appendChild(tooltip); |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| initMainChart(); |
| |
| |
| document.querySelectorAll('.sidebar a').forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('bg-indigo-700')); |
| this.classList.add('bg-indigo-700'); |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Daniela-C/yahoo-webscope-anomaly-detection-dataset" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
