app.py

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

interface = gr.Interface(
    fn=html_to_image,
    inputs=[
        gr.Code(
            label="HTML Code",
            language="html",
            lines=30,
        ),
        gr.Number(
            label="Width",
            value=1280,
            step=10,
            info="Width in pixels (100-2000)"
        ),
        gr.Number(
            label="Height",
            value=720,
            step=10,
            info="Height in pixels (100-2000)"
        )
    ],
    outputs=gr.Image(type="pil", label="Generated Image"),
    title="HTML to Image Converter",
    description="Enter HTML code and set dimensions to generate an image",
    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]
    ],
    theme=gr.themes.Soft()
)

if __name__ == "__main__":
    interface.launch()