Spaces:

Soha85
/

RAG_Study

Running

App Files Files Community

Soha85 commited on 17 days ago

Commit

1bc8ce2

verified ·

1 Parent(s): eb8b3fc

Add Indexing & Vector DB

Browse files

Files changed (1) hide show

index.html +127 -0

index.html CHANGED Viewed

@@ -376,6 +376,34 @@
             font-size: 0.85em;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
     </style>
 </head>
 <body>
@@ -385,6 +413,7 @@
         <div class="tabs">
             <button class="tab active" onclick="switchTab('rag')">RAG</button>
             <button class="tab" onclick="switchTab('chunking')">Chunking</button>
         </div>
         <!-- RAG TYPES TAB -->
@@ -484,7 +513,54 @@
                 </div>
             </div>
         </div>
     </div>
     <script>
         const ragData = [
@@ -1050,6 +1126,57 @@
                 chunkingYearTimeline.appendChild(item);
             });
         }
     </script>
 </body>
 </html>

             font-size: 0.85em;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+      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); }
+        .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)); 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 h2 { color: #667eea; margin-bottom: 20px; font-size: 1.5em; border-bottom: 3px solid #667eea; padding-bottom: 10px; }
+        /* New Styles for Indexing/DB Tab */
+        .hint-box { background: #fff3cd; border-left: 5px solid #ffc107; padding: 20px; border-radius: 10px; margin-bottom: 25px; color: #856404; }
+        .hint-box h3 { margin-bottom: 10px; }
+        .tech-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
+        .tech-table th, .tech-table td { padding: 12px; border: 1px solid #ddd; text-align: left; font-size: 0.9em; }
+        .tech-table th { background-color: #f8f9fa; color: #667eea; }
+        .tag-algo { background: #e2e3ff; color: #4a51d4; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
+        .tag-sys { background: #d4edda; color: #155724; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
+        /* Retained utility classes */
+        .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); }
+        .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-reference { color: #888; font-size: 0.85em; font-style: italic; margin-top: 5px; }
+        .timeline-reference a { color: #667eea; text-decoration: none; }
     </style>
 </head>
 <body>
         <div class="tabs">
             <button class="tab active" onclick="switchTab('rag')">RAG</button>
             <button class="tab" onclick="switchTab('chunking')">Chunking</button>
+            <button class="tab" onclick="switchTab('indexing-db')">Indexing & Vector DB</button>
         </div>
         <!-- RAG TYPES TAB -->
                 </div>
             </div>
         </div>
+        <!-- Indexing & Vector DB -->
+        <div id="indexing-db-content" class="tab-content">
+            <div class="hint-box">
+                <h3>💡 Architectural Distinction</h3>
+                <p><strong>Indexing Technique <span class="tag-algo">Algorithmic Level</span>:</strong> The mathematical strategy used to organize vector space (e.g., HNSW, IVF). It defines <em>how</em> the search is performed conceptually.</p>
+                <p style="margin-top: 10px;"><strong>Vector Database <span class="tag-sys">System Level</span>:</strong> The infrastructure/engine that implements these algorithms, adding database features like persistence, scalability, API layers, and metadata filtering (e.g., Pinecone, Milvus).</p>
+            </div>
+            <div class="grid">
+                <div class="card">
+                    <h2>Core Indexing Techniques</h2>
+                    <table class="tech-table">
+                        <thead>
+                            <tr>
+                                <th>Technique</th>
+                                <th>Category</th>
+                                <th>Key Advantage</th>
+                            </tr>
+                        </thead>
+                        <tbody id="indexing-table-body">
+                            </tbody>
+                    </table>
+                </div>
+                <div class="card">
+                    <h2>Vector Search Engines (DBs)</h2>
+                    <table class="tech-table">
+                        <thead>
+                            <tr>
+                                <th>Database</th>
+                                <th>Primary Index</th>
+                                <th>Best For</th>
+                            </tr>
+                        </thead>
+                        <tbody id="vectordb-table-body">
+                            </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card">
+                <h2>📚 Full Citations & Technical References</h2>
+                <div id="citation-list"></div>
+            </div>
+        </div>
     </div>
     <script>
         const ragData = [
                 chunkingYearTimeline.appendChild(item);
             });
         }
+      // Indexing & Vector DB
+      const indexingData = [
+            { name: "Flat Index", desc: "Brute-force exact search", advantage: "100% Accuracy (Recall)", citation: "Lewis, P., et al. (2020). Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks. NeurIPS 2020.", url: "https://proceedings.neurips.cc/paper/2020/hash/6b49327755561ad448233261fb3a129d-Abstract.html" },
+            { name: "HNSW", desc: "Graph-based proximity search", advantage: "Fastest retrieval & high recall", citation: "Malkov, Y. A., & Yashunin, D. A. (2018). Efficient and robust approximate nearest neighbor search using Hierarchical Navigable Small World graphs. IEEE TPAMI.", url: "https://ieeexplore.ieee.org/document/8593845" },
+            { name: "IVF", desc: "Inverted file (Clustering-based)", advantage: "Reduced search space", citation: "Johnson, J., Douze, M., & Jégou, H. (2019). Billion-scale similarity search with GPUs. IEEE Transactions on Big Data.", url: "https://ieeexplore.ieee.org/document/8733051" },
+            { name: "PQ / OPQ", desc: "Product Quantization (Compression)", advantage: "Massive memory efficiency", citation: "Jégou, H., Douze, M., & Schmid, C. (2011). Product Quantization for Nearest Neighbor Search. IEEE TPAMI.", url: "https://ieeexplore.ieee.org/document/5432202" }
+        ];
+        const vectorDBData = [
+            { name: "FAISS", index: "Flat, IVF, HNSW, PQ", best: "Academic Research/Baseline", citation: "Gao, Y., et al. (2024). Retrieval-Augmented Generation for Large Language Models: A Survey. ACM Computing Surveys.", url: "https://dl.acm.org/doi/10.1145/3680493" },
+            { name: "Milvus", index: "HNSW, IVF-PQ", best: "Scalable Open-source", citation: "Liu, L., et al. (2024). A Survey on Retrieval-Augmented Text Generation. IEEE TKDE.", url: "https://ieeexplore.ieee.org/document/10506183" },
+            { name: "Pinecone", index: "Proprietary HNSW-like", best: "Production Managed Service", citation: "Gao, Y., et al. (2024). Retrieval-Augmented Generation for Large Language Models: A Survey. ACM Computing Surveys.", url: "https://dl.acm.org/doi/10.1145/3680493" },
+            { name: "Weaviate", index: "HNSW", best: "Schema/Metadata Support", citation: "Liu, L., et al. (2024). A Survey on Retrieval-Augmented Text Generation. IEEE TKDE.", url: "https://ieeexplore.ieee.org/document/10506183" }
+        ];
+        function switchTab(tabName) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            const activeTab = Array.from(document.querySelectorAll('.tab')).find(t => t.innerText.toLowerCase().includes(tabName.split('-')[0]));
+            if(activeTab) activeTab.classList.add('active');
+            document.getElementById(tabName + '-content').classList.add('active');
+            if (tabName === 'indexing-db') initIndexingDB();
+        }
+        function initIndexingDB() {
+            const indexBody = document.getElementById('indexing-table-body');
+            const dbBody = document.getElementById('vectordb-table-body');
+            const citeList = document.getElementById('citation-list');
+            indexBody.innerHTML = ''; dbBody.innerHTML = ''; citeList.innerHTML = '';
+            indexingData.forEach(d => {
+                indexBody.innerHTML += `<tr><td><strong>${d.name}</strong></td><td>${d.desc}</td><td>${d.advantage}</td></tr>`;
+                appendCitation(d);
+            });
+            vectorDBData.forEach(d => {
+                dbBody.innerHTML += `<tr><td><strong>${d.name}</strong></td><td>${d.index}</td><td>${d.best}</td></tr>`;
+                appendCitation(d);
+            });
+        }
+        function appendCitation(item) {
+            const list = document.getElementById('citation-list');
+            const div = document.createElement('div');
+            div.className = 'timeline-item';
+            div.innerHTML = `<div class="timeline-content"><div class="timeline-reference">📄 <a href="${item.url}" target="_blank">${item.citation}</a></div></div>`;
+            list.appendChild(div);
+        }
     </script>
 </body>
 </html>