{
  "page_title": "Understanding Your Gas Bill",
  "sections": [
    {
      "section_title": "Introduction",
      "content": "Gas bills can be complex, but understanding them is essential for managing your household expenses. This page aims to break down each part of the gas bill with clear explanations and tooltips. Additionally, you'll find a glossary section to help you understand specific terms."
    },
    {
      "section_title": "Bill Overview",
      "content": "The bill summary gives you a snapshot of your total charges for the billing period.",
      "tooltips": {
        "what_is_summary": "The bill summary is the first section of your bill, summarizing the total charges for the billing period."
      }
    },
    {
      "section_title": "Account Information",
      "content": "This section contains your account number, billing date, and other essential details.",
      "example_bill": {
        "account_number": "123456789",
        "bill_date": "2023-09-25",
        "due_date": "2023-10-15",
        "billing_period": "2023-08-01 to 2023-08-31",
        "amount_due": "$120.75"
      },
      "tooltips": {
        "account_number": "Your unique identifier for your gas service account.",
        "bill_date": "The date your bill was generated.",
        "due_date": "The deadline by which you need to pay your bill.",
        "billing_period": "The range of dates for which the bill charges apply."
      }
    },
    {
      "section_title": "Usage Details",
      "content": "Here you'll find detailed information about your gas usage during the billing period.",
      "example_bill": {
        "meter_number": "987654321",
        "previous_reading": "1500",
        "current_reading": "1625",
        "units_used": "125",
        "unit_rate": "$0.95 per unit",
        "total_usage_cost": "$118.75"
      },
      "tooltips": {
        "meter_number": "The unique identifier for your gas meter.",
        "previous_reading": "The meter reading from the previous billing period.",
        "current_reading": "The meter reading for the current billing period.",
        "units_used": "The total number of units of gas used during the billing period.",
        "unit_rate": "The cost per unit of gas used.",
        "total_usage_cost": "The total cost for the gas used during the billing period."
      }
    },
    {
      "section_title": "Taxes and Fees",
      "content": "This section breaks down any taxes and additional fees included in your bill.",
      "example_bill": {
        "taxes": "$5.00",
        "service_fee": "$2.00",
        "env_fee": "$1.00",
        "total_additional_costs": "$8.00"
      },
      "tooltips": {
        "taxes": "The total tax amount charged.",
        "service_fee": "A fee for the maintenance of the gas service.",
        "env_fee": "Environmental fee, if applicable."
      }
    },
    {
      "section_title": "Payment Options",
      "content": "Learn about the various payment options available for settling your gas bill.",
      "options": [
        "Online Payment",
        "Direct Debit",
        "By Mail",
        "In-Person"
      ],
      "tooltips": {
        "online_payment": "Pay your bill using our secure online portal.",
        "direct_debit": "Set up automatic payments from your bank account.",
        "by_mail": "Send a check or money order to the address provided.",
        "in_person": "Pay in person at any of our authorized payment locations."
      }
    },
    {
      "section_title": "Glossary",
      "content": "Familiarize yourself with common terms used in your gas bill.",
      "terms": {
        "billing_period": "The time frame for which your gas usage is being billed.",
        "meter_reading": "The measurement of gas usage recorded by your meter.",
        "unit_rate": "The cost assigned to each unit of gas consumed.",
        "previous_reading": "The meter reading at the end of the last billing period.",
        "current_reading": "The meter reading at the end of the current billing period."
      }
    },
    {
      "section_title": "Contact Us",
      "content": "If you have any questions regarding your gas bill, please reach out to our support team.",
      "contact_info": {
        "phone_number": "1-800-123-4567",
        "email": "support@gascompany.com",
        "address": "123 Energy Lane, Gas City, GC 12345"
      },
      "tooltips": {
        "phone_number": "Call us for immediate assistance.",
        "email": "Send us an email for detailed inquiries.",
        "address": "Visit our office during business hours for in-person support."
      }
    }
  ]
}
from playwright.sync_api import sync_playwright
from PIL import Image
from io import BytesIO

def generate_document(data):
    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['page_title']}</title>
        <style>
            body {{
                font-family: Arial, sans-serif;
                line-height: 1.6;
                padding: 0 10%;
                background-color: #f4f4f4;
                color: #333;
            }}
            h1 {{
                text-align: center;
                font-size: 2.5em;
                margin-top: 20px;
            }}
            h2 {{
                color: #2f4f4f;
                font-size: 2em;
                margin-top: 20px;
                border-bottom: 2px solid #2f4f4f;
            }}
            p {{
                font-size: 1.1em;
                margin: 10px 0;
            }}
            .tooltip {{
                position: relative;
                display: inline-block;
                cursor: pointer;
                color: #1e90ff;
                border-bottom: 1px dotted #1e90ff;
            }}
            .tooltip .tooltiptext {{
                visibility: hidden;
                width: 300px;
                background-color: #555;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px;
                position: absolute;
                z-index: 1;
                bottom: 125%; /* Position the tooltip above the text */
                left: 50%;
                margin-left: -150px;
                opacity: 0;
                transition: opacity 0.3s;
            }}
            .tooltip:hover .tooltiptext {{
                visibility: visible;
                opacity: 1;
            }}
            .example-box {{
                background-color: #fff;
                border: 1px solid #ddd;
                padding: 10px;
                margin: 10px 0;
            }}
            .glossary {{
                font-weight: bold;
            }}
            .contact-info {{
                list-style-type: none;
                padding: 0;
            }}
            .contact-info li {{
                margin: 5px 0;
            }}
        </style>
    </head>
    <body>
        <h1>{data['page_title']}</h1>
    """

    for section in data['sections']:
        html_content += f"<h2>{section['section_title']}</h2>"
        html_content += f"<p>{section['content']}</p>"

        if 'tooltips' in section:
            for tooltip_key, tooltip_text in section['tooltips'].items():
                html_content += f"<div class='tooltip'>{tooltip_key.replace('_', ' ').capitalize()}<span class='tooltiptext'>{tooltip_text}</span></div><br>"

        if 'example_bill' in section:
            html_content += "<div class='example-box'>"
            for key, value in section['example_bill'].items():
                html_content += f"<p><strong>{key.replace('_', ' ').capitalize()}:</strong> {value}</p>"
            html_content += "</div>"
        
        if 'options' in section:
            for option in section['options']:
                html_content += f"<li>{option}</li>"

        if 'terms' in section:
            html_content += "<ul class='glossary'>"
            for term, definition in section['terms'].items():
                html_content += f"<li><strong>{term.replace('_', ' ').capitalize()}:</strong> {definition}</li>"
            html_content += "</ul>"

        if 'contact_info' in section:
            html_content += "<ul class='contact-info'>"
            for key, value in section['contact_info'].items():
                html_content += f"<li><strong>{key.replace('_', ' ').capitalize()}:</strong> {value}</li>"
            html_content += "</ul>"

    html_content += """
    </body>
    </html>
    """

    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.set_content(html_content)
        screenshot = page.screenshot()
        browser.close()

    # Convert the screenshot bytes to a PIL Image object
    image = Image.open(BytesIO(screenshot))
    return image
The web page titled "Understanding Your Gas Bill" is designed to help users navigate and comprehend their gas bills more effectively. The page features a thoughtfully organized layout, with headings and sections for clarity.

At the top, a large, centered heading displays the page title. Below it, the content begins with an "Introduction" section that explains the purpose of the page, emphasizing the importance of understanding one's gas bill and noting the presence of explanations and tooltips to aid comprehension.

The next section is "Bill Overview," providing a brief snapshot of the total charges for the billing period. Here, tooltips offer additional clarifications when users hover over specific phrases such as "bill summary."

In the "Account Information" section, users find crucial details about their accounts, including account number, billing date, due date, billing period, and amount due. These details are presented in a box with a white background for visual distinction. Hovering over terms like "account number" and "bill date" reveals tooltips with further explanations.

Following this is the "Usage Details" section, where detailed information about gas usage during the billing period is presented. The same box format is used, listing the meter number, previous and current readings, units used, unit rate, and total usage cost. Tooltips provide more context for each of these terms.

The "Taxes and Fees" section itemizes any additional charges on the bill, including taxes, service fees, and environmental fees, all displayed within another white-background box. Tooltips again aid understanding by offering definitions for these fees.

For settling the bill, the "Payment Options" section outlines several methods: Online Payment, Direct Debit, By Mail, and In-Person payments. Each method's name serves as a hyperlink with accompanying tooltips to further explain each payment option.

The "Glossary" section lists key terms commonly found on gas bills, with each term followed by its definition. Terms like billing period, meter reading, unit rate, previous reading, and current reading are bolded to emphasize their importance.

Finally, the "Contact Us" section provides users with contact information, including a phone number, email address, and physical address, all listed in a straightforward, bulleted format. Tooltips provide additional details about each contact method.

Overall, the page utilizes a clean design with clear headings, distinct sections, and the strategic use of tooltips to ensure that users can easily find and understand information about their gas bills.
[
    {
        "question": "What is the title of the web page?",
        "answer": "Understanding Your Gas Bill",
        "explanation": "The title is prominently displayed at the top of the web page."
    },
    {
        "question": "What is the purpose of this web page?",
        "answer": "To help users understand the different parts of their gas bill.",
        "explanation": "The introduction section states that the page aims to break down each part of the gas bill with clear explanations and tooltips."
    },
    {
        "question": "What information is provided in the 'Bill Overview' section?",
        "answer": "The bill summary gives you a snapshot of your total charges for the billing period.",
        "explanation": "The 'Bill Overview' section contains a brief description indicating it provides a summary of total charges."
    },
    {
        "question": "What does the tooltip for 'What is summary' explain?",
        "answer": "The bill summary is the first section of your bill, summarizing the total charges for the billing period.",
        "explanation": "When hovering over the 'What is summary' tooltip, this detailed explanation is displayed."
    },
    {
        "question": "What kind of information can you find in the 'Account Information' section?",
        "answer": "Account number, billing date, due date, billing period, and amount due.",
        "explanation": "The 'Account Information' section lists these details in the example bill provided."
    },
    {
        "question": "What is the due date for the example bill in the 'Account Information' section?",
        "answer": "2023-10-15",
        "explanation": "The due date is specified in the example bill under the 'Account Information' section."
    },
    {
        "question": "What does the 'Usage Details' section include?",
        "answer": "Meter number, previous reading, current reading, units used, unit rate, and total usage cost.",
        "explanation": "The 'Usage Details' section outlines these specific data points in their example bill."
    },
    {
        "question": "How is the total usage cost calculated in the 'Usage Details' section?",
        "answer": "$118.75",
        "explanation": "The total usage cost is given in the example bill, shown as $118.75 for 125 units at $0.95 per unit."
    },
    {
        "question": "What are the included costs in the 'Taxes and Fees' section?",
        "answer": "Taxes, service fee, and environmental fee.",
        "explanation": "The 'Taxes and Fees' section lists these specific charges along with their amounts."
    },
    {
        "question": "What is the total additional cost in the example bill's 'Taxes and Fees' section?",
        "answer": "$8.00",
        "explanation": "The example bill in the 'Taxes and Fees' section sums the itemized costs to $8.00."
    },
    {
        "question": "What payment options are available for settling the gas bill?",
        "answer": "Online Payment, Direct Debit, By Mail, In-Person",
        "explanation": "These options are listed under the 'Payment Options' section."
    },
    {
        "question": "What does the tooltip for 'Online Payment' explain?",
        "answer": "Pay your bill using our secure online portal.",
        "explanation": "Hovering over 'Online Payment' reveals this explanation in a tooltip."
    },
    {
        "question": "What term is defined in the 'Glossary' as 'The time frame for which your gas usage is being billed'?",
        "answer": "Billing period",
        "explanation": "The 'Glossary' section provides this definition for the term 'billing period'."
    },
    {
        "question": "How can you contact the support team according to the 'Contact Us' section?",
        "answer": "By phone, email, or visiting the office.",
        "explanation": "The 'Contact Us' section lists a phone number, email, and physical address for contact."
    },
    {
        "question": "What is the phone number provided in the 'Contact Us' section?",
        "answer": "1-800-123-4567",
        "explanation": "The phone number is specified in the contact information under the 'Contact Us' section."
    }
]