Project Description
Nexus.ai is an intelligent document analysis and chat platform that enables users to have natural conversations with their PDF documents using advanced AI. The application leverages Google's Gemini 1.5 Flash model for intelligent responses, providing context-aware understanding of document content for accurate answers.
Technology Stack
Next.js
TypeScript
Tailwind CSS
FastAPI
Python
Google Gemini 1.5 Flash
ChromaDB
LangChain
High-Level Architecture
graph TD
User[User] --- Frontend[Frontend - Next.js]
Frontend --- Backend[Backend - FastAPI]
Backend --- GeminiAI[Google Gemini 1.5 Flash]
Backend --- ChromaDB[ChromaDB Vector Storage]
Backend --- PDFProcessor[PDF Processing]
subgraph "Frontend Components"
UI[UI Components] --- PDFViewer[PDF Viewer]
UI --- ChatInterface[Chat Interface]
UI --- AnnotationTools[Annotation Tools]
end
subgraph "Backend Services"
API[API Endpoints] --- ChatService[Chat Service]
API --- PDFService[PDF Service]
end
Frontend --- Frontend_Components[Frontend Components]
Backend --- Backend_Services[Backend Services]
classDef frontend fill:#d1e7dd,stroke:#20c997;
classDef backend fill:#cfe2ff,stroke:#0d6efd;
classDef ai fill:#e2e3e5,stroke:#6c757d;
classDef db fill:#f8d7da,stroke:#dc3545;
classDef processor fill:#fff3cd,stroke:#ffc107;
class Frontend frontend;
class Backend backend;
class GeminiAI ai;
class ChromaDB db;
class PDFProcessor processor;
Detailed Component Architecture
graph TD
subgraph Frontend
IndexPage["pages/index.tsx"] --> PDFViewerComp["PDFViewerComponent.tsx"]
IndexPage --> Sidebar["Sidebar.tsx"]
PDFViewerComp --> ChatBox["ChatBox.tsx"]
PDFViewerComp --> AnnotationTB["AnnotationToolbar.tsx"]
PDFViewerComp --> DrawingTB["DrawingToolbar.tsx"]
PDFViewerComp --> FormField["FormField.tsx"]
end
subgraph Backend
MainPy["main.py"] --> ChatService["services/chat_service.py"]
MainPy --> UploadEndpoint["/upload Endpoint"]
MainPy --> ChatEndpoint["/chat Endpoint"]
MainPy --> PDFEndpoint["/pdf/{filename} Endpoint"]
MainPy --> CompareEndpoint["/compare Endpoint"]
ChatService --> GeminiModel["Gemini AI Model"]
ChatService --> PDFExtraction["PDF Text Extraction"]
ChatService --> TextCache["Text Caching"]
end
IndexPage -.-> MainPy["HTTP Requests"]
ChatBox -.-> ChatEndpoint["POST /chat"]
PDFViewerComp -.-> UploadEndpoint["POST /upload"]
PDFViewerComp -.-> PDFEndpoint["GET /pdf/{filename}"]
classDef frontend fill:#f0f7ff,stroke:#3b82f6;
classDef backend fill:#f0fdf4,stroke:#22c55e;
class Frontend frontend;
class Backend backend;
Project Structure
nexus-ai/
├── backend/ # FastAPI backend
│ ├── main.py # Main application file with API endpoints
│ ├── services/ # Business logic
│ │ └── chat_service.py # Chat service with Gemini AI integration
│ ├── static/ # Static files
│ └── temp/ # Temporary storage for uploaded PDFs
│
├── frontend/ # Next.js frontend
│ ├── components/ # React components
│ │ ├── AnnotationToolbar.tsx # PDF annotation tools
│ │ ├── ChatBox.tsx # Chat interface component
│ │ ├── DrawingToolbar.tsx # Drawing tools for PDF
│ │ ├── PDFViewer.tsx # PDF viewer component
│ │ └── Sidebar.tsx # Sidebar navigation
│ ├── pages/ # Next.js pages
│ │ └── index.tsx # Main application page
│ ├── styles/ # CSS styles
│ └── types/ # TypeScript type definitions
│
└── pdf_chat/ # Additional PDF chat functionality
Data Flow Diagram
sequenceDiagram
participant User
participant Frontend
participant Backend
participant GeminiAI
participant ChromaDB
User->>Frontend: Upload PDF
Frontend->>Backend: POST /upload
Backend->>Backend: Process & Store PDF
Backend->>ChromaDB: Store text vectors
Backend->>Frontend: Return PDF URL
Frontend->>User: Display PDF
User->>Frontend: Send message about PDF
Frontend->>Backend: POST /chat
Backend->>ChromaDB: Retrieve relevant context
Backend->>GeminiAI: Send prompt with context
GeminiAI->>Backend: Return AI response
Backend->>Frontend: Return response
Frontend->>User: Display AI response
Detailed API Endpoints
graph LR
subgraph "FastAPI Backend"
Root["/"] --- RootResponse[Return API Status]
Upload["/upload"] --- ProcessUpload[Process PDF Upload]
Chat["/chat"] --- ProcessChat[Process Chat Message]
GetPDF["/pdf/{filename}"] --- ServePDF[Serve PDF File]
Compare["/compare"] --- ComparePDFs[Compare Two PDFs]
end
ProcessUpload --- SavePDF[Save PDF to temp directory]
ProcessUpload --- ExtractText[Extract Text from PDF]
ProcessUpload --- CacheText[Cache PDF Text]
ProcessUpload --- ReturnURL[Return PDF URL]
ProcessChat --- GetContext[Get PDF Context]
ProcessChat --- SendToAI[Send to Gemini AI]
ProcessChat --- ReturnResponse[Return AI Response]
ServePDF --- CheckCache[Check Text Cache]
ServePDF --- ServeFile[Serve File with Headers]
ComparePDFs --- ExtractBothTexts[Extract Text from Both PDFs]
ComparePDFs --- FindDifferences[Find Text Differences]
ComparePDFs --- ReturnDiffs[Return Differences]
classDef backend fill:#dbeafe,stroke:#3b82f6;
class FastAPI_Backend backend;
Chat Service Implementation
graph TD
subgraph "ChatService"
Init[Initialize] --- ConfigureGemini[Configure Gemini AI]
Init --- SetupCache[Setup PDF Cache]
Init --- InitializeModels[Initialize AI Models]
ExtractText[extract_text_from_pdf] --- CheckCache[Check PDF Cache]
CheckCache -. Cache Hit .-> ReturnCached[Return Cached Text]
CheckCache -. Cache Miss .-> ReadPDF[Read PDF File]
ReadPDF --- ExtractContent[Extract Text Content]
ExtractContent --- CacheResult[Cache Result]
ExtractContent --- ReturnText[Return Text]
ProcessChat[process_chat] --- GetOrCreateSession[Get/Create Chat Session]
GetOrCreateSession -. New Session .-> CreateContext[Create Context with PDF Text]
GetOrCreateSession -. Existing Session .-> ReuseSession[Reuse Existing Session]
CreateContext --- SendInitialContext[Send Initial Context to Model]
ReuseSession --- SendUserMessage[Send User Message to Model]
SendUserMessage --- GetResponse[Get AI Response]
GetResponse --- ReturnToUser[Return Response to User]
end
classDef service fill:#f0fdf4,stroke:#22c55e;
class ChatService service;
PDF Viewer Component Structure
graph TD
subgraph "PDFViewerComponent"
State[Component State] --- PDFState[PDF State]
State --- AnnotationState[Annotation State]
State --- UIState[UI State]
PDFState --- NumPages[numPages]
PDFState --- CurrentPage[pageNumber]
PDFState --- Scale[scale]
PDFState --- Rotation[rotation]
AnnotationState --- DrawingMode[drawingMode]
AnnotationState --- DrawingColor[color]
AnnotationState --- LineWidth[lineWidth]
AnnotationState --- Annotations[annotations]
AnnotationState --- FormFields[formFields]
UIState --- IsFullScreen[isFullScreen]
UIState --- IsChatOpen[isChatOpen]
UIState --- IsTextEditing[isTextEditing]
Handlers[Event Handlers] --- HandleFileUpload[handleFileUpload]
Handlers --- HandleDrawingMode[handleDrawingModeChange]
Handlers --- HandleColorChange[handleColorChange]
Handlers --- HandleWidthChange[handleWidthChange]
Handlers --- HandleDownload[handleDownload]
Canvas[Canvas Operations] --- InitializeCanvas[initializeCanvas]
Canvas --- SetupCanvas[setupCanvas]
Canvas --- UpdateBrushSettings[updateBrushSettings]
Canvas --- SaveAnnotation[saveAnnotation]
Canvas --- LoadAnnotations[loadPageAnnotations]
end
classDef component fill:#f0f7ff,stroke:#3b82f6;
class PDFViewerComponent component;
PDF Processing Flow
graph LR
Upload[Upload PDF] --> Extract[Extract Text]
Extract --> Cache[Cache Text]
Cache --> Vector[Create Vector Embeddings]
Vector --> Store[Store in ChromaDB]
Query[User Query] --> Retrieve[Retrieve Relevant Context]
Retrieve --> Prompt[Create AI Prompt]
Prompt --> Generate[Generate Response]
Generate --> Display[Display to User]
classDef upload fill:#d1e7dd,stroke:#20c997;
classDef query fill:#cfe2ff,stroke:#0d6efd;
classDef display fill:#f8d7da,stroke:#dc3545;
class Upload upload;
class Query query;
class Display display;
PDF Upload and Processing Sequence
sequenceDiagram
participant User
participant Frontend as Frontend (index.tsx)
participant UploadAPI as Backend (/upload)
participant FileSystem as File System
participant TextExtractor as Text Extractor
User->>Frontend: Select PDF file
Frontend->>Frontend: Validate file type
Frontend->>UploadAPI: POST FormData with file
UploadAPI->>UploadAPI: Validate PDF format
UploadAPI->>FileSystem: Save file with timestamp
UploadAPI->>TextExtractor: Extract text from PDF
TextExtractor->>TextExtractor: Process page by page
TextExtractor->>UploadAPI: Return extracted text
UploadAPI->>UploadAPI: Cache text in memory
UploadAPI->>Frontend: Return file URL
Frontend->>User: Display PDF in viewer
Chat Processing Sequence
sequenceDiagram
participant User
participant ChatBox as ChatBox Component
participant ChatAPI as Backend (/chat)
participant ChatService as Chat Service
participant GeminiAI as Gemini AI
User->>ChatBox: Enter message
ChatBox->>ChatBox: Update UI with user message
ChatBox->>ChatAPI: POST message and PDF URL
ChatAPI->>ChatService: Process chat request
alt New Chat Session
ChatService->>ChatService: Extract PDF text
ChatService->>ChatService: Create initial context
ChatService->>GeminiAI: Initialize chat with context
GeminiAI->>ChatService: Return initial response
ChatService->>ChatService: Store chat session
else Existing Chat Session
ChatService->>ChatService: Retrieve existing session
end
ChatService->>GeminiAI: Send user message
GeminiAI->>ChatService: Generate response
ChatService->>ChatAPI: Return AI response
ChatAPI->>ChatBox: Return response data
ChatBox->>User: Display AI response
Annotation Features
graph TD
PDF[PDF Document] --> Tools[Annotation Tools]
Tools --> Drawing[Drawing Tools]
Tools --> Shapes[Shape Tools]
Tools --> Text[Text Tools]
Tools --> Stamps[Stamp Tools]
Drawing --> Pen[Pen]
Drawing --> Highlighter[Highlighter]
Drawing --> Eraser[Eraser]
Shapes --> Rectangle[Rectangle]
Shapes --> Circle[Circle]
Shapes --> Line[Line]
Shapes --> Arrow[Arrow]
Text --> TextBox[Text Box]
Text --> StickyNote[Sticky Note]
Text --> Comment[Comment]
Stamps --> Approved[Approved]
Stamps --> Rejected[Rejected]
Stamps --> Draft[Draft]
Stamps --> Final[Final]
classDef pdf fill:#e2e3e5,stroke:#6c757d;
classDef tools fill:#cfe2ff,stroke:#0d6efd;
class PDF pdf;
class Tools tools;
Drawing Tool Implementation
graph TD
subgraph "DrawingToolbar"
ToolbarUI[Toolbar UI] --> ToolSelection[Tool Selection]
ToolbarUI --> ColorPicker[Color Picker]
ToolbarUI --> WidthSlider[Width Slider]
ToolbarUI --> OpacityControl[Opacity Control]
ToolSelection --> PenTool[Pen Tool]
ToolSelection --> HighlighterTool[Highlighter Tool]
ToolSelection --> EraserTool[Eraser Tool]
ToolSelection --> ShapeTool[Shape Tool]
ToolSelection --> TextTool[Text Tool]
ToolSelection --> StampTool[Stamp Tool]
PenTool --> SetFreeDrawing[Set Free Drawing Mode]
HighlighterTool --> SetHighlighter[Set Highlighter Mode]
EraserTool --> SetEraser[Set Eraser Mode]
ShapeTool --> SetShapeDrawing[Set Shape Drawing Mode]
TextTool --> SetTextMode[Set Text Mode]
StampTool --> SetStampMode[Set Stamp Mode]
end
subgraph "Canvas"
FabricCanvas[Fabric.js Canvas] --> MouseDown[Mouse Down Event]
FabricCanvas --> MouseMove[Mouse Move Event]
FabricCanvas --> MouseUp[Mouse Up Event]
MouseDown --> StartDrawing[Start Drawing Path]
MouseMove --> ContinueDrawing[Continue Drawing Path]
MouseUp --> FinishDrawing[Finish Drawing Path]
FinishDrawing --> SaveAnnotation[Save Annotation]
end
ToolSelection -. Set Tool .-> FabricCanvas
ColorPicker -. Set Color .-> FabricCanvas
WidthSlider -. Set Width .-> FabricCanvas
OpacityControl -. Set Opacity .-> FabricCanvas
classDef toolbar fill:#f0f7ff,stroke:#3b82f6;
classDef canvas fill:#f0fdf4,stroke:#22c55e;
class DrawingToolbar toolbar;
class Canvas canvas;
Form Field Implementation
graph TD
subgraph "FormFieldComponent"
FieldTypes[Field Types] --> TextField[Text Field]
FieldTypes --> CheckboxField[Checkbox Field]
FieldTypes --> RadioField[Radio Field]
FieldTypes --> SignatureField[Signature Field]
FieldProps[Field Props] --> Type[Field Type]
FieldProps --> Position[Position]
FieldProps --> Value[Value]
FieldProps --> OnChange[OnChange Handler]
Rendering[Rendering] --> RenderTextField[Render Text Field]
Rendering --> RenderCheckbox[Render Checkbox]
Rendering --> RenderRadio[Render Radio Button]
Rendering --> RenderSignature[Render Signature Box]
Events[Events] --> HandleChange[Handle Change]
Events --> HandleFocus[Handle Focus]
Events --> HandleBlur[Handle Blur]
end
subgraph "PDFViewerComponent"
FormFields[Form Fields State] --> AddField[Add Field]
FormFields --> UpdateField[Update Field]
FormFields --> RemoveField[Remove Field]
FormFields --> SaveFields[Save Fields]
FieldInteraction[Field Interaction] --> HandleFieldChange[Handle Field Change]
FieldInteraction --> PositionField[Position Field]
end
FormFieldComponent -. Renders .-> PDFViewerComponent
PDFViewerComponent -. Updates .-> FormFieldComponent
classDef formfield fill:#f0f7ff,stroke:#3b82f6;
classDef pdfviewer fill:#f0fdf4,stroke:#22c55e;
class FormFieldComponent formfield;
class PDFViewerComponent pdfviewer;
State Management Flow
graph TD
subgraph "Frontend State"
AppState[App State] --> FileState[File State]
AppState --> UIState[UI State]
AppState --> AnnotationState[Annotation State]
AppState --> ChatState[Chat State]
FileState --> UploadedFile[Uploaded File]
FileState --> PDFUrl[PDF URL]
FileState --> NumPages[Number of Pages]
FileState --> CurrentPage[Current Page]
UIState --> LoadingState[Loading State]
UIState --> ErrorState[Error State]
UIState --> ViewMode[View Mode]
UIState --> ZoomLevel[Zoom Level]
AnnotationState --> DrawingMode[Drawing Mode]
AnnotationState --> SelectedTool[Selected Tool]
AnnotationState --> ToolSettings[Tool Settings]
AnnotationState --> Annotations[Saved Annotations]
ChatState --> Messages[Chat Messages]
ChatState --> IsLoading[Chat Loading]
ChatState --> ChatOpen[Chat Open/Closed]
end
subgraph "Backend State"
ServerState[Server State] --> PDFCache[PDF Cache]
ServerState --> ChatSessions[Chat Sessions]
ServerState --> UploadedFiles[Uploaded Files]
PDFCache --> TextCache[Text Cache]
PDFCache --> VectorCache[Vector Cache]
ChatSessions --> SessionID[Session ID]
ChatSessions --> SessionHistory[Session History]
ChatSessions --> SessionContext[Session Context]
end
FileState -. HTTP Requests .-> ServerState
ChatState -. WebSocket/HTTP .-> ChatSessions
classDef frontend fill:#f0f7ff,stroke:#3b82f6;
classDef backend fill:#f0fdf4,stroke:#22c55e;
class Frontend_State frontend;
class Backend_State backend;
Deployment Architecture
graph TD
subgraph "Client"
Browser[Web Browser]
end
subgraph "Frontend Deployment"
Vercel[Vercel] --> NextJS[Next.js App]
NextJS --> StaticAssets[Static Assets]
NextJS --> ClientSideCode[Client-side Code]
NextJS --> ServerSideProps[Server-side Props]
end
subgraph "Backend Deployment"
Render[Render.com] --> FastAPI[FastAPI App]
FastAPI --> APIEndpoints[API Endpoints]
FastAPI --> PDFStorage[PDF Storage]
FastAPI --> AIIntegration[AI Integration]
end
subgraph "External Services"
GeminiAPI[Google Gemini API]
ChromaDBService[ChromaDB Service]
end
Browser -. HTTPS .-> Vercel
NextJS -. API Calls .-> Render
FastAPI -. AI Requests .-> GeminiAPI
FastAPI -. Vector Storage .-> ChromaDBService
classDef client fill:#f0f7ff,stroke:#3b82f6;
classDef frontend fill:#dbeafe,stroke:#3b82f6;
classDef backend fill:#dcfce7,stroke:#22c55e;
classDef external fill:#fef3c7,stroke:#d97706;
class Client client;
class Frontend_Deployment frontend;
class Backend_Deployment backend;
class External_Services external;
Getting Started
To run the application locally:
- Clone the repository
- Set up the backend:
- Navigate to the backend directory
- Create a virtual environment
- Install dependencies from requirements.txt
- Configure environment variables (GOOGLE_API_KEY)
- Run the server with
uvicorn main:app --reload
- Set up the frontend:
- Navigate to the frontend directory
- Install dependencies with
npm install
- Run the development server with
npm run dev
- Access the application at http://localhost:3000
Conclusion
Nexus.ai is a sophisticated PDF analysis and chat platform that combines modern web technologies with advanced AI capabilities. The application provides an intuitive interface for users to interact with their PDF documents through natural language, making document analysis more accessible and efficient.
The modular architecture allows for easy extension and maintenance, while the use of cutting-edge technologies ensures high performance and a seamless user experience.
