🚗 RC Text Extraction Tool

A powerful TypeScript React application that extracts vehicle Registration Certificate (RC) details from front and back images using OCR and AI technologies.

✨ Features

• Dual Image Upload: Upload both front and back RC images with validation
• Independent OCR Processing: Extract raw text using Tesseract.js with confidence scoring
• Independent AI-Powered Extraction: Use Google Gemini to parse structured data from images
• Parallel Processing: OCR and LLM work independently for flexible data extraction
• Comprehensive Metrics: Track accuracy, processing time, and success rates for each method
• Responsive Design: Clean, minimal interface that works on all devices
• Real-time Progress: Visual progress indicators for processing status

🛠 Technologies Used

• Frontend: TypeScript + React 19 + Vite
• OCR: Tesseract.js
• AI: Google Generative AI (Gemini)
• Styling: Vanilla CSS with CSS Grid & Flexbox
• Build Tool: Vite
• Type Safety: TypeScript with strict configuration

📋 RC Data Fields Extracted

• Vehicle Registration Number
• Owner Name
• Vehicle Class
• Fuel Type
• Engine Number
• Chassis Number
• Registration Date
• Validity Date

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Google AI API key

Installation

1. Clone the repository

   git clone <repository-url>
   cd rc-text-extract

2. Install dependencies

   npm install

3. Configure environment variables

   cp .env.example .env

   Edit .env and add your Google AI API key:

   VITE_GOOGLE_API_KEY=your_actual_api_key_here

4. Start development server

   npm run dev

5. Open in browser Navigate to http://localhost:5173

Getting Google AI API Key

1. Visit Google AI Studio
2. Sign in with your Google account
3. Create a new API key
4. Copy the key and add it to your .env file

📁 Project Structure

src/
├── components/
│   ├── ImageUpload.tsx       # Image upload with validation
│   ├── ImageUpload.css
│   ├── OCRSection.tsx        # Tesseract OCR processing
│   ├── OCRSection.css
│   ├── LLMSection.tsx        # Google Gemini integration
│   ├── LLMSection.css
│   ├── MetricsPanel.tsx      # Performance metrics
│   └── MetricsPanel.css
├── types/
│   └── index.ts              # TypeScript interfaces
├── App.tsx                   # Main application component
├── App.css                   # Main layout styles
├── index.css                 # Global styles
└── main.tsx                  # Application entry point

🎯 Usage Guide

Step 1: Upload Images

• Click to upload RC front image
• Click to upload RC back image
• Supported formats: JPG, PNG (max 10MB each)
• Both images required for processing

Step 2: Processing Options

Choose your preferred extraction method(s):

Option A: OCR Extraction

• Click "Extract Text with OCR"
• Wait for Tesseract to process both images
• View extracted raw text and confidence score
• Get parsed structured data from OCR

Option B: LLM Extraction

• Click "Extract Data with LLM"
• Google Gemini processes the uploaded images directly
• Get structured data extraction with confidence scores
• Independent of OCR processing

Option C: Both Methods

• Run both OCR and LLM independently
• Compare results and accuracy between methods
• Choose the best extraction for your needs

Step 3: Analyze Results

• Review processing metrics for each method
• Compare OCR vs LLM performance (if both used)
• View extracted data fields and confidence scores
• Check processing times and success rates

🔧 Configuration

Environment Variables

VITE_GOOGLE_API_KEY=your_google_api_key

Build Configuration

• TypeScript: Strict mode enabled
• Vite: Modern build tool with HMR
• ESLint: Code quality and consistency
• CSS: Modern CSS features with vendor prefixes

📱 Responsive Design

• Desktop: Side-by-side processing sections
• Tablet: Stacked layout with full-width components
• Mobile: Single-column layout with optimized spacing

🔒 Security & Privacy

• All processing happens client-side initially
• Google AI API calls use HTTPS encryption
• No image data stored permanently
• API keys secured via environment variables

🚦 Error Handling

• Image format validation
• File size limits
• OCR processing failures
• API connectivity issues
• Invalid API key detection
• JSON parsing errors

📊 Performance Metrics

The application tracks metrics for each processing method independently:

OCR Metrics

• OCR confidence percentage
• OCR processing time
• Text extraction accuracy
• Parsed field completion rate

LLM Metrics

• LLM extraction confidence
• LLM processing time
• Direct extraction accuracy
• Structured data completeness

Comparison Features

• Side-by-side performance comparison
• Method-specific success indicators
• Individual processing status tracking
• Field extraction completion rates

🛠 Development Scripts

# Development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

# Type checking
npx tsc --noEmit

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes with proper TypeScript types
4. Add CSS for any new components
5. Test thoroughly
6. Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Tesseract.js for OCR capabilities
• Google AI for Generative AI
• Vite for build tooling
• React for the UI framework

📞 Support

For issues and questions:

1. Check the existing issues
2. Create a new issue with detailed description
3. Include screenshots for UI problems
4. Provide console logs for technical issues

---

Built with ❤️ using TypeScript, React, and modern web technologies.