Update app.py

app.py

@@ -1,94 +1,64 @@
 import os
-import json
-import gradio as gr
-from PIL import Image, ImageDraw, ImageFont
 import google.generativeai as genai
+import imgkit
+import gradio as gr
 
-# -------------------------------
-# Step 1: Gemini Setup
-# -------------------------------
-API_KEY = os.environ.get("GENAI_API_KEY")
-genai.configure(api_key=API_KEY)
-model = genai.GenerativeModel("gemini-2.5-pro")
+# -----------------------
+# Configure Gemini API
+# -----------------------
+genai.configure(api_key=os.environ["GENAI_API_KEY"])
+model = genai.GenerativeModel("gemini-2.0-flash")
 
-# -------------------------------
-# Step 2: Convert requirement → JSON schema
-# -------------------------------
-def generate_schema(requirement: str):
-    prompt = f"""
-    Convert the following requirement into a valid JSON schema for a PowerApps form.
-    Only output JSON. 
-    Requirement: {requirement}
-    """
-    response = model.generate_content(prompt)
-    raw_text = response.text.strip()
-    
-    try:
-        schema = json.loads(raw_text)
-    except Exception:
-        schema = {
-            "layout": "form",
-            "fields": [
-                {"type": "text", "label": "Name"},
-                {"type": "text", "label": "Email"},
-                {"type": "text", "label": "Phone"},
-                {"type": "button", "label": "Submit"}
-            ]
-        }
-    return schema, raw_text
+# -----------------------
+# Function: Generate HTML from user description
+# -----------------------
+def generate_mockup(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."
+    )
 
-# -------------------------------
-# Step 3: Draw Mockup (PIL)
-# -------------------------------
-def draw_mockup(schema, canvas_size=(720, 900)):
-    img = Image.new("RGB", canvas_size, "white")
-    draw = ImageDraw.Draw(img)
-    font = ImageFont.load_default()
+    try:
+        response = model.generate_content(system_prompt + "\n" + user_prompt)
+        html_code = response.text.strip()
 
-    y = 50
-    x_start = 50
-    box_width = 400
-    box_height = 35
+        # Save HTML
+        with open("mockup.html", "w") as f:
+            f.write(html_code)
 
-    for field in schema.get("fields", []):
-        if field["type"] == "text":
-            draw.text((x_start, y), field["label"], fill="black", font=font)
-            y += 20
-            draw.rectangle([x_start, y, x_start + box_width, y + box_height], outline="black", width=2)
-            y += 60
-        elif field["type"] == "button":
-            draw.rectangle([x_start, y, x_start + 200, y + box_height], fill="blue", outline="black")
-            draw.text((x_start + 70, y + 8), field["label"], fill="white", font=font)
-            y += 60
+        # Generate PNG image
+        output_img = "mockup.png"
+        imgkit.from_file("mockup.html", output_img)
 
-    return img
+        return html_code, output_img
 
-# -------------------------------
-# Step 4: Full pipeline
-# -------------------------------
-def generate_all(requirement: str):
-    schema, raw_text = generate_schema(requirement)
-    pil_img = draw_mockup(schema)
-    return json.dumps(schema, indent=2), pil_img, raw_text
+    except Exception as e:
+        return f"❌ Error: {e}", None
 
-# -------------------------------
-# Step 5: Gradio UI
-# -------------------------------
+# -----------------------
+# Gradio Interface
+# -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## 🔵 PowerApps Mockup Generator (Gemini 2.5 Pro + PIL)")
-    gr.Markdown("""
-    - Enter a natural language requirement.  
-    - Gemini 2.5 Pro → generates JSON schema.  
-    - PIL → renders a crisp PowerApps-style layout.  
-    - Fallback schema is used if parsing fails.  
-    """)
+    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
+        )
+
+    generate_btn = gr.Button("Generate Mockup")
 
-    req_text = gr.Textbox(label="Requirements", placeholder="e.g. Create a registration form with Name, Email, Phone, and Submit button")
-    json_out = gr.Code(label="Generated Schema (JSON)", language="json")
-    pil_out = gr.Image(label="Generated PowerApps Mockup", type="pil")
-    raw_out = gr.Textbox(label="Raw LLM Output")
+    with gr.Row():
+        html_output = gr.Code(label="Generated HTML + CSS", language="html")
+        image_output = gr.Image(label="Mockup Preview")
 
-    gen_btn = gr.Button("Generate Mockup")
-    gen_btn.click(generate_all, inputs=req_text, outputs=[json_out, pil_out, raw_out])
+    generate_btn.click(
+        fn=generate_mockup,
+        inputs=user_input,
+        outputs=[html_output, image_output]
+    )
 
 demo.launch()