import gradio as gr
import imgkit
from PIL import Image
from io import BytesIO

def html_to_image(html_code, width, height):
    options = {
        'format': 'png',
        'width': str(width),
        'height': str(height),
        'encoding': "UTF-8"
    }
    image = Image.open(BytesIO(imgkit.from_string(html_code, False, options=options)))
    return image

# Create the Gradio interface
with gr.Blocks() as interface:
    gr.Markdown("# HTML to Image Converter")
    gr.Markdown("Enter HTML code and set dimensions to generate an image")
    with gr.Row():
        with gr.Column():
            html_code_input = gr.Code(
                label="HTML Code",
                language="html",
                lines=30,
                interactive=True  # Make the code input interactive
            )
            width_input = gr.Number(
                label="Width",
                value=1280,
                step=10,
                info="Width in pixels"
            )
            height_input = gr.Number(
                label="Height",
                value=720,
                step=10,
                info="Height in pixels"
                )
        output_image = gr.Image(type="pil", format="PNG", show_label=False)

    # Trigger the function when the HTML Code input changes
    html_code_input.change(
        fn=html_to_image,
        inputs=[html_code_input, width_input, height_input],
        outputs=output_image
    )

    # Alternatively, trigger function on button click (optional)
    generate_button = gr.Button("Refresh")
    generate_button.click(
        fn=html_to_image,
        inputs=[html_code_input, width_input, height_input],
        outputs=output_image
    )

    # Add examples
    gr.Examples(
        examples=[
            ["<div style='background: linear-gradient(45deg, #ff6b6b, #4ecdc4); padding: 20px; border-radius: 10px;'><h1 style='color: white; font-family: Arial;'>Hello, World!</h1></div>", 800, 400],
            ["<div style='background: #f0f0f0; padding: 20px;'><ul style='color: #333;'><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>", 600, 300]
        ],
        inputs=[html_code_input, width_input, height_input]
    )

# Launch the Gradio app
if __name__ == "__main__":
    interface.launch()