Build Production-Ready Next.js Frontend for NeuraX RAG System

backend/requirements-api.txt

@@ -0,0 +1,8 @@
+# Backend API Server Requirements
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+python-multipart==0.0.6
+pydantic==2.5.0
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+aiofiles==23.2.0

neurax-frontend/.env.example

@@ -0,0 +1,28 @@
+# Environment variables for NeuraX Frontend
+# Copy this file to .env.local and configure as needed
+
+# API Configuration
+NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_PUBLIC_WS_URL=ws://localhost:8000
+NEXT_PUBLIC_LM_STUDIO_URL=http://localhost:1234
+
+# File Upload Settings
+NEXT_PUBLIC_MAX_FILE_SIZE=104857600
+NEXT_PUBLIC_ALLOWED_FILE_TYPES=.pdf,.docx,.doc,.txt,.jpg,.png,.mp3,.wav,.m4a,.flac,.ogg,.bmp,.tiff,.webp
+
+# Feature Flags
+NEXT_PUBLIC_ENABLE_ANALYTICS=true
+NEXT_PUBLIC_ENABLE_DARK_MODE=true
+NEXT_PUBLIC_ENABLE_VOICE_INPUT=true
+
+# Query Settings
+NEXT_PUBLIC_DEFAULT_SIMILARITY_THRESHOLD=0.5
+NEXT_PUBLIC_MAX_QUERY_HISTORY=50
+
+# Development Settings
+NEXT_PUBLIC_DEBUG_MODE=false
+NEXT_PUBLIC_LOG_LEVEL=info
+
+# Optional: Custom model configurations
+# NEXT_PUBLIC_CUSTOM_MODELS_PATH=/path/to/models
+# NEXT_PUBLIC_ENABLE_EXPERIMENTAL_FEATURES=false

neurax-frontend/.env.local

@@ -0,0 +1,11 @@
+# NeuraX Frontend Environment Variables
+NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_PUBLIC_WS_URL=ws://localhost:8000
+NEXT_PUBLIC_LM_STUDIO_URL=http://localhost:1234
+NEXT_PUBLIC_MAX_FILE_SIZE=104857600
+NEXT_PUBLIC_ALLOWED_FILE_TYPES=.pdf,.docx,.doc,.txt,.jpg,.png,.mp3,.wav,.m4a,.flac,.ogg,.bmp,.tiff,.webp
+NEXT_PUBLIC_ENABLE_ANALYTICS=true
+NEXT_PUBLIC_ENABLE_DARK_MODE=true
+NEXT_PUBLIC_DEFAULT_SIMILARITY_THRESHOLD=0.5
+NEXT_PUBLIC_MAX_QUERY_HISTORY=50
+NEXT_PUBLIC_ENABLE_VOICE_INPUT=true

neurax-frontend/Dockerfile

@@ -0,0 +1,62 @@
+# Use the official Node.js 18 image
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci --only=production && npm cache clean --force
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

neurax-frontend/app/layout.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { Toaster } from 'react-hot-toast'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'NeuraX - Multimodal RAG System',
+  description: 'Secure, offline multimodal retrieval-augmented generation system with document intelligence and analytics.',
+  keywords: 'RAG, multimodal, document intelligence, AI, security, offline',
+  authors: [{ name: 'NeuraX Team' }],
+  viewport: 'width=device-width, initial-scale=1',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <div className="relative flex min-h-screen flex-col">
+          {children}
+        </div>
+        <Toaster
+          position="top-right"
+          toastOptions={{
+            duration: 4000,
+            style: {
+              background: 'hsl(var(--background))',
+              color: 'hsl(var(--foreground))',
+              border: '1px solid hsl(var(--border))',
+            },
+            success: {
+              className: 'toast-success',
+            },
+            error: {
+              className: 'toast-error',
+            },
+            loading: {
+              className: 'toast-info',
+            },
+          }}
+        />
+      </body>
+    </html>
+  )
+}

neurax-frontend/app/page.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Header } from '@/components/common/Header'
+import { FileUploader } from '@/components/upload/FileUploader'
+import { QueryInterface } from '@/components/query/QueryInterface'
+import { ResultsDisplay } from '@/components/results/ResultsDisplay'
+import { AnalyticsDashboard } from '@/components/analytics/AnalyticsDashboard'
+import { QueryHistory } from '@/components/query/QueryHistory'
+import { Settings } from '@/components/common/Settings'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { FileText, Search, BarChart3, History, Settings as SettingsIcon, Upload } from 'lucide-react'
+import type { Query, SearchResult, FileUpload } from '@/types'
+
+export default function HomePage() {
+  const [activeTab, setActiveTab] = useState<'query' | 'upload' | 'analytics' | 'history' | 'settings'>('query')
+  const [currentQuery, setCurrentQuery] = useState<Query | null>(null)
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+  const [uploadedFiles, setUploadedFiles] = useState<FileUpload[]>([])
+
+  const handleSearch = useCallback((query: Query) => {
+    setCurrentQuery(query)
+    // Search results will be set by the QueryInterface component
+  }, [])
+
+  const handleSearchResults = useCallback((results: SearchResult[]) => {
+    setSearchResults(results)
+  }, [])
+
+  const handleFileUpload = useCallback((files: FileUpload[]) => {
+    setUploadedFiles(prev => [...prev, ...files])
+  }, [])
+
+  const renderActiveTab = () => {
+    switch (activeTab) {
+      case 'upload':
+        return (
+          <FileUploader
+            onFileUpload={handleFileUpload}
+            uploadedFiles={uploadedFiles}
+          />
+        )
+      case 'analytics':
+        return <AnalyticsDashboard />
+      case 'history':
+        return <QueryHistory />
+      case 'settings':
+        return <Settings />
+      case 'query':
+      default:
+        return (
+          <div className="space-y-6">
+            <QueryInterface
+              onSearch={handleSearch}
+              onResults={handleSearchResults}
+              uploadedFiles={uploadedFiles}
+            />
+            {searchResults.length > 0 && (
+              <ResultsDisplay
+                query={currentQuery}
+                results={searchResults}
+              />
+            )}
+          </div>
+        )
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header
+        onSearch={() => setActiveTab('query')}
+        onUpload={() => setActiveTab('upload')}
+        onAnalytics={() => setActiveTab('analytics')}
+        onHistory={() => setActiveTab('history')}
+        onSettings={() => setActiveTab('settings')}
+      />
+
+      <main className="container mx-auto px-4 py-6">
+        {/* Tab Navigation */}
+        <div className="mb-6">
+          <div className="flex space-x-1 rounded-lg bg-muted p-1">
+            <Button
+              variant={activeTab === 'query' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setActiveTab('query')}
+              className="gap-2"
+            >
+              <Search className="h-4 w-4" />
+              Query & Search
+            </Button>
+            <Button
+              variant={activeTab === 'upload' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setActiveTab('upload')}
+              className="gap-2"
+            >
+              <Upload className="h-4 w-4" />
+              File Upload
+            </Button>
+            <Button
+              variant={activeTab === 'analytics' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setActiveTab('analytics')}
+              className="gap-2"
+            >
+              <BarChart3 className="h-4 w-4" />
+              Analytics
+            </Button>
+            <Button
+              variant={activeTab === 'history' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setActiveTab('history')}
+              className="gap-2"
+            >
+              <History className="h-4 w-4" />
+              History
+            </Button>
+            <Button
+              variant={activeTab === 'settings' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setActiveTab('settings')}
+              className="gap-2"
+            >
+              <SettingsIcon className="h-4 w-4" />
+              Settings
+            </Button>
+          </div>
+        </div>
+
+        {/* Tab Content */}
+        <div className="animate-fade-in">
+          {renderActiveTab()}
+        </div>
+
+        {/* Quick Stats Footer */}
+        {activeTab === 'query' && (
+          <Card className="mt-8">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <div className="flex items-center space-x-4">
+                  <div className="flex items-center space-x-1">
+                    <div className="h-2 w-2 bg-green-500 rounded-full" />
+                    <span>{uploadedFiles.length} files uploaded</span>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <div className="h-2 w-2 bg-blue-500 rounded-full" />
+                    <span>{searchResults.length} results found</span>
+                  </div>
+                </div>
+                <div>
+                  System Status: Online
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </main>
+    </div>
+  )
+}