Spaces:

Soha85
/

RAG_Study

Running

App Files Files Community

Soha85 commited on 13 days ago

Commit

2379e34

verified ·

1 Parent(s): 097ba1c

Update index.html

Browse files

Files changed (1) hide show

index.html +541 -19

index.html CHANGED Viewed

@@ -1,19 +1,541 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RAG Types Visualization</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        h1 {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+            gap: 25px;
+            margin-bottom: 25px;
+        }
+        .card {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            transition: transform 0.3s ease;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+        }
+        .card h2 {
+            color: #667eea;
+            margin-bottom: 20px;
+            font-size: 1.5em;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 10px;
+        }
+        .chart-container {
+            position: relative;
+            height: 400px;
+        }
+        .timeline-card {
+            grid-column: 1 / -1;
+        }
+        .workflow-selector {
+            margin-bottom: 20px;
+        }
+        .workflow-selector select {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #667eea;
+            border-radius: 8px;
+            font-size: 16px;
+            background: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .workflow-selector select:hover {
+            border-color: #764ba2;
+        }
+        .flowchart-container {
+            display: flex;
+            gap: 30px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        .flowchart {
+            flex: 1;
+            min-width: 400px;
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        .flowchart h3 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.2em;
+            text-align: center;
+        }
+        .flow-step {
+            background: white;
+            padding: 12px 15px;
+            margin: 10px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            position: relative;
+            border-left: 4px solid #667eea;
+        }
+        .flow-step::after {
+            content: '↓';
+            position: absolute;
+            bottom: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 20px;
+            color: #667eea;
+            font-weight: bold;
+        }
+        .flow-step:last-child::after {
+            content: '';
+        }
+        .flow-step.highlight {
+            background: linear-gradient(135deg, #667eea15, #764ba215);
+            border-left-color: #764ba2;
+        }
+        .benefits-challenges {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .info-box {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+        }
+        .info-box h4 {
+            color: #667eea;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .info-box p {
+            color: #555;
+            line-height: 1.6;
+            font-size: 14px;
+        }
+        .timeline-item {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            margin: 10px 0;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .timeline-item:hover {
+            transform: translateX(10px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+        .timeline-year {
+            font-size: 1.8em;
+            font-weight: bold;
+            color: #667eea;
+            min-width: 80px;
+            padding-right: 20px;
+            border-right: 3px solid #667eea;
+        }
+        .timeline-content {
+            padding-left: 20px;
+            flex: 1;
+        }
+        .timeline-type {
+            font-weight: bold;
+            font-size: 1.1em;
+            color: #333;
+            margin-bottom: 5px;
+        }
+        .timeline-category {
+            color: #666;
+            font-size: 0.9em;
+        }
+        .category-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.85em;
+            margin-top: 5px;
+        }
+        .badge-foundational { background: #667eea; color: white; }
+        .badge-agentic { background: #764ba2; color: white; }
+        .badge-modular { background: #f093fb; color: white; }
+        .badge-structural-modular { background: #4facfe; color: white; }
+        .badge-structural { background: #00d2ff; color: white; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔍 RAG Types Visualization Dashboard</h1>
+        <div class="grid">
+            <!-- Category Distribution -->
+            <div class="card">
+                <h2>RAG Categories Distribution</h2>
+                <div class="chart-container">
+                    <canvas id="categoryChart"></canvas>
+                </div>
+            </div>
+            <!-- Timeline by Year -->
+            <div class="card">
+                <h2>RAG Types by Year</h2>
+                <div class="chart-container">
+                    <canvas id="timelineChart"></canvas>
+                </div>
+            </div>
+        </div>
+        <!-- Year-to-RAG Timeline -->
+        <div class="card timeline-card">
+            <h2>📅 Evolution Timeline: Year → RAG Type</h2>
+            <div id="yearTimeline"></div>
+        </div>
+        <!-- Workflow Flowcharts -->
+        <div class="card timeline-card">
+            <h2>Workflow Flowcharts</h2>
+            <div class="workflow-selector">
+                <select id="ragTypeSelector">
+                    <option value="">Select a RAG Type to view workflows...</option>
+                </select>
+            </div>
+            <div id="flowchartDetails" style="display: none;">
+                <div class="flowchart-container">
+                    <div class="flowchart">
+                        <h3>📥 Indexing Workflow</h3>
+                        <div id="indexingFlowchart"></div>
+                    </div>
+                    <div class="flowchart">
+                        <h3>🔄 Inference Workflow</h3>
+                        <div id="inferenceFlowchart"></div>
+                    </div>
+                </div>
+                <div class="benefits-challenges">
+                    <div class="info-box">
+                        <h4>✅ Key Benefits</h4>
+                        <p id="benefits"></p>
+                    </div>
+                    <div class="info-box">
+                        <h4>⚠️ Challenges</h4>
+                        <p id="challenges"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const ragData = [
+            {
+                type: "Naive RAG",
+                year: 2020,
+                category: "Foundational",
+                indexing: "Preprocessing → Fixed Chunking → Simple Embedding → Vector DB Storage",
+                inference: "User Query → Embedding → Vector DB Lookup (Top-K) → Concatenation → LLM Generate",
+                benefits: "Establishes the knowledge retrieval baseline; Simple and cheap to implement.",
+                challenges: "Context loss due to rigid chunking; High hallucination risk; Poor handling of complex/multi-step queries."
+            },
+            {
+                type: "Self RAG",
+                year: 2023,
+                category: "Agentic & Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage",
+                inference: "User Query → LLM Generates a thought → Retrieval → LLM Generates/Evaluates Retrieved Passages → LLM Decides if Answer is Ready → Final LLM Generate",
+                benefits: "Reduces hallucinations by self-critique/verification; Filters out poor quality retrieved passages.",
+                challenges: "Increases inference latency (multiple LLM calls per query); Requires careful tuning of reflection/critique prompt."
+            },
+            {
+                type: "Modular RAG",
+                year: 2024,
+                category: "Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage",
+                inference: "User Query → Router/Module Selection → Selected Module Executes → LLM Generate",
+                benefits: "Improves flexibility and component reusability; Enables optimal module selection for specific tasks.",
+                challenges: "Requires complex routing/planning logic; Overhead of training/managing multiple specialized components."
+            },
+            {
+                type: "Graph RAG",
+                year: 2024,
+                category: "Structural & Modular",
+                indexing: "Preprocessing → Entity/Relation Extraction → Store in Knowledge Graph (KG) & Vector DB",
+                inference: "User Query → Embedding/KG Query → Simultaneous Retrieval (Vector + KG Path) → Concatenation → LLM Generate",
+                benefits: "Resolves complex, multi-hop queries by leveraging factual relationships; Improves interpretability and fact consistency.",
+                challenges: "High indexing complexity (KG construction); Expensive maintenance for rapidly changing data; Retrieval latency can be high."
+            },
+            {
+                type: "MultiModal RAG",
+                year: 2024,
+                category: "Structural",
+                indexing: "Preprocessing → Multi-Modal Embedding (e.g., CLIP) → Stores representations of all modalities in Vector DB",
+                inference: "User Query (Text or Image) → Multi-Modal Embedding → Vector DB Lookup (Retrieves related text, image, metadata) → LLM Generate",
+                benefits: "Unlocks knowledge stored in non-text data (images, charts, tables); Provides a richer context.",
+                challenges: "Requires specialized multimodal embeddings/models; Indexing is computationally expensive; Difficult to combine disparate modalities coherently."
+            },
+            {
+                type: "Recursive RAG",
+                year: 2024,
+                category: "Structural & Modular",
+                indexing: "Preprocessing → Chunking & Summarization → Embeddings of both chunks & summaries → Vector DB Storage",
+                inference: "User Query → Retrieval → LLM evaluates initial result → Recursive Query → Retrieve Specific Chunks → LLM Generate",
+                benefits: "Summarizes context or decomposes queries recursively; Handles high-level questions that require abstract understanding.",
+                challenges: "Risk of information loss during aggressive summarization; Chain of thought adds significant latency."
+            },
+            {
+                type: "Cache RAG",
+                year: 2024,
+                category: "Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage",
+                inference: "User Query → Cache Lookup → If Hit: Return Cached Answer → If Miss: Standard Retrieval → LLM Generate → Cache Store",
+                benefits: "Dramatically improves latency and reduces LLM cost for repeated or highly similar queries.",
+                challenges: "Complex cache invalidation logic; Requires robust query similarity and hashing functions."
+            },
+            {
+                type: "Corrective RAG",
+                year: 2024,
+                category: "Agentic & Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage",
+                inference: "User Query → Standard Retrieval → Retrieved Docs Evaluated → Corrective Action → LLM Generate",
+                benefits: "Detects and corrects poor quality retrieval/generation post-hoc; Increases overall trustworthiness.",
+                challenges: "High latency due to iterative correction loops; Requires training a dedicated evaluation model."
+            },
+            {
+                type: "Multi-Hop RAG",
+                year: 2024,
+                category: "Structural & Modular",
+                indexing: "Preprocessing → Chunking/Entity Extraction → Embedding → Structured Storage (Vector DB + Optional KG)",
+                inference: "User Query → Query Decomposition → Hop 1 Retrieval → Iterative Reasoning → Hop 2 Retrieval → Final Evidence Aggregation → LLM Generate",
+                benefits: "Solves questions requiring reasoning across multiple independent documents or retrieval steps.",
+                challenges: "Prone to error propagation (if one hop fails); Significantly higher latency; Requires generation of accurate intermediate queries."
+            },
+            {
+                type: "Agentic RAG",
+                year: 2024,
+                category: "Agentic & Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage",
+                inference: "User Query → Agent Planning/Tool Selection → Agent Executes RAG Retrieval → Agent Reflects/Synthesizes → Final LLM Generate",
+                benefits: "Handles complex, goal-oriented tasks via dynamic planning, tool use, and state tracking.",
+                challenges: "Highest development/orchestration complexity; Slowest inference due to planning/execution loops; Failure in planning leads to catastrophic task failure."
+            },
+            {
+                type: "Adaptive RAG",
+                year: 2024,
+                category: "Agentic & Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage → Train Query Complexity Classifier",
+                inference: "User Query → Query Classification (Router) → Adaptive Decision → Retrieval Execution → LLM Generate",
+                benefits: "Optimizes pipeline complexity and cost based on query assessment.",
+                challenges: "Requires training a robust query classifier/router; Misclassification can lead to poor quality results."
+            },
+            {
+                type: "Hierarchical RAG",
+                year: 2025,
+                category: "Structural & Modular",
+                indexing: "Preprocessing → Hierarchical Chunking (Multiple levels) → Multiple Embeddings (for each level) → Vector DB Storage",
+                inference: "User Query → Embedding → Multi-Level Retrieval → Concatenation → LLM Generate",
+                benefits: "Solves the 'needle-in-a-haystack' problem for very long documents; Efficiently prunes non-relevant sections.",
+                challenges: "Complex, multi-level chunking and indexing structure; Requires multiple retrieval passes."
+            },
+            {
+                type: "Speculative RAG",
+                year: 2025,
+                category: "Modular",
+                indexing: "Preprocessing → Standard Chunking → Embedding → Vector DB Storage",
+                inference: "User Query → Standard Retrieval → Drafting LLM Generates Tokens → Verifier LLM Checks Drafted Tokens Against Context → LLM Generate",
+                benefits: "Significantly reduces token generation latency and LLM inference cost.",
+                challenges: "Does not inherently improve semantic quality or hallucination rate; Requires careful balance between drafting and verifier models."
+            }
+        ];
+        function getCategoryBadgeClass(category) {
+            const map = {
+                'Foundational': 'badge-foundational',
+                'Agentic & Modular': 'badge-agentic',
+                'Modular': 'badge-modular',
+                'Structural & Modular': 'badge-structural-modular',
+                'Structural': 'badge-structural'
+            };
+            return map[category] || 'badge-modular';
+        }
+        // Create Year Timeline
+        const yearTimeline = document.getElementById('yearTimeline');
+        ragData.forEach(rag => {
+            const item = document.createElement('div');
+            item.className = 'timeline-item';
+            item.innerHTML = `
+                <div class="timeline-year">${rag.year}</div>
+                <div class="timeline-content">
+                    <div class="timeline-type">${rag.type}</div>
+                    <span class="category-badge ${getCategoryBadgeClass(rag.category)}">${rag.category}</span>
+                </div>
+            `;
+            yearTimeline.appendChild(item);
+        });
+        // Populate selector
+        const selector = document.getElementById('ragTypeSelector');
+        ragData.forEach(rag => {
+            const option = document.createElement('option');
+            option.value = rag.type;
+            option.textContent = `${rag.type} (${rag.year})`;
+            selector.appendChild(option);
+        });
+        function createFlowchart(workflow, containerId) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = '';
+            const steps = workflow.split('→').map(s => s.trim());
+            steps.forEach((step, index) => {
+                const div = document.createElement('div');
+                div.className = 'flow-step';
+                if (index === 0 || index === steps.length - 1) {
+                    div.classList.add('highlight');
+                }
+                div.textContent = step;
+                container.appendChild(div);
+            });
+        }
+        selector.addEventListener('change', (e) => {
+            const selected = ragData.find(r => r.type === e.target.value);
+            const details = document.getElementById('flowchartDetails');
+            if (selected) {
+                createFlowchart(selected.indexing, 'indexingFlowchart');
+                createFlowchart(selected.inference, 'inferenceFlowchart');
+                document.getElementById('benefits').textContent = selected.benefits;
+                document.getElementById('challenges').textContent = selected.challenges;
+                details.style.display = 'block';
+            } else {
+                details.style.display = 'none';
+            }
+        });
+        // Category Chart
+        const categoryCount = {};
+        ragData.forEach(rag => {
+            categoryCount[rag.category] = (categoryCount[rag.category] || 0) + 1;
+        });
+        new Chart(document.getElementById('categoryChart'), {
+            type: 'doughnut',
+            data: {
+                labels: Object.keys(categoryCount),
+                datasets: [{
+                    data: Object.values(categoryCount),
+                    backgroundColor: [
+                        '#667eea',
+                        '#764ba2',
+                        '#f093fb',
+                        '#4facfe',
+                        '#00d2ff'
+                    ]
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+        // Timeline Chart
+        const yearCount = {};
+        ragData.forEach(rag => {
+            yearCount[rag.year] = (yearCount[rag.year] || 0) + 1;
+        });
+        new Chart(document.getElementById('timelineChart'), {
+            type: 'bar',
+            data: {
+                labels: Object.keys(yearCount).sort(),
+                datasets: [{
+                    label: 'Number of RAG Types',
+                    data: Object.keys(yearCount).sort().map(year => yearCount[year]),
+                    backgroundColor: '#667eea'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            stepSize: 1
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>