[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_274":275,"_276":277},"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",116,"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/html-to-pdf.ts","latestPath","fileId","d4777eac-478b-11f0-b88a-76b3cceeab13","name","html-to-pdf.ts","fileType","script","content","import { blob } from \"https://esm.town/v/std/blob\";\nimport { Buffer } from \"node:buffer\";type {\n HtmlToPdfRequest,\n HtmlToPdfResult,\n PdfGenerationOptions,\n} from \"../../shared/types.ts\";\n\nexport class HtmlToPdfService {\n async convertHtmlToPdf(request: HtmlToPdfRequest): Promise {\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 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: \"A0\",\n },\n };\n\n const response = await fetch(url, {\n method: \"POST\",\n headers: headers,\n body: JSON.stringify(data),\n });\n\n const pdfBuffer = await response.arrayBuffer();\n const blobKey = `${request.orgName}/pdfs/${filename}.pdf`;\n await blob.set(blobKey, new Uint8Array(pdfBuffer));\n console.log(\"PDF saved as output.pdf\");\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 // Save to blob storage\n const orgName = request.orgName || \"Default\";\n const blobKey = await service.savePdfToBlob(\n result.pdfBuffer,\n orgName,\n result.filename,\n );\n\n return { result, blobKey };\n}","import { blob } from \"https://esm.town/v/std/blob\";\nimport { Buffer } from \"node:buffer\";\n\n\ntype {\n HtmlToPdfRequest,\n HtmlToPdfResult,\n PdfGenerationOptions,\n} from \"../../shared/types.ts\";\n\nexport class HtmlToPdfService {\n async convertHtmlToPdf(request: HtmlToPdfRequest): Promise {\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 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: \"A0\",\n },\n };\n\n const response = await fetch(url, {\n method: \"POST\",\n headers: headers,\n body: JSON.stringify(data),\n });\n\n const pdfBuffer = await response.arrayBuffer();\n const blobKey = `${request.orgName}/pdfs/${filename}.pdf`;\n await blob.set(blobKey, new Uint8Array(pdfBuffer));\n console.log(\"PDF saved as output.pdf\");\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 // Save to blob storage\n const orgName = request.orgName || \"Default\";\n const blobKey = await service.savePdfToBlob(\n result.pdfBuffer,\n orgName,\n result.filename,\n );\n\n return { result, blobKey };\n}","createdAt",["D",1752062252545],"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":270,"_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":271,"_82":272,"_84":273,"_86":25},"tree",[172,178,182,184],"files",[172,173,174,175,176,177,178,179,180,181,182,183,184],"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":267,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_186":268,"_27":269},{"_44":263,"_32":248,"_30":241,"_135":157,"_42":43,"_41":170,"_137":60,"_39":264,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_186":265,"_27":266},{"_44":254,"_32":255,"_30":256,"_135":241,"_42":43,"_41":257,"_137":60,"_39":258,"_13":259,"_34":35,"_36":260,"_24":25,"_140":-5,"_186":261,"_27":262},{"_44":249,"_32":33,"_30":31,"_135":241,"_42":43,"_41":14,"_137":25,"_39":250,"_13":251,"_34":35,"_36":38,"_24":25,"_140":-5,"_186":252,"_27":253},{"_44":238,"_32":239,"_30":240,"_135":241,"_42":43,"_41":242,"_137":60,"_39":243,"_13":244,"_34":35,"_36":245,"_24":25,"_140":-5,"_186":246,"_27":247},{"_44":228,"_32":229,"_30":58,"_135":157,"_42":43,"_41":230,"_137":25,"_39":231,"_13":232,"_34":233,"_36":234,"_24":25,"_140":235,"_186":236,"_27":237},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":225,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_186":226,"_27":227},{"_44":216,"_32":217,"_30":218,"_135":151,"_42":43,"_41":219,"_137":60,"_39":220,"_13":221,"_34":35,"_36":222,"_24":25,"_140":-5,"_186":223,"_27":224},{"_44":208,"_32":209,"_30":210,"_135":151,"_42":43,"_41":211,"_137":60,"_39":212,"_13":170,"_34":20,"_36":213,"_24":25,"_140":-5,"_186":214,"_27":215},{"_44":200,"_32":201,"_30":202,"_135":151,"_42":43,"_41":203,"_137":60,"_39":204,"_13":145,"_34":20,"_36":205,"_24":25,"_140":-5,"_186":206,"_27":207},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":197,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_186":198,"_27":199},{"_44":189,"_32":190,"_30":191,"_135":144,"_42":43,"_41":192,"_137":60,"_39":193,"_13":170,"_34":35,"_36":194,"_24":25,"_140":-5,"_186":195,"_27":196},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":185,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_186":187,"_27":188},["D",1749642330897],"children",[],[133],"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",[],[143,190],["D",1749642028488],[183],[143],"d5af15e8-4793-11f0-9328-76b3cceeab13","style.css","85a0a3f8-46b9-11f0-b100-76b3cceeab13",101,["D",1749736071915],"/* 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",[],[150,201],"c6d00dfc-4793-11f0-ac0d-76b3cceeab13","index.html","604dbd0c-46b9-11f0-8543-76b3cceeab13",100,["D",1749736046968],"\n\n\n \n \n PDF to HTML Converter\n \n \n \n\n\n

\n \n \n \n \n \n \n\n",[],[150,209],"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",[],[150,217],["D",1749642033639],[179,180,181],[150],"fc6f69d8-5cb7-11f0-b840-0224a6c84d84","index.ts",102,["D",1752060573229],7,"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 { result, blobKey } = await processHtmlToPdf(request);\n\n // Generate download URL (if needed)\n const downloadUrl = `/api/download-pdf/${encodeURIComponent(blobKey)}`;\n\n const response: HtmlToPdfResponse = {\n success: true,\n filename: result.filename,\n blobKey,\n fileSize: result.fileSize,\n processingTime: result.processingTime,\n downloadUrl,\n };\n\n return c.json(response);\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",[],[156,229],"67b90f48-478a-11f0-bac0-76b3cceeab13","pdf-processor.ts","11d48732-46b9-11f0-8fe1-76b3cceeab13","dafd192c-46b8-11f0-9a71-76b3cceeab13",78,["D",1749732021959],27,"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 : 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 console.log({ path });\n const blobData = await blob.getJSON(path);\n return blobData.htmlTemplate;\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

\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}",[],[156,248,239],"services","e56254cc-5cbb-11f0-b2e3-0224a6c84d84",["D",1752062252545],25,[],[156,248,33],"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 · v116