frontend/README.md

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:

cd frontend
npm install

2. Create environment file:

cp .env.example .env

3. Update .env with your backend API URL (default: http://localhost:8000)

Development

Start the development server:

npm run dev

The app will be available at http://localhost:3000

Building for Production

npm run build

The built files will be in the dist directory.

Preview Production Build

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.