Update app.py

app.py

@@ -4,53 +4,52 @@ import gradio as gr
 import asyncio
 from pyppeteer import launch
 
-# Configure Gemini
+# -----------------------
+# Configure Gemini API
+# -----------------------
 genai.configure(api_key=os.environ["GENAI_API_KEY"])
 model = genai.GenerativeModel("gemini-2.0-flash")
 
-# 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):
+# -----------------------
+# Generate HTML from prompt
+# -----------------------
+def generate_mockup_html(user_prompt):
     system_prompt = (
         "You are a Power Apps mockup generator. "
         "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()
-
-        # Render PNG
-        output_img = "mockup.png"
-        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 UI
-with gr.Blocks() as demo:
-    gr.Markdown("## ⚡ Power Apps Mockup Generator (Gemini + HTML + PNG)")
-    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")
-    html_output = gr.Code(label="Generated HTML + CSS", language="html")
-    image_output = gr.Image(label="Mockup Preview")
-
-    generate_btn.click(
-        fn=generate_mockup,
-        inputs=user_input,
-        outputs=[html_output, image_output]
-    )
+    response = model.generate_content(system_prompt + "\n" + user_prompt)
+    return response.text
+
+# -----------------------
+# Convert HTML → PNG
+# -----------------------
+async def render_html_to_png(html_code, output_file="mockup.png"):
+    browser = await launch(args=["--no-sandbox"])
+    page = await browser.newPage()
+    await page.setContent(html_code)
+    await page.screenshot({"path": output_file, "fullPage": True})
+    await browser.close()
+    return output_file
+
+# -----------------------
+# Full pipeline
+# -----------------------
+def gradio_mockup(user_prompt):
+    html_code = generate_mockup_html(user_prompt)
+    asyncio.get_event_loop().run_until_complete(render_html_to_png(html_code))
+    return "mockup.png"
+
+# -----------------------
+# Gradio Interface
+# -----------------------
+demo = gr.Interface(
+    fn=gradio_mockup,
+    inputs=gr.Textbox(label="Describe your PowerApps mockup screen", lines=3),
+    outputs=gr.Image(type="filepath", label="Generated Mockup"),
+    title="PowerApps Mockup Generator",
+    description="Enter your screen description and get a PowerApps-style mockup as an image."
+)
 
 demo.launch()