Update index.html
Browse files- index.html +59 -0
index.html
CHANGED
|
@@ -221,6 +221,33 @@
|
|
| 221 |
.badge-modular { background: #f093fb; color: white; }
|
| 222 |
.badge-structural-modular { background: #4facfe; color: white; }
|
| 223 |
.badge-structural { background: #00d2ff; color: white; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 224 |
</style>
|
| 225 |
</head>
|
| 226 |
<body>
|
|
@@ -234,6 +261,7 @@
|
|
| 234 |
<div class="chart-container">
|
| 235 |
<canvas id="categoryChart"></canvas>
|
| 236 |
</div>
|
|
|
|
| 237 |
</div>
|
| 238 |
|
| 239 |
<!-- Timeline by Year -->
|
|
@@ -405,6 +433,14 @@
|
|
| 405 |
}
|
| 406 |
];
|
| 407 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 408 |
function getCategoryBadgeClass(category) {
|
| 409 |
const map = {
|
| 410 |
'Foundational': 'badge-foundational',
|
|
@@ -416,6 +452,29 @@
|
|
| 416 |
return map[category] || 'badge-modular';
|
| 417 |
}
|
| 418 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 419 |
// Create Year Timeline
|
| 420 |
const yearTimeline = document.getElementById('yearTimeline');
|
| 421 |
ragData.forEach(rag => {
|
|
|
|
| 221 |
.badge-modular { background: #f093fb; color: white; }
|
| 222 |
.badge-structural-modular { background: #4facfe; color: white; }
|
| 223 |
.badge-structural { background: #00d2ff; color: white; }
|
| 224 |
+
|
| 225 |
+
.category-definition {
|
| 226 |
+
background: #f8f9fa;
|
| 227 |
+
padding: 12px;
|
| 228 |
+
margin: 8px 0;
|
| 229 |
+
border-radius: 8px;
|
| 230 |
+
border-left: 4px solid;
|
| 231 |
+
font-size: 0.9em;
|
| 232 |
+
}
|
| 233 |
+
|
| 234 |
+
.category-definition strong {
|
| 235 |
+
display: block;
|
| 236 |
+
margin-bottom: 5px;
|
| 237 |
+
font-size: 1em;
|
| 238 |
+
}
|
| 239 |
+
|
| 240 |
+
.category-definition p {
|
| 241 |
+
color: #555;
|
| 242 |
+
line-height: 1.5;
|
| 243 |
+
margin: 0;
|
| 244 |
+
}
|
| 245 |
+
|
| 246 |
+
.def-foundational { border-left-color: #667eea; }
|
| 247 |
+
.def-agentic { border-left-color: #764ba2; }
|
| 248 |
+
.def-modular { border-left-color: #f093fb; }
|
| 249 |
+
.def-structural-modular { border-left-color: #4facfe; }
|
| 250 |
+
.def-structural { border-left-color: #00d2ff; }
|
| 251 |
</style>
|
| 252 |
</head>
|
| 253 |
<body>
|
|
|
|
| 261 |
<div class="chart-container">
|
| 262 |
<canvas id="categoryChart"></canvas>
|
| 263 |
</div>
|
| 264 |
+
<div id="categoryDefinitions" style="margin-top: 20px;"></div>
|
| 265 |
</div>
|
| 266 |
|
| 267 |
<!-- Timeline by Year -->
|
|
|
|
| 433 |
}
|
| 434 |
];
|
| 435 |
|
| 436 |
+
const categoryDefinitions = {
|
| 437 |
+
'Foundational': 'The baseline RAG approach establishing core retrieval-augmented generation principles with simple, fixed pipelines.',
|
| 438 |
+
'Agentic & Modular': 'Combines dynamic decision-making agents with modular components, enabling self-reflection, adaptive routing, and intelligent query handling.',
|
| 439 |
+
'Modular': 'Focuses on pipeline flexibility through specialized, interchangeable components that can be routed and combined based on task requirements.',
|
| 440 |
+
'Structural & Modular': 'Innovates both data organization (knowledge graphs, hierarchies) and pipeline architecture for handling complex, multi-step queries.',
|
| 441 |
+
'Structural': 'Innovations in how source data is preprocessed, stored, and indexed, such as multi-modal embeddings or hierarchical structures.'
|
| 442 |
+
};
|
| 443 |
+
|
| 444 |
function getCategoryBadgeClass(category) {
|
| 445 |
const map = {
|
| 446 |
'Foundational': 'badge-foundational',
|
|
|
|
| 452 |
return map[category] || 'badge-modular';
|
| 453 |
}
|
| 454 |
|
| 455 |
+
function getCategoryDefClass(category) {
|
| 456 |
+
const map = {
|
| 457 |
+
'Foundational': 'def-foundational',
|
| 458 |
+
'Agentic & Modular': 'def-agentic',
|
| 459 |
+
'Modular': 'def-modular',
|
| 460 |
+
'Structural & Modular': 'def-structural-modular',
|
| 461 |
+
'Structural': 'def-structural'
|
| 462 |
+
};
|
| 463 |
+
return map[category] || 'def-modular';
|
| 464 |
+
}
|
| 465 |
+
|
| 466 |
+
// Create Category Definitions
|
| 467 |
+
const categoryDefContainer = document.getElementById('categoryDefinitions');
|
| 468 |
+
Object.keys(categoryDefinitions).forEach(category => {
|
| 469 |
+
const div = document.createElement('div');
|
| 470 |
+
div.className = `category-definition ${getCategoryDefClass(category)}`;
|
| 471 |
+
div.innerHTML = `
|
| 472 |
+
<strong>${category}</strong>
|
| 473 |
+
<p>${categoryDefinitions[category]}</p>
|
| 474 |
+
`;
|
| 475 |
+
categoryDefContainer.appendChild(div);
|
| 476 |
+
});
|
| 477 |
+
|
| 478 |
// Create Year Timeline
|
| 479 |
const yearTimeline = document.getElementById('yearTimeline');
|
| 480 |
ragData.forEach(rag => {
|