{
  "bill_information": {
    "account_number": "123456789",
    "billing_period": "2023-09-01 to 2023-09-30",
    "due_date": "2023-10-15",
    "customer_name": "John Doe",
    "address": "1234 Elm Street, Springfield, IL, 62701"
  },
  "usage_summary": {
    "previous_meter_reading": "00012345 (2023-08-31)",
    "current_meter_reading": "00012452 (2023-09-30)",
    "usage_in_gallons": 107,
    "usage_in_cubic_feet": 14.3
  },
  "charges": [
    {
      "description": "Water Usage Charge",
      "amount": 30.50
    },
    {
      "description": "Sewer Charge",
      "amount": 15.75
    },
    {
      "description": "Service Fee",
      "amount": 5.00
    }
  ],
  "fees": [
    {
      "description": "Late Payment Fee",
      "amount": 1.50
    }
  ],
  "credits": [
    {
      "description": "Previous Payment (Received 2023-09-10)",
      "amount": -40.00
    }
  ],
  "total_due": {
    "amount": 12.75
  }
}
from playwright.sync_api import sync_playwright
from PIL import Image
import io

def generate_document(data):
    html_template = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Water Bill</title>
        <style>
            body {{
                font-family: Arial, sans-serif;
                color: #333;
                margin: 0;
                padding: 0;
                background-color: #f4f4f4;
            }}
            .container {{
                width: 80%;
                margin: auto;
                overflow: hidden;
            }}
            .header, .footer {{
                background-color: #4CAF50;
                color: white;
                padding: 1rem 0;
                text-align: center;
            }}
            .bill-info, .usage-info, .charges-info, .footer-info {{
                background: white;
                border: 1px solid #ddd;
                padding: 20px;
                margin-bottom: 20px;
                border-radius: 8px;
            }}
            h2 {{
                border-bottom: 2px solid #4CAF50;
                padding-bottom: 10px;
                margin-bottom: 20px;
            }}
            table {{
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 20px;
            }}
            table, th, td {{
                border: 1px solid #ddd;
            }}
            th, td {{
                padding: 12px;
                text-align: left;
            }}
            th {{
                background-color: #f2f2f2;
            }}
        </style>
    </head>
    <body>
        <div class="header">
            <h1>Water Bill</h1>
        </div>
        <div class="container">
            <div class="bill-info">
                <h2>Bill Information</h2>
                <p><strong>Account Number:</strong> {data['bill_information']['account_number']}</p>
                <p><strong>Billing Period:</strong> {data['bill_information']['billing_period']}</p>
                <p><strong>Due Date:</strong> {data['bill_information']['due_date']}</p>
                <p><strong>Customer Name:</strong> {data['bill_information']['customer_name']}</p>
                <p><strong>Address:</strong> {data['bill_information']['address']}</p>
            </div>
            <div class="usage-info">
                <h2>Usage Summary</h2>
                <p><strong>Previous Meter Reading:</strong> {data['usage_summary']['previous_meter_reading']}</p>
                <p><strong>Current Meter Reading:</strong> {data['usage_summary']['current_meter_reading']}</p>
                <p><strong>Usage in Gallons:</strong> {data['usage_summary']['usage_in_gallons']}</p>
                <p><strong>Usage in Cubic Feet:</strong> {data['usage_summary']['usage_in_cubic_feet']}</p>
            </div>
            <div class="charges-info">
                <h2>Charges</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {"".join(f"<tr><td>{charge['description']}</td><td>${charge['amount']}</td></tr>" for charge in data['charges'])}
                    </tbody>
                </table>
            </div>
            <div class="charges-info">
                <h2>Fees</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {"".join(f"<tr><td>{fee['description']}</td><td>${fee['amount']}</td></tr>" for fee in data['fees'])}
                    </tbody>
                </table>
            </div>
            <div class="charges-info">
                <h2>Credits</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {"".join(f"<tr><td>{credit['description']}</td><td>${credit['amount']}</td></tr>" for credit in data['credits'])}
                    </tbody>
                </table>
            </div>
            <div class="footer-info">
                <h2>Total Due</h2>
                <p><strong>Total Amount Due:</strong> ${data['total_due']['amount']}</p>
            </div>
        </div>
        <div class="footer">
            <p>&copy; 2023 Water Bill Company</p>
        </div>
    </body>
    </html>
    """

    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()

        page.set_content(html_template)
        screenshot = page.screenshot(full_page=True)

        browser.close()

    image = Image.open(io.BytesIO(screenshot))
    return image
The web page presents a structured and clear format for displaying a Water Bill. At the top, there's a header with a green background containing the title "Water Bill" in white text, centered.

The main content is organized within a container that has a white background and is centered on the page, contrasting against a light grey background. The container includes several sections boxed with white backgrounds and light grey borders, each further divided with clear headings and borders for easy navigation.

The first section is "Bill Information" featuring:
- Account Number: 123456789
- Billing Period: From September 1, 2023, to September 30, 2023
- Due Date: October 15, 2023
- Customer Name: John Doe
- Address: 1234 Elm Street, Springfield, IL, 62701

Following this is the "Usage Summary" section which details water usage over the billing period, specifying:
- Previous Meter Reading: 00012345 on August 31, 2023
- Current Meter Reading: 00012452 on September 30, 2023
- Usage in Gallons: 107 gallons
- Usage in Cubic Feet: 14.3 cubic feet

Next, the "Charges" section is displayed in a table format with two columns:
- The first column lists the descriptions of the charges such as "Water Usage Charge," "Sewer Charge," and "Service Fee."
- The second column lists the corresponding amounts for each charge, which are $30.50, $15.75, and $5.00 respectively.

After charges, the "Fees" section also used a similar table format with:
- Description of any fees, such as a "Late Payment Fee."
- The amount, which is $1.50.

Following fees, there is a "Credits" section that displays:
- Previous Payment Credits such as "Previous Payment (Received 2023-09-10)"
- The amount credited, which is -$40.00.

Concluding the content, the "Total Due" section highlights the total amount due prominently, which is $12.75, emphasizing the amount in bold text for clarity.

At the bottom of the page, there's a footer with a green background, mirroring the header, and it contains a center-aligned text © 2023 Water Bill Company in white, ensuring branding consistency.

Each section is clearly separated by modest margins and headings styled with green underline, enhancing readability and organization for users.
[
  {
    "question": "What is the due date for this water bill?",
    "answer": "2023-10-15",
    "explanation": "The due date is explicitly mentioned in the 'Bill Information' section of the web page."
  },
  {
    "question": "How much is the total amount due?",
    "answer": "$12.75",
    "explanation": "The 'Total Due' section at the bottom of the page states that the Total Amount Due is $12.75."
  },
  {
    "question": "What are the account number and customer name on this bill?",
    "answer": "Account Number: 123456789, Customer Name: John Doe",
    "explanation": "Both the account number and customer name are visible in the 'Bill Information' section."
  },
  {
    "question": "During which period was this bill calculated?",
    "answer": "2023-09-01 to 2023-09-30",
    "explanation": "The billing period is clearly stated in the 'Bill Information' section as 'Billing Period: 2023-09-01 to 2023-09-30'."
  },
  {
    "question": "What are the current and previous meter readings?",
    "answer": "Previous Meter Reading: 00012345 (2023-08-31), Current Meter Reading: 00012452 (2023-09-30)",
    "explanation": "These details are given in the 'Usage Summary' section under 'Previous Meter Reading' and 'Current Meter Reading'."
  },
  {
    "question": "How much water was used in gallons during the billing period?",
    "answer": "107 gallons",
    "explanation": "The 'Usage Summary' section specifies the 'Usage in Gallons' as 107."
  },
  {
    "question": "What are the charges listed on this bill?",
    "answer": "Water Usage Charge: $30.50, Sewer Charge: $15.75, Service Fee: $5.00",
    "explanation": "The 'Charges' section lists individual charges with their descriptions and amounts."
  },
  {
    "question": "Is there any credit applied to this bill? If so, what is the amount?",
    "answer": "Yes, a credit of -$40.00 for 'Previous Payment (Received 2023-09-10)'",
    "explanation": "The 'Credits' section lists a credit for the Previous Payment amounting to -$40.00."
  },
  {
    "question": "Were there any additional fees applied to the bill?",
    "answer": "Yes, a Late Payment Fee of $1.50",
    "explanation": "The 'Fees' section lists a 'Late Payment Fee' with an amount of $1.50."
  },
  {
    "question": "What is the service fee amount on this bill?",
    "answer": "$5.00",
    "explanation": "The 'Charges' section includes a line item labeled 'Service Fee' with an amount of $5.00."
  },
  {
    "question": "What is the address associated with this water bill account?",
    "answer": "1234 Elm Street, Springfield, IL, 62701",
    "explanation": "The address is provided in the 'Bill Information' section."
  },
  {
    "question": "How much was the sewer charge for this billing period?",
    "answer": "$15.75",
    "explanation": "The 'Charges' section lists a 'Sewer Charge' of $15.75."
  },
  {
    "question": "What is the water usage in cubic feet?",
    "answer": "14.3 cubic feet",
    "explanation": "The 'Usage Summary' section specifies 'Usage in Cubic Feet' as 14.3."
  }
]