Spaces:
Sleeping
Sleeping
| # import requests | |
| # import json | |
| # # Step 1: Load large HTML content from external file | |
| # with open("template.html", "r", encoding="utf-8") as f: | |
| # html_content = f.read() | |
| # # Step 2: Prepare payload | |
| # payload = json.dumps({ | |
| # "html_content": html_content | |
| # }) | |
| # headers = { | |
| # 'Content-Type': 'application/json' | |
| # } | |
| # # Step 3: Make the API request | |
| # url = "http://localhost:5000/api/html-to-pdf" | |
| # response = requests.post(url, headers=headers, data=payload) | |
| # # Step 4: Save the PDF if successful | |
| # if response.status_code == 200: | |
| # with open("output.pdf", "wb") as f: | |
| # f.write(response.content) | |
| # print("✅ PDF saved as output.pdf") | |
| # else: | |
| # print(f"❌ Error: {response.status_code}\n{response.text}") | |
| #this is option 1 | |
| # this is option 2 | |
| import requests | |
| import json | |
| # Inline HTML (okay for small content only) | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Business Performance Report</title> | |
| <style> | |
| /* Base styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7fa; | |
| color: #333; | |
| line-height: 1.6; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: white; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| /* Header styles */ | |
| header { | |
| background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); | |
| color: white; | |
| padding: 40px; | |
| text-align: center; | |
| } | |
| header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| } | |
| header p { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| } | |
| /* Main content */ | |
| main { | |
| padding: 40px; | |
| } | |
| .section { | |
| margin-bottom: 50px; | |
| padding-bottom: 30px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .section:last-child { | |
| border-bottom: none; | |
| } | |
| .section-title { | |
| color: #1a2a6c; | |
| margin-bottom: 25px; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid #fdbb2d; | |
| } | |
| .chart-container { | |
| background: #f9f9f9; | |
| border-radius: 8px; | |
| padding: 25px; | |
| margin: 25px 0; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .chart-title { | |
| color: #b21f1f; | |
| margin-bottom: 15px; | |
| font-size: 1.3rem; | |
| } | |
| .chart-description { | |
| margin-bottom: 20px; | |
| color: #555; | |
| } | |
| /* Bar Chart Styles */ | |
| .bar-chart { | |
| display: flex; | |
| align-items: flex-end; | |
| height: 300px; | |
| padding: 20px 0; | |
| border-bottom: 1px solid #ddd; | |
| position: relative; | |
| } | |
| .bar-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| height: 100%; | |
| margin: 0 10px; | |
| } | |
| .bar { | |
| width: 60%; | |
| background: linear-gradient(to top, #1a2a6c, #3f51b5); | |
| border-radius: 4px 4px 0 0; | |
| transition: height 0.5s ease; | |
| position: relative; | |
| } | |
| .bar-label { | |
| margin-top: 10px; | |
| font-weight: bold; | |
| color: #555; | |
| } | |
| .bar-value { | |
| position: absolute; | |
| top: -25px; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #1a2a6c; | |
| } | |
| .y-axis { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 40px; | |
| border-right: 1px solid #ddd; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| padding: 20px 5px; | |
| font-size: 0.8rem; | |
| color: #777; | |
| } | |
| /* Line Chart Styles */ | |
| .line-chart { | |
| height: 300px; | |
| position: relative; | |
| margin: 40px 0 20px 40px; | |
| border-left: 1px solid #ddd; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .line { | |
| position: absolute; | |
| height: 2px; | |
| background: #b21f1f; | |
| transform-origin: 0 0; | |
| box-shadow: 0 0 2px rgba(178, 31, 31, 0.5); | |
| } | |
| .line-point { | |
| position: absolute; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #b21f1f; | |
| transform: translate(-50%, -50%); | |
| border: 2px solid white; | |
| box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .line-point-value { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| color: #b21f1f; | |
| } | |
| .line-label { | |
| position: absolute; | |
| bottom: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.9rem; | |
| color: #555; | |
| } | |
| /* Pie Chart Styles */ | |
| .pie-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .pie-chart { | |
| width: 250px; | |
| height: 250px; | |
| border-radius: 50%; | |
| margin: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| background: conic-gradient( | |
| #1a2a6c 0% 35%, | |
| #b21f1f 35% 65%, | |
| #fdbb2d 65% 85%, | |
| #4caf50 85% 100% | |
| ); | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .pie-center { | |
| position: absolute; | |
| width: 40%; | |
| height: 40%; | |
| background: white; | |
| border-radius: 50%; | |
| top: 30%; | |
| left: 30%; | |
| box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .pie-legend { | |
| flex: 1; | |
| min-width: 200px; | |
| margin: 20px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .legend-color { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 4px; | |
| margin-right: 10px; | |
| } | |
| /* Key Metrics */ | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .metric-card { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| border-top: 4px solid #1a2a6c; | |
| text-align: center; | |
| } | |
| .metric-value { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: #1a2a6c; | |
| margin: 10px 0; | |
| } | |
| .metric-title { | |
| color: #555; | |
| font-size: 1rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: #1a2a6c; | |
| color: white; | |
| padding: 30px 40px; | |
| text-align: center; | |
| } | |
| footer p { | |
| margin: 5px 0; | |
| opacity: 0.8; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .bar-chart { | |
| height: 250px; | |
| } | |
| .pie-container { | |
| flex-direction: column; | |
| } | |
| .pie-legend { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Quarterly Performance Report</h1> | |
| <p>Q3 2023 Business Metrics & Analytics</p> | |
| </header> | |
| <main> | |
| <section class="section"> | |
| <h2 class="section-title">Executive Summary</h2> | |
| <p>This report provides a comprehensive overview of business performance for Q3 2023. Our company has demonstrated strong growth across key metrics, with particular success in customer acquisition and revenue generation.</p> | |
| <div class="metrics"> | |
| <div class="metric-card"> | |
| <div class="metric-value">+15.3%</div> | |
| <div class="metric-title">Revenue Growth</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-value">+22.7%</div> | |
| <div class="metric-title">New Customers</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-value">94.2%</div> | |
| <div class="metric-title">Customer Satisfaction</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="metric-value">+8.5%</div> | |
| <div class="metric-title">Operational Efficiency</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2 class="section-title">Revenue Analysis</h2> | |
| <div class="chart-container"> | |
| <h3 class="chart-title">Monthly Revenue (in millions)</h3> | |
| <p class="chart-description">Revenue growth over the past six months shows consistent upward trajectory.</p> | |
| <div class="bar-chart"> | |
| <div class="y-axis"> | |
| <span>$5.0M</span> | |
| <span>$4.0M</span> | |
| <span>$3.0M</span> | |
| <span>$2.0M</span> | |
| <span>$1.0M</span> | |
| <span>$0</span> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar" style="height: 60%;"> | |
| <div class="bar-value">$3.0M</div> | |
| </div> | |
| <div class="bar-label">Apr</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar" style="height: 65%;"> | |
| <div class="bar-value">$3.3M</div> | |
| </div> | |
| <div class="bar-label">May</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar" style="height: 70%;"> | |
| <div class="bar-value">$3.5M</div> | |
| </div> | |
| <div class="bar-label">Jun</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar" style="height: 80%;"> | |
| <div class="bar-value">$4.0M</div> | |
| </div> | |
| <div class="bar-label">Jul</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar" style="height: 90%;"> | |
| <div class="bar-value">$4.5M</div> | |
| </div> | |
| <div class="bar-label">Aug</div> | |
| </div> | |
| <div class="bar-container"> | |
| <div class="bar" style="height: 100%;"> | |
| <div class="bar-value">$5.0M</div> | |
| </div> | |
| <div class="bar-label">Sep</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <h3 class="chart-title">Revenue Growth Trend</h3> | |
| <p class="chart-description">Quarter-over-quarter growth rate demonstrates accelerating momentum.</p> | |
| <div class="line-chart"> | |
| <!-- Line segments --> | |
| <div class="line" style="width: 20%; bottom: 20%; left: 10%; transform: rotate(15deg);"></div> | |
| <div class="line" style="width: 20%; bottom: 35%; left: 30%; transform: rotate(30deg);"></div> | |
| <div class="line" style="width: 20%; bottom: 55%; left: 50%; transform: rotate(45deg);"></div> | |
| <div class="line" style="width: 20%; bottom: 80%; left: 70%; transform: rotate(60deg);"></div> | |
| <!-- Data points --> | |
| <div class="line-point" style="bottom: 20%; left: 10%;"> | |
| <div class="line-point-value">+5%</div> | |
| </div> | |
| <div class="line-point" style="bottom: 35%; left: 30%;"> | |
| <div class="line-point-value">+8%</div> | |
| </div> | |
| <div class="line-point" style="bottom: 55%; left: 50%;"> | |
| <div class="line-point-value">+12%</div> | |
| </div> | |
| <div class="line-point" style="bottom: 80%; left: 70%;"> | |
| <div class="line-point-value">+15%</div> | |
| </div> | |
| <!-- Labels --> | |
| <div class="line-label" style="left: 10%;">Q4 2022</div> | |
| <div class="line-label" style="left: 30%;">Q1 2023</div> | |
| <div class="line-label" style="left: 50%;">Q2 2023</div> | |
| <div class="line-label" style="left: 70%;">Q3 2023</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2 class="section-title">Market Share Analysis</h2> | |
| <div class="chart-container"> | |
| <h3 class="chart-title">Product Category Distribution</h3> | |
| <p class="chart-description">Breakdown of revenue by product category for Q3 2023.</p> | |
| <div class="pie-container"> | |
| <div class="pie-chart"> | |
| <div class="pie-center"></div> | |
| </div> | |
| <div class="pie-legend"> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: #1a2a6c;"></div> | |
| <div>Software Solutions (35%)</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: #b21f1f;"></div> | |
| <div>Consulting Services (30%)</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: #fdbb2d;"></div> | |
| <div>Hardware Products (20%)</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background-color: #4caf50;"></div> | |
| <div>Support & Maintenance (15%)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>Global Solutions Inc. • Confidential Business Report</p> | |
| <p>Data as of September 30, 2023</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| # Prepare payload | |
| payload = json.dumps({ | |
| "html_code": html_content | |
| }) | |
| headers = { | |
| 'Content-Type': 'application/json' | |
| } | |
| # Send request | |
| url = "http://localhost:5000/api/html-to-pdf" | |
| response = requests.post(url, headers=headers, data=payload) | |
| # Save result | |
| import json | |
| # Step 1: Full JSON string | |
| json_data = response.text | |
| # Step 2: Parse JSON to extract the list string | |
| data = json.loads(json_data) | |
| byte_string = data["pdf_base64"] | |
| # Step 3: Convert to byte list | |
| byte_list = [int(b.strip()) for b in byte_string.split(",")] | |
| # Step 4: Convert to bytes and save as PDF | |
| pdf_data = bytes(byte_list) | |
| with open("outputs.pdf", "wb") as f: | |
| f.write(pdf_data) | |
| print("✅ PDF saved as outputs.pdf") | |