Update app.py

app.py

@@ -13,7 +13,6 @@ def html_to_image(html_code, width, height):
     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")
@@ -23,30 +22,36 @@ with gr.Blocks() as interface:
                 label="HTML Code",
                 language="html",
                 lines=30,
-                interactive=True  # Make the code input interactive
+                interactive=True
             )
             width_input = gr.Number(
                 label="Width",
                 value=1280,
-                step=10,
-                info="Width in pixels"
+                step=10
             )
             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
     )
+    width_input.change(
+        fn=html_to_image,
+        inputs=[html_code_input, width_input, height_input],
+        outputs=output_image
+    )
+    height_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,
@@ -54,7 +59,6 @@ with gr.Blocks() as interface:
         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],
@@ -63,6 +67,5 @@ with gr.Blocks() as interface:
         inputs=[html_code_input, width_input, height_input]
     )
 
-# Launch the Gradio app
 if __name__ == "__main__":
     interface.launch()