Download dashboard.html from Sanjam19/GraphRAG: direct link, hf CLI and curl.
- Browser
- Download file 22.8 kB
-
https://huggingface.co/spaces/Sanjam19/GraphRAG/resolve/main/dashboard.html
- Command line
-
hf download hf://spaces/Sanjam19/GraphRAG/dashboard.html
-
curl -L -o dashboard.html https://huggingface.co/spaces/Sanjam19/GraphRAG/resolve/main/dashboard.html
22.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GraphRAG vs RAG vs LLM — Benchmark Dashboard</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap'); | |
| :root { | |
| --bg: #0a0a0f; | |
| --surface: #12121a; | |
| --surface2: #1a1a26; | |
| --border: #2a2a3a; | |
| --accent: #6c63ff; | |
| --accent2: #00d4aa; | |
| --accent3: #ff6b6b; | |
| --text: #e8e8f0; | |
| --muted: #6b6b80; | |
| --llm: #f59e0b; | |
| --rag: #6c63ff; | |
| --graphrag: #00d4aa; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'DM Sans', sans-serif; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Grid background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(108,99,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(108,99,255,0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } | |
| /* Header */ | |
| header { | |
| padding: 40px 0 32px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 40px; | |
| } | |
| .header-inner { display: flex; justify-content: space-between; align-items: flex-end; } | |
| .logo { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--accent); | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| margin-bottom: 12px; | |
| } | |
| h1 { | |
| font-size: 36px; | |
| font-weight: 600; | |
| line-height: 1.1; | |
| letter-spacing: -0.5px; | |
| } | |
| h1 span { color: var(--accent2); } | |
| .badge { | |
| background: rgba(0,212,170,0.1); | |
| border: 1px solid rgba(0,212,170,0.3); | |
| color: var(--accent2); | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| padding: 4px 10px; | |
| border-radius: 2px; | |
| letter-spacing: 2px; | |
| } | |
| /* Summary cards */ | |
| .summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 16px; | |
| margin-bottom: 40px; | |
| } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 24px; | |
| transition: border-color 0.2s; | |
| } | |
| .card:hover { border-color: var(--accent); } | |
| .card-label { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| color: var(--muted); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 12px; | |
| } | |
| .card-value { | |
| font-size: 40px; | |
| font-weight: 600; | |
| line-height: 1; | |
| margin-bottom: 6px; | |
| } | |
| .card-sub { font-size: 13px; color: var(--muted); } | |
| .green { color: var(--accent2); } | |
| .purple { color: var(--accent); } | |
| .amber { color: var(--llm); } | |
| .red { color: var(--accent3); } | |
| /* Charts grid */ | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| margin-bottom: 40px; | |
| } | |
| .chart-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 24px; | |
| } | |
| .chart-title { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 20px; | |
| } | |
| .chart-wrap { position: relative; height: 220px; } | |
| /* Legend */ | |
| .legend { | |
| display: flex; | |
| gap: 20px; | |
| margin-top: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .legend-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| } | |
| /* Query table */ | |
| .table-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 24px; | |
| margin-bottom: 40px; | |
| } | |
| .table-title { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 20px; | |
| } | |
| table { width: 100%; border-collapse: collapse; } | |
| th { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| color: var(--muted); | |
| letter-spacing: 1px; | |
| text-align: left; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border); | |
| text-transform: uppercase; | |
| } | |
| td { | |
| padding: 14px 12px; | |
| font-size: 13px; | |
| border-bottom: 1px solid rgba(42,42,58,0.5); | |
| vertical-align: top; | |
| } | |
| tr:last-child td { border-bottom: none; } | |
| tr:hover td { background: rgba(108,99,255,0.03); } | |
| .q-text { color: var(--muted); max-width: 260px; line-height: 1.4; } | |
| .token-val { font-family: 'Space Mono', monospace; font-size: 12px; } | |
| .reduction { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; } | |
| .pos { color: var(--accent2); } | |
| .neg { color: var(--accent3); } | |
| .pill { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 2px; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| } | |
| .pill-pass { background: rgba(0,212,170,0.1); color: var(--accent2); border: 1px solid rgba(0,212,170,0.2); } | |
| .pill-fail { background: rgba(255,107,107,0.1); color: var(--accent3); border: 1px solid rgba(255,107,107,0.2); } | |
| /* Query input */ | |
| .query-section { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 24px; | |
| margin-bottom: 40px; | |
| } | |
| .query-section h3 { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 16px; | |
| } | |
| .input-row { display: flex; gap: 12px; margin-bottom: 16px; } | |
| input[type="text"] { | |
| flex: 1; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 12px 16px; | |
| color: var(--text); | |
| font-family: 'DM Sans', sans-serif; | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| input[type="text"]:focus { border-color: var(--accent); } | |
| .btn-query { | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| padding: 12px 24px; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| letter-spacing: 2px; | |
| cursor: pointer; | |
| transition: opacity 0.2s; | |
| white-space: nowrap; | |
| } | |
| .btn-query:hover { opacity: 0.85; } | |
| .btn-query:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .api-url { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| margin-bottom: 16px; | |
| } | |
| .api-url span { color: var(--accent2); } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| } | |
| .result-box { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 16px; | |
| } | |
| .result-box-label { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| } | |
| .result-answer { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--muted); | |
| min-height: 80px; | |
| } | |
| .result-meta { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .meta-item { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); } | |
| .meta-item span { color: var(--text); } | |
| /* Architecture */ | |
| .arch-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 32px; | |
| margin-bottom: 40px; | |
| } | |
| .arch-title { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| color: var(--muted); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-bottom: 32px; | |
| } | |
| .arch-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| .pipeline { | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .pipeline-header { | |
| padding: 12px 16px; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 11px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| } | |
| .pipeline-llm { background: rgba(245,158,11,0.1); color: var(--llm); border-bottom: 1px solid rgba(245,158,11,0.2); } | |
| .pipeline-rag { background: rgba(108,99,255,0.1); color: var(--accent); border-bottom: 1px solid rgba(108,99,255,0.2); } | |
| .pipeline-graph { background: rgba(0,212,170,0.1); color: var(--accent2); border-bottom: 1px solid rgba(0,212,170,0.2); } | |
| .pipeline-steps { padding: 16px; } | |
| .step { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .step:last-child { margin-bottom: 0; } | |
| .step-num { | |
| background: var(--border); | |
| color: var(--text); | |
| width: 20px; height: 20px; | |
| border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 24px 0; | |
| text-align: center; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 10px; | |
| color: var(--muted); | |
| letter-spacing: 2px; | |
| } | |
| .loading { color: var(--muted); font-size: 13px; font-style: italic; } | |
| @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } | |
| .pulsing { animation: pulse 1.5s ease-in-out infinite; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-inner"> | |
| <div> | |
| <div class="logo">TigerGraph × GraphRAG</div> | |
| <h1>Benchmark <span>Dashboard</span></h1> | |
| </div> | |
| <div style="text-align:right"> | |
| <div class="badge">LIVE COMPARISON</div> | |
| <div style="font-size:12px;color:var(--muted);margin-top:8px;font-family:'Space Mono',monospace">FinanceBench · SEC 10-K Filings</div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Summary Cards --> | |
| <div class="summary-grid"> | |
| <div class="card"> | |
| <div class="card-label">Avg Token Reduction</div> | |
| <div class="card-value green">31.9%</div> | |
| <div class="card-sub">GraphRAG vs Basic RAG</div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">LLM-as-Judge Pass</div> | |
| <div class="card-value purple">70%</div> | |
| <div class="card-sub">GraphRAG accuracy</div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">BERTScore F1</div> | |
| <div class="card-value green">0.822</div> | |
| <div class="card-sub">GraphRAG (RAG: 0.821)</div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">Dataset Size</div> | |
| <div class="card-value amber">2.1M</div> | |
| <div class="card-sub">tokens · 11,646 chunks</div> | |
| </div> | |
| </div> | |
| <!-- Charts --> | |
| <div class="charts-grid"> | |
| <div class="chart-card"> | |
| <div class="chart-title">Token Usage Per Query</div> | |
| <div class="chart-wrap"> | |
| <canvas id="tokenChart"></canvas> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"><div class="legend-dot" style="background:var(--llm)"></div>LLM Only</div> | |
| <div class="legend-item"><div class="legend-dot" style="background:var(--rag)"></div>Basic RAG</div> | |
| <div class="legend-item"><div class="legend-dot" style="background:var(--graphrag)"></div>GraphRAG</div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title">Latency (seconds)</div> | |
| <div class="chart-wrap"> | |
| <canvas id="latencyChart"></canvas> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"><div class="legend-dot" style="background:var(--llm)"></div>LLM Only</div> | |
| <div class="legend-item"><div class="legend-dot" style="background:var(--rag)"></div>Basic RAG</div> | |
| <div class="legend-item"><div class="legend-dot" style="background:var(--graphrag)"></div>GraphRAG</div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title">Token Reduction % per Query</div> | |
| <div class="chart-wrap"> | |
| <canvas id="reductionChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title">Accuracy Comparison</div> | |
| <div class="chart-wrap"> | |
| <canvas id="accuracyChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Query Table --> | |
| <div class="table-card"> | |
| <div class="table-title">Per-Query Benchmark Results</div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Question</th> | |
| <th>LLM Tokens</th> | |
| <th>RAG Tokens</th> | |
| <th>GraphRAG Tokens</th> | |
| <th>Reduction</th> | |
| <th>Judge</th> | |
| </tr> | |
| </thead> | |
| <tbody id="resultsTable"> | |
| <tr><td colspan="6" class="loading pulsing">Loading results...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Live Query --> | |
| <div class="query-section"> | |
| <h3>Live Query — Compare All 3 Pipelines</h3> | |
| <div class="api-url">API: <span>POST /query/all</span> · Backend: <span>http://localhost:8000</span></div> | |
| <div class="input-row"> | |
| <input type="text" id="queryInput" placeholder="e.g. What was Apple's revenue in FY2022?" /> | |
| <button class="btn-query" id="queryBtn" onclick="runQuery()">RUN QUERY</button> | |
| </div> | |
| <div class="results-grid"> | |
| <div class="result-box"> | |
| <div class="result-box-label" style="color:var(--llm)">LLM Only</div> | |
| <div class="result-answer" id="llmAnswer">—</div> | |
| <div class="result-meta"> | |
| <div class="meta-item">Tokens: <span id="llmTokens">—</span></div> | |
| <div class="meta-item">Latency: <span id="llmLat">—</span></div> | |
| </div> | |
| </div> | |
| <div class="result-box"> | |
| <div class="result-box-label" style="color:var(--rag)">Basic RAG</div> | |
| <div class="result-answer" id="ragAnswer">—</div> | |
| <div class="result-meta"> | |
| <div class="meta-item">Tokens: <span id="ragTokens">—</span></div> | |
| <div class="meta-item">Latency: <span id="ragLat">—</span></div> | |
| </div> | |
| </div> | |
| <div class="result-box"> | |
| <div class="result-box-label" style="color:var(--graphrag)">GraphRAG</div> | |
| <div class="result-answer" id="gragAnswer">—</div> | |
| <div class="result-meta"> | |
| <div class="meta-item">Tokens: <span id="gragTokens">—</span></div> | |
| <div class="meta-item">Reduction: <span id="gragReduction">—</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Architecture --> | |
| <div class="arch-card"> | |
| <div class="arch-title">System Architecture — 3 Pipeline Comparison</div> | |
| <div class="arch-grid"> | |
| <div class="pipeline"> | |
| <div class="pipeline-header pipeline-llm">LLM Only</div> | |
| <div class="pipeline-steps"> | |
| <div class="step"><div class="step-num">1</div>User query input</div> | |
| <div class="step"><div class="step-num">2</div>Direct to Groq llama3-70b</div> | |
| <div class="step"><div class="step-num">3</div>No retrieval — pure parametric memory</div> | |
| <div class="step"><div class="step-num">4</div>Answer + token count</div> | |
| </div> | |
| </div> | |
| <div class="pipeline"> | |
| <div class="pipeline-header pipeline-rag">Basic RAG</div> | |
| <div class="pipeline-steps"> | |
| <div class="step"><div class="step-num">1</div>Embed query via sentence-transformers</div> | |
| <div class="step"><div class="step-num">2</div>ChromaDB top-5 similarity search</div> | |
| <div class="step"><div class="step-num">3</div>Build context prompt (~2000 tokens)</div> | |
| <div class="step"><div class="step-num">4</div>Groq → answer + token count</div> | |
| </div> | |
| </div> | |
| <div class="pipeline"> | |
| <div class="pipeline-header pipeline-graph">GraphRAG</div> | |
| <div class="pipeline-steps"> | |
| <div class="step"><div class="step-num">1</div>Extract entities from query</div> | |
| <div class="step"><div class="step-num">2</div>Graph traversal — score chunks by entity match</div> | |
| <div class="step"><div class="step-num">3</div>Retrieve top-1 chunk (~400 tokens)</div> | |
| <div class="step"><div class="step-num">4</div>Groq → answer + token count</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer>GRAPHRAG HACKATHON · TIGERGRAPH SAVANNA · FINANCEBENCH DATASET</footer> | |
| </div> | |
| <script> | |
| // Static benchmark data (from evaluate.py run) | |
| const benchmarkData = { | |
| questions: [ | |
| "FY2018 capital expenditure amount", | |
| "Public equities analyst analysis", | |
| "3M capital-intensive FY2022", | |
| "Operating margin change FY2022", | |
| "M&A segment growth" | |
| ], | |
| llm_tokens: [92, 246, 250, 272, 167], | |
| rag_tokens: [1196,1859,1333,1892, 808], | |
| grag_tokens: [1003,931, 648,1104, 409], | |
| llm_latency: [0.57,0.42,2.77,2.63,2.50], | |
| rag_latency: [0.93,0.80,15.21,18.96,7.19], | |
| grag_latency: [0.87,2.85,6.12,7.21,4.12], | |
| reductions: [16.1,49.9,51.4,41.6,44.6], | |
| judges: ["FAIL","FAIL","PASS","PASS","PASS"] | |
| }; | |
| const chartDefaults = { | |
| plugins: { legend: { display: false } }, | |
| scales: { | |
| x: { grid: { color: 'rgba(42,42,58,0.5)' }, ticks: { color: '#6b6b80', font: { family: 'Space Mono', size: 9 } } }, | |
| y: { grid: { color: 'rgba(42,42,58,0.5)' }, ticks: { color: '#6b6b80', font: { family: 'Space Mono', size: 9 } } } | |
| } | |
| }; | |
| // Token chart | |
| new Chart(document.getElementById('tokenChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: benchmarkData.questions, | |
| datasets: [ | |
| { label: 'LLM Only', data: benchmarkData.llm_tokens, backgroundColor: 'rgba(245,158,11,0.7)', borderRadius: 3 }, | |
| { label: 'Basic RAG', data: benchmarkData.rag_tokens, backgroundColor: 'rgba(108,99,255,0.7)', borderRadius: 3 }, | |
| { label: 'GraphRAG', data: benchmarkData.grag_tokens, backgroundColor: 'rgba(0,212,170,0.7)', borderRadius: 3 } | |
| ] | |
| }, | |
| options: { ...chartDefaults, responsive: true, maintainAspectRatio: false } | |
| }); | |
| // Latency chart | |
| new Chart(document.getElementById('latencyChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: benchmarkData.questions, | |
| datasets: [ | |
| { label: 'LLM Only', data: benchmarkData.llm_latency, backgroundColor: 'rgba(245,158,11,0.7)', borderRadius: 3 }, | |
| { label: 'Basic RAG', data: benchmarkData.rag_latency, backgroundColor: 'rgba(108,99,255,0.7)', borderRadius: 3 }, | |
| { label: 'GraphRAG', data: benchmarkData.grag_latency, backgroundColor: 'rgba(0,212,170,0.7)', borderRadius: 3 } | |
| ] | |
| }, | |
| options: { ...chartDefaults, responsive: true, maintainAspectRatio: false } | |
| }); | |
| // Reduction chart | |
| new Chart(document.getElementById('reductionChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: benchmarkData.questions, | |
| datasets: [{ | |
| label: 'Token Reduction %', | |
| data: benchmarkData.reductions, | |
| backgroundColor: benchmarkData.reductions.map(v => v >= 0 ? 'rgba(0,212,170,0.7)' : 'rgba(255,107,107,0.7)'), | |
| borderRadius: 3 | |
| }] | |
| }, | |
| options: { ...chartDefaults, responsive: true, maintainAspectRatio: false } | |
| }); | |
| // Accuracy chart | |
| new Chart(document.getElementById('accuracyChart'), { | |
| type: 'radar', | |
| data: { | |
| labels: ['BERTScore', 'Judge Pass%', 'Token Efficiency', 'Latency Score', 'Avg Reduction'], | |
| datasets: [ | |
| { | |
| label: 'Basic RAG', | |
| data: [82, 50, 30, 40, 0], | |
| borderColor: 'rgba(108,99,255,0.8)', | |
| backgroundColor: 'rgba(108,99,255,0.1)', | |
| pointBackgroundColor: '#6c63ff' | |
| }, | |
| { | |
| label: 'GraphRAG', | |
| data: [82.2, 70, 75, 65, 31.9], | |
| borderColor: 'rgba(0,212,170,0.8)', | |
| backgroundColor: 'rgba(0,212,170,0.1)', | |
| pointBackgroundColor: '#00d4aa' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { legend: { display: true, labels: { color: '#6b6b80', font: { family: 'Space Mono', size: 9 } } } }, | |
| scales: { | |
| r: { | |
| grid: { color: 'rgba(42,42,58,0.8)' }, | |
| ticks: { color: '#6b6b80', backdropColor: 'transparent', font: { size: 8 } }, | |
| pointLabels: { color: '#6b6b80', font: { family: 'Space Mono', size: 9 } } | |
| } | |
| } | |
| } | |
| }); | |
| // Populate table | |
| const tbody = document.getElementById('resultsTable'); | |
| tbody.innerHTML = ''; | |
| benchmarkData.questions.forEach((q, i) => { | |
| const r = benchmarkData.reductions[i]; | |
| const j = benchmarkData.judges[i]; | |
| tbody.innerHTML += ` | |
| <tr> | |
| <td class="q-text">${q}</td> | |
| <td class="token-val" style="color:var(--llm)">${benchmarkData.llm_tokens[i]}</td> | |
| <td class="token-val" style="color:var(--rag)">${benchmarkData.rag_tokens[i]}</td> | |
| <td class="token-val" style="color:var(--graphrag)">${benchmarkData.grag_tokens[i]}</td> | |
| <td class="reduction ${r >= 0 ? 'pos' : 'neg'}">${r >= 0 ? '+' : ''}${r}%</td> | |
| <td><span class="pill ${j === 'PASS' ? 'pill-pass' : 'pill-fail'}">${j}</span></td> | |
| </tr>`; | |
| }); | |
| // Live query | |
| async function runQuery() { | |
| const q = document.getElementById('queryInput').value.trim(); | |
| if (!q) return; | |
| const btn = document.getElementById('queryBtn'); | |
| btn.disabled = true; | |
| btn.textContent = 'RUNNING...'; | |
| ['llmAnswer','ragAnswer','gragAnswer'].forEach(id => { | |
| document.getElementById(id).innerHTML = '<span class="pulsing">Querying...</span>'; | |
| }); | |
| try { | |
| const res = await fetch('http://localhost:8000/query/all', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ question: q }) | |
| }); | |
| const data = await res.json(); | |
| document.getElementById('llmAnswer').textContent = data.llm_only.answer; | |
| document.getElementById('llmTokens').textContent = data.llm_only.total_tokens; | |
| document.getElementById('llmLat').textContent = (data.llm_only.latency || '—') + 's'; | |
| document.getElementById('ragAnswer').textContent = data.rag.answer; | |
| document.getElementById('ragTokens').textContent = data.rag.total_tokens; | |
| document.getElementById('ragLat').textContent = (data.rag.latency || '—') + 's'; | |
| document.getElementById('gragAnswer').textContent = data.graphrag.answer; | |
| document.getElementById('gragTokens').textContent = data.graphrag.total_tokens; | |
| document.getElementById('gragReduction').textContent = data.token_reduction_vs_rag + '%'; | |
| } catch(e) { | |
| ['llmAnswer','ragAnswer','gragAnswer'].forEach(id => { | |
| document.getElementById(id).textContent = 'Start backend: uvicorn backend.main:app --reload'; | |
| }); | |
| } | |
| btn.disabled = false; | |
| btn.textContent = 'RUN QUERY'; | |
| } | |
| document.getElementById('queryInput').addEventListener('keydown', e => { | |
| if (e.key === 'Enter') runQuery(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |