Semiconductor Component RAG Search

# 🚀 Node.js Frontend - Complete Guide ## ✨ Node.js Frontend Created! A beautiful Node.js/Express frontend has been created that connects to your FastAPI backend! ## 📋 Architecture ``` Browser (Port 3000) ↓ Node.js/Express Frontend ↓ FastAPI Backend (Port 8001) ↓ ChromaDB + RAG Pipeline ``` ## 🚀 Quick Start ### 1. Install Dependencies ```bash cd frontend npm install ``` ### 2. Start Frontend Server ```bash npm start ``` Or for development with auto-reload: ```bash npm run dev ``` ### 3. Make Sure Backend is Running In another terminal: ```bash cd .. # Go back to project root python main.py ``` ### 4. Access the UI **Open in your browser:** ``` http://localhost:3000 ``` ## 🎨 Features ### Frontend Features - ✅ **Node.js/Express Server** - Proxy to backend - ✅ **Beautiful UI** - Modern dark theme design - ✅ **File Upload** - Drag & drop Excel files - ✅ **Question Answering** - Interactive Q&A interface - ✅ **Real-time Status** - Connection indicators - ✅ **Toast Notifications** - User feedback - ✅ **Responsive Design** - Works on all devices ### Backend Integration - ✅ **Health Check** - Proxies `/api/health` to backend - ✅ **Collection Info** - Proxies `/api/info` to backend - ✅ **File Upload** - Proxies `/api/upload` to backend - ✅ **Question Answering** - Proxies `/api/ask` to backend ## 📁 Project Structure ``` frontend/ ├── server.js # Express server (proxy) ├── package.json # Node.js dependencies ├── .env # Configuration ├── README.md # Frontend documentation ├── .gitignore # Git ignore rules ├── public/ # Static files │ ├── index.html # Main UI page │ ├── styles.css # Beautiful styling │ └── script.js # Frontend logic └── uploads/ # Temporary uploads (auto-cleaned) ``` ## 🔧 Configuration Edit `frontend/.env`: ```env PORT=3000 BACKEND_URL=http://localhost:8001 ``` ## 🎯 Usage ### Start Both Servers **Terminal 1 (Backend):** ```bash cd C:\Users\user\Downloads\MCP2 .\venv\Scripts\python.exe main.py ``` **Terminal 2 (Frontend):** ```bash cd C:\Users\user\Downloads\MCP2\frontend npm start ``` ### Access the UI 1. **Open browser**: http://localhost:3000 2. **Upload file**: Drag & drop Excel file 3. **Ask questions**: Type question or click quick buttons 4. **View answers**: See formatted answers with context ## 📊 API Endpoints The frontend proxies these to the backend: | Frontend Endpoint | Backend Endpoint | Method | Description | |-------------------|------------------|--------|-------------| | `/api/health` | `/health` | GET | Health check | | `/api/info` | `/info` | GET | Collection info | | `/api/upload` | `/upload` | POST | Upload Excel | | `/api/ask` | `/ask` | POST | Ask questions | ## 🎨 UI Features - **Drag & Drop Upload** - Easy file upload - **Quick Question Buttons** - Pre-defined questions - **Formatted Answers** - Clean answer display - **Context Visualization** - Retrieved context shown - **Copy to Clipboard** - Easy answer copying - **Status Indicators** - Connection status - **Toast Notifications** - User feedback - **Loading Overlays** - Visual feedback ## 💡 Example Usage 1. **Open**: http://localhost:3000 2. **Upload**: Drag `examples/semiconductor_components.xlsx` to upload area 3. **Ask**: Click "MOSFET" quick button or type your question 4. **View**: See formatted answer with context 5. **Copy**: Click copy button to copy answer ## 🔧 Development ```bash # Install dependencies cd frontend npm install # Start with auto-reload (requires nodemon) npm run dev # Start production npm start ``` ## 📝 Dependencies - **express**: Web server - **axios**: HTTP client for backend communication - **multer**: File upload handling - **cors**: CORS middleware - **dotenv**: Environment variables - **nodemon** (dev): Auto-reload for development ## ✅ Status **Frontend**: Node.js/Express server **Backend**: FastAPI server on port 8001 **UI**: Beautiful modern interface **Integration**: Fully connected ## 🚀 Ready! **Start frontend**: `cd frontend && npm start` **Access UI**: http://localhost:3000 **Make sure backend is running**: `python main.py` **Enjoy the beautiful Node.js frontend!** 🎉