Spaces:

Soha85
/

RAG_Study

Running

App Files Files Community

Soha85 commited on 11 days ago

Commit

f2f9885

verified ·

1 Parent(s): 90e2d2b

Update index.html

Browse files

Files changed (1) hide show

index.html +383 -46

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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>
         * {
@@ -32,6 +32,41 @@
             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
         .grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
@@ -265,66 +300,141 @@
         .def-foundational { border-left-color: #667eea; }
         .def-agentic { border-left-color: #764ba2; }
         .def-modular { border-left-color: #f093fb; }
-        .def-structural-modular { border-left-color: #4facfe; }
         .def-structural { border-left-color: #00d2ff; }
     </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 id="categoryDefinitions" style="margin-top: 20px;"></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>
@@ -478,6 +588,105 @@
             }
         ];
         const mainCategoryDefinitions = {
             'Foundational': 'The baseline RAG approach establishing core retrieval-augmented generation principles with simple, fixed pipelines.',
             'Modular': 'Focuses on pipeline flexibility through specialized, interchangeable components and intermediate operations between query and generation.',
@@ -485,6 +694,23 @@
             'Structural': 'Innovations in how source documents are preprocessed, stored, and indexed for more effective retrieval (e.g., knowledge graphs, hierarchies, multi-modal embeddings).'
         };
         function getCategoryBadgeClass(category) {
             const map = {
                 'Foundational': 'badge-foundational',
@@ -534,7 +760,7 @@
             yearTimeline.appendChild(item);
         });
-        // Populate selector
         const selector = document.getElementById('ragTypeSelector');
         ragData.forEach(rag => {
             const option = document.createElement('option');
@@ -639,6 +865,117 @@
                 }
             }
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RAG</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
     <style>
         * {
             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 25px;
+        }
+        .tab {
+            padding: 15px 30px;
+            background: rgba(255, 255, 255, 0.3);
+            color: white;
+            border: none;
+            border-radius: 10px 10px 0 0;
+            cursor: pointer;
+            font-size: 1.1em;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        .tab:hover {
+            background: rgba(255, 255, 255, 0.4);
+        }
+        .tab.active {
+            background: white;
+            color: #667eea;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
         .grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
         .def-foundational { border-left-color: #667eea; }
         .def-agentic { border-left-color: #764ba2; }
         .def-modular { border-left-color: #f093fb; }
         .def-structural { border-left-color: #00d2ff; }
+        .chunking-brief {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+            border-left: 4px solid #667eea;
+        }
+        .chunking-brief p {
+            color: #555;
+            line-height: 1.6;
+            margin-bottom: 10px;
+        }
+        .chunking-brief .reference {
+            color: #888;
+            font-size: 0.9em;
+            font-style: italic;
+        }
+        .chunking-brief .reference a {
+            color: #667eea;
+            text-decoration: none;
+        }
+        .chunking-brief .reference a:hover {
+            text-decoration: underline;
+        }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>🔍 RAG Dashboard</h1>
+        <div class="tabs">
+            <button class="tab active" onclick="switchTab('rag')">RAG Types</button>
+            <button class="tab" onclick="switchTab('chunking')">Chunking</button>
+        </div>
+        <!-- RAG TYPES TAB -->
+        <div id="rag-content" class="tab-content active">
+            <div class="grid">
+                <div class="card">
+                    <h2>RAG Categories Distribution</h2>
+                    <div class="chart-container">
+                        <canvas id="categoryChart"></canvas>
+                    </div>
+                    <div id="categoryDefinitions"></div>
+                </div>
+                <div class="card">
+                    <h2>RAG Types by Year</h2>
+                    <div class="chart-container">
+                        <canvas id="timelineChart"></canvas>
+                    </div>
                 </div>
             </div>
+            <div class="card timeline-card">
+                <h2>📅 Evolution Timeline: Year → RAG Type</h2>
+                <div id="yearTimeline"></div>
+            </div>
+            <div class="card timeline-card">
+                <h2>RAG 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>
+        <!-- CHUNKING TAB -->
+        <div id="chunking-content" class="tab-content">
+            <div class="grid">
+                <div class="card">
+                    <h2>Chunking Methods Distribution</h2>
+                    <div class="chart-container">
+                        <canvas id="chunkingChart"></canvas>
                     </div>
+                </div>
+                <div class="card">
+                    <h2>Chunking Evolution Timeline</h2>
+                    <div class="chart-container">
+                        <canvas id="chunkingTimelineChart"></canvas>
                     </div>
                 </div>
+            </div>
+            <div class="card timeline-card">
+                <h2>📅 Chunking Methods Timeline</h2>
+                <div id="chunkingYearTimeline"></div>
+            </div>
+            <div class="card timeline-card">
+                <h2>Chunking Method Flowcharts</h2>
+                <div class="workflow-selector">
+                    <select id="chunkingSelector">
+                        <option value="">Select a Chunking Method...</option>
+                    </select>
+                </div>
+                <div id="chunkingFlowchartDetails" style="display: none;">
+                    <div class="flowchart">
+                        <h3>🔄 Chunking Process Flow</h3>
+                        <div id="chunkingFlowchart"></div>
                     </div>
+                    <div class="chunking-brief">
+                        <p id="chunkingDescription"></p>
+                        <div class="reference" id="chunkingReference"></div>
                     </div>
                 </div>
             </div>
             }
         ];
+        const chunkingData = [
+            {
+                type: "Fixed-size Chunking",
+                year: 2001,
+                workflow: "Input Document → Split by Fixed Token/Word Count (200-500 tokens) → Create Chunks → Output Chunks",
+                description: "Splits text into chunks based on a fixed number of tokens/words (e.g., 200-500 tokens). Simple but may break semantic boundaries.",
+                references: "Collobert, R., et al. (2011). Natural language processing (almost) from scratch. Journal of Machine Learning Research 12:2493-2537.",
+                paperUrl: "https://www.jmlr.org/papers/volume12/collobert11a/collobert11a.pdf"
+            },
+            {
+                type: "Sliding Window Chunking",
+                year: 1998,
+                workflow: "Input Document → Define Chunk Size & Overlap → Slide Window (e.g., size 300, overlap 100) → Create Overlapping Chunks → Output Chunks",
+                description: "Uses a fixed chunk size plus overlap (e.g., chunk size 300, overlap 100). Maintains context continuity across chunks.",
+                references: "Carbonell, J. & Goldstein, J. (1998). The use of MMR, diversity-based reranking for reordering documents. SIGIR 1998.",
+                paperUrl: "https://dl.acm.org/doi/10.1145/290941.291025"
+            },
+            {
+                type: "Semantic Chunking",
+                year: 2024,
+                workflow: "Input Document → Analyze Topic Shifts/Semantic Boundaries → Split at Semantic Breaks → Create Semantically Coherent Chunks → Output Chunks",
+                description: "Chunks based on topic shifts or semantic boundaries rather than size. Preserves meaning and context.",
+                references: "LangChain (2024). Semantic chunker. Accessed 2024-09-14.",
+                paperUrl: "https://python.langchain.com/docs/how_to/semantic-chunker/"
+            },
+            {
+                type: "Sentence-based Chunking",
+                year: 2024,
+                workflow: "Input Document → Split by Sentences → Group Sentences (Optional) → Create Sentence Chunks → Output Chunks",
+                description: "Splits text by sentences. Maintains grammatical integrity and natural language boundaries.",
+                references: "Dong, K., et al. (2024). Multi-view content-aware indexing for long document retrieval. arXiv:2404.15103",
+                paperUrl: "https://arxiv.org/abs/2404.15103"
+            },
+            {
+                type: "Paragraph-based Chunking",
+                year: 2014,
+                workflow: "Input Document → Identify Paragraph Boundaries → Split at Paragraphs → Create Paragraph Chunks → Output Chunks",
+                description: "Uses natural paragraph boundaries for chunking. Preserves document structure and thematic grouping.",
+                references: "Dudhabaware, R. S., et al. (2014). Review on natural language processing tasks for text documents. IEEE ICCIC 2014.",
+                paperUrl: "https://ieeexplore.ieee.org/document/7238334"
+            },
+            {
+                type: "Recursive/Hierarchical Chunking",
+                year: 2023,
+                workflow: "Input Document → Break into Sections → Split Sections into Paragraphs → Split Paragraphs into Sentences → Split Sentences into Tokens → Output Multi-level Chunks",
+                description: "Breaks document into progressively smaller units (section → paragraph → sentence → tokens). Enables multi-level retrieval.",
+                references: "LangChain (2023). Recursively split by character. Accessed 2024-09-14. | Latif, S., et al. (2025). The Chunking Paradigm: Recursive Semantic for RAG. ICNLSP 2025.",
+                paperUrl: "https://aclanthology.org/2025.icnlsp-1.16/"
+            },
+            {
+                type: "Hybrid Chunking",
+                year: 2024,
+                workflow: "Input Document → Apply Semantic Analysis → Apply Fixed-size Constraint → Apply Overlap Strategy → Create Hybrid Chunks → Output Chunks",
+                description: "Combines semantic + fixed-size + overlap strategies. Balances context preservation with practical constraints.",
+                references: "Kamradt, G. (2024). 5 levels of text splitting. LangChain blog.",
+                paperUrl: "https://python.langchain.com/docs/how_to/semantic-chunker/"
+            },
+            {
+                type: "Discourse-aware Chunking",
+                year: 2005,
+                workflow: "Input Document → Identify Discourse Markers (however, in contrast, therefore) → Detect Conceptual Shifts → Split at Discourse Boundaries → Output Discourse Chunks",
+                description: "Uses discourse markers (e.g., 'however', 'in contrast', 'therefore') to detect conceptual shifts and chunk accordingly.",
+                references: "Sporleder, C. & Lapata, M. (2005). Discourse Chunking and its Application to Sentence Compression. HLT 2005.",
+                paperUrl: "https://aclanthology.org/H05-1033/"
+            },
+            {
+                type: "Embedding-similarity-based Chunking",
+                year: 2024,
+                workflow: "Input Document → Generate Sentence Embeddings → Calculate Similarity Scores → Detect Similarity Drops Below Threshold → Split at Low Similarity Points → Output Chunks",
+                description: "Sequentially processes text and opens a new chunk when embedding similarity drops below a threshold. Data-driven approach.",
+                references: "Kamradt, G. (2024). 5 levels of text splitting. LangChain blog.",
+                paperUrl: "https://python.langchain.com/docs/how_to/semantic-chunker/"
+            },
+            {
+                type: "Metadata-based Chunking",
+                year: 2025,
+                workflow: "Input Document → Extract Metadata (headers, bullets, sections) → Split Using Metadata Structure → Create Metadata-aware Chunks → Output Chunks",
+                description: "Splits text using document metadata (e.g., headers, bullets). Preserves document structure and hierarchy.",
+                references: "Zhao, J., et al. (2025). MoC: Mixtures of Text Chunking Learners for Retrieval-Augmented Generation. ACL 2025.",
+                paperUrl: "https://aclanthology.org/2025.acl-long.1/"
+            },
+            {
+                type: "Page-based Chunking",
+                year: 2024,
+                workflow: "Input PDF/Scanned Document → Identify Page Boundaries → Split by Page → Create Page Chunks → Output Chunks",
+                description: "Splits by PDF page or scanned document page. Useful for document-level retrieval and citation.",
+                references: "Standard PDF processing practice. No specific paper required.",
+                paperUrl: "#"
+            },
+            {
+                type: "Domain-specific Chunking",
+                year: 2024,
+                workflow: "Input Domain Document → Apply Domain Rules (legal sections, medical records, code functions) → Split by Domain Logic → Create Domain Chunks → Output Chunks",
+                description: "Tailored to content type (e.g., legal documents by sections, medical records by encounters, code by functions).",
+                references: "Allamraju, A., et al. (2024). Breaking It Down: Domain-Aware Semantic Segmentation for Retrieval Augmented Generation. arXiv:2512.00367",
+                paperUrl: "https://arxiv.org/abs/2512.00367"
+            }
+        ];
         const mainCategoryDefinitions = {
             'Foundational': 'The baseline RAG approach establishing core retrieval-augmented generation principles with simple, fixed pipelines.',
             'Modular': 'Focuses on pipeline flexibility through specialized, interchangeable components and intermediate operations between query and generation.',
             'Structural': 'Innovations in how source documents are preprocessed, stored, and indexed for more effective retrieval (e.g., knowledge graphs, hierarchies, multi-modal embeddings).'
         };
+        function switchTab(tabName) {
+            const tabs = document.querySelectorAll('.tab');
+            const contents = document.querySelectorAll('.tab-content');
+            tabs.forEach(tab => tab.classList.remove('active'));
+            contents.forEach(content => content.classList.remove('active'));
+            if (tabName === 'rag') {
+                tabs[0].classList.add('active');
+                document.getElementById('rag-content').classList.add('active');
+            } else {
+                tabs[1].classList.add('active');
+                document.getElementById('chunking-content').classList.add('active');
+                initChunkingVisualizations();
+            }
+        }
         function getCategoryBadgeClass(category) {
             const map = {
                 'Foundational': 'badge-foundational',
             yearTimeline.appendChild(item);
         });
+        // Populate RAG selector
         const selector = document.getElementById('ragTypeSelector');
         ragData.forEach(rag => {
             const option = document.createElement('option');
                 }
             }
         });
+        // Chunking Visualizations
+        let chunkingChartsInitialized = false;
+        function initChunkingVisualizations() {
+            if (chunkingChartsInitialized) return;
+            chunkingChartsInitialized = true;
+            // Populate chunking selector
+            const chunkingSelector = document.getElementById('chunkingSelector');
+            chunkingData.forEach(chunk => {
+                const option = document.createElement('option');
+                option.value = chunk.type;
+                option.textContent = `${chunk.type} (${chunk.year})`;
+                chunkingSelector.appendChild(option);
+            });
+            chunkingSelector.addEventListener('change', (e) => {
+                const selected = chunkingData.find(c => c.type === e.target.value);
+                const details = document.getElementById('chunkingFlowchartDetails');
+                if (selected) {
+                    createFlowchart(selected.workflow, 'chunkingFlowchart');
+                    document.getElementById('chunkingDescription').textContent = selected.description;
+                    document.getElementById('chunkingReference').innerHTML =
+                        `📄 <a href="${selected.paperUrl}" target="_blank">${selected.references}</a>`;
+                    details.style.display = 'block';
+                } else {
+                    details.style.display = 'none';
+                }
+            });
+            // Chunking methods chart
+            const chunkingTypes = {};
+            chunkingData.forEach(chunk => {
+                const category = chunk.type.includes('Semantic') || chunk.type.includes('Embedding') ? 'Semantic-based' :
+                                chunk.type.includes('Fixed') || chunk.type.includes('Sliding') ? 'Size-based' :
+                                chunk.type.includes('Sentence') || chunk.type.includes('Paragraph') ? 'Structure-based' :
+                                chunk.type.includes('Recursive') || chunk.type.includes('Hierarchical') ? 'Hierarchical' :
+                                'Domain-specific';
+                chunkingTypes[category] = (chunkingTypes[category] || 0) + 1;
+            });
+            new Chart(document.getElementById('chunkingChart'), {
+                type: 'pie',
+                data: {
+                    labels: Object.keys(chunkingTypes),
+                    datasets: [{
+                        data: Object.values(chunkingTypes),
+                        backgroundColor: ['#667eea', '#764ba2', '#f093fb', '#4facfe', '#00d2ff']
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+            // Chunking timeline
+            const chunkingYearCount = {};
+            chunkingData.forEach(chunk => {
+                chunkingYearCount[chunk.year] = (chunkingYearCount[chunk.year] || 0) + 1;
+            });
+            new Chart(document.getElementById('chunkingTimelineChart'), {
+                type: 'line',
+                data: {
+                    labels: Object.keys(chunkingYearCount).sort(),
+                    datasets: [{
+                        label: 'Chunking Methods',
+                        data: Object.keys(chunkingYearCount).sort().map(year => chunkingYearCount[year]),
+                        borderColor: '#667eea',
+                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                stepSize: 1
+                            }
+                        }
+                    }
+                }
+            });
+            // Chunking year timeline
+            const chunkingYearTimeline = document.getElementById('chunkingYearTimeline');
+            chunkingData.forEach(chunk => {
+                const item = document.createElement('div');
+                item.className = 'timeline-item';
+                item.innerHTML = `
+                    <div class="timeline-year">${chunk.year}</div>
+                    <div class="timeline-content">
+                        <div class="timeline-type">${chunk.type}</div>
+                        <div class="timeline-reference">📄 <a href="${chunk.paperUrl}" target="_blank">${chunk.references}</a></div>
+                    </div>
+                `;
+                chunkingYearTimeline.appendChild(item);
+            });
+        }
     </script>
 </body>
 </html>