{
  "pageTitle": "Victorian Gaslight Billing",
  "header": {
    "title": "Victorian Gaslight Billing",
    "subtitle": "Your Monthly Gas Consumption & Billing Details",
    "ornateBorders": true
  },
  "billingInformation": {
    "accountDetails": {
      "accountNumber": "123456789",
      "billingDate": "1875-12-31",
      "dueDate": "1876-01-15"
    },
    "customerDetails": {
      "name": "Mr. John Smith",
      "address": "221B Baker Street, London"
    },
    "statementSummary": {
      "previousBalance": "£3.50",
      "paymentsReceived": "£3.50",
      "newCharges": "£2.75",
      "totalAmountDue": "£2.75"
    },
    "billingDetails": {
      "meterNumber": "987654",
      "currentReading": "1550",
      "previousReading": "1500",
      "unitsConsumed": "50",
      "ratePerUnit": "£0.05",
      "totalCost": "£2.50",
      "additionalCharges": {
        "serviceFee": "£0.25",
        "maintenanceFee": "£0.00"
      }
    },
    "paymentInstructions": {
      "paymentMethods": ["Postal Order", "Cheque"],
      "mailingAddress": "Victorian Gaslight Co., 123 Gaslight St., London",
      "notes": "Please ensure payments are made by the due date to avoid late fees."
    }
  },
  "styledParagraphs": [
    {
      "title": "A Glance at Your Gas Usage",
      "content": "Esteemed Customer, your gas consumption for the month of December 1875 has been recorded meticulously by our diligent meter readers. You have consumed a total of 50 units of gas, measured with our patented gas meters."
    },
    {
      "title": "Ensuring Accurate Billing",
      "content": "The Victorian Gaslight Company assures you of precise invoicing and detailed billing to reflect your household's consumption. Each month's bill is generated with utmost care to maintain transparency in our services."
    },
    {
      "title": "Thank You for Your Patronage",
      "content": "We express our sincere gratitude for making use of our services. It is our endeavour to light your homes efficiently. Should you have any queries, please do not hesitate to contact our courteous customer service team."
    }
  ]
}
from playwright.sync_api import sync_playwright
from PIL import Image
import io

def generate_document(data):
    # Generate the HTML content
    html_content = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{data['pageTitle']}</title>
        <style>
            body {{
                font-family: 'Times New Roman', Times, serif;
                background-color: #f9f7f1;
                color: #333;
                padding: 20px;
            }}
            .container {{
                max-width: 800px;
                margin: 0 auto;
                border: 2px solid #000;
                padding: 20px;
                background-color: #fff;
            }}
            .header {{
                text-align: center;
                margin-bottom: 30px;
            }}
            .header h1 {{
                font-size: 2.5em;
                margin: 0;
            }}
            .header h2 {{
                font-size: 1.2em;
                margin: 10px 0 20px;
            }}
            .ornate-border {{
                border: 5px solid #000;
                padding: 15px;
            }}
            .billing-info, .styled-paragraphs {{
                margin-bottom: 20px;
            }}
            .billing-info h3, .styled-paragraphs h3 {{
                font-size: 1.5em;
                border-bottom: 2px solid #000;
                padding-bottom: 5px;
            }}
            .billing-info table {{
                width: 100%;
                border-collapse: collapse;
            }}
            .billing-info table, .billing-info th, .billing-info td {{
                border: 1px solid black;
            }}
            .billing-info th, .billing-info td {{
                padding: 8px;
                text-align: left;
            }}
            .styled-paragraphs h3 {{
                margin-top: 30px;
            }}
            p {{
                text-indent: 30px;
                margin: 10px 0;
                line-height: 1.6;
            }}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1>{data['header']['title']}</h1>
                <h2>{data['header']['subtitle']}</h2>
                {'<div class="ornate-border"></div>' if data['header']['ornateBorders'] else ''}
            </div>
            <div class="billing-info">
                <h3>Account Information</h3>
                <table>
                    <tr>
                        <th>Account Number</th>
                        <td>{data['billingInformation']['accountDetails']['accountNumber']}</td>
                    </tr>
                    <tr>
                        <th>Billing Date</th>
                        <td>{data['billingInformation']['accountDetails']['billingDate']}</td>
                    </tr>
                    <tr>
                        <th>Due Date</th>
                        <td>{data['billingInformation']['accountDetails']['dueDate']}</td>
                    </tr>
                </table>
            </div>
            <div class="billing-info">
                <h3>Customer Information</h3>
                <table>
                    <tr>
                        <th>Name</th>
                        <td>{data['billingInformation']['customerDetails']['name']}</td>
                    </tr>
                    <tr>
                        <th>Address</th>
                        <td>{data['billingInformation']['customerDetails']['address']}</td>
                    </tr>
                </table>
            </div>
            <div class="billing-info">
                <h3>Statement Summary</h3>
                <table>
                    <tr>
                        <th>Previous Balance</th>
                        <td>{data['billingInformation']['statementSummary']['previousBalance']}</td>
                    </tr>
                    <tr>
                        <th>Payments Received</th>
                        <td>{data['billingInformation']['statementSummary']['paymentsReceived']}</td>
                    </tr>
                    <tr>
                        <th>New Charges</th>
                        <td>{data['billingInformation']['statementSummary']['newCharges']}</td>
                    </tr>
                    <tr>
                        <th>Total Amount Due</th>
                        <td>{data['billingInformation']['statementSummary']['totalAmountDue']}</td>
                    </tr>
                </table>
            </div>
            <div class="billing-info">
                <h3>Billing Details</h3>
                <table>
                    <tr>
                        <th>Meter Number</th>
                        <td>{data['billingInformation']['billingDetails']['meterNumber']}</td>
                    </tr>
                    <tr>
                        <th>Current Reading</th>
                        <td>{data['billingInformation']['billingDetails']['currentReading']}</td>
                    </tr>
                    <tr>
                        <th>Previous Reading</th>
                        <td>{data['billingInformation']['billingDetails']['previousReading']}</td>
                    </tr>
                    <tr>
                        <th>Units Consumed</th>
                        <td>{data['billingInformation']['billingDetails']['unitsConsumed']}</td>
                    </tr>
                    <tr>
                        <th>Rate Per Unit</th>
                        <td>{data['billingInformation']['billingDetails']['ratePerUnit']}</td>
                    </tr>
                    <tr>
                        <th>Total Cost</th>
                        <td>{data['billingInformation']['billingDetails']['totalCost']}</td>
                    </tr>
                    <tr>
                        <th>Service Fee</th>
                        <td>{data['billingInformation']['billingDetails']['additionalCharges']['serviceFee']}</td>
                    </tr>
                    <tr>
                        <th>Maintenance Fee</th>
                        <td>{data['billingInformation']['billingDetails']['additionalCharges']['maintenanceFee']}</td>
                    </tr>
                </table>
            </div>
            <div class="billing-info">
                <h3>Payment Instructions</h3>
                <table>
                    <tr>
                        <th>Payment Methods</th>
                        <td>{', '.join(data['billingInformation']['paymentInstructions']['paymentMethods'])}</td>
                    </tr>
                    <tr>
                        <th>Mailing Address</th>
                        <td>{data['billingInformation']['paymentInstructions']['mailingAddress']}</td>
                    </tr>
                    <tr>
                        <th>Notes</th>
                        <td>{data['billingInformation']['paymentInstructions']['notes']}</td>
                    </tr>
                </table>
            </div>
            <div class="styled-paragraphs">
                {" ".join([
                f"<h3>{para['title']}</h3><p>{para['content']}</p>" for para in data['styledParagraphs']
                ])}
            </div>
        </div>
    </body>
    </html>
    """

    # Generate the screenshot using Playwright
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.set_content(html_content)
        screenshot_bytes = page.screenshot()
        browser.close()

    # Convert the screenshot bytes to a PIL Image
    image = Image.open(io.BytesIO(screenshot_bytes))

    return image
The web page originates from the "Victorian Gaslight Billing" company and is designed to present monthly gas consumption and billing details for customers elegantly and informatively.

The page has a central container that aligns all the elements neatly and is presented on a light beige background reminiscent of parchment, with black text for clear readability. The main page is framed with a solid black border and an additional inner border containing ornate decoration, enhancing the Victorian era aesthetics.

At the top of the page is the header section centered both horizontally and vertically. It features the main title "Victorian Gaslight Billing" in large, bold text. Below the title is a subtle subtitle, "Your Monthly Gas Consumption & Billing Details," which is also centered and written in smaller font. The header section includes a decorative ornate border emphasizing the visual design.

Following the header, the page is structured into multiple sections, each starting with a clearly labeled heading in a slightly enlarged font. These sections contain tabular data and styled paragraphs, described as follows:

- **Account Information**: Contains details in a table format. The table lists the account number "123456789", billing date "1875-12-31", and due date "1876-01-15".

- **Customer Information**: Another table shows the customer's details, including the name "Mr. John Smith" and the address "221B Baker Street, London".

- **Statement Summary**: A table outlines the financial summary showing previous balance "£3.50", payments received "£3.50", new charges "£2.75", and the total amount due "£2.75".

- **Billing Details**: This table offers a comprehensive breakdown of the consumption and charges, including the meter number "987654", current reading "1550", previous reading "1500", units consumed "50", rate per unit "£0.05", total cost "£2.50", additional service fee "£0.25", and a maintenance fee of "£0.00". 

- **Payment Instructions**: This table provides methods of payment (Postal Order, Cheque), a mailing address for payment submissions ("Victorian Gaslight Co., 123 Gaslight St., London"), and notes indicating the importance of timely payments to avoid late fees.

The final part of the page includes three styled paragraphs serving as a narrative that reassures the customers about the accuracy of their billing and offers heartfelt thanks for their patronage. Each paragraph is identified with a heading:
- "A Glance at Your Gas Usage" describes meticulous record-keeping of gas consumption (50 units for December 1875).
- "Ensuring Accurate Billing" guarantees precise invoicing and transparency.
- "Thank You for Your Patronage" extends gratitude for using the service and encourages customers to contact for any queries.

Overall, the web page is designed with a focus on readability, clarity, and aesthetics, embodying a Victorian touch while effectively communicating all relevant billing information to the user.
[
  {
    "question": "What is the title of the web page?",
    "answer": "Victorian Gaslight Billing",
    "explanation": "The title is explicitly stated at the top of the web page and in the tab's title bar."
  },
  {
    "question": "What is the due date for the payment?",
    "answer": "1876-01-15",
    "explanation": "The due date is provided in the Account Information section under the billing details."
  },
  {
    "question": "What is the total amount due on this bill?",
    "answer": "£2.75",
    "explanation": "The total amount due is listed in the Statement Summary section under the billing information."
  },
  {
    "question": "How many units of gas were consumed in the billing period?",
    "answer": "50",
    "explanation": "The units consumed are specified in the Billing Details section."
  },
  {
    "question": "Who is the customer named on the bill?",
    "answer": "Mr. John Smith",
    "explanation": "The customer’s name is mentioned in the Customer Information section."
  },
  {
    "question": "What are the available payment methods?",
    "answer": "Postal Order, Cheque",
    "explanation": "The payment methods are listed in the Payment Instructions section."
  },
  {
    "question": "What is the rate per unit of gas?",
    "answer": "£0.05",
    "explanation": "The rate per unit is specified in the Billing Details section."
  },
  {
    "question": "What is the previous balance of Mr. John Smith's account?",
    "answer": "£3.50",
    "explanation": "The previous balance is listed in the Statement Summary section."
  },
  {
    "question": "Where is Mr. John Smith's residence located?",
    "answer": "221B Baker Street, London",
    "explanation": "The address is provided in the Customer Information section."
  },
  {
    "question": "To whom should payments be mailed?",
    "answer": "Victorian Gaslight Co., 123 Gaslight St., London",
    "explanation": "The mailing address for payments is listed in the Payment Instructions section."
  },
  {
    "question": "What is the current meter reading?",
    "answer": "1550",
    "explanation": "The current reading is given in the Billing Details section."
  },
  {
    "question": "Has there been any maintenance fee charged?",
    "answer": "No, the maintenance fee is £0.00",
    "explanation": "The maintenance fee is specified as £0.00 in the Billing Details section."
  },
  {
    "question": "What is the content of the section titled 'A Glance at Your Gas Usage'?",
    "answer": "Esteemed Customer, your gas consumption for the month of December 1875 has been recorded meticulously by our diligent meter readers. You have consumed a total of 50 units of gas, measured with our patented gas meters.",
    "explanation": "The content is directly taken from the styled paragraphs section titled 'A Glance at Your Gas Usage'."
  },
  {
    "question": "What is Mr. John Smith's account number?",
    "answer": "123456789",
    "explanation": "The account number is provided in the Account Information section."
  },
  {
    "question": "When was the billing date?",
    "answer": "1875-12-31",
    "explanation": "The billing date is provided in the Account Information section."
  },
  {
    "question": "What is the total cost of the gas consumed?",
    "answer": "£2.50",
    "explanation": "The total cost is provided in the Billing Details section, based on the units consumed and the rate per unit."
  }
]