Update image in real time

app.py

@@ -13,36 +13,56 @@ def html_to_image(html_code, width, height):
     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()
-)
+# 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()
+    interface.launch()

requirements.txt

@@ -1,2 +1,53 @@
-imgkit
-gradio
+aiofiles==23.2.1
+annotated-types==0.7.0
+anyio==4.6.2.post1
+certifi==2024.8.30
+charset-normalizer==3.4.0
+click==8.1.7
+exceptiongroup==1.2.2
+fastapi==0.115.5
+ffmpy==0.4.0
+filelock==3.16.1
+fsspec==2024.10.0
+gradio==5.5.0
+gradio_client==1.4.2
+h11==0.14.0
+httpcore==1.0.6
+httpx==0.27.2
+huggingface-hub==0.26.2
+idna==3.10
+imgkit==1.2.3
+Jinja2==3.1.4
+markdown-it-py==3.0.0
+MarkupSafe==2.1.5
+mdurl==0.1.2
+numpy==2.1.3
+orjson==3.10.11
+packaging==24.2
+pandas==2.2.3
+pillow==11.0.0
+pydantic==2.9.2
+pydantic_core==2.23.4
+pydub==0.25.1
+Pygments==2.18.0
+python-dateutil==2.9.0.post0
+python-multipart==0.0.12
+pytz==2024.2
+PyYAML==6.0.2
+requests==2.32.3
+rich==13.9.4
+ruff==0.7.3
+safehttpx==0.1.1
+semantic-version==2.10.0
+shellingham==1.5.4
+six==1.16.0
+sniffio==1.3.1
+starlette==0.41.2
+tomlkit==0.12.0
+tqdm==4.67.0
+typer==0.13.0
+typing_extensions==4.12.2
+tzdata==2024.2
+urllib3==2.2.3
+uvicorn==0.32.0
+websockets==12.0