| import os |
| import google.generativeai as genai |
| import gradio as gr |
| import asyncio |
| from pyppeteer import launch |
|
|
| |
| |
| |
| genai.configure(api_key=os.environ["GENAI_API_KEY"]) |
| model = genai.GenerativeModel("gemini-2.0-flash") |
|
|
| |
| |
| |
| 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 |
|
|
| |
| |
| |
| 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 |
|
|
| |
| |
| |
| 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" |
|
|
| |
| |
| |
| 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() |
