Update app.py

app.py

@@ -6,19 +6,16 @@ import gradio as gr
 # -----------------------
 # Configure Gemini API
 # -----------------------
-genai.configure(api_key=os.environ["GENAI_API_KEY"])  # Set in HF Secrets
+genai.configure(api_key=os.environ["GENAI_API_KEY"])
 model = genai.GenerativeModel("gemini-2.0-flash")
 
 # Configure wkhtmltoimage path
 IMGKIT_CONFIG = imgkit.config(wkhtmltoimage="/usr/bin/wkhtmltoimage")
 
 # -----------------------
-# Function: Generate Mockup (only PNG output)
+# Function: Generate HTML from user description
 # -----------------------
 def generate_mockup(user_prompt):
-    """
-    Convert user description into Power Apps mockup (PNG only)
-    """
     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. "
@@ -35,31 +32,36 @@ def generate_mockup(user_prompt):
 
         # Generate PNG image
         output_img = "mockup.png"
-        imgkit.from_file("mockup.html", output_img, config=IMGKIT_CONFIG)
+        imgkit.from_file("mockup.html", output_img)
 
-        return output_img
+        return html_code, output_img
 
     except Exception as e:
-        return f"❌ Error: {e}"
+        return f"❌ Error: {e}", None
 
 # -----------------------
-# Gradio Interface (Only Image)
+# Gradio Interface
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## ⚡ Power Apps Mockup Generator (Gemini + HTML → PNG)")
+    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
+        )
 
-    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")
-    image_output = gr.Image(label="Mockup Preview")
+
+    with gr.Row():
+        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=image_output
+        outputs=[html_output, image_output]
     )
 
 demo.launch()