Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RAG Survey - Augmentation</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Shared Header Placeholder --> | |
| <div id="shared-header"></div> | |
| <div id="augmentation-content" class="tab-content"> | |
| <div class="grid"> | |
| <div class="card timeline-card"> | |
| <h2>✨ The Augmentation Stage</h2> | |
| <p>Augmentation is the critical bridge between <strong>Retrieval</strong> and <strong>Generation</strong>. In this stage, the system takes the user's original query and "augments" it with the relevant context retrieved from the vector database.</p> | |
| </div> | |
| <div class="card"> | |
| <h2>📝 Definition</h2> | |
| <div class="info-box"> | |
| <p>The process of constructing a comprehensive prompt for the Large Language Model (LLM) by combining the <strong>User Query</strong>, <strong>Retrieved Context</strong>, and <strong>System Instructions</strong>. This ensures the LLM has all the necessary facts to generate an accurate, grounded answer.</p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>🔄 Augmentation Workflow</h2> | |
| <div id="augmentationFlow" class="flowchart"> | |
| <!-- Flowchart will be populated by JS --> | |
| </div> | |
| </div> | |
| <div class="card timeline-card"> | |
| <h2>💡 Key Components of an Augmented Prompt</h2> | |
| <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));"> | |
| <div class="info-box"> | |
| <h4>👤 User Query</h4> | |
| <p>The original question or task provided by the user.</p> | |
| </div> | |
| <div class="info-box"> | |
| <h4>📚 Retrieved Context</h4> | |
| <p>The most relevant text chunks found in the Vector Database during the retrieval phase.</p> | |
| </div> | |
| <div class="info-box"> | |
| <h4>⚙️ System Prompt</h4> | |
| <p>Instructions telling the LLM how to behave (e.g., "Only use the provided context to answer").</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js" defer></script> | |
| <script> | |
| window.addEventListener('DOMContentLoaded', () => { | |
| const checkData = setInterval(() => { | |
| if (typeof createFlowchart !== 'undefined') { | |
| clearInterval(checkData); | |
| initPage(); | |
| } | |
| }, 50); | |
| }); | |
| function initPage() { | |
| const augmentationWorkflow = "User Query → Retrieval from Vector DB → Context Selection → Prompt Construction (Query + Context) → LLM Generation → Final Answer"; | |
| createFlowchart(augmentationWorkflow, 'augmentationFlow'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |