\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","deleted","label",[169,150],"frontend","permalink","https://www.val.town/x/prashamtrivedi/pdf-to-html/code/frontend/app.tsx","extension","actionData","errors"]