dgx-spark-playbooks/nvidia/txt2kg/assets/frontend
Santosh Bhavani 3c39506b06 Fix query mode grouping in performance metrics
- Add queryMode field to QueryLogSummary interface
- Update getQueryLogs to group by both query AND queryMode
- Use composite key (query|||queryMode) for proper separation
- Enables separate tracking of Pure RAG vs Graph Search queries

Previously, queries with the same text but different modes were
merged together, causing metrics to only show one aggregate value.
Now each mode's performance is tracked independently.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-25 14:10:37 -07:00
..
app Add debug logging and minor improvements 2025-10-25 13:49:14 -07:00
components Add debug logging and minor improvements 2025-10-25 13:49:14 -07:00
contexts Add configurable NVIDIA model support 2025-10-24 19:45:36 -07:00
hooks chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
lib Fix query mode grouping in performance metrics 2025-10-25 14:10:37 -07:00
public chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
styles chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
types chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
utils chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
components.json chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
next.config.mjs Optimize Docker build with multi-stage caching 2025-10-25 13:48:36 -07:00
next.env.d.ts chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
package.json Improve Pure RAG UI and add query mode tracking 2025-10-25 10:33:48 -07:00
postcss.config.mjs chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
README.md chore: Regenerate all playbooks 2025-10-10 18:45:20 +00:00
tailwind.config.ts chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00
tsconfig.json chore: Regenerate all playbooks 2025-10-06 17:05:41 +00:00

Frontend Application

This directory contains the Next.js frontend application for the txt2kg project.

Structure

  • app/: Next.js 15 app directory with pages and API routes
    • API routes for LLM providers (Ollama, vLLM, NVIDIA API)
    • Triple extraction and graph query endpoints
    • Settings and health check endpoints
  • components/: React 19 components
    • Graph visualization (Three.js WebGPU)
    • PyGraphistry integration for GPU-accelerated rendering
    • RAG query interface
    • Document upload and processing
  • contexts/: React context providers for state management
  • hooks/: Custom React hooks
  • lib/: Utility functions and shared logic
    • LLM service (Ollama, vLLM, NVIDIA API integration)
    • Graph database services (ArangoDB, Neo4j)
    • Pinecone vector database integration
    • RAG service for knowledge graph querying
  • public/: Static assets
  • types/: TypeScript type definitions for graph data structures

Technology Stack

  • Next.js 15: React framework with App Router
  • React 19: Latest React with improved concurrent features
  • TypeScript: Type-safe development
  • Tailwind CSS: Utility-first styling
  • Three.js: WebGL/WebGPU 3D graph visualization
  • D3.js: Data-driven visualizations
  • LangChain: LLM orchestration and chaining

Development

To start the development server:

cd frontend
npm install
npm run dev

Or use the start script from project root:

./start.sh --dev-frontend

The development server will run on http://localhost:3000

Building for Production

cd frontend
npm run build
npm start

Or use Docker (recommended):

# From project root
./start.sh

The production app will run on http://localhost:3001

Environment Variables

Required environment variables are configured in docker-compose files:

  • ARANGODB_URL: ArangoDB connection URL
  • OLLAMA_BASE_URL: Ollama API endpoint
  • VLLM_BASE_URL: vLLM API endpoint (optional)
  • NVIDIA_API_KEY: NVIDIA API key (optional)
  • PINECONE_HOST: Local Pinecone host (optional)
  • SENTENCE_TRANSFORMER_URL: Embeddings service URL (optional)

Features

  • Knowledge Graph Extraction: Extract triples from text using LLMs
  • Graph Visualization: Interactive 3D visualization with Three.js WebGPU
  • RAG Queries: Query knowledge graphs with retrieval-augmented generation
  • Multiple LLM Providers: Support for Ollama, vLLM, and NVIDIA API
  • GPU-Accelerated Rendering: Optional PyGraphistry integration for large graphs
  • Vector Search: Pinecone integration for semantic search