Spaces:

Jack1808
/

Vector_RAG_vs_Page_Index_RAG

Sleeping

App Files Files Community

Vector_RAG_vs_Page_Index_RAG / static /index.html

Jainish1808

Update LLM model to gpt-oss:20b-cloud and enhance TOC functionality

624c2a9 3 months ago

Raw

History Blame Contribute Delete

8.62 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RAG Comparator</title>
	<link rel="stylesheet" href="/static/style.css?v=4">
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
	</head>

	<body>
	<div class="app-container">
	<!-- Sidebar -->
	<aside class="sidebar">
	<div class="sidebar-header">
	<h2>RAG Config</h2>
	</div>

	<div class="sidebar-section">
	<h3>Documents</h3>
	<input type="file" id="file-upload" multiple class="file-input" accept=".pdf,.txt,.docx">
	<button id="upload-btn" class="btn primary">Upload</button>
	<div id="documents-list" class="documents-grid">
	<!-- Documents will be injected here -->
	</div>
	</div>

	<div class="sidebar-section">
	<h3>RAG Mode</h3>
	<div class="rag-toggles">
	<div class="toggle-row">
	<label class="toggle-label" for="toggle-vector">Vector RAG</label>
	<label class="toggle-switch">
	<input type="checkbox" id="toggle-vector" checked>
	<span class="toggle-slider"></span>
	</label>
	</div>
	<div class="toggle-row">
	<label class="toggle-label" for="toggle-page">Page Index RAG</label>
	<label class="toggle-switch">
	<input type="checkbox" id="toggle-page" checked>
	<span class="toggle-slider"></span>
	</label>
	</div>
	<div class="toggle-row">
	<label class="toggle-label" for="toggle-toc">TOC Index RAG</label>
	<label class="toggle-switch">
	<input type="checkbox" id="toggle-toc" checked>
	<span class="toggle-slider"></span>
	</label>
	</div>
	</div>
	</div>

	<div class="sidebar-section">
	<h3>Token Usage</h3>
	<div class="cost-stats">
	<div><span class="cost-label">Embeddings:</span> <span id="stat-embed" class="cost-value">0</span>
	</div>
	<div><span class="cost-label">Prompt:</span> <span id="stat-prompt" class="cost-value">0</span>
	</div>
	<div><span class="cost-label">Response:</span> <span id="stat-response" class="cost-value">0</span>
	</div>
	<div><span class="cost-label">TOC Analysis:</span> <span id="stat-toc" class="cost-value">0</span>
	</div>
	<div class="cost-total-row">
	<span class="cost-label" style="font-weight: 600;">Total Tokens:</span>
	<span id="stat-total" class="cost-value cost-total">0</span>
	</div>
	</div>
	</div>

	<div class="sidebar-section">
	<h3>Indexing</h3>
	<button id="index-btn" class="btn secondary">Re-index All</button>
	<button id="clear-btn" class="btn secondary" style="margin-top: 8px; color: #e53935;">Clear All
	Data</button>
	<div id="index-status" class="status-msg"></div>
	</div>

	<div class="sidebar-section">
	<h3>Retrieval</h3>
	<label for="top-k">Top K</label>
	<input type="number" id="top-k" value="5" min="1" max="20" class="num-input">
	</div>
	</aside>

	<!-- Main Content -->
	<main class="main-content">
	<header class="top-nav" style="position: relative;">
	<h1>RAG Comparator</h1>
	<p>Vector RAG vs Page Index RAG vs TOC Index RAG</p>
	<button id="clear-history-btn" class="btn secondary"
	style="position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: auto; padding: 6px 12px; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #e53935; border-color: #fca5a5;"
	title="Clear Chat History">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
	<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"
	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	</svg>
	Clear History
	</button>
	</header>

	<!-- Loading Overlay -->
	<div id="indexing-overlay" class="overlay" style="display: none;">
	<div class="overlay-content">
	<div class="spinner large-spinner"></div>
	<h2 id="overlay-text">Indexing Documents...</h2>
	<p>Your files are being processed and embedded.</p>
	</div>
	</div>

	<div class="chat-area" id="chat-container">
	<!-- Chat messages will be injected here -->
	</div>

	<!-- Input Area -->
	<div class="input-area">
	<div class="input-wrapper">
	<textarea id="prompt-input" placeholder="Ask a question about your documents..."
	rows="1"></textarea>
	<button id="send-btn" class="send-btn">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="send-icon">
	<path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"
	stroke-linejoin="round" />
	<path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2"
	stroke-linecap="round" stroke-linejoin="round" />
	</svg>
	</button>
	</div>
	</div>
	</main>
	</div>

	<!-- Chunks Modal -->
	<div id="chunks-modal" class="modal" style="display: none;">
	<div class="modal-content">
	<div class="modal-header">
	<div style="display:flex; align-items:center; gap:12px;">
	<h2 id="modal-doc-title">Document Embeddings</h2>
	<button id="modal-tree-btn" class="doc-tree-btn" style="font-size: 1.2rem;"
	title="View Interactive Tree">🌳</button>
	</div>
	<button id="close-modal-btn" class="close-btn">×</button>
	</div>
	<div class="modal-body">
	<div class="comparison-container">
	<div class="chunk-column">
	<div class="column-header">Page Index RAG (1 chunk = 1 page)</div>
	<div id="page-chunks-list" class="chunks-list"></div>
	</div>
	<div class="chunk-column">
	<div class="column-header">Vector RAG (Sliding Window)</div>
	<div id="vector-chunks-list" class="chunks-list"></div>
	</div>
	<div class="chunk-column">
	<div class="column-header">TOC Index RAG (Tree Nodes)</div>
	<div id="toc-chunks-list" class="chunks-list"></div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Tree Viewer Modal -->
	<div id="tree-modal" class="modal" style="display: none;">
	<div class="modal-content">
	<div class="modal-header">
	<h2 id="tree-modal-title">Document Tree Structure</h2>
	<button id="close-tree-modal-btn" class="close-btn">×</button>
	</div>
	<div class="modal-body">
	<div id="tree-container" class="tree-container">
	<!-- Tree will be rendered here -->
	</div>
	</div>
	</div>
	</div>

	<script src="/static/script.js?v=13"></script>
	</body>

	</html>