| # Invoice Extractor Frontend | |
| A modern, interactive React frontend for the Invoice Information Extractor application. | |
| ## Features | |
| - 📁 **Multiple File Upload**: Support for images (JPEG, PNG, GIF, WEBP) and PDF files | |
| - 🔄 **PDF Conversion**: Automatic PDF to image conversion in the browser | |
| - 📊 **Batch Processing**: Process multiple files sequentially with real-time progress | |
| - 🎨 **Visual Detection**: Display bounding boxes for detected signatures and stamps | |
| - 📱 **Responsive Design**: Works seamlessly on desktop and mobile devices | |
| - ⚡ **Real-time Updates**: See results as they are processed | |
| ## Installation | |
| 1. Install dependencies: | |
| ```bash | |
| cd frontend | |
| npm install | |
| ``` | |
| 2. Create environment file: | |
| ```bash | |
| cp .env.example .env | |
| ``` | |
| 3. Update `.env` with your backend API URL (default: http://localhost:8000) | |
| ## Development | |
| Start the development server: | |
| ```bash | |
| npm run dev | |
| ``` | |
| The app will be available at `http://localhost:3000` | |
| ## Building for Production | |
| ```bash | |
| npm run build | |
| ``` | |
| The built files will be in the `dist` directory. | |
| ## Preview Production Build | |
| ```bash | |
| npm run preview | |
| ``` | |
| ## Technology Stack | |
| - **React 18** - UI framework | |
| - **Vite** - Build tool and dev server | |
| - **Tailwind CSS** - Styling | |
| - **PDF.js** - PDF rendering and conversion | |
| - **Axios** - HTTP client | |
| - **Lucide React** - Icon library | |
| ## Usage | |
| 1. **Upload Files**: Drag and drop or click to select images/PDFs | |
| 2. **Process**: Click "Process" button to send files to the backend | |
| 3. **View Results**: See extracted text, signatures, and stamps with visual indicators | |
| 4. **Batch Processing**: Multiple files are processed one by one with progress tracking | |
| ## API Integration | |
| The frontend expects the following backend endpoints: | |
| - `POST /process-invoice` - Process a single invoice image | |
| - Request: FormData with 'file' field | |
| - Response: JSON with extracted_text, signature_coords, stamp_coords | |
| ## Features in Detail | |
| ### PDF to Image Conversion | |
| - Converts multi-page PDFs to individual images | |
| - Each page is processed separately | |
| - High-quality conversion using PDF.js | |
| ### Bounding Box Visualization | |
| - Red boxes for signatures | |
| - Blue boxes for stamps | |
| - Drawn directly on the canvas over the image | |
| ### Batch Processing | |
| - Sequential processing to avoid overwhelming the backend | |
| - Real-time progress updates | |
| - Individual error handling per file | |
| ## Customization | |
| ### Styling | |
| Edit `tailwind.config.js` to customize colors and theme. | |
| ### API Endpoint | |
| Update `VITE_API_URL` in `.env` file. | |
| ### Supported File Types | |
| Modify the `accept` attribute in FileUpload.jsx and validation logic. | |
| ## Troubleshooting | |
| **CORS Issues**: Make sure your backend allows requests from the frontend origin. | |
| **PDF Not Loading**: Check that PDF.js worker is properly loaded (check browser console). | |
| **API Errors**: Verify backend is running and accessible at the configured URL. | |