Sync from GitHub: 922d61677657398e61342f3cabff773c13c26de4

.gitignore

@@ -27,6 +27,10 @@ htmlcov/
 .mypy_cache/
 .ipynb_checkpoints/
 
+# Frontend development files
+frontend/node_modules/
+frontend/.env.local
+
 *.md
 !README_git.md
 !README.md

Dockerfile

@@ -2,7 +2,7 @@ FROM python:3.10-slim
 
 WORKDIR /app
 
-# Install system dependencies for OpenCV and other libraries
+# Install system dependencies including Node.js
 RUN apt-get update && apt-get install -y \
     git \
     libgl1 \
@@ -11,6 +11,9 @@ RUN apt-get update && apt-get install -y \
     libxext6 \
     libxrender-dev \
     libgomp1 \
+    curl \
+    && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
+    && apt-get install -y nodejs \
     && rm -rf /var/lib/apt/lists/*
 
 # Copy requirements first for better caching
@@ -19,7 +22,15 @@ COPY requirements.txt .
 # Install Python dependencies
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application files
+# Copy frontend files and build
+COPY frontend/package*.json frontend/
+WORKDIR /app/frontend
+RUN npm install
+COPY frontend/ .
+RUN npm run build
+
+# Copy backend application files
+WORKDIR /app
 COPY config.py .
 COPY model_manager.py .
 COPY inference.py .

README.md

@@ -9,42 +9,164 @@ license: mit
 app_port: 7860
 ---
 
-# Invoice Information Extractor
+# Invoice Information Extractor 🧾
 
-AI-powered REST API for extracting structured information from Indian tractor invoices.
+A complete full-stack application for extracting information from invoices using AI. Features a modern React frontend and powerful FastAPI backend with YOLOv8 and PaddleOCR.
 
-## Features
+## ✨ Features
 
-- 🔍 **Text Extraction:** Dealer name, model name, horse power, asset cost
-- 🖊️ **Signature Detection:** Automatic signature detection with bounding boxes
-- 📋 **Stamp Detection:** Stamp detection with confidence scores
-- 🎯 **Validation:** Smart validation and error correction
-- ⚡ **Fast Processing:** ~3-5 seconds per invoice
+### Frontend (React + Vite)
+- 📁 **Drag-and-drop file upload** with multi-file support
+- 📄 **PDF to Image conversion** (automatically converts multi-page PDFs)
+- 🔄 **Batch processing** with real-time progress tracking
+- 🎨 **Visual detection** of signatures and stamps with bounding boxes
+- 📱 **Responsive design** that works on all devices
+- ⚡ **Fast and modern** UI with Tailwind CSS
 
-## Models
+### Backend (FastAPI + AI Models)
+- 🤖 **YOLOv8 object detection** for signatures and stamps
+- 📝 **PaddleOCR** for text extraction
+- 🚀 **High-performance API** with async support
+- 📊 **Batch processing** capabilities
+- 🔒 **CORS enabled** for frontend integration
+- 📚 **Interactive API docs** at /docs
 
-- **YOLO**: Custom-trained signature/stamp detector
-- **Qwen2.5-VL-7B**: Vision-language model for text extraction (4-bit quantized)
+## 🎯 Quick Start
 
-## API Documentation
+### Option 1: Automated Setup (Windows)
 
-Visit `/docs` for interactive API documentation.
+Run the automated setup script:
+```bash
+setup.bat
+```
+
+Then start both servers:
+```bash
+start.bat
+```
+
+### Option 2: Manual Setup
+
+#### Backend Setup
+```bash
+# Install dependencies
+pip install -r requirements.txt
+
+# Start the server
+python app.py
+```
+Backend runs on: http://localhost:7860
 
-## Quick Start
+#### Frontend Setup
+```bash
+# Navigate to frontend
+cd frontend
+
+# Install dependencies
+npm install
+
+# Create environment file
+cp .env.example .env
+
+# Start development server
+npm run dev
+```
+Frontend runs on: http://localhost:3000
 
-### Python
-```python
-import requests
+## 🖥️ Usage
 
-url = "https://YOUR_USERNAME-invoice-extractor.hf.space/extract"
-files = {"file": open("invoice.png", "rb")}
+1. **Open the application** at http://localhost:3000
+2. **Upload files** by dragging and dropping or clicking to browse
+   - Supports: JPEG, PNG, GIF, WEBP images and PDF files
+3. **Click "Process"** to start extraction
+4. **View results** with:
+   - Extracted text from the invoice
+   - Visual detection of signatures (red boxes)
+   - Visual detection of stamps (blue boxes)
+   - Coordinates and metadata
+
+## 🔌 API Endpoints
+
+### POST /process-invoice
+Process a single invoice image
+
+**Request:**
+```bash
+curl -X POST "http://localhost:7860/process-invoice" \
+  -F "file=@invoice.jpg"
+```
 
-response = requests.post(url, files=files)
-print(response.json())
+**Response:**
+```json
+{
+  "extracted_text": "Invoice details...",
+  "signature_coords": [[x1, y1, x2, y2]],
+  "stamp_coords": [[x1, y1, x2, y2]],
+  "doc_id": "invoice",
+  "processing_time": 2.5
+}
 ```
 
-### cURL
+### GET /docs
+Interactive API documentation (Swagger UI)
+
+### GET /health
+Health check endpoint
+
+## 🛠️ Technology Stack
+
+### Frontend
+- **React 18** - Modern UI library
+- **Vite** - Lightning-fast build tool
+- **Tailwind CSS** - Utility-first CSS
+- **PDF.js** - PDF rendering
+- **Axios** - HTTP client
+
+### Backend
+- **FastAPI** - Modern Python web framework
+- **YOLOv8** - State-of-the-art object detection
+- **PaddleOCR** - Multilingual OCR
+- **Uvicorn** - ASGI server
+
+## 📖 Documentation
+
+- [Setup Guide](SETUP_GUIDE.md) - Detailed setup instructions
+- [Frontend Architecture](frontend/ARCHITECTURE.md) - Frontend technical details
+- [API Documentation](http://localhost:7860/docs) - Interactive API docs (when running)
+
+## 🚀 Deployment
+
+### Hugging Face Spaces
+
+The application is fully configured for deployment to Hugging Face Spaces:
+
+1. **Build frontend**:
+   ```bash
+   build-frontend.bat
+   ```
+
+2. **Push to GitHub** (auto-deploys via GitHub Actions):
+   ```bash
+   git add .
+   git commit -m "Deploy to HF"
+   git push origin main
+   ```
+
+See [HF_DEPLOYMENT_READY.md](HF_DEPLOYMENT_READY.md) and [DEPLOYMENT.md](DEPLOYMENT.md) for detailed instructions.
+
+### Docker
+
 ```bash
-curl -X POST "https://YOUR_USERNAME-invoice-extractor.hf.space/extract" \
-  -F "file=@invoice.png"
+docker build -t invoice-extractor .
+docker run -p 7860:7860 invoice-extractor
 ```
+
+The Dockerfile automatically builds the frontend during the build process.
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+---
+
+**Made with ❤️ using AI and modern web technologies**

app.py

@@ -4,7 +4,8 @@ Provides REST API for invoice processing
 """
 
 from fastapi import FastAPI, File, UploadFile, HTTPException, Form
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from contextlib import asynccontextmanager
 from typing import Optional
@@ -56,10 +57,21 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Mount frontend static files if they exist
+frontend_dist = os.path.join(os.path.dirname(__file__), "frontend", "dist")
+if os.path.exists(frontend_dist):
+    app.mount("/assets", StaticFiles(directory=os.path.join(frontend_dist, "assets")), name="assets")
+    print(f"📂 Serving frontend from: {frontend_dist}")
+
 
 @app.get("/")
 async def root():
-    """Root endpoint - API information"""
+    """Root endpoint - Serve frontend or API information"""
+    frontend_index = os.path.join(os.path.dirname(__file__), "frontend", "dist", "index.html")
+    if os.path.exists(frontend_index):
+        return FileResponse(frontend_index)
+    
+    # Fallback to API information
     return {
         "name": API_TITLE,
         "version": API_VERSION,
@@ -67,6 +79,7 @@ async def root():
         "models_loaded": model_manager.is_loaded(),
         "endpoints": {
             "health": "/health",
+            "process": "/process-invoice (POST)",
             "extract": "/extract (POST)",
             "docs": "/docs"
         }
@@ -184,6 +197,76 @@ async def extract_invoice(
         file.file.close()
 
 
+@app.post("/process-invoice")
+async def process_invoice(
+    file: UploadFile = File(..., description="Invoice image file")
+):
+    """
+    Process a single invoice and return extracted information
+    Simplified endpoint for frontend integration
+    
+    **Parameters:**
+    - **file**: Invoice image file (required)
+    
+    **Returns:**
+    - JSON with extracted_text, signature_coords, stamp_coords
+    """
+    
+    # Validate file type
+    if file.content_type and not file.content_type.startswith("image/"):
+        raise HTTPException(
+            status_code=400,
+            detail="File must be an image"
+        )
+    
+    # Check if models are loaded
+    if not model_manager.is_loaded():
+        raise HTTPException(
+            status_code=503,
+            detail="Models not loaded. Please wait for server initialization."
+        )
+    
+    temp_file = None
+    try:
+        # Save uploaded file to temporary location
+        suffix = os.path.splitext(file.filename)[1] if file.filename else '.jpg'
+        with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as temp:
+            temp_file = temp.name
+            shutil.copyfileobj(file.file, temp)
+        
+        # Use filename as doc_id
+        doc_id = os.path.splitext(file.filename)[0] if file.filename else "invoice"
+        
+        # Process invoice
+        result = InferenceProcessor.process_invoice(temp_file, doc_id)
+        
+        # Return simplified response matching frontend expectations
+        return JSONResponse(content={
+            "extracted_text": result.get("extracted_text", ""),
+            "signature_coords": result.get("signature_coords", []),
+            "stamp_coords": result.get("stamp_coords", []),
+            "doc_id": result.get("doc_id", doc_id),
+            "processing_time": result.get("processing_time_sec", 0)
+        }, media_type="application/json; charset=utf-8")
+        
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Error processing invoice: {str(e)}"
+        )
+    
+    finally:
+        # Clean up temporary file
+        if temp_file and os.path.exists(temp_file):
+            try:
+                os.unlink(temp_file)
+            except:
+                pass
+        
+        # Close uploaded file
+        file.file.close()
+
+
 @app.post("/extract_batch")
 async def extract_batch(
     files: list[UploadFile] = File(..., description="Multiple invoice images")

build-frontend.bat

@@ -0,0 +1,47 @@
+@echo off
+echo ============================================
+echo Building Frontend for Production
+echo ============================================
+echo.
+
+cd frontend
+
+echo [1/2] Installing dependencies...
+call npm install
+if errorlevel 1 (
+    echo ERROR: Failed to install dependencies
+    pause
+    exit /b 1
+)
+echo ✓ Dependencies installed
+echo.
+
+echo [2/2] Building frontend...
+call npm run build
+if errorlevel 1 (
+    echo ERROR: Build failed
+    pause
+    exit /b 1
+)
+echo ✓ Frontend built successfully
+echo.
+
+cd ..
+
+echo ============================================
+echo Build Complete!
+echo ============================================
+echo.
+echo Frontend built to: frontend/dist/
+echo.
+echo Ready to push to Hugging Face!
+echo.
+echo Next steps:
+echo   1. Commit changes: git add . && git commit -m "Build frontend"
+echo   2. Push to GitHub: git push origin main
+echo   3. GitHub Actions will auto-deploy to HF
+echo.
+echo Or push directly to HF:
+echo   git push hf main
+echo ============================================
+pause

build-frontend.sh

@@ -0,0 +1,45 @@
+# Pre-deployment Build Script
+
+echo "============================================"
+echo "Building Frontend for Production"
+echo "============================================"
+echo ""
+
+cd frontend
+
+echo "[1/2] Installing dependencies..."
+npm install
+if [ $? -ne 0 ]; then
+    echo "ERROR: Failed to install dependencies"
+    exit 1
+fi
+echo "✓ Dependencies installed"
+echo ""
+
+echo "[2/2] Building frontend..."
+npm run build
+if [ $? -ne 0 ]; then
+    echo "ERROR: Build failed"
+    exit 1
+fi
+echo "✓ Frontend built successfully"
+echo ""
+
+cd ..
+
+echo "============================================"
+echo "Build Complete!"
+echo "============================================"
+echo ""
+echo "Frontend built to: frontend/dist/"
+echo ""
+echo "Ready to push to Hugging Face!"
+echo ""
+echo "Next steps:"
+echo "  1. Commit changes: git add . && git commit -m 'Build frontend'"
+echo "  2. Push to GitHub: git push origin main"
+echo "  3. GitHub Actions will auto-deploy to HF"
+echo ""
+echo "Or push directly to HF:"
+echo "  git push hf main"
+echo "============================================"

config.py

@@ -34,7 +34,7 @@ HP_VALID_RANGE = (20, 120)
 ASSET_COST_VALID_RANGE = (100_000, 3_000_000)
 
 # Cost calculation
-COST_PER_GPU_HOUR = 0.5  # USD
+COST_PER_GPU_HOUR = 0.6  # USD
 
 # API settings
 API_TITLE = "Invoice Information Extractor API"

frontend/.gitignore

@@ -0,0 +1,41 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage/
+.nyc_output/
+
+# Cache
+.cache/
+.parcel-cache/
+.env.example
+.env.production

frontend/README.md

@@ -0,0 +1,110 @@
+# 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.

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Invoice Information Extractor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "invoice-extractor-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "axios": "^1.6.2",
+    "pdfjs-dist": "^3.11.174",
+    "lucide-react": "^0.294.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.8"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import { FileText, AlertCircle } from 'lucide-react';
+import FileUpload from './components/FileUpload';
+import ProgressIndicator from './components/ProgressIndicator';
+import ResultCard from './components/ResultCard';
+import { convertFileToImages, dataUrlToBlob } from './utils/fileConverter';
+import { processBatchInvoices } from './utils/api';
+
+function App() {
+  const [processing, setProcessing] = useState(false);
+  const [results, setResults] = useState([]);
+  const [progress, setProgress] = useState({ total: 0, completed: 0, current: '' });
+  const [error, setError] = useState(null);
+  const [imageDataMap, setImageDataMap] = useState({});
+
+  const handleFilesSelected = async (files) => {
+    setProcessing(true);
+    setResults([]);
+    setError(null);
+    setImageDataMap({});
+
+    try {
+      // Step 1: Convert all files to images
+      const allImages = [];
+      const imageData = {};
+
+      for (const file of files) {
+        try {
+          const images = await convertFileToImages(file);
+          images.forEach((img, idx) => {
+            const key = `${file.name}_${idx}`;
+            allImages.push({
+              blob: dataUrlToBlob(img.dataUrl),
+              filename: img.filename,
+              originalFile: img.originalFile,
+              pageNumber: img.pageNumber,
+              key: key
+            });
+            imageData[key] = img.dataUrl;
+          });
+        } catch (err) {
+          console.error(`Error converting ${file.name}:`, err);
+          setError(`Failed to convert ${file.name}: ${err.message}`);
+        }
+      }
+
+      setImageDataMap(imageData);
+      setProgress({ total: allImages.length, completed: 0, current: '' });
+
+      // Step 2: Process all images through the API
+      await processBatchInvoices(allImages, (index, result) => {
+        // Update progress
+        setProgress(prev => ({
+          ...prev,
+          completed: index + 1,
+          current: index < allImages.length - 1 ? allImages[index + 1].filename : ''
+        }));
+
+        // Add result
+        setResults(prev => [...prev, result]);
+      });
+
+    } catch (err) {
+      console.error('Processing error:', err);
+      setError(`Processing failed: ${err.message}`);
+    } finally {
+      setProcessing(false);
+      setProgress(prev => ({ ...prev, current: '' }));
+    }
+  };
+
+  return (
+    <div className="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center mb-4">
+            <div className="p-3 bg-white rounded-2xl shadow-lg">
+              <FileText className="w-12 h-12 text-primary-600" />
+            </div>
+          </div>
+          <h1 className="text-4xl font-bold text-white mb-2 drop-shadow-lg">
+            Invoice Information Extractor
+          </h1>
+          <p className="text-lg text-white/90 drop-shadow">
+            Extract text, detect signatures and stamps from invoices using AI
+          </p>
+        </div>
+
+        {/* Main Content */}
+        <div className="space-y-6">
+          {/* Upload Section */}
+          <div className="glass-morphism p-6">
+            <FileUpload onFilesSelected={handleFilesSelected} disabled={processing} />
+          </div>
+
+          {/* Error Display */}
+          {error && (
+            <div className="bg-red-50 border-2 border-red-200 rounded-xl p-4 flex items-start">
+              <AlertCircle className="w-6 h-6 text-red-600 mr-3 flex-shrink-0 mt-0.5" />
+              <div>
+                <h3 className="text-red-800 font-semibold mb-1">Error</h3>
+                <p className="text-red-700 text-sm">{error}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Progress Indicator */}
+          {processing && (
+            <ProgressIndicator
+              total={progress.total}
+              completed={progress.completed}
+              current={progress.current}
+              results={results}
+            />
+          )}
+
+          {/* Results Section */}
+          {results.length > 0 && (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between bg-white rounded-xl p-4 shadow-md">
+                <h2 className="text-2xl font-bold text-gray-800 flex items-center">
+                  <FileText className="w-6 h-6 mr-2 text-primary-600" />
+                  Processing Results
+                </h2>
+                <span className="text-sm font-medium text-gray-600 bg-primary-50 px-3 py-1 rounded-full">
+                  {results.length} {results.length === 1 ? 'Document' : 'Documents'}
+                </span>
+              </div>
+
+              {results.map((result, index) => {
+                const imageKey = `${result.originalFile}_${index}`;
+                return (
+                  <ResultCard
+                    key={index}
+                    result={result}
+                    imageData={imageDataMap[imageKey] || imageDataMap[Object.keys(imageDataMap)[index]]}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          {/* Info Cards */}
+          {!processing && results.length === 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="glass-morphism p-6 text-center">
+                <div className="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                  <FileText className="w-6 h-6 text-primary-600" />
+                </div>
+                <h3 className="font-semibold text-gray-800 mb-2">Multiple Formats</h3>
+                <p className="text-sm text-gray-600">
+                  Upload images or PDFs. PDFs are automatically converted to images.
+                </p>
+              </div>
+
+              <div className="glass-morphism p-6 text-center">
+                <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                  <svg className="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-gray-800 mb-2">Batch Processing</h3>
+                <p className="text-sm text-gray-600">
+                  Process multiple documents at once and see results one by one.
+                </p>
+              </div>
+
+              <div className="glass-morphism p-6 text-center">
+                <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
+                  <svg className="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-gray-800 mb-2">Visual Detection</h3>
+                <p className="text-sm text-gray-600">
+                  Automatically detect and highlight signatures and stamps on documents.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="mt-12 text-center text-white/80 text-sm">
+          <p>Powered by AI • Secure Processing • Fast & Accurate</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

frontend/src/components/FileUpload.jsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useState } from 'react';
+import { Upload, FileText, Image as ImageIcon, X } from 'lucide-react';
+
+const FileUpload = ({ onFilesSelected, disabled }) => {
+  const [dragActive, setDragActive] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState([]);
+
+  const handleDrag = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      handleFiles(Array.from(e.dataTransfer.files));
+    }
+  }, []);
+
+  const handleFiles = (files) => {
+    const validFiles = files.filter(file => {
+      const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'application/pdf'];
+      return validTypes.includes(file.type);
+    });
+
+    if (validFiles.length !== files.length) {
+      alert('Some files were skipped. Only images (JPEG, PNG, GIF, WEBP) and PDF files are supported.');
+    }
+
+    setSelectedFiles(prev => [...prev, ...validFiles]);
+  };
+
+  const handleFileInput = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      handleFiles(Array.from(e.target.files));
+    }
+  };
+
+  const removeFile = (index) => {
+    setSelectedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleProcess = () => {
+    if (selectedFiles.length > 0) {
+      onFilesSelected(selectedFiles);
+      setSelectedFiles([]);
+    }
+  };
+
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="w-full space-y-4">
+      {/* Upload Zone */}
+      <div
+        className={`upload-zone relative border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
+          dragActive ? 'drag-active' : ''
+        } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        onClick={() => !disabled && document.getElementById('fileInput').click()}
+      >
+        <input
+          id="fileInput"
+          type="file"
+          multiple
+          accept="image/*,.pdf"
+          onChange={handleFileInput}
+          className="hidden"
+          disabled={disabled}
+        />
+        
+        <div className="flex flex-col items-center justify-center space-y-4">
+          <div className="p-4 bg-primary-50 rounded-full">
+            <Upload className="w-12 h-12 text-primary-500" />
+          </div>
+          
+          <div>
+            <p className="text-lg font-semibold text-gray-700 mb-1">
+              Drop your files here or click to browse
+            </p>
+            <p className="text-sm text-gray-500">
+              Support for images (JPEG, PNG, GIF, WEBP) and PDF files
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2 text-xs text-gray-400">
+            <ImageIcon className="w-4 h-4" />
+            <span>Multiple files supported</span>
+            <span>•</span>
+            <FileText className="w-4 h-4" />
+            <span>PDF to image conversion</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Selected Files List */}
+      {selectedFiles.length > 0 && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-semibold text-gray-700">
+              Selected Files ({selectedFiles.length})
+            </h3>
+            <button
+              onClick={() => setSelectedFiles([])}
+              className="text-xs text-red-500 hover:text-red-700 font-medium"
+            >
+              Clear All
+            </button>
+          </div>
+
+          <div className="space-y-2 max-h-64 overflow-y-auto">
+            {selectedFiles.map((file, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between bg-white p-3 rounded-lg border border-gray-200 hover:border-primary-300 transition-colors"
+              >
+                <div className="flex items-center space-x-3 flex-1 min-w-0">
+                  <div className="flex-shrink-0">
+                    {file.type === 'application/pdf' ? (
+                      <FileText className="w-8 h-8 text-red-500" />
+                    ) : (
+                      <ImageIcon className="w-8 h-8 text-blue-500" />
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-gray-900 truncate">
+                      {file.name}
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      {formatFileSize(file.size)}
+                      {file.type === 'application/pdf' && ' • Will be converted to images'}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => removeFile(index)}
+                  className="ml-2 p-1 hover:bg-red-50 rounded-full transition-colors"
+                  title="Remove file"
+                >
+                  <X className="w-5 h-5 text-red-500" />
+                </button>
+              </div>
+            ))}
+          </div>
+
+          <button
+            onClick={handleProcess}
+            disabled={disabled}
+            className="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
+          >
+            <Upload className="w-5 h-5" />
+            <span>Process {selectedFiles.length} File{selectedFiles.length > 1 ? 's' : ''}</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileUpload;

frontend/src/components/ProgressIndicator.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Loader2, CheckCircle, XCircle } from 'lucide-react';
+
+const ProgressIndicator = ({ total, completed, current, results }) => {
+  const progress = total > 0 ? (completed / total) * 100 : 0;
+  const successCount = results.filter(r => r.success).length;
+  const errorCount = results.filter(r => !r.success).length;
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-800 flex items-center">
+            <Loader2 className="w-5 h-5 mr-2 text-primary-500 animate-spin" />
+            Processing Files
+          </h3>
+          <span className="text-sm font-medium text-gray-600">
+            {completed} / {total}
+          </span>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="relative">
+          <div className="overflow-hidden h-3 text-xs flex rounded-full bg-gray-200">
+            <div
+              style={{ width: `${progress}%` }}
+              className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-primary-500 to-primary-600 transition-all duration-500"
+            />
+          </div>
+          <div className="mt-2 text-xs text-gray-500 text-center">
+            {Math.round(progress)}% Complete
+          </div>
+        </div>
+
+        {/* Current Processing */}
+        {current && (
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+            <p className="text-sm text-blue-800 flex items-center">
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Currently processing: <span className="font-medium ml-1">{current}</span>
+            </p>
+          </div>
+        )}
+
+        {/* Statistics */}
+        <div className="grid grid-cols-3 gap-3 pt-2">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-gray-800">{total}</div>
+            <div className="text-xs text-gray-500">Total</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600 flex items-center justify-center">
+              {successCount}
+              {successCount > 0 && <CheckCircle className="w-5 h-5 ml-1" />}
+            </div>
+            <div className="text-xs text-gray-500">Success</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-red-600 flex items-center justify-center">
+              {errorCount}
+              {errorCount > 0 && <XCircle className="w-5 h-5 ml-1" />}
+            </div>
+            <div className="text-xs text-gray-500">Errors</div>
+          </div>
+        </div>
+
+        {/* Results List */}
+        {results.length > 0 && (
+          <div className="border-t pt-4 mt-4">
+            <h4 className="text-sm font-semibold text-gray-700 mb-3">Processing Status</h4>
+            <div className="space-y-2 max-h-48 overflow-y-auto">
+              {results.map((result, index) => (
+                <div
+                  key={index}
+                  className={`flex items-center justify-between p-2 rounded ${
+                    result.success ? 'bg-green-50' : 'bg-red-50'
+                  }`}
+                >
+                  <span className="text-sm text-gray-700 truncate flex-1">
+                    {result.filename}
+                  </span>
+                  {result.success ? (
+                    <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0 ml-2" />
+                  ) : (
+                    <XCircle className="w-4 h-4 text-red-600 flex-shrink-0 ml-2" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProgressIndicator;

frontend/src/components/ResultCard.jsx

@@ -0,0 +1,240 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+const ResultCard = ({ result, imageData }) => {
+  const canvasRef = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!imageData || !canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = () => {
+      // Set canvas size to match container while maintaining aspect ratio
+      const maxWidth = 800;
+      const maxHeight = 600;
+      let width = img.width;
+      let height = img.height;
+
+      if (width > maxWidth) {
+        height = (height * maxWidth) / width;
+        width = maxWidth;
+      }
+      if (height > maxHeight) {
+        width = (width * maxHeight) / height;
+        height = maxHeight;
+      }
+
+      canvas.width = width;
+      canvas.height = height;
+      setDimensions({ width, height });
+
+      // Draw image
+      ctx.drawImage(img, 0, 0, width, height);
+
+      // Calculate scale factors
+      const scaleX = width / img.width;
+      const scaleY = height / img.height;
+
+      // Draw bounding boxes for signature
+      if (result.signature_coords && result.signature_coords.length > 0) {
+        ctx.strokeStyle = '#ef4444';
+        ctx.lineWidth = 3;
+        ctx.setLineDash([5, 5]);
+        
+        result.signature_coords.forEach(coords => {
+          const [x1, y1, x2, y2] = coords;
+          ctx.strokeRect(
+            x1 * scaleX,
+            y1 * scaleY,
+            (x2 - x1) * scaleX,
+            (y2 - y1) * scaleY
+          );
+        });
+
+        // Add label
+        ctx.fillStyle = '#ef4444';
+        ctx.font = 'bold 14px Arial';
+        ctx.fillText('Signature', result.signature_coords[0][0] * scaleX, result.signature_coords[0][1] * scaleY - 5);
+      }
+
+      // Draw bounding boxes for stamp
+      if (result.stamp_coords && result.stamp_coords.length > 0) {
+        ctx.strokeStyle = '#3b82f6';
+        ctx.lineWidth = 3;
+        ctx.setLineDash([5, 5]);
+        
+        result.stamp_coords.forEach(coords => {
+          const [x1, y1, x2, y2] = coords;
+          ctx.strokeRect(
+            x1 * scaleX,
+            y1 * scaleY,
+            (x2 - x1) * scaleX,
+            (y2 - y1) * scaleY
+          );
+        });
+
+        // Add label
+        ctx.fillStyle = '#3b82f6';
+        ctx.font = 'bold 14px Arial';
+        ctx.fillText('Stamp', result.stamp_coords[0][0] * scaleX, result.stamp_coords[0][1] * scaleY - 5);
+      }
+    };
+
+    img.src = imageData;
+  }, [imageData, result]);
+
+  if (!result.success) {
+    return (
+      <div className="bg-red-50 border-2 border-red-200 rounded-xl p-6 mb-4">
+        <div className="flex items-start">
+          <div className="flex-shrink-0">
+            <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-red-800">Processing Error</h3>
+            <div className="mt-2 text-sm text-red-700">
+              <p><strong>File:</strong> {result.filename}</p>
+              <p><strong>Error:</strong> {result.error}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg overflow-hidden mb-6 border border-gray-200">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-primary-500 to-primary-600 px-6 py-4">
+        <h3 className="text-lg font-semibold text-white flex items-center">
+          <svg className="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          {result.filename}
+        </h3>
+        {result.pageNumber && (
+          <p className="text-primary-100 text-sm mt-1">Page {result.pageNumber}</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
+        {/* Image with bounding boxes */}
+        <div className="space-y-4">
+          <h4 className="text-md font-semibold text-gray-700 flex items-center">
+            <svg className="w-5 h-5 mr-2 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            Document Preview
+          </h4>
+          <div className="relative bg-gray-50 rounded-lg p-4 flex justify-center items-center">
+            <canvas ref={canvasRef} className="max-w-full h-auto rounded shadow-md" />
+          </div>
+          <div className="flex gap-4 text-sm">
+            {result.signature_coords && result.signature_coords.length > 0 && (
+              <div className="flex items-center">
+                <div className="w-4 h-4 border-2 border-red-500 mr-2"></div>
+                <span className="text-gray-600">Signature Detected</span>
+              </div>
+            )}
+            {result.stamp_coords && result.stamp_coords.length > 0 && (
+              <div className="flex items-center">
+                <div className="w-4 h-4 border-2 border-blue-500 mr-2"></div>
+                <span className="text-gray-600">Stamp Detected</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Extracted Information */}
+        <div className="space-y-4">
+          <h4 className="text-md font-semibold text-gray-700 flex items-center">
+            <svg className="w-5 h-5 mr-2 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            Extracted Information
+          </h4>
+          
+          <div className="bg-gray-50 rounded-lg p-4 space-y-3">
+            <div className="bg-white rounded-lg p-4 shadow-sm">
+              <h5 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Extracted Text</h5>
+              <div className="text-sm text-gray-800 whitespace-pre-wrap max-h-96 overflow-y-auto font-mono bg-gray-50 p-3 rounded border border-gray-200">
+                {result.extracted_text || 'No text extracted'}
+              </div>
+            </div>
+
+            {/* Detection Status */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="bg-white rounded-lg p-4 shadow-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-gray-600">Signature</span>
+                  {result.signature_coords && result.signature_coords.length > 0 ? (
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                      </svg>
+                      Detected
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                      Not Found
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="bg-white rounded-lg p-4 shadow-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-gray-600">Stamp</span>
+                  {result.stamp_coords && result.stamp_coords.length > 0 ? (
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                      </svg>
+                      Detected
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                      Not Found
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Coordinates Info */}
+            {(result.signature_coords?.length > 0 || result.stamp_coords?.length > 0) && (
+              <div className="bg-white rounded-lg p-4 shadow-sm">
+                <h5 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Coordinates</h5>
+                <div className="text-xs space-y-2">
+                  {result.signature_coords?.length > 0 && (
+                    <div>
+                      <span className="font-medium text-red-600">Signature:</span>
+                      <code className="ml-2 text-gray-700">
+                        {JSON.stringify(result.signature_coords)}
+                      </code>
+                    </div>
+                  )}
+                  {result.stamp_coords?.length > 0 && (
+                    <div>
+                      <span className="font-medium text-blue-600">Stamp:</span>
+                      <code className="ml-2 text-gray-700">
+                        {JSON.stringify(result.stamp_coords)}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResultCard;

frontend/src/index.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+.glass-morphism {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+.upload-zone {
+  border: 2px dashed #cbd5e1;
+  transition: all 0.3s ease;
+}
+
+.upload-zone:hover {
+  border-color: #0ea5e9;
+  background-color: #f0f9ff;
+}
+
+.upload-zone.drag-active {
+  border-color: #0ea5e9;
+  background-color: #e0f2fe;
+  transform: scale(1.02);
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/utils/api.js

@@ -0,0 +1,68 @@
+import axios from 'axios';
+
+// Use same origin in production (when deployed), localhost in development
+const API_BASE_URL = import.meta.env.VITE_API_URL || window.location.origin;
+
+/**
+ * Process a single invoice image
+ * @param {Blob} imageBlob - Image blob
+ * @param {string} filename - Original filename
+ * @returns {Promise<Object>} Processed result
+ */
+export async function processSingleInvoice(imageBlob, filename) {
+  const formData = new FormData();
+  formData.append('file', imageBlob, filename);
+
+  const response = await axios.post(`${API_BASE_URL}/process-invoice`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response.data;
+}
+
+/**
+ * Process multiple invoices in batch
+ * @param {Array} images - Array of {blob, filename} objects
+ * @param {Function} onProgress - Progress callback (index, result)
+ * @returns {Promise<Array>} Array of results
+ */
+export async function processBatchInvoices(images, onProgress) {
+  const results = [];
+
+  for (let i = 0; i < images.length; i++) {
+    try {
+      const result = await processSingleInvoice(images[i].blob, images[i].filename);
+      const resultWithMetadata = {
+        ...result,
+        filename: images[i].filename,
+        originalFile: images[i].originalFile,
+        pageNumber: images[i].pageNumber,
+        index: i,
+        success: true
+      };
+      results.push(resultWithMetadata);
+      
+      if (onProgress) {
+        onProgress(i, resultWithMetadata);
+      }
+    } catch (error) {
+      const errorResult = {
+        filename: images[i].filename,
+        originalFile: images[i].originalFile,
+        pageNumber: images[i].pageNumber,
+        index: i,
+        success: false,
+        error: error.response?.data?.detail || error.message
+      };
+      results.push(errorResult);
+      
+      if (onProgress) {
+        onProgress(i, errorResult);
+      }
+    }
+  }
+
+  return results;
+}

frontend/src/utils/fileConverter.js

@@ -0,0 +1,97 @@
+import * as pdfjsLib from 'pdfjs-dist';
+
+// Configure PDF.js worker
+pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
+
+/**
+ * Convert PDF to images
+ * @param {File} file - PDF file
+ * @returns {Promise<Array>} Array of image data URLs
+ */
+export async function pdfToImages(file) {
+  const images = [];
+  const arrayBuffer = await file.arrayBuffer();
+  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+
+  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+    const page = await pdf.getPage(pageNum);
+    const viewport = page.getViewport({ scale: 2.0 });
+    
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+
+    await page.render({
+      canvasContext: context,
+      viewport: viewport
+    }).promise;
+
+    images.push({
+      dataUrl: canvas.toDataURL('image/jpeg', 0.95),
+      pageNumber: pageNum
+    });
+  }
+
+  return images;
+}
+
+/**
+ * Convert image file to data URL
+ * @param {File} file - Image file
+ * @returns {Promise<string>} Image data URL
+ */
+export function imageToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Convert file to processable format
+ * @param {File} file - Input file
+ * @returns {Promise<Array>} Array of {dataUrl, filename, pageNumber} objects
+ */
+export async function convertFileToImages(file) {
+  const fileType = file.type;
+  
+  if (fileType === 'application/pdf') {
+    const pdfImages = await pdfToImages(file);
+    return pdfImages.map(img => ({
+      dataUrl: img.dataUrl,
+      filename: `${file.name}_page_${img.pageNumber}`,
+      pageNumber: img.pageNumber,
+      originalFile: file.name
+    }));
+  } else if (fileType.startsWith('image/')) {
+    const dataUrl = await imageToDataUrl(file);
+    return [{
+      dataUrl,
+      filename: file.name,
+      pageNumber: 1,
+      originalFile: file.name
+    }];
+  } else {
+    throw new Error('Unsupported file type. Please upload an image or PDF file.');
+  }
+}
+
+/**
+ * Data URL to Blob conversion
+ * @param {string} dataUrl - Data URL
+ * @returns {Blob} Blob object
+ */
+export function dataUrlToBlob(dataUrl) {
+  const arr = dataUrl.split(',');
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}

frontend/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        }
+      }
+    },
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/process-invoice': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/batch-process': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      }
+    }
+  }
+})

setup.bat

@@ -0,0 +1,53 @@
+@echo off
+echo ============================================
+echo Invoice Extractor - Complete Setup
+echo ============================================
+echo.
+
+echo [1/4] Installing Backend Dependencies...
+pip install -r requirements.txt
+if errorlevel 1 (
+    echo ERROR: Failed to install backend dependencies
+    pause
+    exit /b 1
+)
+echo ✓ Backend dependencies installed
+echo.
+
+echo [2/4] Installing Frontend Dependencies...
+cd frontend
+call npm install
+if errorlevel 1 (
+    echo ERROR: Failed to install frontend dependencies
+    pause
+    exit /b 1
+)
+echo ✓ Frontend dependencies installed
+echo.
+
+echo [3/4] Setting up Frontend Environment...
+if not exist .env (
+    copy .env.example .env
+    echo ✓ Created .env file
+) else (
+    echo ✓ .env file already exists
+)
+cd ..
+echo.
+
+echo [4/4] Setup Complete!
+echo.
+echo ============================================
+echo Ready to start the application!
+echo ============================================
+echo.
+echo To start the backend:
+echo   python app.py
+echo.
+echo To start the frontend:
+echo   cd frontend
+echo   npm run dev
+echo.
+echo Then open http://localhost:3000 in your browser
+echo ============================================
+pause

start.bat

@@ -0,0 +1,26 @@
+@echo off
+echo ============================================
+echo Starting Invoice Extractor Application
+echo ============================================
+echo.
+
+echo Starting Backend Server...
+start "Backend Server" cmd /k "python app.py"
+timeout /t 5 /nobreak > nul
+
+echo Starting Frontend Development Server...
+start "Frontend Server" cmd /k "cd frontend && npm run dev"
+
+echo.
+echo ============================================
+echo Both servers are starting!
+echo ============================================
+echo.
+echo Backend:  http://localhost:7860
+echo Frontend: http://localhost:3000
+echo.
+echo Press any key to stop both servers...
+pause > nul
+
+taskkill /FI "WindowTitle eq Backend Server*" /T /F
+taskkill /FI "WindowTitle eq Frontend Server*" /T /F