Upload 25 files

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "rag-product-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@huggingface/inference": "^2.8.1",
+    "@langchain/community": "^0.3.16",
+    "@langchain/openai": "^0.3.14",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/lab": "^6.0.0-beta.16",
+    "@mui/material": "^6.1.8",
+    "@types/pdf-parse": "^1.1.4",
+    "docx": "^9.0.3",
+    "docx-loader": "^1.0.4",
+    "framer-motion": "^11.11.17",
+    "langchain": "^0.3.6",
+    "next": "15.0.3",
+    "pdf-parse": "^1.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/app/api/qa/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { HfInference } from '@huggingface/inference'
+
+const hf = new HfInference(process.env.HUGGINGFACE_API_KEY)
+
+interface RequestBody {
+  query: string
+  documents: Array<{ text: string }>
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: RequestBody = await request.json()
+    const { query, documents } = body
+
+    // If query is empty, return early
+    if (!query.trim()) {
+      return NextResponse.json({ 
+        answer: 'Please enter a question.' 
+      })
+    }
+
+    // Clean and format the document texts
+    const context = documents
+      .map(doc => {
+        // Clean up the text and ensure proper spacing
+        return doc.text
+          .replace(/\s+/g, ' ')  // Replace multiple spaces with single space
+          .trim()  // Remove leading/trailing whitespace
+      })
+      .filter(text => text.length > 0)
+      .join('\n\n')  // Add clear separation between documents
+
+    // Create a prompt following Llama's instruction format
+    const prompt = `[INST] You are a helpful AI assistant. Please answer the following question based on the provided context. If the answer cannot be found in the context, say "I cannot find the answer in the provided documents." Answer in the same language as the question. Do not include any instruction tags in your response.
+
+Context:
+${context}
+
+Question:
+${query} [/INST]`
+
+    const response = await hf.textGeneration({
+      model: 'nvidia/Llama-3.1-Nemotron-70B-Instruct-HF',
+      inputs: prompt,
+      parameters: {
+        max_new_tokens: 512,
+        temperature: 0.7,
+        top_p: 0.95,
+        repetition_penalty: 1.15,
+        return_full_text: false  // Only return the generated response
+      }
+    })
+
+    const answer = response.generated_text?.trim()
+      .replace(/\[INST\]/g, '')  // Remove [INST] tags
+      .replace(/\[\/INST\]/g, '') // Remove [/INST] tags
+      .trim() || 'Failed to generate an answer'
+
+    return NextResponse.json({ answer })
+  } catch (error) {
+    console.error('Error processing QA request:', error)
+    return NextResponse.json(
+      { error: 'Failed to process request' },
+      { status: 500 }
+    )
+  }
+}

src/app/api/upload/route.ts

@@ -0,0 +1,74 @@
+import { PDFLoader } from "@langchain/community/document_loaders/fs/pdf"
+import { DocxLoader } from "@langchain/community/document_loaders/fs/docx"
+import { NextResponse } from 'next/server'
+import { writeFile } from 'fs/promises'
+import { join } from 'path'
+import { Document } from '@langchain/core/documents'
+import { mkdir } from 'fs/promises'
+
+export async function POST(request: Request) {
+  try {
+    const formData = await request.formData()
+    const files = formData.getAll('files') as File[]
+    
+    if (!files?.length) {
+      return NextResponse.json(
+        { error: 'No files uploaded' },
+        { status: 400 }
+      )
+    }
+
+    // Ensure temp directory exists
+    const tempDir = '/tmp'
+    try {
+      await mkdir(tempDir, { recursive: true })
+    } catch (err) {
+      console.error('Error creating temp directory:', err)
+    }
+
+    const documents: { text: string }[] = []
+
+    for (const file of files) {
+      try {
+        const bytes = await file.arrayBuffer()
+        const buffer = Buffer.from(bytes)
+        const tempPath = join(tempDir, `${Date.now()}-${file.name}`)
+        
+        await writeFile(tempPath, buffer)
+        console.log('File written to:', tempPath)
+
+        let docs: Document[] = []
+        if (file.name.toLowerCase().endsWith('.pdf')) {
+          const loader = new PDFLoader(tempPath)
+          docs = await loader.load()
+        } else if (file.name.toLowerCase().endsWith('.docx')) {
+          const loader = new DocxLoader(tempPath)
+          docs = await loader.load()
+        }
+
+        documents.push(...docs.map(doc => ({ 
+          text: doc.pageContent
+            .replace(/\s+/g, ' ')
+            .trim()
+        })))
+      } catch (err) {
+        console.error(`Error processing file ${file.name}:`, err)
+      }
+    }
+
+    if (documents.length === 0) {
+      return NextResponse.json(
+        { error: 'No documents could be processed' },
+        { status: 400 }
+      )
+    }
+
+    return NextResponse.json({ documents })
+  } catch (error) {
+    console.error('Upload error:', error)
+    return NextResponse.json(
+      { error: 'Failed to process files' },
+      { status: 500 }
+    )
+  }
+}

src/app/globals.css

@@ -0,0 +1,11 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--foreground);
+  background: var(--background);
+}

src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+import Providers from '@/components/Providers'
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "AI Document Assistant",
+  description: "Upload documents and ask questions",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,9 @@
+import QASystem from '@/components/QASystem'
+
+export default function Home() {
+  return (
+    <main>
+      <QASystem />
+    </main>
+  )
+}

src/components/FileUpload.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { useState, useRef } from 'react'
+import { Box, Typography, Button, CircularProgress, Chip, Stack } from '@mui/material'
+import UploadFileIcon from '@mui/icons-material/UploadFile'
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
+
+interface FileUploadProps {
+  onDocumentsLoaded: (documents: { text: string }[]) => void;
+}
+
+export default function FileUpload({ onDocumentsLoaded }: FileUploadProps) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [uploadedFiles, setUploadedFiles] = useState<string[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files?.length) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const formData = new FormData()
+      const fileNames: string[] = []
+      
+      Array.from(files).forEach(file => {
+        formData.append('files', file)
+        fileNames.push(file.name)
+      })
+
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Upload failed')
+      }
+
+      const data = await response.json()
+      setUploadedFiles(prev => [...prev, ...fileNames])
+      onDocumentsLoaded(data.documents)
+    } catch (err) {
+      console.error('Upload error:', err)
+      setError(err instanceof Error ? err.message : 'Failed to process files. Please try again.')
+    } finally {
+      setLoading(false)
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+  }
+
+  return (
+    <Box>
+      <Typography variant="subtitle1" sx={{ mb: 1, color: 'text.primary' }}>
+        Upload Documents
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+        You can upload multiple PDF and Word documents at once
+      </Typography>
+      
+      {uploadedFiles.length > 0 && (
+        <Box sx={{ mb: 3 }}>
+          <Typography variant="body2" sx={{ mb: 1, color: 'text.secondary' }}>
+            {uploadedFiles.length} {uploadedFiles.length === 1 ? 'file' : 'files'} uploaded
+          </Typography>
+          <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1 }}>
+            {uploadedFiles.map((fileName, index) => (
+              <Chip
+                key={index}
+                icon={<InsertDriveFileIcon />}
+                label={fileName}
+                variant="outlined"
+                sx={{
+                  backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                  borderColor: 'rgba(37, 99, 235, 0.2)',
+                  '& .MuiChip-icon': {
+                    color: 'primary.main',
+                  }
+                }}
+              />
+            ))}
+          </Stack>
+        </Box>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        onChange={handleFileUpload}
+        accept=".pdf,.doc,.docx"
+        multiple
+        style={{ display: 'none' }}
+        disabled={loading}
+      />
+      <Button
+        variant="outlined"
+        fullWidth
+        onClick={handleButtonClick}
+        disabled={loading}
+        startIcon={loading ? <CircularProgress size={20} /> : <UploadFileIcon />}
+        sx={{
+          py: 3,
+          borderStyle: 'dashed',
+          borderWidth: 2,
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          '&:hover': {
+            borderColor: 'primary.main',
+            backgroundColor: 'rgba(37, 99, 235, 0.04)',
+          }
+        }}
+      >
+        {loading ? 'Processing...' : 'Click to upload PDF or Word documents'}
+      </Button>
+      {error && (
+        <Typography color="error" sx={{ mt: 2, fontSize: '0.875rem' }}>
+          {error}
+        </Typography>
+      )}
+    </Box>
+  )
+} 

src/components/Providers.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { CacheProvider } from '@emotion/react'
+import createEmotionCache from '@/lib/createEmotionCache'
+import { theme } from '@/theme'
+
+const clientSideEmotionCache = createEmotionCache()
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <CacheProvider value={clientSideEmotionCache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  )
+} 

src/components/QASystem.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import { useState, ComponentType } from 'react'
+import FileUpload from './FileUpload'
+import { 
+  Box, 
+  Container, 
+  Typography, 
+  TextField, 
+  Button, 
+  CircularProgress, 
+  Paper,
+  Fade,
+} from '@mui/material'
+import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer'
+import { motion } from 'framer-motion'
+
+interface Document {
+  text: string
+}
+
+const MotionContainer = motion(Container as any)
+const MotionPaper = motion(Paper as any)
+
+export default function QASystem() {
+  const [query, setQuery] = useState('')
+  const [answer, setAnswer] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [documents, setDocuments] = useState<Document[]>([])
+
+  const handleDocumentsLoaded = (newDocuments: Document[]) => {
+    setDocuments(newDocuments)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (documents.length === 0) {
+      alert('Please upload some documents first')
+      return
+    }
+    
+    setLoading(true)
+
+    try {
+      const response = await fetch('/api/qa', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query, documents }),
+      })
+
+      const data = await response.json()
+      setAnswer(data.answer)
+    } catch (error) {
+      console.error('Error:', error)
+      setAnswer('Failed to get answer. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Box 
+      sx={{ 
+        minHeight: '100vh',
+        background: 'linear-gradient(135deg, #f6f8fc 0%, #f0f4f8 100%)',
+        py: 8
+      }}
+    >
+      <MotionContainer 
+        maxWidth="lg"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <Box sx={{ textAlign: 'center', mb: 8 }}>
+          <Typography
+            variant="h1"
+            component="h1"
+            sx={{
+              mb: 3,
+              fontSize: { xs: '2rem', md: '3rem' },
+              fontWeight: 800,
+              background: 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)',
+              backgroundClip: 'text',
+              WebkitBackgroundClip: 'text',
+              color: 'transparent',
+              textShadow: '0 2px 10px rgba(37, 99, 235, 0.1)',
+            }}
+          >
+            AI Document Assistant
+          </Typography>
+          <Typography 
+            variant="h6" 
+            sx={{ 
+              color: 'text.secondary',
+              maxWidth: '600px',
+              mx: 'auto',
+              lineHeight: 1.6
+            }}
+          >
+            Upload your documents and get instant, AI-powered answers to your questions
+          </Typography>
+        </Box>
+
+        <MotionPaper
+          elevation={0}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          sx={{
+            p: { xs: 3, md: 5 },
+            mb: 4,
+            border: '1px solid',
+            borderColor: 'grey.100',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            backdropFilter: 'blur(10px)',
+            borderRadius: 3,
+            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
+          }}
+        >
+          <FileUpload onDocumentsLoaded={handleDocumentsLoaded} />
+
+          <Box component="form" onSubmit={handleSubmit} sx={{ mt: 4 }}>
+            <TextField
+              fullWidth
+              multiline
+              rows={3}
+              label="What would you like to know?"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              sx={{
+                mb: 3,
+                '& .MuiOutlinedInput-root': {
+                  backgroundColor: 'white',
+                  borderRadius: 2,
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+                }
+              }}
+              variant="outlined"
+            />
+
+            <Button
+              fullWidth
+              type="submit"
+              disabled={loading || documents.length === 0}
+              variant="contained"
+              size="large"
+              sx={{
+                py: 2,
+                background: 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)',
+                borderRadius: 2,
+                transition: 'all 0.3s ease',
+                '&:hover': {
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 6px 20px rgba(37, 99, 235, 0.2)',
+                  background: 'linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%)',
+                },
+                '&:disabled': {
+                  background: '#e2e8f0',
+                  color: '#94a3b8',
+                }
+              }}
+              startIcon={loading ? <CircularProgress size={20} color="inherit" /> : <QuestionAnswerIcon />}
+            >
+              {loading ? 'Processing...' : 'Ask Question'}
+            </Button>
+          </Box>
+        </MotionPaper>
+
+        <Fade in={!!answer}>
+          <MotionPaper
+            elevation={0}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            sx={{
+              p: { xs: 3, md: 5 },
+              border: '1px solid',
+              borderColor: 'grey.100',
+              backgroundColor: 'rgba(255, 255, 255, 0.9)',
+              backdropFilter: 'blur(10px)',
+              borderRadius: 3,
+              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
+            }}
+          >
+            <Typography
+              variant="h6"
+              sx={{
+                mb: 3,
+                fontWeight: 700,
+                color: 'text.primary',
+                fontSize: '1.25rem',
+              }}
+            >
+              Answer
+            </Typography>
+            <Box
+              sx={{
+                p: 4,
+                backgroundColor: '#f8fafc',
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'grey.100',
+              }}
+            >
+              <Typography sx={{ 
+                color: 'text.secondary', 
+                lineHeight: 1.8,
+                fontSize: '1.1rem'
+              }}>
+                {answer}
+              </Typography>
+            </Box>
+          </MotionPaper>
+        </Fade>
+      </MotionContainer>
+    </Box>
+  )
+}

src/lib/createEmotionCache.ts

@@ -0,0 +1,20 @@
+import createCache from '@emotion/cache'
+
+const isBrowser = typeof document !== 'undefined'
+
+export default function createEmotionCache() {
+  let insertionPoint
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]'
+    )
+    insertionPoint = emotionInsertionPoint ?? undefined
+  }
+
+  return createCache({ 
+    key: 'mui-style', 
+    insertionPoint,
+    prepend: true 
+  })
+} 

src/theme.ts

@@ -0,0 +1,78 @@
+import { createTheme } from '@mui/material'
+
+export const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#2563eb',
+      light: '#3b82f6',
+      dark: '#1d4ed8',
+    },
+    secondary: {
+      main: '#7c3aed',
+      light: '#8b5cf6',
+      dark: '#6d28d9',
+    },
+    background: {
+      default: '#f8fafc',
+      paper: '#ffffff',
+    },
+    text: {
+      primary: '#1e293b',
+      secondary: '#475569',
+    },
+    grey: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      800: '#1e293b',
+    }
+  },
+  shape: {
+    borderRadius: 12,
+  },
+  typography: {
+    fontFamily: 'var(--font-geist-sans)',
+    h1: {
+      fontSize: '2.5rem',
+      fontWeight: 700,
+      color: '#1e293b',
+    },
+    h6: {
+      fontSize: '1.125rem',
+      fontWeight: 500,
+      color: '#475569',
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          padding: '12px 24px',
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: 'none',
+          }
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            backgroundColor: '#f8fafc',
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        }
+      }
+    }
+  },
+}) 

tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}