sarman/dgx-spark-playbooks
1
0
Fork 0
mirror of https://github.com/NVIDIA/dgx-spark-playbooks.git synced 2026-04-26 03:43:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(component): add LLM selector to RAG query interface

Browse Source 
- Integrate LLMSelectorCompact into RAG query component
- Make query mode cards more compact to accommodate LLM selector
- Update styling for better space utilization
- Add LLM selection section with descriptive label
This commit is contained in:
Santosh Bhavani 2025-10-19 19:57:15 -07:00
parent db1e7760f6
commit 1bb48b9818
1 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
nvidia/txt2kg/assets/frontend/components/rag-query.tsx
View File

@ -1,6 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Triple } from "@/types/graph"; import { Triple } from "@/types/graph";
import { Search as SearchIcon, Zap, Database, Cpu } from "lucide-react"; import { Search as SearchIcon, Zap, Database, Cpu } from "lucide-react";
import { LLMSelectorCompact } from "./llm-selector-compact";
interface RagQueryProps { interface RagQueryProps {
onQuerySubmit: (query: string, params: RagParams) => Promise<void>; onQuerySubmit: (query: string, params: RagParams) => Promise<void>;
@ -124,14 +125,14 @@ export function RagQuery({
</div> </div>
{/* Query Type Selection */} {/* Query Type Selection */}
<div className="mb-6"> <div className="mb-5">
<h3 className="text-sm font-semibold text-foreground mb-4">Select Query Type</h3> <h3 className="text-xs font-semibold text-foreground mb-3">Select Query Type</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<button <button
type="button" type="button"
onClick={() => handleQueryModeChange('pure-rag')} onClick={() => handleQueryModeChange('pure-rag')}
disabled={!vectorEnabled} disabled={!vectorEnabled}
className={`relative flex flex-col items-center p-4 border rounded-xl transition-all duration-200 hover:shadow-md ${ className={`relative flex flex-col items-center p-3 border rounded-lg transition-all duration-200 hover:shadow-md ${
queryMode === 'pure-rag' queryMode === 'pure-rag'
? 'border-nvidia-green bg-nvidia-green/10 text-nvidia-green shadow-sm' ? 'border-nvidia-green bg-nvidia-green/10 text-nvidia-green shadow-sm'
: vectorEnabled : vectorEnabled
@ -139,36 +140,36 @@ export function RagQuery({
: 'border-border/30 opacity-50 cursor-not-allowed' : 'border-border/30 opacity-50 cursor-not-allowed'
}`} }`}
> >
<div className="w-6 h-6 rounded-md bg-nvidia-green/15 flex items-center justify-center mb-2"> <div className="w-5 h-5 rounded-md bg-nvidia-green/15 flex items-center justify-center mb-1.5">
<Zap className="h-3 w-3 text-nvidia-green" /> <Zap className="h-2.5 w-2.5 text-nvidia-green" />
</div> </div>
<span className="font-semibold">Pure RAG</span> <span className="text-sm font-semibold">Pure RAG</span>
<span className="text-xs mt-1 text-center text-muted-foreground"> <span className="text-[10px] mt-0.5 text-center text-muted-foreground leading-tight">
Pinecone + LangChain without graph database Pinecone + LangChain
</span> </span>
{queryMode === 'pure-rag' && ( {queryMode === 'pure-rag' && (
<div className="absolute top-3 right-3 w-2 h-2 bg-nvidia-green rounded-full"></div> <div className="absolute top-2 right-2 w-1.5 h-1.5 bg-nvidia-green rounded-full"></div>
)} )}
</button> </button>
<button <button
type="button" type="button"
onClick={() => handleQueryModeChange('traditional')} onClick={() => handleQueryModeChange('traditional')}
className={`relative flex flex-col items-center p-4 border rounded-xl transition-all duration-200 hover:shadow-md ${ className={`relative flex flex-col items-center p-3 border rounded-lg transition-all duration-200 hover:shadow-md ${
queryMode === 'traditional' queryMode === 'traditional'
? 'border-nvidia-green bg-nvidia-green/10 text-nvidia-green shadow-sm' ? 'border-nvidia-green bg-nvidia-green/10 text-nvidia-green shadow-sm'
: 'border-border/40 hover:border-border/60 hover:bg-muted/20' : 'border-border/40 hover:border-border/60 hover:bg-muted/20'
}`} }`}
> >
<div className="w-6 h-6 rounded-md bg-nvidia-green/15 flex items-center justify-center mb-2"> <div className="w-5 h-5 rounded-md bg-nvidia-green/15 flex items-center justify-center mb-1.5">
<Database className="h-3 w-3 text-nvidia-green" /> <Database className="h-2.5 w-2.5 text-nvidia-green" />
</div> </div>
<span className="font-semibold">Traditional Graph</span> <span className="text-sm font-semibold">Traditional Graph</span>
<span className="text-xs mt-1 text-center text-muted-foreground"> <span className="text-[10px] mt-0.5 text-center text-muted-foreground leading-tight">
Uses graph database search only Graph database only
</span> </span>
{queryMode === 'traditional' && ( {queryMode === 'traditional' && (
<div className="absolute top-3 right-3 w-2 h-2 bg-nvidia-green rounded-full"></div> <div className="absolute top-2 right-2 w-1.5 h-1.5 bg-nvidia-green rounded-full"></div>
)} )}
</button> </button>
@ -176,7 +177,7 @@ export function RagQuery({
type="button" type="button"
onClick={() => handleQueryModeChange('vector-search')} onClick={() => handleQueryModeChange('vector-search')}
disabled={!vectorEnabled} disabled={!vectorEnabled}
className={`relative flex flex-col items-center p-4 border rounded-xl transition-all duration-200 hover:shadow-md ${ className={`relative flex flex-col items-center p-3 border rounded-lg transition-all duration-200 hover:shadow-md ${
queryMode === 'vector-search' queryMode === 'vector-search'
? 'border-nvidia-green bg-nvidia-green/10 text-nvidia-green shadow-sm' ? 'border-nvidia-green bg-nvidia-green/10 text-nvidia-green shadow-sm'
: vectorEnabled : vectorEnabled
@ -184,23 +185,32 @@ export function RagQuery({
: 'border-border/30 opacity-50 cursor-not-allowed' : 'border-border/30 opacity-50 cursor-not-allowed'
}`} }`}
> >
<div className="w-6 h-6 rounded-md bg-nvidia-green/15 flex items-center justify-center mb-2"> <div className="w-5 h-5 rounded-md bg-nvidia-green/15 flex items-center justify-center mb-1.5">
<Cpu className="h-3 w-3 text-nvidia-green" /> <Cpu className="h-2.5 w-2.5 text-nvidia-green" />
</div> </div>
<span className="font-semibold">GraphRAG</span> <span className="text-sm font-semibold">GraphRAG</span>
<span className="text-xs mt-1 text-center text-muted-foreground"> <span className="text-[10px] mt-0.5 text-center text-muted-foreground leading-tight">
Uses G-Retriever - RAG + GNN RAG + GNN
</span> </span>
<div className="nvidia-build-tag mt-2"> <div className="text-[9px] px-1.5 py-0.5 bg-nvidia-green/20 text-nvidia-green rounded mt-1 font-medium">
New NEW
</div> </div>
{queryMode === 'vector-search' && ( {queryMode === 'vector-search' && (
<div className="absolute top-3 right-3 w-2 h-2 bg-nvidia-green rounded-full"></div> <div className="absolute top-2 right-2 w-1.5 h-1.5 bg-nvidia-green rounded-full"></div>
)} )}
</button> </button>
</div> </div>
</div> </div>
{/* LLM Selection */}
<div className="mb-6 flex items-center justify-between">
<div>
<h3 className="text-sm font-semibold text-foreground mb-1">LLM Model</h3>
<p className="text-xs text-muted-foreground">Select the LLM for answer generation</p>
</div>
<LLMSelectorCompact />
</div>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div className="flex gap-3"> <div className="flex gap-3">
<div className="relative flex-1"> <div className="relative flex-1">