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}",[],[154,172,200],[154,172],{"_102":210,"_95":211,"_155":115,"_157":156,"_158":140,"_159":139,"_161":117,"_104":212,"_99":213,"_163":214,"_165":215,"_166":22,"_167":216,"_168":217,"_98":218},"ba3e7d20-5cca-11f0-b536-0224a6c84d84","index.ts",["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",[],[154,211],[154],{"_102":221,"_95":222,"_155":223,"_157":-5,"_158":140,"_159":224,"_161":117,"_104":225,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":226,"_98":257},"e2802cc0-46b8-11f0-8915-76b3cceeab13","frontend","e2802d9c-46b8-11f0-8915-76b3cceeab13",4,["D",1749642033639],[227,237,247],{"_102":228,"_95":229,"_155":230,"_157":223,"_158":140,"_159":231,"_161":117,"_104":232,"_99":233,"_163":184,"_165":234,"_166":22,"_167":-5,"_168":235,"_98":236},"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",[],[222,229],{"_102":238,"_95":239,"_155":240,"_157":223,"_158":140,"_159":241,"_161":117,"_104":242,"_99":174,"_163":243,"_165":244,"_166":22,"_167":-5,"_168":245,"_98":246},"c6d00dfc-4793-11f0-ac0d-76b3cceeab13","index.html","604dbd0c-46b9-11f0-8543-76b3cceeab13",100,["D",1749736046968],"file","\n\n\n \n \n PDF to HTML Converter\n \n \n \n\n\n

\n \n \n \n \n \n \n\n",[],[222,239],{"_102":248,"_95":249,"_155":250,"_157":223,"_158":140,"_159":251,"_161":117,"_104":252,"_99":253,"_163":243,"_165":254,"_166":22,"_167":-5,"_168":255,"_98":256},"d5af15e8-4793-11f0-9328-76b3cceeab13","style.css","85a0a3f8-46b9-11f0-b100-76b3cceeab13",101,["D",1749736071915],3,"/* Global Styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #1e293b 0%, #334155 100%);\n color: #e2e8f0;\n min-height: 100vh;\n}\n\n#app {\n min-height: 100vh;\n padding: 20px;\n}\n\n/* Dark Theme Components */\n.dark-card {\n background: rgba(30, 41, 59, 0.8);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(71, 85, 105, 0.3);\n}\n\n.dark-section {\n background: rgba(15, 23, 42, 0.6);\n border: 1px solid rgba(51, 65, 85, 0.4);\n}\n\n/* Upload Area */\n.upload-area {\n border: 2px dashed #475569;\n border-radius: 12px;\n padding: 60px 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n background: rgba(15, 23, 42, 0.3);\n}\n\n.upload-area:hover,\n.upload-area.drag-over {\n border-color: #3b82f6;\n background: rgba(59, 130, 246, 0.1);\n transform: translateY(-2px);\n}\n\n/* Field Checkbox */\n.field-checkbox {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px;\n border-radius: 8px;\n border: 1px solid rgba(71, 85, 105, 0.3);\n background: rgba(15, 23, 42, 0.4);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.field-checkbox:hover {\n background: rgba(59, 130, 246, 0.1);\n border-color: #3b82f6;\n}\n\n.field-checkbox input[type=\"checkbox\"] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Loading Spinner */\n.loading-spinner {\n width: 20px;\n height: 20px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top-color: #ffffff;\n animation: spin 1s ease-in-out infinite;\n}\n\n.loading-spinner.w-4 {\n width: 16px;\n height: 16px;\n border-width: 2px;\n}\n\n.loading-spinner.h-4 {\n width: 16px;\n height: 16px;\n border-width: 2px;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Result Preview */\n.result-preview {\n border: 1px solid rgba(71, 85, 105, 0.5);\n border-radius: 8px;\n overflow: hidden;\n background: white;\n}\n\n/* Form Elements */\ninput[type=\"text\"],\ninput[type=\"email\"],\ntextarea,\nselect {\n background: #1e293b;\n border: 1px solid #475569;\n color: #e2e8f0;\n border-radius: 6px;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"email\"]:focus,\ntextarea:focus,\nselect:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n accent-color: #3b82f6;\n}\n\n/* Buttons */\nbutton {\n transition: all 0.2s ease;\n}\n\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Tab Navigation */\n.tab-nav {\n background: #1e293b;\n border-radius: 8px;\n padding: 4px;\n}\n\n.tab-button {\n flex: 1;\n padding: 8px 16px;\n border-radius: 4px;\n border: none;\n background: transparent;\n color: #94a3b8;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.tab-button.active {\n background: #3b82f6;\n color: white;\n}\n\n.tab-button:hover:not(.active) {\n background: #374151;\n color: white;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n #app {\n padding: 10px;\n }\n \n .upload-area {\n padding: 40px 15px;\n }\n \n .field-checkbox {\n padding: 8px;\n }\n}\n\n/* Custom Scrollbar */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: rgba(15, 23, 42, 0.5);\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb {\n background: rgba(71, 85, 105, 0.6);\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: rgba(71, 85, 105, 0.8);\n}\n\n/* Animations */\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.dark-card {\n animation: fadeIn 0.3s ease-out;\n}\n\n/* Print Button Special Styling */\n.bg-purple-600 {\n background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;\n box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);\n}\n\n.bg-purple-600:hover:not(:disabled) {\n background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;\n box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);\n transform: translateY(-1px);\n}\n\n/* Success animations */\n@keyframes successPulse {\n 0% { \n transform: scale(1);\n box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);\n }\n 70% { \n transform: scale(1.05);\n box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);\n }\n 100% { \n transform: scale(1);\n box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\n }\n}\n\n.success-pulse {\n animation: successPulse 0.6s ease-out;\n}\n",[],[222,249],[222],{"_102":259,"_95":260,"_155":261,"_157":-5,"_158":140,"_159":253,"_161":117,"_104":262,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":263,"_98":273},"df6e0732-46b8-11f0-99ef-76b3cceeab13","shared","df6e080e-46b8-11f0-99ef-76b3cceeab13",["D",1749642028488],[264],{"_102":265,"_95":266,"_155":267,"_157":261,"_158":140,"_159":268,"_161":117,"_104":269,"_99":174,"_163":184,"_165":270,"_166":22,"_167":-5,"_168":271,"_98":272},"c130b9e4-478b-11f0-905e-76b3cceeab13","types.ts","ec8ba168-46b8-11f0-8ac8-76b3cceeab13",79,["D",1749732601558],"// 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// Request payload for HTML to PDF conversion\nexport interface HtmlToPdfRequest {\n html: string;\n filename?: string;\n orgName?: string;\n options?: PdfGenerationOptions;\n}\n\n// PDF generation options\nexport interface PdfGenerationOptions {\n format?: \"A4\" | \"Letter\" | \"Legal\";\n orientation?: \"portrait\" | \"landscape\";\n margin?: {\n top?: string;\n right?: string;\n bottom?: string;\n left?: string;\n };\n displayHeaderFooter?: boolean;\n headerTemplate?: string;\n footerTemplate?: string;\n printBackground?: 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// Response from HTML to PDF conversion\nexport interface HtmlToPdfResponse {\n success: boolean;\n filename: string;\n blobKey: string;\n fileSize: number;\n processingTime: number;\n downloadUrl?: string;\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 templateName?: string;\n fromCache?: boolean;\n}\n\n// HTML to PDF processing result\nexport interface HtmlToPdfResult {\n pdfBuffer: Uint8Array;\n filename: string;\n processingTime: number;\n fileSize: number;\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 // HTML to PDF state\n htmlContent: string;\n pdfFilename: string;\n pdfOptions: PdfGenerationOptions;\n htmlToPdfResult: HtmlToPdfResponse | null;\n isGeneratingPdf: 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",[],[260,266],[260],{"_102":275,"_95":276,"_155":277,"_157":-5,"_158":140,"_159":278,"_161":117,"_104":279,"_99":32,"_163":243,"_165":280,"_166":22,"_167":-5,"_168":281,"_98":282},"93ae20ce-46b9-11f0-adc2-76b3cceeab13","README.md","93ae21b4-46b9-11f0-adc2-76b3cceeab13",12,["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.**",[],[276],"files",[152,170,177,188,198,209,220,227,237,247,258,264,274],"counts",{"_287":32,"_288":160,"_289":32,"_290":291},"pulls","branches","forks","envVars",{"_292":174,"_293":32},"count","emptyCount","contents",[296,299,302,305],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_104":297,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":298},["D",1749642014987],[154],{"_102":221,"_95":222,"_155":223,"_157":-5,"_158":140,"_159":224,"_161":117,"_104":300,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":301},["D",1749642033639],[222],{"_102":259,"_95":260,"_155":261,"_157":-5,"_158":140,"_159":253,"_161":117,"_104":303,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":304},["D",1749642028488],[260],{"_102":275,"_95":276,"_155":277,"_157":-5,"_158":140,"_159":278,"_161":117,"_104":306,"_99":32,"_163":243,"_165":280,"_166":22,"_167":-5,"_98":307},["D",1749642330897],[276],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":316,"_290":321},{"_102":103,"_95":96,"_104":317,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":117,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":318,"_134":319,"_137":320,"_149":22},["D",1749642007878],{"_93":94,"_132":133},{"_93":94,"_136":133,"_14":113},{"_99":139,"_95":43,"_102":140,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[322,328],{"_323":324,"_104":325,"_326":-5,"_110":72,"_327":22},"key","browserless",["D",1749734130282],"updatedAt","isEmpty",{"_323":329,"_104":330,"_326":-5,"_110":72,"_327":22},"ANTHROPIC_API_KEY",["D",1749642660868],"actionData","errors"]

Key	Description
browserless
ANTHROPIC_API_KEY

prashamtrivedi

pdf-to-html

Environment variables