Update app.py

app.py

@@ -1,16 +1,21 @@
 import os
 import google.generativeai as genai
-import imgkit
 import gradio as gr
+import asyncio
+from pyppeteer import launch
 
-# -----------------------
-# Configure Gemini API
-# -----------------------
+# Configure Gemini
 genai.configure(api_key=os.environ["GENAI_API_KEY"])
 model = genai.GenerativeModel("gemini-2.0-flash")
 
-# Configure imgkit with the correct path
-config = imgkit.config(wkhtmltoimage="/usr/bin/wkhtmltoimage")
+# Function to render HTML → PNG using pyppeteer
+async def render_html_to_png(html_code, output_img="mockup.png"):
+    browser = await launch(args=['--no-sandbox'])
+    page = await browser.newPage()
+    await page.setContent(html_code)
+    await page.screenshot({'path': output_img, 'fullPage': True})
+    await browser.close()
+    return output_img
 
 def generate_mockup(user_prompt):
     system_prompt = (
@@ -18,43 +23,29 @@ def generate_mockup(user_prompt):
         "Convert user descriptions into complete HTML + CSS code that looks like a Power Apps mobile screen. "
         "Do NOT include JSON or explanations. Only return valid HTML + CSS."
     )
-
     try:
         response = model.generate_content(system_prompt + "\n" + user_prompt)
         html_code = response.text.strip()
 
-        # Save HTML
-        with open("mockup.html", "w") as f:
-            f.write(html_code)
-
-        # Generate PNG image with explicit config
+        # Render PNG
         output_img = "mockup.png"
-        imgkit.from_file("mockup.html", output_img, config=config)
+        asyncio.get_event_loop().run_until_complete(render_html_to_png(html_code, output_img))
 
         return html_code, output_img
-
     except Exception as e:
         return f"❌ Error: {e}", None
 
-
-# -----------------------
-# Gradio Interface
-# -----------------------
+# Gradio UI
 with gr.Blocks() as demo:
     gr.Markdown("## ⚡ Power Apps Mockup Generator (Gemini + HTML + PNG)")
-
-    with gr.Row():
-        user_input = gr.Textbox(
-            label="Describe your Power Apps mockup screen",
-            placeholder="Example: A login screen with username, password, and a login button",
-            lines=3
-        )
-
+    user_input = gr.Textbox(
+        label="Describe your Power Apps mockup screen",
+        placeholder="Example: A login screen with username, password, and a login button",
+        lines=3
+    )
     generate_btn = gr.Button("Generate Mockup")
-
-    with gr.Row():
-        html_output = gr.Code(label="Generated HTML + CSS", language="html")
-        image_output = gr.Image(label="Mockup Preview")
+    html_output = gr.Code(label="Generated HTML + CSS", language="html")
+    image_output = gr.Image(label="Mockup Preview")
 
     generate_btn.click(
         fn=generate_mockup,