[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_262":263,"_264":265},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",74,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/services/pdf-processor.ts","latestPath","fileId","11d48732-46b9-11f0-8fe1-76b3cceeab13","name","pdf-processor.ts","fileType","script","content","import { blob } from \"https://esm.town/v/std/blob\";\nimport type { InvoiceData, ProcessingRequest, ProcessingResult } from \"../../shared/types.ts\";\nimport { ClaudeService } from \"./claude.ts\";\n\ninterface TemplateData {\n htmlTemplate: string;\n templateName: string;\n createdAt: string;\n extractedData: InvoiceData;\n}\n\nexport async function processPDFWithClaude(request: ProcessingRequest): Promise {\n const claudeService = new ClaudeService();\n\n // Set default values\n const orgName = request.orgName || \"Prasham\";\n const recreateTemplate = request.recreateTemplate || false;\n let templateName = request.templateName || \"\";\n\n // Check if we should use cached template\n if (!recreateTemplate && templateName) {\n const cachedTemplate = await getTemplateFromBlob(orgName, templateName);\n if (cachedTemplate) {\n console.log(`Using cached template: ${templateName} With Size: ${cachedTemplate}`);\n // Extract data using Claude for current PDF\n // const claudeResponse = await claudeService.extractInvoiceData(\n // request.pdfBase64,\n // request.fieldsToExtract,\n // );\n\n return {\n extractedData: {},\n htmlOutput: request.outputFormat === \"html\" ? cachedTemplate.htmlTemplate : undefined,\n processingTime: 0,\n tokenUsage: 0,\n templateName: templateName,\n fromCache: true,\n };\n }\n }\n\n // Create new template\n return await createTemplate(request.pdfBase64, orgName, templateName, request.fieldsToExtract, request.outputFormat);\n}\n\nasync function createTemplate(\n pdfData: string,\n orgName: string,\n templateName: string,\n fieldsToExtract: string[],\n outputFormat: \"html\" | \"json\",\n): Promise {\n const claudeService = new ClaudeService();\n\n let templateNameToUse = templateName;\n let nameGenerationTime = 0;\n let nameGenerationTokens = { input: 0, output: 0, total: 0 };\n\n // Generate template name using AI if blank\n if (!templateName || templateName.trim() === \"\") {\n const nameResponse = await claudeService.generateTemplateName(pdfData);\n templateNameToUse = nameResponse.templateName;\n nameGenerationTime = nameResponse.processingTime;\n nameGenerationTokens = nameResponse.tokenUsage;\n }\n\n // Extract data using Claude\n const claudeResponse = await claudeService.extractInvoiceData(\n pdfData,\n fieldsToExtract,\n );\n\n // Generate HTML template if requested\n let htmlOutput: string | undefined;\n let htmlResponse = { processingTime: 0, tokenUsage: { input: 0, output: 0, total: 0 } };\n\n if (outputFormat === \"html\") {\n const htmlData = await claudeService.exctractInvoiceHtml(pdfData, claudeResponse.extractedData);\n htmlOutput = htmlData.extractedText;\n htmlResponse.processingTime = htmlData.processingTime;\n htmlResponse.tokenUsage = htmlData.tokenUsage;\n\n // Save template to blob storage\n const templateData: TemplateData = {\n htmlTemplate: htmlOutput,\n templateName: templateNameToUse,\n createdAt: new Date().toISOString(),\n extractedData: claudeResponse.extractedData,\n };\n\n await saveTemplateToBlob(orgName, templateNameToUse, templateData);\n }\n\n return {\n extractedData: claudeResponse.extractedData,\n htmlOutput,\n processingTime: claudeResponse.processingTime + htmlResponse.processingTime + nameGenerationTime,\n tokenUsage: {\n input: claudeResponse.tokenUsage.input + htmlResponse.tokenUsage.input + nameGenerationTokens.input,\n output: claudeResponse.tokenUsage.output + htmlResponse.tokenUsage.output + nameGenerationTokens.output,\n total: claudeResponse.tokenUsage.total + htmlResponse.tokenUsage.total + nameGenerationTokens.total,\n },\n templateName: templateNameToUse,\n fromCache: false,\n };\n}\n\nasync function getBlobAt(path: string): Promise {\n try {\n const data = await blob.get(path);\n if (data) {\n const textData = new TextDecoder().decode(data);\n return JSON.parse(textData) as TemplateData;\n }\n return null;\n } catch (error) {\n console.error(`Error reading blob at ${path}:`, error);\n return null;\n }\n}\n\nasync function saveTemplateToBlob(orgName: string, templateName: string, templateData: TemplateData): Promise {\n try {\n const path = `${orgName}/${templateName}`;\n const jsonData = JSON.stringify(templateData, null, 2);\n const encodedData = new TextEncoder().encode(jsonData);\n await blob.set(path, encodedData);\n console.log(`Template saved to blob storage at: ${path}`);\n } catch (error) {\n console.error(`Error saving template to blob storage:`, error);\n throw new Error(`Failed to save template: ${error instanceof Error ? error.message : String(error)}`);\n }\n}\n\nasync function getTemplateFromBlob(orgName: string, templateName: string): Promise {\n try {\n const path = `${orgName}/${templateName}`;\n const blobData = await blob.get(path);\n return blobData.bytes.toString(\"utf-8\");\n } catch (error) {\n console.error(`Error retrieving template from blob storage:`, error);\n return null;\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 ${\n data.InvoiceFrom ? escapeHtml(data.InvoiceFrom) : \"Not specified\"\n }\n

\n \n

Invoice To

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

\n \n

Payment Details

Paid By

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

Paid To

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

\n \n

Important Dates

Invoice Date

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

Paid Date

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

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

Total Amount

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

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

\n Line Items\n

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

\n ${escapeHtml(item)}\n

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

\n `\n : \"\"\n }\n

\n \n \n

INVOICE

Generated from PDF Document

\n \n

Invoice From

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

\n \n

Invoice To

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

\n \n

Payment Details

Paid By

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

Paid To

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

\n \n

Important Dates

Invoice Date

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

Paid Date

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

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

Total Amount

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

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

\n Line Items\n

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

\n ${escapeHtml(item)}\n

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

\n `\n : \"\"\n }\n

\n \n \n

\n\n`;\n\n return html;\n}\n\nfunction escapeHtml(text: string): string {\n const entities: { [key: string]: string } = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n \"\\\"\": \""\",\n \"'\": \"'\",\n };\n return text.replace(/[&<>\"']/g, char => entities[char] || char);\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}","createdAt",["D",1749731438516],"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",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"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",{"_44":45,"_32":46,"_39":258,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":259,"_82":260,"_84":261,"_86":25},"tree",[172,177,181,183],"files",[172,173,174,175,176,177,178,179,180,181,182,183],"counts",{"_161":64,"_162":158,"_163":64,"_164":165,"_166":167},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":60,"_39":159,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":160},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":153,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":154},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":146,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":148},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":138,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_27":141},"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",[133],"df6e0732-46b8-11f0-99ef-76b3cceeab13","shared","df6e080e-46b8-11f0-99ef-76b3cceeab13",3,["D",1749642028488],"directory",[143],"e2802cc0-46b8-11f0-8915-76b3cceeab13","frontend","e2802d9c-46b8-11f0-8915-76b3cceeab13",4,["D",1749642033639],[150],"d761cf88-46b8-11f0-be7a-76b3cceeab13","backend","d761d0b4-46b8-11f0-be7a-76b3cceeab13",1,["D",1749642014987],[156],"pulls","branches","forks","envVars",{"_168":170,"_171":64},"connections",{"_168":64,"_169":64},"count","unfilledCount",2,"emptyCount",{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":60,"_39":255,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":256,"_27":257},{"_44":251,"_32":241,"_30":236,"_135":157,"_42":43,"_41":170,"_137":60,"_39":252,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":253,"_27":254},{"_44":242,"_32":243,"_30":244,"_135":236,"_42":43,"_41":245,"_137":60,"_39":246,"_13":247,"_34":35,"_36":248,"_24":25,"_140":-5,"_185":249,"_27":250},{"_44":235,"_32":33,"_30":31,"_135":236,"_42":43,"_41":14,"_137":25,"_39":237,"_13":238,"_34":35,"_36":38,"_24":25,"_140":-5,"_185":239,"_27":240},{"_44":226,"_32":227,"_30":58,"_135":157,"_42":43,"_41":228,"_137":25,"_39":229,"_13":170,"_34":230,"_36":231,"_24":25,"_140":232,"_185":233,"_27":234},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":223,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":224,"_27":225},{"_44":215,"_32":216,"_30":217,"_135":151,"_42":43,"_41":218,"_137":25,"_39":219,"_13":170,"_34":35,"_36":220,"_24":25,"_140":-5,"_185":221,"_27":222},{"_44":207,"_32":208,"_30":209,"_135":151,"_42":43,"_41":210,"_137":25,"_39":211,"_13":158,"_34":20,"_36":212,"_24":25,"_140":-5,"_185":213,"_27":214},{"_44":199,"_32":200,"_30":201,"_135":151,"_42":43,"_41":202,"_137":25,"_39":203,"_13":158,"_34":20,"_36":204,"_24":25,"_140":-5,"_185":205,"_27":206},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":196,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_185":197,"_27":198},{"_44":188,"_32":189,"_30":190,"_135":144,"_42":43,"_41":191,"_137":25,"_39":192,"_13":158,"_34":35,"_36":193,"_24":25,"_140":-5,"_185":194,"_27":195},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":184,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_185":186,"_27":187},["D",1749642330897],"children",[],[133],"2f3d2e6a-4767-11f0-801d-76b3cceeab13","types.ts","ec8ba168-46b8-11f0-8ac8-76b3cceeab13",62,["D",1749716894808],"// 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 orgName?: string;\n templateName?: string;\n recreateTemplate?: boolean;\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 templateName?: string;\n fromCache?: boolean;\n}\n\n// Internal processing result\nexport interface ProcessingResult {\n extractedData: InvoiceData;\n htmlOutput?: string;\n processingTime: number;\n tokenUsage?: TokenUsage;\n templateName?: string;\n fromCache?: boolean;\n}\n\n// Claude API response structure\nexport interface ClaudeResponse {\n extractedData: InvoiceData;\n processingTime: number;\n tokenUsage: TokenUsage;\n}\n\n// Template generation response\nexport interface TemplateResponse {\n extractedText: string;\n processingTime: number;\n tokenUsage: TokenUsage;\n}\n\n// Template name generation response\nexport interface TemplateNameResponse {\n templateName: string;\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 orgName: string;\n templateName: string;\n recreateTemplate: boolean;\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];\n",[],[143,189],["D",1749642028488],[182],[143],"3b325ad6-46ba-11f0-898d-76b3cceeab13","style.css","85a0a3f8-46b9-11f0-b100-76b3cceeab13",16,["D",1749642611941],"/* Dark Theme PDF to HTML Converter Styles */\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\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 dark theme */\n.result-preview::-webkit-scrollbar {\n width: 8px;\n}\n\n.result-preview::-webkit-scrollbar-track {\n background: #1e293b;\n border-radius: 4px;\n}\n\n.result-preview::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n}\n\n.result-preview::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n}\n\n/* Dark theme scrollbars for all elements */\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: #1e293b;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n}\n\n/* Focus styles for accessibility - dark theme */\ninput:focus, button:focus {\n outline: 2px solid #3b82f6;\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 color: black !important;\n }\n}\n\n/* Enhanced form elements for dark theme */\ninput[type=\"checkbox\"] {\n width: 1rem;\n height: 1rem;\n accent-color: #3b82f6;\n background-color: #374151;\n border-color: #6b7280;\n}\n\ninput[type=\"radio\"] {\n accent-color: #3b82f6;\n background-color: #374151;\n border-color: #6b7280;\n}\n\n/* Dark theme card styles */\n.dark-card {\n background: linear-gradient(145deg, #1f2937, #111827);\n border: 1px solid #374151;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\n}\n\n.dark-section {\n background: linear-gradient(145deg, #111827, #0f172a);\n border: 1px solid #1f2937;\n}\n\n/* Success states - dark theme */\n.success-border {\n border-color: #10b981;\n}\n\n.success-bg {\n background-color: #064e3b;\n}\n\n/* Error states - dark theme */\n.error-border {\n border-color: #ef4444;\n}\n\n.error-bg {\n background-color: #7f1d1d;\n}\n\n/* Enhanced hover effects for dark theme */\n.upload-area:hover {\n transform: translateY(-1px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);\n}\n\nbutton:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);\n}\n\n/* File type indicators */\n.file-icon {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n/* Progress indicators - dark theme */\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #374151;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n background-color: #3b82f6;\n transition: width 0.3s ease;\n}\n\n/* Toast notifications styling - dark theme */\n.toast {\n position: fixed;\n top: 1rem;\n right: 1rem;\n z-index: 1000;\n min-width: 300px;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);\n transform: translateX(100%);\n transition: transform 0.3s ease;\n}\n\n.toast.show {\n transform: translateX(0);\n}\n\n.toast.success {\n background-color: #064e3b;\n border-left: 4px solid #10b981;\n color: #d1fae5;\n}\n\n.toast.error {\n background-color: #7f1d1d;\n border-left: 4px solid #ef4444;\n color: #fecaca;\n}\n\n/* Enhanced dark theme gradients */\n.gradient-bg {\n background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);\n}\n\n.glass-effect {\n background: rgba(31, 41, 55, 0.8);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(75, 85, 99, 0.3);\n}\n\n/* Dark theme button styles */\n.btn-primary {\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\n border: none;\n color: white;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover:not(:disabled) {\n background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);\n box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);\n}\n\n.btn-secondary {\n background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);\n border: none;\n color: white;\n transition: all 0.2s ease;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: linear-gradient(135deg, #4b5563 0%, #374151 100%);\n box-shadow: 0 8px 25px rgba(107, 114, 128, 0.4);\n}\n\n/* Code block styling for dark theme */\npre {\n background: #0f172a !important;\n border: 1px solid #334155;\n color: #e2e8f0;\n}\n\ncode {\n background: #1e293b;\n color: #94a3b8;\n padding: 0.125rem 0.25rem;\n border-radius: 0.25rem;\n font-size: 0.875rem;\n}\n\n/* Selection styling for dark theme */\n::selection {\n background-color: #3b82f6;\n color: white;\n}\n\n::-moz-selection {\n background-color: #3b82f6;\n color: white;\n}",[],[150,200],"0da774a2-46ba-11f0-8fe7-76b3cceeab13","index.html","604dbd0c-46b9-11f0-8543-76b3cceeab13",14,["D",1749642535530],"\n\n\n \n \n PDF to HTML Converter\n \n \n \n\n\n

\n \n \n \n \n \n \n\n",[],[150,208],"a2540716-4767-11f0-956d-76b3cceeab13","app.tsx","7c00debc-46b9-11f0-89dd-76b3cceeab13",66,["D",1749717087901],"/** @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 orgName: \"Prasham\",\n templateName: \"\",\n recreateTemplate: false,\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 formData.append(\"orgName\", state.orgName);\n formData.append(\"templateName\", state.templateName);\n formData.append(\"recreateTemplate\", state.recreateTemplate.toString());\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 with template caching\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 {/* Template Management Section */}\n

2. Template Management

\n \n

\n \n Organization Name\n \n setState(prev => ({ ...prev, orgName: e.target.value }))}\n className=\"w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"e.g., Prasham\"\n />\n

Templates will be organized by organization

\n \n

\n \n Template Name (optional)\n \n setState(prev => ({ ...prev, templateName: e.target.value }))}\n className=\"w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"Leave blank for AI-generated name\"\n />\n

If blank, AI will generate a descriptive name

\n \n

\n setState(prev => ({ ...prev, recreateTemplate: e.target.checked }))}\n className=\"rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500\"\n />\n \n Force recreate template (ignores existing cached templates)\n \n

\n \n

How template caching works:

• Templates are cached by organization and name for faster processing
• If template exists and \"Force recreate\" is off, cached version is used
• If template name is blank, AI generates a descriptive name based on the PDF
• Cached templates preserve the visual layout and styling of your invoices

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

3. Select Fields to Extract

\n \n

\n {AVAILABLE_FIELDS.map((field) => (\n \n toggleField(field.name)}\n className=\"rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500\"\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-400 hover:text-blue-300\"\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-400 hover:text-blue-300\"\n >\n Select Required Only\n \n setState(prev => ({ ...prev, selectedFields: [] }))}\n className=\"text-sm text-red-400 hover:text-red-300\"\n >\n Clear All\n \n

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

4. Choose Output Format

\n \n

\n \n setState(prev => ({ \n ...prev, \n outputFormat: e.target.value as \"html\" | \"json\" \n }))}\n className=\"text-blue-500 bg-gray-800 border-gray-600 focus:ring-blue-500\"\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-500 bg-gray-800 border-gray-600 focus:ring-blue-500\"\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 {/* Template Info */}\n {state.result.templateName && (\n

\n \n 📄 Template: {state.result.templateName}\n \n {state.result.fromCache && (\n \n From Cache\n \n )}\n {!state.result.fromCache && (\n \n Newly Created\n \n )}\n

\n Organization: {state.orgName}\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();\n",[],[150,216],["D",1749642033639],[178,179,180],[150],"7e3e65ec-4767-11f0-92bb-76b3cceeab13","index.ts",65,["D",1749717027324],"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 const orgName = formData.get(\"orgName\") as string || \"Prasham\";\n const templateName = formData.get(\"templateName\") as string || \"\";\n const recreateTemplate = formData.get(\"recreateTemplate\") === \"true\";\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 orgName,\n templateName,\n recreateTemplate,\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 templateName: result.templateName,\n fromCache: result.fromCache,\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 defaults: {\n orgName: \"Prasham\",\n recreateTemplate: false,\n },\n });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals\n","prashamtrivedi-pdftohtml-ai",[],[156,227],"0bf61346-4789-11f0-bb8c-76b3cceeab13","dafd192c-46b8-11f0-9a71-76b3cceeab13",["D",1749731438516],23,[],[156,241,33],"services","50b86410-4767-11f0-ad1a-76b3cceeab13","claude.ts","fbcd0a4a-46b8-11f0-b5ae-76b3cceeab13",63,["D",1749716950986],32,"import Anthropic from \"npm:@anthropic-ai/sdk\";\nimport type { ClaudeResponse, InvoiceData, TemplateResponse, TemplateNameResponse } from \"../../shared/types.ts\";\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\n private anthropic;\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 this.anthropic = new Anthropic(this.apiKey);\n }\n\n async generateTemplateName(pdfBase64: string): Promise {\n const startTime = Date.now();\n\n const systemPrompt = `You are an AI assistant that generates concise, descriptive template names for invoice PDFs.\n\nOBJECTIVE: Analyze the PDF and generate a short, descriptive template name that captures the essence of the document.\n\nNAMING GUIDELINES:\n- Use 2-4 words maximum\n- Include company name or document type if clearly visible\n- Use PascalCase (e.g., \"AcmeCorpInvoice\", \"StandardInvoice\", \"ServiceBill\")\n- Be descriptive but concise\n- No spaces, special characters, or numbers unless part of company name\n\nOUTPUT FORMAT:\nReturn only the template name, nothing else.\n\nEXAMPLES:\n- \"AcmeCorpInvoice\"\n- \"ServiceBill\" \n- \"ConsultingInvoice\"\n- \"RetailReceipt\"`;\n\n try {\n const response = await this.anthropic.messages.create({\n model: \"claude-3-5-haiku-20241022\",\n max_tokens: 50,\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: \"Generate a template name for this invoice PDF\",\n },\n ],\n }],\n });\n\n const templateName = response.content[0]?.text?.trim() || \"GeneratedTemplate\";\n const processingTime = Date.now() - startTime;\n\n return {\n templateName,\n processingTime,\n tokenUsage: {\n input: response.usage.input_tokens,\n output: response.usage.output_tokens,\n total: response.usage.input_tokens + response.usage.output_tokens,\n },\n };\n } catch (error) {\n throw new Error(`Claude template name generation failed: ${error instanceof Error ? error.message : String(error)}`);\n }\n }\n\n async exctractInvoiceHtml(\n pdfBase64: string,\n fieldsToExtract: any,\n ): Promise {\n const startTime = Date.now();\n\n // Build system prompt for invoice extraction\n const systemPrompt = `You are an expert document analysis AI specializing in invoice template generation.\n\nOBJECTIVE: Transform the provided PDF invoice into a pixel-perfect HTML template that maintains visual fidelity while supporting dynamic data injection.\n\nVISUAL ANALYSIS REQUIREMENTS:\n- Analyze layout structure, spacing, typography, and visual hierarchy\n- Identify table structures, alignment patterns, and spacing ratios\n- Note font weights, sizes, and color schemes\n- Preserve logo placement and branding elements\n\nHTML GENERATION REQUIREMENTS:\n- Generate semantic HTML5 with embedded CSS (no external dependencies)\n- Use CSS Grid/Flexbox for responsive layouts that match PDF structure\n- Include template placeholders: ${Object.keys(fieldsToExtract).join(\", \")}\n- Format placeholders as: {{variable_name}} for easy replacement\n- Ensure print-friendly CSS (@media print)\n\nOUTPUT FORMAT:\n- Return only the complete HTML document\n- Include and full document structure\n- Embed all CSS within

Diff · v74