dgx-spark-playbooks/nvidia/txt2kg/assets/frontend

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