File size: 1,818 Bytes
79cffcd 020ec68 e82a0e0 79cffcd 91bd04d d7f6489 020ec68 79cffcd 91bd04d 020ec68 91bd04d 79cffcd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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() |