[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","604dbd0c-46b9-11f0-8543-76b3cceeab13","name","index.html","fileType","content","\n\n\n \n \n PDF to HTML Converter\n \n \n \n\n\n

\n \n \n \n \n \n \n\n","\n\n\n \n \n PDF to HTML Converter\n \n \n \n\n\n

\n \n \n \n \n \n \n\n","createdAt",["D",1749642535530],"branchVersion","branchId","d324f170-46b8-11f0-a15f-76b3cceeab13","id","d324a648-46b8-11f0-a15f-76b3cceeab13","pdf-to-html",["D",1749642007878],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","PDF to HTML converter using Claude 3.5 Haiku","imageUrl","1591349e-125d-4fb7-930d-cf293627961f","pinnedFileId","55ab62c8-46b9-11f0-863e-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","4d7791fe-1f5b-4867-8b6e-34823c16ee48","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"isOwned",138,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","prashamtrivedi","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaUF5OXE3VlcwNVRwRU9wSTRmcE1DZ0FSM1UifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":256,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":257,"_81":258,"_83":259,"_85":25},"tree",[171,176,180,182],"files",[171,172,173,174,175,176,177,178,179,180,181,182],"counts",{"_160":63,"_161":157,"_162":63,"_163":164,"_165":166},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":154,"_32":155,"_30":156,"_134":-5,"_41":42,"_40":157,"_136":59,"_38":158,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_27":159},{"_43":148,"_32":149,"_30":150,"_134":-5,"_41":42,"_40":151,"_136":59,"_38":152,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_27":153},{"_43":141,"_32":142,"_30":143,"_134":-5,"_41":42,"_40":144,"_136":59,"_38":145,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_27":147},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":59,"_38":137,"_13":63,"_34":20,"_35":138,"_24":25,"_139":-5,"_27":140},"93ae20ce-46b9-11f0-adc2-76b3cceeab13","README.md","93ae21b4-46b9-11f0-adc2-76b3cceeab13","parentId",12,"latest",["D",1749642330897],"# PDF to HTML Converter\n\nA powerful Val Town application that converts PDF invoices to beautiful HTML replicas using Claude 3.5 Haiku's advanced document analysis capabilities.\n\n## 🚀 Features\n\n- **PDF Upload & Processing**: Drag-and-drop or browse to upload PDF invoices\n- **AI-Powered Extraction**: Uses Claude 3.5 Haiku for accurate data extraction\n- **Configurable Fields**: Choose which invoice fields to extract\n- **Multiple Output Formats**: Generate HTML replicas or structured JSON\n- **Real-time Processing**: Live status updates and error handling\n- **Cost Tracking**: Token usage and cost estimation\n- **Mobile Responsive**: Works on all devices\n- **Professional UI**: Clean, modern interface built with React and Tailwind\n\n## 📋 Extractable Fields\n\n- **InvoiceFrom**: Company/person who issued the invoice\n- **InvoiceTo**: Company/person who received the invoice \n- **PaidBy**: Who made the payment\n- **PaidTo**: Who received the payment\n- **Amount**: Total amount (numeric value)\n- **Currency**: Currency code (USD, EUR, INR, etc.)\n- **InvoiceDate**: Date invoice was issued\n- **PaidDate**: Date payment was made\n- **LineItems**: Array of line item descriptions\n\n## 🛠 Setup Instructions\n\n### Environment Variables\nSet up your environment variables in Val Town:\n```\nANTHROPIC_API_KEY=your_claude_api_key_here\n```\n\n## 💰 Cost Estimation\n\n### Claude 3.5 Haiku Pricing (converted to INR)\n- **Input tokens**: ₹67 per million tokens\n- **Output tokens**: ₹336 per million tokens\n\n### Typical Usage Costs\n- **Small invoice (1-2 pages)**: ₹1-3 per processing\n- **Medium invoice (3-5 pages)**: ₹3-8 per processing \n- **Large invoice (6+ pages)**: ₹8-15 per processing\n\n## 🔧 API Endpoints\n\n### GET `/`\nMain web interface for PDF upload and processing\n\n### POST `/api/process-pdf`\nProcess PDF file and extract invoice data\n\n**Request**: \n- `pdf`: PDF file (multipart/form-data)\n- `fields`: JSON array of fields to extract\n- `format`: \"html\" or \"json\"\n\n### GET `/api/health`\nHealth check endpoint\n\n### GET `/api/config` \nGet available fields and configuration\n\n## 🎯 Usage Examples\n\n### Web Interface\n1. Open your Val Town URL\n2. Drag and drop a PDF invoice\n3. Select fields to extract\n4. Choose output format (HTML/JSON)\n5. Click \"Extract Data\"\n6. Download results\n\n### API Usage\n```javascript\nconst formData = new FormData();\nformData.append('pdf', pdfFile);\nformData.append('fields', JSON.stringify(['InvoiceFrom', 'Amount', 'Currency']));\nformData.append('format', 'html');\n\nconst response = await fetch('/api/process-pdf', {\n method: 'POST',\n body: formData\n});\n\nconst result = await response.json();\n```\n\n## 🔍 Technical Details\n\n### Architecture\n- **Backend**: Hono framework for HTTP handling\n- **AI Processing**: Claude 3.5 Haiku via Anthropic API\n- **Frontend**: React 18 with TypeScript\n- **Styling**: Tailwind CSS + custom CSS\n- **File Handling**: Base64 encoding for PDF processing\n\n### Security Features\n- File type validation (PDF only)\n- File size limits (10MB max)\n- Input sanitization\n- Error boundary handling\n- CORS protection\n\n## 🚨 Limitations\n\n- **File Size**: Maximum 10MB per PDF\n- **File Type**: PDF files only\n- **Language**: Primarily optimized for English invoices\n- **Processing Time**: 3-15 seconds depending on PDF complexity\n- **Rate Limits**: Subject to Anthropic API limits\n\n## 🛡 Error Handling\n\nThe application includes comprehensive error handling for:\n- Invalid file types/sizes\n- Network failures\n- API errors\n- Parsing failures\n- Token limit exceeded\n\n## 📊 Monitoring\n\nTrack your usage with built-in monitoring:\n- Processing time per request\n- Token usage statistics\n- Cost estimation\n- Error rates\n- Success/failure metrics\n\n---\n\n**Built with ❤️ using Val Town, Claude 3.5 Haiku, and modern web technologies.**","label",[132],"df6e0732-46b8-11f0-99ef-76b3cceeab13","shared","df6e080e-46b8-11f0-99ef-76b3cceeab13",3,["D",1749642028488],"directory",[142],"e2802cc0-46b8-11f0-8915-76b3cceeab13","frontend","e2802d9c-46b8-11f0-8915-76b3cceeab13",4,["D",1749642033639],[149],"d761cf88-46b8-11f0-be7a-76b3cceeab13","backend","d761d0b4-46b8-11f0-be7a-76b3cceeab13",1,["D",1749642014987],[155],"pulls","branches","forks","envVars",{"_167":169,"_170":63},"connections",{"_167":63,"_168":63},"count","unfilledCount",2,"emptyCount",{"_43":154,"_32":155,"_30":156,"_134":-5,"_41":42,"_40":157,"_136":59,"_38":253,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_184":254,"_27":255},{"_43":249,"_32":240,"_30":234,"_134":156,"_41":42,"_40":169,"_136":59,"_38":250,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_184":251,"_27":252},{"_43":241,"_32":242,"_30":243,"_134":234,"_41":42,"_40":244,"_136":25,"_38":245,"_13":63,"_34":192,"_35":246,"_24":25,"_139":-5,"_184":247,"_27":248},{"_43":231,"_32":232,"_30":233,"_134":234,"_41":42,"_40":235,"_136":25,"_38":236,"_13":63,"_34":192,"_35":237,"_24":25,"_139":-5,"_184":238,"_27":239},{"_43":222,"_32":223,"_30":57,"_134":156,"_41":42,"_40":224,"_136":25,"_38":225,"_13":157,"_34":226,"_35":227,"_24":25,"_139":228,"_184":229,"_27":230},{"_43":148,"_32":149,"_30":150,"_134":-5,"_41":42,"_40":151,"_136":59,"_38":219,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_184":220,"_27":221},{"_43":211,"_32":212,"_30":213,"_134":150,"_41":42,"_40":214,"_136":25,"_38":215,"_13":63,"_34":192,"_35":216,"_24":25,"_139":-5,"_184":217,"_27":218},{"_43":207,"_32":33,"_30":31,"_134":150,"_41":42,"_40":14,"_136":25,"_38":208,"_13":157,"_34":20,"_35":37,"_24":25,"_139":-5,"_184":209,"_27":210},{"_43":199,"_32":200,"_30":201,"_134":150,"_41":42,"_40":202,"_136":25,"_38":203,"_13":63,"_34":20,"_35":204,"_24":25,"_139":-5,"_184":205,"_27":206},{"_43":141,"_32":142,"_30":143,"_134":-5,"_41":42,"_40":144,"_136":59,"_38":196,"_13":63,"_34":146,"_35":-5,"_24":25,"_139":-5,"_184":197,"_27":198},{"_43":187,"_32":188,"_30":189,"_134":143,"_41":42,"_40":190,"_136":25,"_38":191,"_13":63,"_34":192,"_35":193,"_24":25,"_139":-5,"_184":194,"_27":195},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":59,"_38":183,"_13":63,"_34":20,"_35":138,"_24":25,"_139":-5,"_184":185,"_27":186},["D",1749642330897],"children",[],[132],"ec8ba0be-46b8-11f0-8ac8-76b3cceeab13","types.ts","ec8ba168-46b8-11f0-8ac8-76b3cceeab13",5,["D",1749642050493],"script","// Invoice data structure extracted from PDF\nexport interface InvoiceData {\n InvoiceFrom?: string | null;\n InvoiceTo?: string | null;\n PaidBy?: string | null;\n PaidTo?: string | null;\n Amount?: number | null;\n Currency?: string | null;\n InvoiceDate?: string | null;\n PaidDate?: string | null;\n LineItems?: string[] | null;\n}\n\n// Request payload for PDF processing\nexport interface ProcessingRequest {\n pdfBase64: string;\n fieldsToExtract: string[];\n outputFormat: \"html\" | \"json\";\n}\n\n// Response from PDF processing\nexport interface ProcessingResponse {\n success: boolean;\n extractedData?: InvoiceData;\n htmlOutput?: string;\n processingTime: number;\n tokenUsage?: TokenUsage;\n error?: string;\n}\n\n// Internal processing result\nexport interface ProcessingResult {\n extractedData: InvoiceData;\n htmlOutput?: string;\n processingTime: number;\n tokenUsage?: TokenUsage;\n}\n\n// Claude API response structure\nexport interface ClaudeResponse {\n extractedData: InvoiceData;\n processingTime: number;\n tokenUsage: TokenUsage;\n}\n\n// Token usage tracking\nexport interface TokenUsage {\n input: number;\n output: number;\n total: number;\n}\n\n// Configuration interface\nexport interface AppConfig {\n apiBaseUrl: string;\n supportedFormats: string[];\n maxFileSize: number;\n availableFields: string[];\n}\n\n// UI state management\nexport interface UIState {\n isProcessing: boolean;\n selectedFields: string[];\n outputFormat: \"html\" | \"json\";\n uploadedFile: File | null;\n result: ProcessingResponse | null;\n error: string | null;\n}\n\n// Field configuration for extraction\nexport interface FieldConfig {\n name: string;\n label: string;\n description: string;\n type: \"string\" | \"number\" | \"date\" | \"array\";\n required: boolean;\n}\n\nexport const AVAILABLE_FIELDS: FieldConfig[] = [\n {\n name: \"InvoiceFrom\",\n label: \"Invoice From\",\n description: \"Company or person who issued the invoice\",\n type: \"string\",\n required: true\n },\n {\n name: \"InvoiceTo\", \n label: \"Invoice To\",\n description: \"Company or person who received the invoice\",\n type: \"string\",\n required: true\n },\n {\n name: \"PaidBy\",\n label: \"Paid By\",\n description: \"Who made the payment\",\n type: \"string\", \n required: false\n },\n {\n name: \"PaidTo\",\n label: \"Paid To\", \n description: \"Who received the payment\",\n type: \"string\",\n required: false\n },\n {\n name: \"Amount\",\n label: \"Amount\",\n description: \"Total amount (numeric value)\",\n type: \"number\",\n required: true\n },\n {\n name: \"Currency\",\n label: \"Currency\",\n description: \"Currency code (e.g., USD, EUR, INR)\",\n type: \"string\",\n required: true\n },\n {\n name: \"InvoiceDate\",\n label: \"Invoice Date\",\n description: \"Date invoice was issued\",\n type: \"date\",\n required: true\n },\n {\n name: \"PaidDate\",\n label: \"Paid Date\",\n description: \"Date payment was made\",\n type: \"date\",\n required: false\n },\n {\n name: \"LineItems\",\n label: \"Line Items\",\n description: \"Array of line item descriptions\",\n type: \"array\",\n required: false\n }\n];",[],[142,188],["D",1749642028488],[181],[142],"85a0a344-46b9-11f0-b100-76b3cceeab13","style.css","85a0a3f8-46b9-11f0-b100-76b3cceeab13",11,["D",1749642307320],"/* Additional custom styles for the PDF to HTML converter */\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n}\n\n/* Smooth transitions for interactive elements */\nbutton, input, .upload-area {\n transition: all 0.2s ease-in-out;\n}\n\n/* Custom scrollbar for result preview */\n.result-preview::-webkit-scrollbar {\n width: 8px;\n}\n\n.result-preview::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.result-preview::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.result-preview::-webkit-scrollbar-thumb:hover {\n background: #a8a8a8;\n}\n\n/* Focus styles for accessibility */\ninput:focus, button:focus {\n outline: 2px solid #4299e1;\n outline-offset: 2px;\n}\n\n/* Loading animation refinements */\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.loading-text {\n animation: pulse 1.5s ease-in-out infinite;\n}\n\n/* Mobile responsiveness improvements */\n@media (max-width: 640px) {\n .upload-area {\n padding: 1.5rem 1rem;\n }\n \n .grid {\n grid-template-columns: 1fr;\n }\n \n .text-4xl {\n font-size: 2rem;\n }\n}\n\n/* Print styles for generated HTML */\n@media print {\n .no-print {\n display: none !important;\n }\n \n body {\n background: white !important;\n }\n}\n\n/* Enhanced form elements */\ninput[type=\"checkbox\"] {\n width: 1rem;\n height: 1rem;\n accent-color: #4299e1;\n}\n\ninput[type=\"radio\"] {\n accent-color: #4299e1;\n}\n\n/* Success states */\n.success-border {\n border-color: #48bb78;\n}\n\n.success-bg {\n background-color: #f0fff4;\n}\n\n/* Error states */\n.error-border {\n border-color: #f56565;\n}\n\n.error-bg {\n background-color: #fed7d7;\n}\n\n/* Enhanced hover effects */\n.upload-area:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\nbutton:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* File type indicators */\n.file-icon {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n/* Progress indicators */\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #e2e8f0;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n background-color: #4299e1;\n transition: width 0.3s ease;\n}",[],[149,200],"0da774a2-46ba-11f0-8fe7-76b3cceeab13",["D",1749642535530],[],[149,33],"7c00dd04-46b9-11f0-89dd-76b3cceeab13","app.tsx","7c00debc-46b9-11f0-89dd-76b3cceeab13",10,["D",1749642291173],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport type { \n UIState, \n ProcessingResponse, \n AppConfig, \n FieldConfig \n} from \"../shared/types.ts\";\nimport { AVAILABLE_FIELDS } from \"../shared/types.ts\";\n\ndeclare global {\n interface Window {\n __APP_CONFIG__: AppConfig;\n }\n}\n\nconst App: React.FC = () => {\n const [state, setState] = useState({\n isProcessing: false,\n selectedFields: AVAILABLE_FIELDS.filter(f => f.required).map(f => f.name),\n outputFormat: \"html\",\n uploadedFile: null,\n result: null,\n error: null\n });\n \n const fileInputRef = useRef(null);\n const config = window.__APP_CONFIG__ || {\n apiBaseUrl: \"\",\n supportedFormats: [\"application/pdf\"],\n maxFileSize: 10 * 1024 * 1024,\n availableFields: []\n };\n \n // Handle file drop\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n e.currentTarget.classList.remove(\"drag-over\");\n \n const files = Array.from(e.dataTransfer.files);\n const pdfFile = files.find(file => file.type === \"application/pdf\");\n \n if (pdfFile) {\n setState(prev => ({ ...prev, uploadedFile: pdfFile, error: null }));\n } else {\n setState(prev => ({ ...prev, error: \"Please upload a PDF file.\" }));\n }\n };\n \n // Handle file selection\n const handleFileSelect = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n if (file.type === \"application/pdf\") {\n setState(prev => ({ ...prev, uploadedFile: file, error: null }));\n } else {\n setState(prev => ({ ...prev, error: \"Please select a PDF file.\" }));\n }\n }\n };\n \n // Handle field selection\n const toggleField = (fieldName: string) => {\n setState(prev => ({\n ...prev,\n selectedFields: prev.selectedFields.includes(fieldName)\n ? prev.selectedFields.filter(f => f !== fieldName)\n : [...prev.selectedFields, fieldName]\n }));\n };\n \n // Process PDF\n const processPDF = async () => {\n if (!state.uploadedFile) {\n setState(prev => ({ ...prev, error: \"Please select a PDF file first.\" }));\n return;\n }\n \n if (state.selectedFields.length === 0) {\n setState(prev => ({ ...prev, error: \"Please select at least one field to extract.\" }));\n return;\n }\n \n setState(prev => ({ ...prev, isProcessing: true, error: null, result: null }));\n \n try {\n const formData = new FormData();\n formData.append(\"pdf\", state.uploadedFile);\n formData.append(\"fields\", JSON.stringify(state.selectedFields));\n formData.append(\"format\", state.outputFormat);\n \n const response = await fetch(\"/api/process-pdf\", {\n method: \"POST\",\n body: formData\n });\n \n const result: ProcessingResponse = await response.json();\n \n if (result.success) {\n setState(prev => ({ ...prev, result, isProcessing: false }));\n } else {\n setState(prev => ({ \n ...prev, \n error: result.error || \"Processing failed\", \n isProcessing: false \n }));\n }\n } catch (error) {\n setState(prev => ({ \n ...prev, \n error: `Network error: ${error instanceof Error ? error.message : 'Unknown error'}`, \n isProcessing: false \n }));\n }\n };\n \n // Format file size\n const formatFileSize = (bytes: number) => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n \n // Download result\n const downloadResult = () => {\n if (!state.result) return;\n \n const content = state.outputFormat === \"html\" \n ? state.result.htmlOutput || \"\" \n : JSON.stringify(state.result.extractedData, null, 2);\n \n const blob = new Blob([content], { \n type: state.outputFormat === \"html\" ? \"text/html\" : \"application/json\" \n });\n \n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `invoice.${state.outputFormat}`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n \n return (\n

\n {/* Header */}\n

\n PDF to HTML Converter\n

\n Extract invoice data from PDFs using Claude 3.5 Haiku and generate beautiful HTML replicas\n

\n \n {/* Upload Section */}\n

1. Upload PDF Invoice

\n \n e.preventDefault()}\n onDragEnter={(e) => e.currentTarget.classList.add(\"drag-over\")}\n onDragLeave={(e) => e.currentTarget.classList.remove(\"drag-over\")}\n onClick={() => fileInputRef.current?.click()}\n >\n \n \n {state.uploadedFile ? (\n

✓ {state.uploadedFile.name}

\n {formatFileSize(state.uploadedFile.size)}\n

\n ) : (\n

📄

Drop your PDF here or click to browse

\n Maximum file size: {formatFileSize(config.maxFileSize)}\n

\n )}\n

\n \n {/* Field Selection */}\n

2. Select Fields to Extract

\n \n

\n {AVAILABLE_FIELDS.map((field) => (\n \n toggleField(field.name)}\n className=\"rounded border-gray-300\"\n />\n

{field.label}

{field.description}

\n \n ))}\n

\n \n

\n setState(prev => ({ \n ...prev, \n selectedFields: AVAILABLE_FIELDS.map(f => f.name) \n }))}\n className=\"text-sm text-blue-600 hover:text-blue-800\"\n >\n Select All\n \n setState(prev => ({ \n ...prev, \n selectedFields: AVAILABLE_FIELDS.filter(f => f.required).map(f => f.name) \n }))}\n className=\"text-sm text-blue-600 hover:text-blue-800\"\n >\n Select Required Only\n \n setState(prev => ({ ...prev, selectedFields: [] }))}\n className=\"text-sm text-red-600 hover:text-red-800\"\n >\n Clear All\n \n

\n \n {/* Output Format */}\n

3. Choose Output Format

\n \n

\n \n setState(prev => ({ \n ...prev, \n outputFormat: e.target.value as \"html\" | \"json\" \n }))}\n className=\"text-blue-600\"\n />\n HTML (Beautiful formatted invoice)\n \n \n setState(prev => ({ \n ...prev, \n outputFormat: e.target.value as \"html\" | \"json\" \n }))}\n className=\"text-blue-600\"\n />\n JSON (Structured data)\n \n

\n \n {/* Process Button */}\n

\n \n {state.isProcessing &&

}\n {state.isProcessing ? \"Processing...\" : \"Extract Data\"}\n \n

\n \n {/* Error Display */}\n {state.error && (\n

\n Error: {state.error}\n

\n )}\n \n {/* Results */}\n {state.result && state.result.success && (\n

Results

\n \n Download {state.outputFormat.toUpperCase()}\n \n

\n \n {/* Processing Stats */}\n

\n Processing Time: {state.result.processingTime}ms\n

\n {state.result.tokenUsage && (\n <>\n

\n Tokens Used: {state.result.tokenUsage.total.toLocaleString()}\n

\n Est. Cost: ₹{(\n (state.result.tokenUsage.input * 0.067 + state.result.tokenUsage.output * 0.336) / 1000000\n ).toFixed(2)}\n

\n \n )}\n

\n \n {/* Extracted Data */}\n

Extracted Data:

\n              {JSON.stringify(state.result.extractedData, null, 2)}\n

\n \n {/* HTML Preview */}\n {state.outputFormat === \"html\" && state.result.htmlOutput && (\n

HTML Preview:

\n \n

\n )}\n

\n )}\n \n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();",[],[149,212],["D",1749642033639],[177,178,179],[149],"ed2357aa-46b9-11f0-9cf3-76b3cceeab13","index.ts",13,["D",1749642480979],"http","import { Hono } from \"https://esm.sh/hono@4.0.0\";\nimport { cors } from \"https://esm.sh/hono@4.0.0/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { ProcessingRequest, ProcessingResponse } from \"../shared/types.ts\";\nimport { processPDFWithClaude } from \"./services/pdf-processor.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Enable CORS for API endpoints\napp.use(\"/api/*\", cors());\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Health check endpoint\napp.get(\"/api/health\", (c) => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n service: \"pdf-to-html-converter\",\n });\n});\n\n// Main UI route\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject initial data and configuration\n const config = {\n apiBaseUrl: new URL(c.req.url).origin,\n supportedFormats: [\"application/pdf\"],\n maxFileSize: 10 * 1024 * 1024, // 10MB\n availableFields: [\n \"InvoiceFrom\",\n \"InvoiceTo\",\n \"PaidBy\",\n \"PaidTo\",\n \"Amount\",\n \"Currency\",\n \"InvoiceDate\",\n \"PaidDate\",\n \"LineItems\",\n ],\n };\n\n const configScript = ``;\n\n html = html.replace(\"\", `${configScript}`);\n return c.html(html);\n});\n\n// API endpoint for PDF processing\napp.post(\"/api/process-pdf\", async (c) => {\n try {\n const formData = await c.req.formData();\n const file = formData.get(\"pdf\") as File;\n const fieldsToExtract = formData.get(\"fields\") as string;\n const outputFormat = formData.get(\"format\") as string || \"html\";\n\n if (!file) {\n return c.json({ error: \"No PDF file provided\" }, 400);\n }\n\n if (file.type !== \"application/pdf\") {\n return c.json({ error: \"File must be a PDF\" }, 400);\n }\n\n if (file.size > 10 * 1024 * 1024) { // 10MB limit\n return c.json({ error: \"File size must be less than 10MB\" }, 400);\n }\n\n // Convert file to base64\n const arrayBuffer = await file.arrayBuffer();\n const base64Data = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));\n\n // Parse fields to extract (default to all if not specified)\n let fields: string[] = [\n \"InvoiceFrom\",\n \"InvoiceTo\",\n \"PaidBy\",\n \"PaidTo\",\n \"Amount\",\n \"Currency\",\n \"InvoiceDate\",\n \"PaidDate\",\n \"LineItems\",\n ];\n\n if (fieldsToExtract) {\n try {\n fields = JSON.parse(fieldsToExtract);\n } catch (e) {\n return c.json({ error: \"Invalid fields format. Must be JSON array.\" }, 400);\n }\n }\n\n const request: ProcessingRequest = {\n pdfBase64: base64Data,\n fieldsToExtract: fields,\n outputFormat: outputFormat as \"html\" | \"json\",\n };\n\n // Process PDF with Claude\n const result = await processPDFWithClaude(request);\n\n const response: ProcessingResponse = {\n success: true,\n extractedData: result.extractedData,\n htmlOutput: result.htmlOutput,\n processingTime: result.processingTime,\n tokenUsage: result.tokenUsage,\n };\n\n return c.json(response);\n } catch (error) {\n console.error(\"PDF processing error:\", error);\n\n const response: ProcessingResponse = {\n success: false,\n error: error instanceof Error ? error.message : \"Unknown error occurred\",\n processingTime: 0,\n };\n\n return c.json(response, 500);\n }\n});\n\n// API endpoint for configuration\napp.get(\"/api/config\", (c) => {\n return c.json({\n availableFields: [\n \"InvoiceFrom\",\n \"InvoiceTo\",\n \"PaidBy\",\n \"PaidTo\",\n \"Amount\",\n \"Currency\",\n \"InvoiceDate\",\n \"PaidDate\",\n \"LineItems\",\n ],\n supportedFormats: [\"html\", \"json\"],\n limits: {\n maxFileSize: 10 * 1024 * 1024,\n supportedTypes: [\"application/pdf\"],\n },\n });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals","prashamtrivedi-pdftohtml-ai",[],[155,223],"11d48674-46b9-11f0-8fe1-76b3cceeab13","pdf-processor.ts","11d48732-46b9-11f0-8fe1-76b3cceeab13","dafd192c-46b8-11f0-9a71-76b3cceeab13",7,["D",1749642113047],"import { ClaudeService } from \"./claude.ts\";\nimport type { ProcessingRequest, ProcessingResult, InvoiceData } from \"../../shared/types.ts\";\n\nexport async function processPDFWithClaude(request: ProcessingRequest): Promise {\n const claudeService = new ClaudeService();\n \n // Extract data using Claude\n const claudeResponse = await claudeService.extractInvoiceData(\n request.pdfBase64,\n request.fieldsToExtract\n );\n \n // Generate HTML output if requested\n let htmlOutput: string | undefined;\n if (request.outputFormat === \"html\") {\n htmlOutput = generateHTMLFromInvoiceData(claudeResponse.extractedData);\n }\n \n return {\n extractedData: claudeResponse.extractedData,\n htmlOutput,\n processingTime: claudeResponse.processingTime,\n tokenUsage: claudeResponse.tokenUsage\n };\n}\n\nfunction generateHTMLFromInvoiceData(data: InvoiceData): string {\n // Create modern, professional HTML invoice replica\n const html = `\n\n\n \n \n Invoice\n \n\n\n

INVOICE

Generated from PDF Document

\n \n

Invoice From

\n ${data.InvoiceFrom ? escapeHtml(data.InvoiceFrom) : 'Not specified'}\n

\n \n

Invoice To

\n ${data.InvoiceTo ? escapeHtml(data.InvoiceTo) : 'Not specified'}\n

\n \n

Payment Details

Paid By

\n ${data.PaidBy ? escapeHtml(data.PaidBy) : 'Not specified'}\n

Paid To

\n ${data.PaidTo ? escapeHtml(data.PaidTo) : 'Not specified'}\n

\n \n

Important Dates

Invoice Date

\n ${data.InvoiceDate ? formatDate(data.InvoiceDate) : 'Not specified'}\n

Paid Date

\n ${data.PaidDate ? formatDate(data.PaidDate) : 'Not specified'}\n

\n \n ${data.Amount !== null || data.Currency ? `\n

Total Amount

\n ${data.Currency || ''} ${data.Amount !== null ? formatAmount(data.Amount) : 'Not specified'}\n

\n ` : ''}\n \n ${data.LineItems && data.LineItems.length > 0 ? `\n

\n Line Items\n

\n ${data.LineItems.map(item => `\n

\n ${escapeHtml(item)}\n

\n `).join('')}\n

\n ` : ''}\n

\n \n \n

\n\n`;\n\n return html;\n}\n\nfunction escapeHtml(text: string): string {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n}\n\nfunction formatDate(dateString: string): string {\n try {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n } catch {\n return dateString;\n }\n}\n\nfunction formatAmount(amount: number): string {\n return new Intl.NumberFormat('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n }).format(amount);\n}",[],[155,240,232],"services","fbcd09b4-46b8-11f0-b5ae-76b3cceeab13","claude.ts","fbcd0a4a-46b8-11f0-b5ae-76b3cceeab13",6,["D",1749642076084],"import type { InvoiceData, ClaudeResponse } from \"../../shared/types.ts\";\n\ninterface ClaudeMessage {\n role: \"user\" | \"assistant\";\n content: Array<{\n type: \"text\" | \"document\";\n text?: string;\n source?: {\n type: \"base64\";\n media_type: \"application/pdf\";\n data: string;\n };\n }>;\n}\n\ninterface ClaudeAPIRequest {\n model: string;\n max_tokens: number;\n messages: ClaudeMessage[];\n system?: string;\n}\n\ninterface ClaudeAPIResponse {\n content: Array<{\n type: \"text\";\n text: string;\n }>;\n usage: {\n input_tokens: number;\n output_tokens: number;\n };\n}\n\nexport class ClaudeService {\n private apiKey: string;\n private baseUrl = \"https://api.anthropic.com/v1\";\n \n constructor() {\n this.apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\") || \"\";\n if (!this.apiKey) {\n throw new Error(\"ANTHROPIC_API_KEY environment variable is required\");\n }\n }\n \n async extractInvoiceData(\n pdfBase64: string, \n fieldsToExtract: string[]\n ): Promise {\n const startTime = Date.now();\n \n // Create extraction schema based on requested fields\n const schema = this.createExtractionSchema(fieldsToExtract);\n \n // Build system prompt for invoice extraction\n const systemPrompt = `You are an expert document analysis AI specializing in invoice processing. \n Your task is to extract structured data from PDF invoices and return it in JSON format.\n \n IMPORTANT GUIDELINES:\n - Extract only the fields requested in the schema\n - Return valid JSON only, no other text\n - If a field is not found, use null as the value\n - For LineItems, extract as an array of strings describing each line item\n - Ensure dates are in ISO format (YYYY-MM-DD) if found\n - For amounts, extract numeric values only\n - Be precise and accurate in your extraction`;\n \n const userPrompt = `Please extract the following invoice data from this PDF document:\n\n${schema}\n\nReturn the extracted data as a valid JSON object matching the schema structure. \nExtract only the information that is clearly visible in the document.`;\n \n const request: ClaudeAPIRequest = {\n model: \"claude-3-5-haiku-20241022\",\n max_tokens: 4000,\n system: systemPrompt,\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"document\",\n source: {\n type: \"base64\",\n media_type: \"application/pdf\",\n data: pdfBase64\n }\n },\n {\n type: \"text\",\n text: userPrompt\n }\n ]\n }]\n };\n \n try {\n const response = await fetch(`${this.baseUrl}/messages`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": this.apiKey,\n \"anthropic-version\": \"2023-06-01\"\n },\n body: JSON.stringify(request)\n });\n \n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Claude API error: ${response.status} - ${errorText}`);\n }\n \n const apiResponse: ClaudeAPIResponse = await response.json();\n const extractedText = apiResponse.content[0]?.text || \"\";\n \n // Parse JSON response from Claude\n let extractedData: InvoiceData;\n try {\n // Clean up the response text (remove any markdown formatting)\n const cleanedText = extractedText\n .replace(/```json\\n?/g, \"\")\n .replace(/```\\n?/g, \"\")\n .trim();\n \n extractedData = JSON.parse(cleanedText);\n } catch (e) {\n throw new Error(`Failed to parse Claude response as JSON: ${extractedText}`);\n }\n \n const processingTime = Date.now() - startTime;\n \n return {\n extractedData,\n processingTime,\n tokenUsage: {\n input: apiResponse.usage.input_tokens,\n output: apiResponse.usage.output_tokens,\n total: apiResponse.usage.input_tokens + apiResponse.usage.output_tokens\n }\n };\n \n } catch (error) {\n throw new Error(`Claude API request failed: ${error instanceof Error ? error.message : String(error)}`);\n }\n }\n \n private createExtractionSchema(fields: string[]): string {\n const fieldMap: Record = {\n \"InvoiceFrom\": \"InvoiceFrom: string | null // Company/person who issued the invoice\",\n \"InvoiceTo\": \"InvoiceTo: string | null // Company/person who received the invoice\", \n \"PaidBy\": \"PaidBy: string | null // Who made the payment\",\n \"PaidTo\": \"PaidTo: string | null // Who received the payment\",\n \"Amount\": \"Amount: number | null // Total amount (numeric value only)\",\n \"Currency\": \"Currency: string | null // Currency code (e.g., USD, EUR, INR)\",\n \"InvoiceDate\": \"InvoiceDate: string | null // Date invoice was issued (YYYY-MM-DD format)\",\n \"PaidDate\": \"PaidDate: string | null // Date payment was made (YYYY-MM-DD format)\",\n \"LineItems\": \"LineItems: string[] | null // Array of line item descriptions\"\n };\n \n const selectedFields = fields\n .filter(field => fieldMap[field])\n .map(field => \" \" + fieldMap[field])\n .join(\",\\n\");\n \n return `{\n${selectedFields}\n}`;\n }\n}",[],[155,240,242],"dafd1814-46b8-11f0-9a71-76b3cceeab13",["D",1749642021036],[173,174],[155,240],["D",1749642014987],[172,175],[155],["D",1749642007878],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_124":293,"_294":295,"_296":297,"_298":25,"_299":25,"_300":25,"_301":59,"_302":-5,"_303":-7,"_304":-7,"_305":63,"_306":25,"_307":25,"_308":-5,"_309":25,"_310":25,"_311":25,"_312":-5},"ENV",{"_264":265,"_266":267,"_268":87,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v14