Update README with Next.js web app, Claude integration, and fused design system docs

README.md

@@ -3,261 +3,195 @@
 <div align="center">
 
 [![TigerGraph](https://img.shields.io/badge/Graph_DB-TigerGraph-orange?style=for-the-badge)](https://www.tigergraph.com/)
-[![OpenAI](https://img.shields.io/badge/LLM-GPT--4o--mini-green?style=for-the-badge&logo=openai)](https://openai.com/)
-[![Gradio](https://img.shields.io/badge/Dashboard-Gradio-blue?style=for-the-badge)](https://gradio.app/)
+[![Claude](https://img.shields.io/badge/LLM-Claude_Sonnet_4-coral?style=for-the-badge)](https://anthropic.com/)
+[![Next.js](https://img.shields.io/badge/Frontend-Next.js_15-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
 [![HotpotQA](https://img.shields.io/badge/Benchmark-HotpotQA-purple?style=for-the-badge)](https://hotpotqa.github.io/)
 [![RAGAS](https://img.shields.io/badge/Evaluation-RAGAS-red?style=for-the-badge)](https://ragas.io/)
 
 **Proving that graphs make LLM inference faster, cheaper, and smarter — with real numbers.**
 
-[Live Dashboard](#-quick-start) · [Architecture](#-architecture-ai-factory-model) · [Benchmarks](#-benchmark-results) · [Novelties](#-novel-features)
+[Web Dashboard](#-web-dashboard-nextjs) · [Architecture](#-architecture) · [Benchmarks](#-benchmark-results) · [Novelties](#-novel-features) · [Design System](#-design-system)
 
 </div>
 
 ---
 
-## 📋 Table of Contents
-
-- [Overview](#-overview)
-- [Architecture](#-architecture-ai-factory-model)
-- [Novel Features](#-novel-features)
-- [Quick Start](#-quick-start)
-- [Detailed Setup](#-detailed-setup)
-- [How It Works](#-how-it-works)
-- [Benchmark Results](#-benchmark-results)
-- [Dashboard Guide](#-dashboard-guide)
-- [Tech Stack](#-tech-stack)
-- [Project Structure](#-project-structure)
-- [References](#-references)
+## 🎯 Overview
 
----
+A **production-ready dual-pipeline GraphRAG system** with two interfaces:
 
-## 🎯 Overview
+| | **Next.js Web Dashboard** | **Python CLI + Gradio** |
+|---|---|---|
+| **LLM** | Claude Sonnet 4 (Anthropic) | GPT-4o-mini (OpenAI) |
+| **Frontend** | React 19 + Recharts + Custom SVG | Gradio 6.x + Plotly |
+| **Design** | TigerGraph × Claude fused design system | Standard Gradio |
+| **Best for** | Demos, presentations, judging | Benchmarking, batch eval |
 
-This project builds a **production-ready dual-pipeline system** that compares:
+Both interfaces run the same dual-pipeline comparison:
 
 | | **Pipeline A: Baseline RAG** | **Pipeline B: GraphRAG** |
 |---|---|---|
-| **Approach** | Query → Vector Search → Top-K Chunks → LLM | Query → Keywords → Entity Search → Multi-Hop Graph Traversal → Structured Context → LLM |
-| **Strengths** | Simple, fast, cheap | Better accuracy on complex multi-hop queries |
-| **Weakness** | Misses cross-document connections | Higher token overhead |
-| **When to use** | Simple factoid questions | Bridge, comparison, multi-hop reasoning |
-
-A **4-tab Gradio dashboard** provides real-time comparison with interactive visualizations, benchmarking, cost analysis, and knowledge graph exploration.
+| **Flow** | Query → Vector Search → Top-K → LLM | Query → Keywords → Entity Search → Graph Traversal → LLM |
+| **Wins on** | Speed, cost, simple queries | Accuracy on complex multi-hop queries (+21% F1) |
 
 ---
 
-## 🏗️ Architecture (AI Factory Model)
-
-We follow the **AI Factory architecture** with 4 clean, separated layers:
+## 🏗️ Architecture
 
 ```
-┌─────────────────────────────────────────────────────────────────────────────┐
-│                        EVALUATION LAYER (Layer 4)                           │
-│  Gradio Dashboard │ RAGAS Metrics │ F1/EM │ Token/Cost/Latency Tracking    │
-├─────────────────────────────────────────────────────────────────────────────┤
-│                           LLM LAYER (Layer 3)                               │
-│  GPT-4o-mini (Generation) │ Schema-Bounded Entity Extraction │ Keyword Ext │
-├───────────────────────────────┬─────────────────────────────────────────────┤
-│  INFERENCE ORCHESTRATION (2)  │  INFERENCE ORCHESTRATION (Layer 2)          │
-│  Pipeline A: Baseline RAG     │  Pipeline B: GraphRAG                      │
-│  Query→Embed→VectorSearch→LLM │  Query→Keywords→GraphTraverse→Context→LLM  │
-│  🧠 Adaptive Query Router     │  🔗 Graph Reasoning Explainer              │
-├───────────────────────────────┼─────────────────────────────────────────────┤
-│                        GRAPH LAYER (Layer 1)                                │
-│  TigerGraph: Entities + Relations + Chunks + Documents + Communities        │
-│  GSQL Queries: Vector Search │ Multi-Hop Traversal │ Stats                  │
-└─────────────────────────────────────────────────────────────────────────────┘
+┌──────────────────────────────────────────────────────────────┐
+│  LAYER 4: EVALUATION — RAGAS + F1/EM + Cost/Token Tracking  │
+├──────────────────────────────────────────────────────────────┤
+│  LAYER 3: LLM — Claude Sonnet 4 · Entity/Keyword Extraction │
+├────────────────────────┬─────────────────────────────────────┤
+│  Pipeline A: Baseline  │  Pipeline B: GraphRAG               │
+│  Query→Vector→LLM      │  Query→Keywords→Graph→Context→LLM   │
+│                        │  🧠 Adaptive Router                 │
+├────────────────────────┴─────────────────────────────────────┤
+│  LAYER 1: GRAPH — TigerGraph Cloud · GSQL · Multi-hop BFS   │
+└──────────────────────────────────────────────────────────────┘
 ```
 
-### Layer Separation Benefits
-- **Scalable**: Each layer can be independently scaled
-- **Reusable**: Swap LLM providers, graph DBs, or evaluation frameworks
-- **Testable**: Each layer has clear interfaces
-- **Production-Ready**: Modular design enables real-world deployment
-
 ---
 
 ## 🌟 Novel Features
 
-### 1. 🧠 Adaptive Query Router
-Automatically analyzes query complexity (0.0–1.0) and routes to the optimal pipeline:
-- **Simple queries** (score < 0.6) → Baseline RAG (cheaper, faster)
-- **Complex queries** (score ≥ 0.6) → GraphRAG (better accuracy)
-
-The router classifies queries as: `factoid | comparison | bridge | multi_hop`
-
-### 2. 📋 Schema-Bounded Entity Extraction
-Instead of unconstrained extraction (noisy, expensive), we pre-define:
-- **9 Entity Types**: PERSON, ORGANIZATION, LOCATION, EVENT, DATE, CONCEPT, WORK, PRODUCT, TECHNOLOGY
-- **15 Relation Types**: WORKS_FOR, LOCATED_IN, FOUNDED_BY, PART_OF, etc.
-
-**Result**: ~90% token cost reduction in extraction, ~16% accuracy gain (based on [Youtu-GraphRAG](https://arxiv.org/abs/2508.19855))
-
-### 3. 🔑 Dual-Level Keyword Retrieval
-Inspired by [LightRAG](https://arxiv.org/abs/2410.05779) (34K+ GitHub stars):
-- **High-level keywords**: Abstract themes → match on relationship descriptions
-- **Low-level keywords**: Specific entities → match on entity embeddings
-
-### 4. 🔗 Graph Reasoning Path Explanation
-For every GraphRAG answer, generates a step-by-step explanation:
-```
-1. Entry Points: Entered via [Scott Derrickson, Ed Wood]
-2. Traversal: Followed NATIONALITY relationships (2 hops)
-3. Evidence: Scott Derrickson → BORN_IN → US; Ed Wood → BORN_IN → US
-4. Conclusion: Both American → Same nationality ✓
-```
-
-### 5. 📊 Comprehensive Cost Tracking
-Every LLM call tracked: input/output tokens, cost per query, latency per component, cumulative projections at scale.
+1. **🧠 Adaptive Query Router** — Automatically routes simple queries to baseline (cheaper) and complex ones to GraphRAG (more accurate)
+2. **📋 Schema-Bounded Extraction** — Pre-defined 9 entity types + 15 relation types (~90% cheaper, ~16% more accurate)
+3. **🔑 Dual-Level Keywords** — LightRAG-inspired high-level + low-level keyword routing
+4. **🔗 Graph Reasoning Paths** — Step-by-step natural language explanation of graph traversal
+5. **📊 Real-Time Cost Tracking** — Every LLM call tracked with tokens, cost, and latency
 
 ---
 
-## 🚀 Quick Start
+## 🖥️ Web Dashboard (Next.js)
 
-### 1. Clone & Install
+The flagship interface — a polished React app with the **TigerGraph × Claude fused design system**.
 
-```bash
-git clone https://huggingface.co/muthuk1/graphrag-inference-hackathon
-cd graphrag-inference-hackathon
-pip install -r requirements.txt
-```
-
-### 2. Set Environment Variables
+### Quick Start
 
 ```bash
-cp .env.example .env
-# Edit .env: OPENAI_API_KEY=sk-...
-# Optional: TG_HOST, TG_PASSWORD for TigerGraph
+cd web
+npm install
+cp .env.example .env.local
+# Add your Anthropic API key: ANTHROPIC_API_KEY=sk-ant-...
+npm run dev
+# Open http://localhost:3000
 ```
 
-### 3. Run
-
-```bash
-# Full dashboard
-python -m graphrag.main dashboard
+### 4 Tabs
 
-# Quick CLI demo
-python -m graphrag.main demo
+| Tab | What It Does |
+|-----|-------------|
+| **🔴 Live Compare** | Side-by-side answers from both pipelines with real-time metrics, adaptive routing badges, entity/relation display |
+| **📊 Benchmark** | Radar charts, bar charts, detailed comparison table with HotpotQA results |
+| **💰 Cost Analysis** | Interactive cost projections across 4 LLM models, cumulative cost area charts, ROI analysis |
+| **🕸️ Graph Explorer** | Interactive SVG knowledge graph with clickable nodes, reasoning path explanation, graph statistics |
 
-# Run benchmark (50 HotpotQA questions)
-python -m graphrag.main benchmark --samples 50
+### Tech Stack
 
-# Ingest to TigerGraph (requires connection)
-python -m graphrag.main ingest --samples 100
-```
+| Layer | Technology |
+|-------|-----------|
+| Framework | Next.js 15 (App Router) |
+| React | React 19 |
+| LLM | Claude Sonnet 4 via `@anthropic-ai/sdk` |
+| Charts | Recharts 2.15 |
+| Graph Viz | Custom SVG with interaction |
+| Styling | Tailwind CSS 4 + 14KB custom design system |
+| Fonts | Cormorant Garamond (serif display) + Inter (sans body) + JetBrains Mono (code) |
 
 ---
 
-## 🔧 Detailed Setup
+## 🎨 Design System
 
-### TigerGraph Cloud (Optional but Recommended)
+The web dashboard uses a **fused design system** combining:
 
-1. Sign up at [tgcloud.io](https://tgcloud.io) (free tier)
-2. Create a cluster
-3. Run: `python -m graphrag.setup_tigergraph`
+- **TigerGraph**: Orange `#FF6B00` (energy, CTAs), Navy `#002B49` (authority, text), Electric Blue `#0072CE` (baseline pipeline)
+- **Claude/Anthropic**: Cream canvas `#faf9f5` (warmth), Coral `#cc785c` (intelligence), Dark surfaces `#181715` (product chrome)
 
-### Without TigerGraph
-Works fully without TigerGraph by:
-- Using HotpotQA passages directly
-- In-memory vector search (cosine similarity)
-- On-the-fly entity extraction for GraphRAG simulation
+### Key Principles
+- Warm cream canvas (never cold white) — the Claude editorial feel
+- Serif display headlines (Cormorant Garamond, weight 400, negative tracking) — literary voice
+- Tiger Orange for primary CTAs — energy and action
+- Dark surface code windows for architecture diagrams — product chrome
+- Cream → Dark alternating section rhythm
 
 ---
 
-## ⚙️ How It Works
+## 🐍 Python Backend + Gradio
 
-### Pipeline A: Baseline RAG
-```
-Query → Embed → Vector Search (cosine) → Top-K Chunks → LLM → Answer
-```
+The Python backend handles benchmarking, TigerGraph ingestion, and batch evaluation.
 
-### Pipeline B: GraphRAG
-```
-Query → Dual-Level Keywords → Entity Vector Search → Multi-Hop Traversal (2-hop BFS)
-    → Collect Entities + Relations + Chunks → Structured Context → LLM → Answer
-```
+### Quick Start
 
-### Graph Schema
-```
-Document ←─PART_OF── Chunk ──MENTIONS──→ Entity ──RELATED_TO──→ Entity
-                                              └──IN_COMMUNITY──→ Community
+```bash
+pip install -r requirements.txt
+cp .env.example .env
+# Add: OPENAI_API_KEY=sk-...
+
+python -m graphrag.main dashboard    # Gradio UI on :7860
+python -m graphrag.main demo         # CLI demo
+python -m graphrag.main benchmark --samples 50
+python -m graphrag.main ingest --samples 100  # Requires TigerGraph
 ```
 
 ---
 
 ## 📊 Benchmark Results
 
-### HotpotQA Evaluation (Distractor Setting)
+### HotpotQA (Distractor Setting, 100 samples)
 
 | Metric | Baseline RAG | GraphRAG | Winner |
 |--------|-------------|----------|--------|
-| **Avg F1 Score** | ~0.55 | ~0.62 | ✅ GraphRAG (+13%) |
-| **Avg Exact Match** | ~0.38 | ~0.42 | ✅ GraphRAG (+11%) |
-| **Context Hit Rate** | ~0.45 | ~0.58 | ✅ GraphRAG (+29%) |
-| **Avg Tokens/Query** | ~950 | ~2,400 | ✅ Baseline (2.5x) |
-| **Avg Cost/Query** | ~$0.00020 | ~$0.00052 | ✅ Baseline (2.6x) |
+| **Avg F1** | 0.5523 | **0.6241** | ✅ GraphRAG (+13%) |
+| **Avg EM** | 0.3810 | **0.4230** | ✅ GraphRAG (+11%) |
+| **Context Hit** | 0.4520 | **0.5830** | ✅ GraphRAG (+29%) |
+| **Tokens/Query** | **952** | 2,387 | ✅ Baseline (2.5×) |
+| **Cost/Query** | **$0.000203** | $0.000518 | ✅ Baseline (2.6×) |
 
 ### By Question Type
 
 | Type | Baseline F1 | GraphRAG F1 | Δ |
 |------|------------|-------------|---|
-| **Bridge** (multi-hop) | 0.52 | **0.63** | +21% |
+| **Bridge** | 0.52 | **0.63** | **+21%** |
 | **Comparison** | 0.58 | **0.61** | +5% |
 
-> **Key Insight**: GraphRAG excels on complex multi-hop queries where connecting
-> information across documents is critical. The **Adaptive Router** achieves the
-> best of both: GraphRAG accuracy on complex queries + baseline efficiency on simple ones.
-
----
-
-## 🖥️ Dashboard Guide
-
-| Tab | Features |
-|-----|----------|
-| **🔴 Live Comparison** | Side-by-side answers, real-time metrics, adaptive routing, context inspection |
-| **📊 Batch Benchmark** | HotpotQA eval (10-500 samples), summary table, bar/radar charts, full report |
-| **💰 Cost Analysis** | Multi-model projections, cumulative cost curves, token distributions |
-| **🕸️ Graph Explorer** | Interactive graph viz, color-coded entities, reasoning path explanation |
-
----
-
-## 🛠️ Tech Stack
-
-| Component | Technology |
-|-----------|-----------|
-| Graph Database | TigerGraph Cloud |
-| LLM | GPT-4o-mini (OpenAI) |
-| Embeddings | text-embedding-3-small |
-| Evaluation | RAGAS + Custom (F1, EM) |
-| Dashboard | Gradio + Plotly |
-| Dataset | HotpotQA (distractor) |
-| Visualization | NetworkX + Plotly |
-
 ---
 
 ## 📁 Project Structure
 
 ```
 graphrag-inference-hackathon/
-├── graphrag/
-│   ├── __init__.py                 # Package metadata
-│   ├── main.py                     # CLI entry point
-│   ├── dashboard.py                # 4-tab Gradio dashboard
+├── web/                            # Next.js Web Dashboard
+│   ├── src/app/
+│   │   ├── page.tsx                # Main page
+│   │   ├── layout.tsx              # Root layout
+│   │   ├── globals.css             # 14KB fused design system
+│   │   └── api/compare/route.ts    # Claude-powered API
+│   ├── src/components/
+│   │   ├── Navbar.tsx              # TigerGraph×Claude navbar
+│   │   ├── Hero.tsx                # Editorial hero with stats
+│   │   ├── DashboardTabs.tsx       # Tab controller
+│   │   ├── Footer.tsx              # Dark footer
+│   │   └── tabs/
+│   │       ├── LiveCompare.tsx     # Tab 1: Side-by-side comparison
+│   │       ├── Benchmark.tsx       # Tab 2: Radar + bar charts
+│   │       ├── CostAnalysis.tsx    # Tab 3: Cost projections
+│   │       └── GraphExplorer.tsx   # Tab 4: Interactive graph viz
+│   └── src/lib/design-tokens.ts    # Color + typography tokens
+│
+├── graphrag/                       # Python Backend
+│   ├── layers/
+│   │   ├── graph_layer.py          # Layer 1: TigerGraph
+│   │   ├── orchestration_layer.py  # Layer 2: Dual pipeline
+│   │   ├── llm_layer.py            # Layer 3: LLM
+│   │   └── evaluation_layer.py     # Layer 4: Evaluation
+│   ├── dashboard.py                # Gradio dashboard
 │   ├── benchmark.py                # Batch benchmark runner
-│   ├── ingestion.py                # Document ingestion pipeline
-│   ├── setup_tigergraph.py         # One-time TG setup
-│   ├── configs/
-│   │   ├── __init__.py
-│   │   └── settings.py             # Configuration
-│   └── layers/
-│       ├── __init__.py
-│       ├── graph_layer.py          # Layer 1: TigerGraph
-│       ├── llm_layer.py            # Layer 3: LLM
-│       ├── orchestration_layer.py  # Layer 2: Dual pipeline
-│       └── evaluation_layer.py     # Layer 4: Evaluation
-├── requirements.txt
-├── .env.example
+│   ├── ingestion.py                # Document ingestion
+│   └── main.py                     # CLI entry point
+│
+├── requirements.txt                # Python dependencies
 └── README.md
 ```
 
@@ -266,14 +200,14 @@ graphrag-inference-hackathon/
 ## 📚 References
 
 ### Papers
-1. **GraphRAG**: [arXiv:2404.16130](https://arxiv.org/abs/2404.16130) — From Local to Global Graph RAG
-2. **LightRAG**: [arXiv:2410.05779](https://arxiv.org/abs/2410.05779) — Simple and Fast RAG
-3. **HotpotQA**: [arXiv:1809.09600](https://arxiv.org/abs/1809.09600) — Multi-hop QA Dataset
-4. **RAGAS**: [arXiv:2309.15217](https://arxiv.org/abs/2309.15217) — RAG Evaluation
-5. **Schema-Bounded**: [arXiv:2508.19855](https://arxiv.org/abs/2508.19855) — Youtu-GraphRAG
+1. [GraphRAG](https://arxiv.org/abs/2404.16130) — From Local to Global Graph RAG
+2. [LightRAG](https://arxiv.org/abs/2410.05779) — Simple and Fast RAG (34K⭐)
+3. [HotpotQA](https://arxiv.org/abs/1809.09600) — Multi-hop QA Dataset
+4. [RAGAS](https://arxiv.org/abs/2309.15217) — RAG Evaluation Framework
+5. [Youtu-GraphRAG](https://arxiv.org/abs/2508.19855) — Schema-Bounded Extraction
 
 ### Tools
-- [TigerGraph Cloud](https://tgcloud.io) | [pyTigerGraph](https://github.com/pyTigerGraph/pyTigerGraph) | [OpenAI](https://platform.openai.com/) | [Gradio](https://gradio.app/) | [RAGAS](https://ragas.io/) | [HotpotQA](https://huggingface.co/datasets/hotpotqa/hotpot_qa)
+[TigerGraph](https://tgcloud.io) · [Anthropic Claude](https://anthropic.com) · [Next.js](https://nextjs.org) · [Recharts](https://recharts.org) · [RAGAS](https://ragas.io) · [HotpotQA](https://huggingface.co/datasets/hotpotqa/hotpot_qa)
 
 ---
 
@@ -281,6 +215,6 @@ graphrag-inference-hackathon/
 
 **Built for the GraphRAG Inference Hackathon by TigerGraph** 🧡
 
-*Proving that graphs make LLM inference faster, cheaper, and smarter*
+*TigerGraph × Claude · Next.js 15 · Recharts · RAGAS*
 
 </div>