Update index.html

index.html

@@ -514,6 +514,52 @@
                 </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>
@@ -1080,6 +1126,56 @@
                 chunkingYearTimeline.appendChild(item);
             });
         }
+      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>