React Frontend with LLamaIndex Integration - Retrieval-augmented generation (RAG) App for AIPlanet Assignment.
https://aipdfinquire.netlify.app/ - Online Hosted
Keyobe Branch altered for hosting, Main branch for local hosting and development.
https://occasional-tandi-faustogenga-29fab5df.koyeb.app/docs
Video Demostration : https://drive.google.com/file/d/1jCAzgZMkt0bYi8UMVkz5jwiH5wbIRXw-/view?usp=sharing
This project demonstrates the integration of a React frontend with a backend server built with FastAPI. It includes features such as uploading PDF files, querying text from PDFs using AI, and managing chat interactions.
Developed the AI PDF Inquire Fullstack application, integrating a React frontend with a FastAPI backend to enable AI-driven PDF querying. Leveraged LLamaIndex for Retrieval-Augmented Generation (RAG) and natural language processing, allowing users to upload PDFs and interact with the content through AI. The project features a user-friendly chat interface and robust error handling. Hosted the frontend on Netlify and the backend on Koyeb, demonstrating expertise in full-stack development, RESTful APIs, and AI integration.
- Upload PDF files
- Extract text content from uploaded PDFs
- Chat interface with a chatbot
- Clear uploaded PDFs and chat messages
- Clone this repository.
- Navigate to the
react_frontend
directory. - Install dependencies:
npm install
- Start the development server:
npm start
- Navigate to the
backend
directory. - Create a virtual environment:
python -m venv venv
- Activate the virtual environment:
- On Windows:
venv\Scripts\activate
- On macOS and Linux:
source venv/bin/activate
- On Windows:
- Install dependencies:
pip install -r requirements.txt
- Start the FastAPI server:
uvicorn main:app --reload
- Access the React frontend at http://localhost:XXXX.
- Access the FastAPI backend at http://localhost:8000.
- Access the FastAPI docs at http://localhost:8000/docs.
origins = [ "http://localhost:5173", # Your frontend local development URL from Vite # Add more origins as needed ]
react_frontend/ # React frontend directory
├── public/ # Public assets and index.html
├── src/ # React source files
└── ...
my_app/ # FastAPI backend directory
├── main.py # FastAPI application
└── ...
- Upload PDF Endpoint: An endpoint for uploading PDF documents.
- Query Endpoint: An endpoint for receiving questions and returning answers based on the uploaded PDFs.
- Text Extraction: Extract text from uploaded PDFs using a suitable library
- NLP Processing: Use the LLamaIndex to process natural language questions and generate answers based on the PDF content.
- Metadata Storage: Store information about uploaded documents (e.g., filename, upload date) in a database.
- Upload PDF: A page for uploading PDF documents.
- Question Interface: A feature for asking questions on uploaded documents and viewing answers.
- Feedback Mechanisms: Implement feedback mechanisms while uploading documents and processing questions.
- Error Handling: Display error messages for unsupported file types or processing errors.
- Clear Chats: Allows users to delete indexes and documents uploaded in the backend from the interface.