app.py

import os
import google.generativeai as genai
import gradio as gr
import asyncio
from pyppeteer import launch

# -----------------------
# Configure Gemini API
# -----------------------
genai.configure(api_key=os.environ["GENAI_API_KEY"])
model = genai.GenerativeModel("gemini-2.0-flash")

# -----------------------
# 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."
    )
    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()