Spaces:

Soha85
/

RAG_Study

Running

App Files Files Community

Soha85 commited on 24 days ago

Commit

ed01b80

verified ·

1 Parent(s): 1bc8ce2

Upload index.html

Browse files

Files changed (1) hide show

index.html +0 -127

index.html CHANGED Viewed

@@ -376,34 +376,6 @@
             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>
@@ -413,7 +385,6 @@
         <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 -->
@@ -513,54 +484,7 @@
                 </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 = [
@@ -1126,57 +1050,6 @@
                 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>

             font-size: 0.85em;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
     </style>
 </head>
 <body>
         <div class="tabs">
             <button class="tab active" onclick="switchTab('rag')">RAG</button>
             <button class="tab" onclick="switchTab('chunking')">Chunking</button>
         </div>
         <!-- RAG TYPES TAB -->
                 </div>
             </div>
         </div>
     </div>
     <script>
         const ragData = [
                 chunkingYearTimeline.appendChild(item);
             });
         }
     </script>
 </body>
 </html>