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}","deleted",false,"label",[60,61,38],"backend","services","aff6ce6c-5cca-11f0-aa49-0224a6c84d84","html-to-pdf.ts","d4777eac-478b-11f0-b88a-76b3cceeab13",137,["D",1752068605371],45,"import { blob } from \"https://esm.town/v/std/blob\";\n\nimport type {\n HtmlToPdfRequest,\n HtmlToPdfResult,\n PdfGenerationOptions,\n} from \"../../shared/types.ts\";\n\nexport class HtmlToPdfService {\n async convertHtmlToPdf(request: HtmlToPdfRequest): Promise {\n const { isValid, error } = this.validateHtml(request.html); const startTime = Date.now();\n\n // Generate filename if not provided\n const filename = request.filename || this.generateFilename(request.orgName);\n const blobData = await blob.getJSON(filename);\n console.log({ filename, blobData, request });\n const htmlData = request.html;\n // Set default PDF options\n const options = this.mergeDefaultOptions(request.options);\n const TOKEN = Deno.env.get(\"browserless\");\n const url = `https://production-sfo.browserless.io/pdf?token=${TOKEN}`;\n const headers = {\n \"Cache-Control\": \"no-cache\",\n \"Content-Type\": \"application/json\",\n };\n\n const data = {\n html: htmlData,\n options: {\n displayHeaderFooter: true,\n printBackground: false,\n format: \"A4\",\n },\n };\n\n const response = await fetch(url, {\n method: \"POST\",\n headers: headers,\n body: JSON.stringify(data),\n });\n \n\n const pdfBuffer = await response.arrayBuffer();\n const blobKey = `${request.orgName}/pdfs/${filename}`;\n await blob.set(blobKey,new Uint8Array(pdfBuffer));\n console.log(`PDF saved as ${blobKey}`);\n return {blobKey}\n }\n\n async savePdfToBlob(\n pdfBuffer: Uint8Array,\n orgName: string,\n filename: string,\n ): Promise {\n try {\n const blobKey = `${orgName}/pdfs/${filename}`;\n await setBlob(blobKey, pdfBuffer);\n console.log(`PDF saved to blob storage at: ${blobKey}`);\n return blobKey;\n } catch (error) {\n console.error(`Error saving PDF to blob storage:`, error);\n throw new Error(\n `Failed to save PDF: ${\n error instanceof Error ? error.message : String(error)\n }`,\n );\n }\n }\n\n async getPdfFromBlob(blobKey: string): Promise {\n try {\n return await getBlob(blobKey);\n } catch (error) {\n console.error(`Error retrieving PDF from blob storage:`, error);\n return null;\n }\n }\n\n private generateFilename(orgName?: string): string {\n const timestamp = new Date().toISOString().replace(/[:.]/g, \"-\");\n const org = orgName || \"Default\";\n return `${org}_invoice_${timestamp}.pdf`;\n }\n\n private mergeDefaultOptions(\n options?: PdfGenerationOptions,\n ): Required {\n const defaults: Required = {\n format: \"A4\",\n orientation: \"portrait\",\n margin: {\n top: \"1cm\",\n right: \"1cm\",\n bottom: \"1cm\",\n left: \"1cm\",\n },\n displayHeaderFooter: false,\n headerTemplate: \"\",\n footerTemplate: \"\",\n printBackground: true,\n };\n\n return {\n format: options?.format || defaults.format,\n orientation: options?.orientation || defaults.orientation,\n margin: {\n top: options?.margin?.top || defaults.margin.top,\n right: options?.margin?.right || defaults.margin.right,\n bottom: options?.margin?.bottom || defaults.margin.bottom,\n left: options?.margin?.left || defaults.margin.left,\n },\n displayHeaderFooter: options?.displayHeaderFooter ??\n defaults.displayHeaderFooter,\n headerTemplate: options?.headerTemplate || defaults.headerTemplate,\n footerTemplate: options?.footerTemplate || defaults.footerTemplate,\n printBackground: options?.printBackground ?? defaults.printBackground,\n };\n }\n\n validateHtml(html: string): { isValid: boolean; error?: string } {\n // Basic HTML validation\n if (!html || html.trim().length === 0) {\n return { isValid: false, error: \"HTML content cannot be empty\" };\n }\n\n // Check for basic HTML structure\n const hasHtmlTag = html.toLowerCase().includes(\")<[^<]*)*<\\/script>/gi,\n /]*>/gi,\n /]*>/gi,\n /]*>/gi,\n ];\n\n for (const pattern of dangerousPatterns) {\n if (pattern.test(html)) {\n return {\n isValid: false,\n error: \"HTML contains potentially unsafe content\",\n };\n }\n }\n\n return { isValid: true };\n }\n\n wrapHtmlFragment(html: string): string {\n // If HTML doesn't have proper structure, wrap it\n const hasHtmlTag = html.toLowerCase().includes(\"\n\n\n \n \n Generated PDF\n \n\n\n ${html}\n\n`;\n }\n}\n\nexport async function processHtmlToPdf(\n request: HtmlToPdfRequest,\n): Promise<{ result: HtmlToPdfResult; blobKey: string }> {\n const service = new HtmlToPdfService();\n\n // Validate HTML\n const validation = service.validateHtml(request.html);\n if (!validation.isValid) {\n throw new Error(validation.error || \"Invalid HTML content\");\n }\n\n // Wrap HTML if needed\n const processedHtml = service.wrapHtmlFragment(request.html);\n\n // Convert to PDF\n const result = await service.convertHtmlToPdf({\n ...request,\n html: processedHtml,\n });\n\n \n\n console.log(result)\n\n return { blobKey:result.blobKey};\n}",[60,61,63],"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 \n\n\n

\n \n \n \n \n \n \n\n",[],[115,133],"b4b9de90-4793-11f0-b775-76b3cceeab13","app.tsx","7c00debc-46b9-11f0-89dd-76b3cceeab13",99,["D",1749736016624],5,"/** @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 HtmlToPdfResponse,\n PdfGenerationOptions\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 // HTML to PDF state\n htmlContent: \"\",\n pdfFilename: \"\",\n pdfOptions: {\n format: \"A4\",\n orientation: \"portrait\",\n margin: { top: \"1cm\", right: \"1cm\", bottom: \"1cm\", left: \"1cm\" },\n displayHeaderFooter: false,\n headerTemplate: \"\",\n footerTemplate: \"\",\n printBackground: true,\n },\n htmlToPdfResult: null,\n isGeneratingPdf: false,\n });\n \n const [activeTab, setActiveTab] = useState<'pdf-to-html' | 'html-to-pdf'>('pdf-to-html');\n const [isPrintingPdf, setIsPrintingPdf] = useState(false);\n \n const fileInputRef = useRef(null);\n const config = window.__APP_CONFIG__ || {\n apiBaseUrl: \"\",\n supportedFormats: [\"application/pdf\"],\n maxFileSize: 10 * 1024 * 1024,\n maxHtmlSize: 5 * 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 to HTML\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 // Process HTML to PDF\n const generatePDF = async () => {\n if (!state.htmlContent.trim()) {\n setState(prev => ({ ...prev, error: \"Please enter HTML content first.\" }));\n return;\n }\n \n setState(prev => ({ ...prev, isGeneratingPdf: true, error: null, htmlToPdfResult: null }));\n \n try {\n const requestBody = {\n html: state.htmlContent,\n filename: state.pdfFilename || undefined,\n orgName: state.orgName,\n options: state.pdfOptions,\n };\n \n const response = await fetch(\"/api/html-to-pdf\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestBody)\n });\n \n const result: HtmlToPdfResponse = await response.json();\n \n if (result.success) {\n setState(prev => ({ ...prev, htmlToPdfResult: result, isGeneratingPdf: false }));\n } else {\n setState(prev => ({ \n ...prev, \n error: result.error || \"PDF generation failed\", \n isGeneratingPdf: false \n }));\n }\n } catch (error) {\n setState(prev => ({ \n ...prev, \n error: `Network error: ${error instanceof Error ? error.message : 'Unknown error'}`, \n isGeneratingPdf: false \n }));\n }\n };\n \n // Print PDF directly from HTML result (Demo feature)\n const printPdfFromResult = async () => {\n if (!state.result?.htmlOutput) {\n setState(prev => ({ ...prev, error: \"No HTML content available to print.\" }));\n return;\n }\n \n setIsPrintingPdf(true);\n setState(prev => ({ ...prev, error: null }));\n \n try {\n // Generate a demo filename\n const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n const filename = `${state.result!.templateName || 'invoice'}_demo_${timestamp}.pdf`;\n \n const requestBody = {\n html: state.result.htmlOutput,\n filename,\n orgName: state.orgName,\n options: {\n format: \"A4\" as const,\n orientation: \"portrait\" as const,\n margin: { top: \"1cm\", right: \"1cm\", bottom: \"1cm\", left: \"1cm\" },\n printBackground: true,\n displayHeaderFooter: false,\n },\n };\n \n const response = await fetch(\"/api/html-to-pdf\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestBody)\n });\n \n const result: HtmlToPdfResponse = await response.json();\n \n if (result.success && result.downloadUrl) {\n // Automatically download the PDF\n const downloadResponse = await fetch(result.downloadUrl);\n if (downloadResponse.ok) {\n const blob = await downloadResponse.blob();\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = result.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n \n // Show success message\n setState(prev => ({ \n ...prev, \n error: null \n }));\n \n // Optional: Show a success toast or update UI\n console.log(`✅ PDF downloaded successfully: ${result.filename}`);\n } else {\n throw new Error(\"Failed to download PDF\");\n }\n } else {\n throw new Error(result.error || \"PDF generation failed\");\n }\n } catch (error) {\n setState(prev => ({ \n ...prev, \n error: `PDF print failed: ${error instanceof Error ? error.message : 'Unknown error'}` \n }));\n } finally {\n setIsPrintingPdf(false);\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 // Download PDF\n const downloadPdf = () => {\n if (state.htmlToPdfResult?.downloadUrl) {\n window.open(state.htmlToPdfResult.downloadUrl, '_blank');\n }\n };\n \n // Use result HTML in HTML to PDF tab\n const useResultHtml = () => {\n if (state.result?.htmlOutput) {\n setState(prev => ({ \n ...prev, \n htmlContent: state.result!.htmlOutput!,\n pdfFilename: `${state.result!.templateName || 'template'}.pdf`\n }));\n setActiveTab('html-to-pdf');\n }\n };\n \n return (\n

\n {/* Header */}\n

\n PDF ⇄ HTML Converter\n

\n Complete solution for PDF to HTML extraction and HTML to PDF generation\n

\n \n {/* Tab Navigation */}\n

\n setActiveTab('pdf-to-html')}\n className={`flex-1 py-2 px-4 rounded text-sm font-medium transition-all ${\n activeTab === 'pdf-to-html' \n ? 'bg-blue-600 text-white' \n : 'text-gray-300 hover:text-white hover:bg-gray-700'\n }`}\n >\n 📄 PDF → HTML\n \n setActiveTab('html-to-pdf')}\n className={`flex-1 py-2 px-4 rounded text-sm font-medium transition-all ${\n activeTab === 'html-to-pdf' \n ? 'bg-blue-600 text-white' \n : 'text-gray-300 hover:text-white hover:bg-gray-700'\n }`}\n >\n 🔄 HTML → PDF\n \n

\n \n {/* PDF to HTML Tab */}\n {activeTab === 'pdf-to-html' && (\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

\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

\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\n \n

\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

\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 )}\n \n {/* HTML to PDF Tab */}\n {activeTab === 'html-to-pdf' && (\n <>\n {/* HTML Input Section */}\n

1. HTML Content

\n \n

\n \n HTML Content\n \n setState(prev => ({ ...prev, htmlContent: e.target.value }))}\n className=\"w-full h-48 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 font-mono text-sm\"\n placeholder=\"Paste your HTML content here...\"\n />\n

\n Maximum size: {formatFileSize(config.maxHtmlSize || 5 * 1024 * 1024)}\n

\n \n {/* PDF Options Section */}\n

2. PDF Settings

\n \n

\n \n Filename (optional)\n \n setState(prev => ({ ...prev, pdfFilename: 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=\"auto-generated if blank\"\n />\n

\n \n

\n \n Page Format\n \n setState(prev => ({ \n ...prev, \n pdfOptions: { ...prev.pdfOptions, format: e.target.value as any }\n }))}\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\"\n >\n \n \n \n \n

\n \n

\n \n Orientation\n \n setState(prev => ({ \n ...prev, \n pdfOptions: { ...prev.pdfOptions, orientation: e.target.value as any }\n }))}\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\"\n >\n \n \n \n

\n \n {/* Generate Button */}\n

\n \n {state.isGeneratingPdf &&

}\n {state.isGeneratingPdf ? \"Generating PDF...\" : \"Generate PDF\"}\n \n

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

\n Error: {state.error}\n

\n )}\n \n {/* PDF to HTML Results */}\n {state.result && state.result.success && activeTab === 'pdf-to-html' && (\n

Results

\n \n Download {state.outputFormat.toUpperCase()}\n \n {state.result.htmlOutput && (\n <>\n \n {isPrintingPdf &&

}\n {isPrintingPdf ? \"Printing...\" : \"🖨️ Print PDF Demo\"}\n \n \n Convert to PDF →\n \n \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 )}\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 {/* HTML to PDF Results */}\n {state.htmlToPdfResult && state.htmlToPdfResult.success && activeTab === 'html-to-pdf' && (\n

PDF Generated Successfully

\n \n Download PDF\n \n

\n \n {/* PDF Info */}\n

Filename: {state.htmlToPdfResult.filename}

Size: {formatFileSize(state.htmlToPdfResult.fileSize)}

Processing Time: {state.htmlToPdfResult.processingTime}ms

Organization: {state.orgName}

\n \n

📄

Your PDF has been generated and saved to blob storage!

\n Click the \"Download PDF\" button above to download your file.\n

\n )}\n \n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();\n",[],[115,141],"d761cf88-46b8-11f0-be7a-76b3cceeab13",1,["D",1749642014987],[154,155],[60],{"_36":78,"_13":61,"_39":42,"_41":79,"_43":44,"_45":80,"_47":48,"_49":167,"_17":82,"_52":83,"_54":-5,"_56":57,"_58":-5,"_95":168,"_18":169},{"_36":156,"_13":157,"_39":158,"_41":79,"_43":44,"_45":159,"_47":48,"_49":160,"_17":161,"_52":162,"_54":163,"_56":57,"_58":164,"_95":165,"_18":166},"ba3e7d20-5cca-11f0-b536-0224a6c84d84","index.ts","55ab62c8-46b9-11f0-863e-76b3cceeab13",138,["D",1752068622614],9,"http","import { Hono } from \"https://esm.sh/hono@4.0.0\";\nimport { cors } from \"https://esm.sh/hono@4.0.0/cors\";\nimport type { ProcessingRequest, ProcessingResponse, HtmlToPdfRequest, HtmlToPdfResponse } from \"../shared/types.ts\";\nimport { processPDFWithClaude } from \"./services/pdf-processor.ts\";\nimport { processHtmlToPdf } from \"./services/html-to-pdf.ts\";\n\n// Val Town blob storage functions\ndeclare global {\n function setBlob(key: string, data: Uint8Array | string): Promise;\n function getBlob(key: string): Promise;\n}\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// Health check endpoint\napp.get(\"/api/health\", (c) => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n service: \"pdf-html-converter\",\n features: [\"pdf-to-html\", \"html-to-pdf\"],\n });\n});\n\n// Main UI route - serve complete HTML application\napp.get(\"/\", async (c) => {\n const config = {\n apiBaseUrl: new URL(c.req.url).origin,\n supportedFormats: [\"application/pdf\"],\n maxFileSize: 10 * 1024 * 1024, // 10MB\n maxHtmlSize: 5 * 1024 * 1024, // 5MB for HTML\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 html = `\n\n\n \n \n PDF ⇄ HTML Converter\n \n \n \n \n \n \n \n\n\n

Loading PDF ⇄ HTML Converter...

\n \n \n\n`;\n\n return c.html(html);\n});\n\n// API endpoint for PDF processing (PDF to HTML)\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 HTML to PDF conversion\napp.post(\"/api/html-to-pdf\", async (c) => {\n try {\n const body = await c.req.json();\n const { html, filename, orgName, options } = body as HtmlToPdfRequest;\n\n if (!html || typeof html !== 'string') {\n return c.json({ error: \"HTML content is required and must be a string\" }, 400);\n }\n\n if (html.length > 5 * 1024 * 1024) { // 5MB limit for HTML content\n return c.json({ error: \"HTML content is too large (max 5MB)\" }, 400);\n }\n\n const request: HtmlToPdfRequest = {\n html,\n filename,\n orgName: orgName || \"Default\",\n options,\n };\n\n // Process HTML to PDF\n const { blobKey } = await processHtmlToPdf(request);\n\n // Generate download URL (if needed)\n const downloadUrl = `${import.meta.url}/api/download-pdf/${encodeURIComponent(blobKey)}`;\n\n \n\n return c.json({blobKey,downloadUrl});\n } catch (error) {\n console.error(error)\n console.error(\"HTML to PDF conversion error:\", error);\n\n const response: HtmlToPdfResponse = {\n success: false,\n filename: \"\",\n blobKey: \"\",\n fileSize: 0,\n processingTime: 0,\n error: error instanceof Error ? error.message : \"Unknown error occurred\",\n };\n\n return c.json(response, 500);\n }\n});\n\n// API endpoint for downloading generated PDFs\napp.get(\"/api/download-pdf/:blobKey\", async (c) => {\n try {\n const blobKey = decodeURIComponent(c.req.param(\"blobKey\"));\n \n // Get PDF from blob storage\n const pdfData = await getBlob(blobKey);\n \n if (!pdfData) {\n return c.json({ error: \"PDF not found\" }, 404);\n }\n\n // Extract filename from blob key\n const filename = blobKey.split('/').pop() || 'download.pdf';\n\n // Return PDF with proper headers\n return new Response(pdfData, {\n headers: {\n 'Content-Type': 'application/pdf',\n 'Content-Disposition': `attachment; filename=\"${filename}\"`,\n 'Content-Length': pdfData.length.toString(),\n },\n });\n } catch (error) {\n console.error(\"PDF download error:\", error);\n return c.json({ error: \"Failed to download PDF\" }, 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 maxHtmlSize: 5 * 1024 * 1024,\n supportedTypes: [\"application/pdf\"],\n },\n defaults: {\n orgName: \"Prasham\",\n recreateTemplate: false,\n },\n pdfOptions: {\n formats: [\"A4\", \"Letter\", \"Legal\"],\n orientations: [\"portrait\", \"landscape\"],\n defaultMargin: \"1cm\",\n },\n });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals","prashamtrivedi-pdftohtml-ai",[],[60,157],["D",1749642021036],[170,171,172],[60,61],{"_36":70,"_13":71,"_39":72,"_41":42,"_43":44,"_45":73,"_47":48,"_49":179,"_17":75,"_52":53,"_54":76,"_56":57,"_58":-5,"_95":180,"_18":181},{"_36":62,"_13":63,"_39":64,"_41":42,"_43":44,"_45":65,"_47":48,"_49":176,"_17":67,"_52":53,"_54":68,"_56":57,"_58":-5,"_95":177,"_18":178},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":173,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_95":174,"_18":175},["D",1749732021959],[],[60,61,38],["D",1752068605371],[],[60,61,63],["D",1749716950986],[],[60,61,71],"d324a648-46b8-11f0-a15f-76b3cceeab13",["D",1749642007878],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","PDF to HTML converter using Claude 3.5 Haiku","imageUrl","userId","1591349e-125d-4fb7-930d-cf293627961f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","4d7791fe-1f5b-4867-8b6e-34823c16ee48","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_235":231},"org",{"_11":12,"_229":-5,"_230":231,"_192":193,"_232":233,"_234":57},"branch",{"_17":159,"_13":16,"_36":44,"_221":182,"_222":-5,"_223":-5,"_224":-5,"_225":-5,"_226":-5,"_227":14,"_228":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaUF5OXE3VlcwNVRwRU9wSTRmcE1DZ0FSM1UifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":182,"_13":14,"_49":310,"_184":-5,"_185":57,"_186":187,"_188":187,"_189":190,"_191":-5,"_192":193,"_194":158,"_195":48,"_196":48,"_197":-5,"_198":82,"_199":200,"_201":-5,"_202":-5,"_203":-5,"_204":-5,"_205":206,"_207":206,"_208":209,"_210":209,"_211":209,"_212":206,"_213":206,"_214":311,"_216":312,"_218":313,"_220":57},[271,277,281,283],"files",[271,272,273,274,275,276,277,278,279,280,281,282,283],"counts",{"_262":82,"_263":150,"_264":82,"_32":265,"_266":267},[256,257,258],{"_36":78,"_13":61,"_39":42,"_41":79,"_43":44,"_45":80,"_47":48,"_49":81,"_17":82,"_52":83,"_54":-5,"_56":57,"_58":-5,"_18":255},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[60,61],{"_36":70,"_13":71,"_39":72,"_41":42,"_43":44,"_45":73,"_47":48,"_49":74,"_17":75,"_52":53,"_54":76,"_56":57,"_58":-5,"_18":261},{"_36":62,"_13":63,"_39":64,"_41":42,"_43":44,"_45":65,"_47":48,"_49":66,"_17":67,"_52":53,"_54":68,"_56":57,"_58":-5,"_18":260},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":259},[60,61,38],[60,61,63],[60,61,71],"pulls","branches","forks",{"_268":80,"_270":82},"connections",{"_268":82,"_269":82},"count","unfilledCount","emptyCount",{"_36":149,"_13":60,"_39":79,"_41":-5,"_43":44,"_45":150,"_47":48,"_49":151,"_17":82,"_52":83,"_54":-5,"_56":57,"_58":-5,"_95":308,"_18":309},{"_36":78,"_13":61,"_39":42,"_41":79,"_43":44,"_45":80,"_47":48,"_49":167,"_17":82,"_52":83,"_54":-5,"_56":57,"_58":-5,"_95":306,"_18":307},{"_36":70,"_13":71,"_39":72,"_41":42,"_43":44,"_45":73,"_47":48,"_49":179,"_17":75,"_52":53,"_54":76,"_56":57,"_58":-5,"_95":304,"_18":305},{"_36":62,"_13":63,"_39":64,"_41":42,"_43":44,"_45":65,"_47":48,"_49":176,"_17":67,"_52":53,"_54":68,"_56":57,"_58":-5,"_95":302,"_18":303},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":173,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_95":300,"_18":301},{"_36":156,"_13":157,"_39":158,"_41":79,"_43":44,"_45":159,"_47":48,"_49":160,"_17":161,"_52":162,"_54":163,"_56":57,"_58":164,"_95":298,"_18":299},{"_36":114,"_13":115,"_39":116,"_41":-5,"_43":44,"_45":117,"_47":48,"_49":118,"_17":82,"_52":83,"_54":-5,"_56":57,"_58":-5,"_95":296,"_18":297},{"_36":140,"_13":141,"_39":142,"_41":116,"_43":44,"_45":143,"_47":48,"_49":144,"_17":145,"_52":53,"_54":146,"_56":57,"_58":-5,"_95":294,"_18":295},{"_36":132,"_13":133,"_39":134,"_41":116,"_43":44,"_45":135,"_47":48,"_49":136,"_17":80,"_52":24,"_54":137,"_56":57,"_58":-5,"_95":292,"_18":293},{"_36":124,"_13":125,"_39":126,"_41":116,"_43":44,"_45":127,"_47":48,"_49":128,"_17":101,"_52":24,"_54":129,"_56":57,"_58":-5,"_95":290,"_18":291},{"_36":98,"_13":99,"_39":100,"_41":-5,"_43":44,"_45":101,"_47":48,"_49":102,"_17":82,"_52":83,"_54":-5,"_56":57,"_58":-5,"_95":288,"_18":289},{"_36":106,"_13":107,"_39":108,"_41":100,"_43":44,"_45":109,"_47":48,"_49":110,"_17":80,"_52":53,"_54":111,"_56":57,"_58":-5,"_95":286,"_18":287},{"_36":89,"_13":90,"_39":91,"_41":-5,"_43":44,"_45":92,"_47":48,"_49":93,"_17":82,"_52":24,"_54":94,"_56":57,"_58":-5,"_95":284,"_18":285},[],[90],[],[99,107],[282],[99],[],[115,125],[],[115,133],[],[115,141],[278,279,280],[115],[],[60,157],[],[60,61,38],[],[60,61,63],[],[60,61,71],[273,274,275],[60,61],[272,276],[60],["D",1749642007878],{"_11":12,"_235":231},{"_11":12,"_229":-5,"_230":231,"_192":193,"_232":233,"_234":57},{"_17":159,"_13":16,"_36":44,"_221":182,"_222":-5,"_223":-5,"_224":-5,"_225":-5,"_226":-5,"_227":14,"_228":12},"ctx",{"_214":-5,"_252":347,"_348":349,"_350":351,"_352":57,"_353":57,"_354":57,"_355":48,"_356":-5,"_357":-7,"_358":-7,"_359":82,"_360":57,"_361":57,"_362":-5,"_363":57,"_364":57,"_365":57,"_366":-5},"ENV",{"_318":319,"_320":321,"_322":16,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346},"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"]