prashamtrivedi
README.md

PDF to HTML Converter

A powerful Val Town application that converts PDF invoices to beautiful HTML replicas using Claude 3.5 Haiku's advanced document analysis capabilities.

🚀 Features

  • PDF Upload & Processing: Drag-and-drop or browse to upload PDF invoices
  • AI-Powered Extraction: Uses Claude 3.5 Haiku for accurate data extraction
  • Configurable Fields: Choose which invoice fields to extract
  • Multiple Output Formats: Generate HTML replicas or structured JSON
  • Real-time Processing: Live status updates and error handling
  • Cost Tracking: Token usage and cost estimation
  • Mobile Responsive: Works on all devices
  • Professional UI: Clean, modern interface built with React and Tailwind

📋 Extractable Fields

  • InvoiceFrom: Company/person who issued the invoice
  • InvoiceTo: Company/person who received the invoice
  • PaidBy: Who made the payment
  • PaidTo: Who received the payment
  • Amount: Total amount (numeric value)
  • Currency: Currency code (USD, EUR, INR, etc.)
  • InvoiceDate: Date invoice was issued
  • PaidDate: Date payment was made
  • LineItems: Array of line item descriptions

🛠 Setup Instructions

Environment Variables

Set up your environment variables in Val Town:

ANTHROPIC_API_KEY=your_claude_api_key_here

💰 Cost Estimation

Claude 3.5 Haiku Pricing (converted to INR)

  • Input tokens: ₹67 per million tokens
  • Output tokens: ₹336 per million tokens

Typical Usage Costs

  • Small invoice (1-2 pages): ₹1-3 per processing
  • Medium invoice (3-5 pages): ₹3-8 per processing
  • Large invoice (6+ pages): ₹8-15 per processing

🔧 API Endpoints

GET /

Main web interface for PDF upload and processing

POST /api/process-pdf

Process PDF file and extract invoice data

Request:

  • pdf: PDF file (multipart/form-data)
  • fields: JSON array of fields to extract
  • format: "html" or "json"

GET /api/health

Health check endpoint

GET /api/config

Get available fields and configuration

🎯 Usage Examples

Web Interface

  1. Open your Val Town URL
  2. Drag and drop a PDF invoice
  3. Select fields to extract
  4. Choose output format (HTML/JSON)
  5. Click "Extract Data"
  6. Download results

API Usage

const formData = new FormData();
formData.append('pdf', pdfFile);
formData.append('fields', JSON.stringify(['InvoiceFrom', 'Amount', 'Currency']));
formData.append('format', 'html');

const response = await fetch('/api/process-pdf', {
  method: 'POST',
  body: formData
});

const result = await response.json();

🔍 Technical Details

Architecture

  • Backend: Hono framework for HTTP handling
  • AI Processing: Claude 3.5 Haiku via Anthropic API
  • Frontend: React 18 with TypeScript
  • Styling: Tailwind CSS + custom CSS
  • File Handling: Base64 encoding for PDF processing

Security Features

  • File type validation (PDF only)
  • File size limits (10MB max)
  • Input sanitization
  • Error boundary handling
  • CORS protection

🚨 Limitations

  • File Size: Maximum 10MB per PDF
  • File Type: PDF files only
  • Language: Primarily optimized for English invoices
  • Processing Time: 3-15 seconds depending on PDF complexity
  • Rate Limits: Subject to Anthropic API limits

🛡 Error Handling

The application includes comprehensive error handling for:

  • Invalid file types/sizes
  • Network failures
  • API errors
  • Parsing failures
  • Token limit exceeded

📊 Monitoring

Track your usage with built-in monitoring:

  • Processing time per request
  • Token usage statistics
  • Cost estimation
  • Error rates
  • Success/failure metrics

Built with ❤️ using Val Town, Claude 3.5 Haiku, and modern web technologies.