Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Sep 30, 2025

Commit

29603f8

verified ·

1 Parent(s): 6faee08

Update app.py

Browse files

Files changed (1) hide show

app.py +254 -129

app.py CHANGED Viewed

@@ -16,7 +16,69 @@ model = genai.GenerativeModel("gemini-2.0-flash")
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
-# Base PowerApps Layout (CSS + Sidebar + Topbar + Row Selection JS)
 # -----------------------
 BASE_TEMPLATE = """
 <!DOCTYPE html>
@@ -28,138 +90,164 @@ BASE_TEMPLATE = """
 <style>
   body { margin:0; font-family:Segoe UI, sans-serif; display:flex; height:100vh; background:#f9f9f9; }
   .sidebar {
-    width:220px; background:#f4f4f4; padding:15px; border-right:1px solid #ddd;
   }
   .sidebar h3 { margin-top:20px; margin-bottom:10px; font-size:13px; color:#666; font-weight:bold; text-transform:uppercase; }
   .sidebar ul { list-style:none; padding:0; margin:0; }
-  .sidebar li {
-    margin:10px 0; color:#333; cursor:pointer; display:flex; align-items:center; gap:10px;
-    padding:5px 8px; border-radius:6px;
   }
   .sidebar li:hover { background:#e6e6e6; }
   .main { flex:1; display:flex; flex-direction:column; }
-  .content {
-    flex:1; padding:25px; overflow:auto; background:white;
   }
-  /* Table + Row Selection */
-  .table-container { border:1px solid #ddd; border-radius:6px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.08); margin-top:20px; }
   table { width:100%; border-collapse:collapse; font-size:14px; }
-  thead { background:#f4f4f4; text-align:left; font-weight:600; color:#333; }
-  thead th { padding:10px; border-bottom:1px solid #ddd; vertical-align:top; }
   tbody tr { border-bottom:1px solid #eee; cursor:pointer; }
   tbody tr:hover { background:#f9f9f9; }
   tbody tr.selected { background:#e5f1fb !important; border-left:4px solid #0078d4; }
-  td { padding:10px; color:#444; }
-  .status { padding:4px 8px; border-radius:12px; font-size:12px; font-weight:600; display:inline-block; }
   .status.active { background:#dff7df; color:#107c41; }
   .status.pending { background:#fff3cd; color:#856404; }
   .status.closed { background:#f8d7da; color:#721c24; }
-  /* Column header filters */
-  .th-filter { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
-  .th-filter select {
-    width:100%; font-size:12px; padding:3px 6px; border:1px solid #ccc; border-radius:4px; background:white;
-  }
-  /* Table footer */
-  .table-footer { display:flex; justify-content:space-between; align-items:center; padding:10px; background:#fafafa; border-top:1px solid #ddd; font-size:13px; color:#333; }
-  .pagination { display:flex; align-items:center; gap:6px; }
-  .page-btn { padding:4px 8px; border:1px solid #ccc; background:white; border-radius:4px; cursor:pointer; font-size:12px; }
-  .page-btn:hover { background:#f1f1f1; }
-  .page-btn.active { background:#0078d4; color:white; border-color:#0078d4; }
-  .table-filter { display:flex; align-items:center; gap:8px; }
-  .table-filter input { padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:13px; }
   /* Chart styles */
   .chart-container { margin:20px 0; padding:16px; border:1px solid #ddd; border-radius:6px; background:#fff; }
-  .chart-title { font-weight:bold; margin-bottom:12px; }
-  /* Bar chart */
-  .bar-chart { display:flex; align-items:flex-end; gap:12px; height:200px; border-left:2px solid #ccc; border-bottom:2px solid #ccc; padding:10px; background:linear-gradient(to top,#fafafa,#fff); }
-  .bar { flex:1; min-height:20px; border-radius:4px 4px 0 0; position:relative; display:flex; align-items:flex-end; justify-content:center; }
-  .bar-label { position:absolute; bottom:-20px; font-size:12px; color:#333; }
-  /* Line chart */
-  .line-chart { position:relative; height:180px; background:#fff; border:1px solid #ddd; border-radius:6px; display:flex; align-items:flex-end; justify-content:space-around; padding:0 10px 30px 10px; }
-  .line-point { position:relative; width:12px; height:12px; background:#0078d4; border-radius:50%; z-index:2; }
-  .line-label { position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:12px; color:#555; }
-  .line-path { position:absolute; bottom:30px; left:0; width:100%; height:120px; pointer-events:none; }
-  .line-path svg { width:100%; height:100%; }
   .line-path polyline { fill:none; stroke:#0078d4; stroke-width:2; }
-  /* Pie chart */
   .pie-chart { width:180px; height:180px; border-radius:50%; position:relative; overflow:hidden; margin:auto; }
-  .slice { position:absolute; width:100%; height:100%; clip-path:polygon(50% 50%, 100% 50%, 100% 0, 50% 0); }
-  /* Stacked bar chart */
-  .stacked-bar-chart { margin:20px 0; }
   .stacked-bar { display:flex; height:24px; border-radius:4px; overflow:hidden; margin-bottom:8px; }
   .stacked-bar-segment { height:100%; }
-  /* Donut chart */
   .donut-chart { width:180px; height:180px; border-radius:50%; border:20px solid #0078d4; position:relative; margin:auto; }
   .donut-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:bold; }
-  /* Legends */
-  .legend { margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
-  .legend-item { display:flex; align-items:center; gap:6px; font-size:12px; }
   .legend-color { width:12px; height:12px; display:inline-block; border-radius:3px; }
 </style>
 </head>
 <body>
   <div class="sidebar">
-    <ul><li><i class="fas fa-bars"></i> Menu</li></ul>
     <h3>Home</h3>
     <ul>
       <li><i class="fas fa-home"></i> Home</li>
-      <li><i class="fas fa-clock"></i> Recent <i class="fas fa-chevron-down" style="margin-left:auto"></i></li>
-      <li><i class="fas fa-thumbtack"></i> Pinned <i class="fas fa-chevron-down" style="margin-left:auto"></i></li>
     </ul>
-    <h3>My Works</h3>
     <ul>
       <li><i class="fas fa-chart-line"></i> Dashboard</li>
       <li><i class="fas fa-tasks"></i> Activities</li>
       <li><i class="fas fa-plus-circle"></i> Initiate Request</li>
     </ul>
     <h3>Requests</h3>
-    <ul><li><i class="fas fa-folder-open"></i> All Requests</li></ul>
     <h3>User Profile</h3>
     <ul>
       <li><i class="fas fa-user"></i> My Profile</li>
-      <li><i class="fas fa-bell"></i> My Notifications</li>
-      <li><i class="fas fa-comments"></i> My Comments</li>
     </ul>
   </div>
   <div class="main">
-    <header class="topbar" style="display:flex;align-items:center;justify-content:space-between;
-             background:#0f1724;color:#e6eef6;padding:10px 14px;gap:12px;">
-      <div style="display:flex;align-items:center;gap:12px;">
-        <button style="background:transparent;border:0;cursor:pointer;">
-          <i class="fas fa-bars" style="font-size:18px;color:white;"></i>
-        </button>
-        <div style="display:flex;align-items:center;gap:10px;">
-          <div style="width:32px;height:32px;background:#0078d4;color:white;
-                      display:flex;align-items:center;justify-content:center;
-                      font-weight:bold;border-radius:6px;">PA</div>
-          <div>
-            <div style="font-weight:600;font-size:15px;">PowerApps Mockup</div>
-            <div style="font-size:12px;color:#9aa6b2;">Canvas App • Demo</div>
-          </div>
         </div>
       </div>
-      <div style="flex:1;display:flex;justify-content:center;max-width:500px;">
-        <input type="search" placeholder="Search records, views, or commands"
-          style="width:100%;padding:6px 10px;border-radius:6px;border:1px solid #444;background:#1c2333;color:white;">
-      </div>
-      <div style="display:flex;align-items:center;gap:12px;">
-        <i class="fas fa-sync-alt" title="Refresh"></i>
-        <i class="fas fa-filter" title="Filter"></i>
-        <i class="fas fa-sort" title="Sort"></i>
-        <i class="fas fa-plus" title="Add"></i>
-        <i class="fas fa-bell" title="Notifications"></i>
-        <i class="fas fa-user-circle" style="font-size:20px;" title="User"></i>
       </div>
     </header>
@@ -185,70 +273,107 @@ BASE_TEMPLATE = """
 # -----------------------
 # Function: Generate Mockup Image
 # -----------------------
-def generate_mockup(user_prompt):
     system_prompt = (
         "You are a Power Apps mockup generator. "
-        "Generate ONLY the inner HTML for the main screen content. "
-        "For tables: use <div class='table-container'> with <table>. "
-        "Each <th> must contain <div class='th-filter'> with the column label and a <select> dropdown. "
-        "Always include <div class='table-footer'> with pagination + search filter. "
-        "Use status chips: <span class='status active'>Active</span>, etc. "
-        "For forms: use <div class='form-group'> with <label> and inputs, "
-        "buttons with class='btn btn-primary' or 'btn btn-secondary'. "
-        "For dashboards: use <div class='card-grid'> with <div class='card'> containing "
-        "icon, title, value, and optional subtitle. "
-        # Strengthened chart rules
-        "Bar chart: <div class='bar-chart'> with <div class='bar' style='height:X%; background:#0078d4;'><div class='bar-label'>Label</div></div>. "
-        "X must be between 20% and 100%. At least 3 bars. "
-        "Line chart: <div class='line-chart'> with multiple <div class='line-point' style='bottom:Ypx;'>. "
-        "Each must have <div class='line-label'>Month</div>. Connect points with <div class='line-path'><svg><polyline points='x,y ...'></polyline></svg></div>. "
-        "Y values must be between 40px and 120px. At least 3 points. "
-        "Pie chart: <div class='pie-chart'> with multiple <div class='slice' style='background:#color; clip-path:polygon(...)'></div>. "
-        "Always at least 3 slices with different colors. "
-        "Stacked bar chart: <div class='stacked-bar-chart'><div class='stacked-bar'><div class='stacked-bar-segment' style='width:X%; background:#color'></div>...</div></div>. "
-        "Widths must sum to 100%, with at least 2 segments. "
-        "Donut chart: <div class='donut-chart'><div class='donut-label'>Value</div></div>. "
-        "Always visible donut ring with background segments. "
-        "Always add a <div class='legend'> with <div class='legend-item'><span class='legend-color' style='background:#color'></span> Label</div></div>. "
-    )
-    try:
-        response = model.generate_content(system_prompt + "\n" + user_prompt)
-        user_html = response.text.strip()
-        if user_html.startswith("```"):
-            user_html = user_html.split("```")[1]
-            user_html = user_html.replace("html", "").strip()
         full_html = BASE_TEMPLATE.replace("{user_content}", user_html)
         unique_id = str(uuid.uuid4())
         html_file, img_file = f"mockup_{unique_id}.html", f"mockup_{unique_id}.png"
-        with open(html_file, "w", encoding="utf-8") as f: f.write(full_html)
         hti.screenshot(html_file=html_file, save_as=img_file)
-        return img_file
     except Exception as e:
-        return f"Error: {e}"
 # -----------------------
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## ⚡ Power Apps Mockup Generator (Gemini + Gradio)")
-    user_input = gr.Textbox(
-        label="Describe your Power Apps mockup screen",
-        lines=4,
-        placeholder="Example: A login form, OR a requests table, OR a dashboard with bar, line, and pie charts"
-    )
-    generate_btn = gr.Button("Generate Mockup")
     image_output = gr.Image(label="Mockup Preview")
-    generate_btn.click(fn=generate_mockup, inputs=user_input, outputs=image_output)
 demo.launch(server_name="0.0.0.0", server_port=7860)

 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
+# Default Chart Snippets (Fallbacks)
+# -----------------------
+DEFAULT_BAR_CHART = """
+<div class="chart-container">
+  <div class="chart-title">Sample Bar Chart</div>
+  <div class="bar-chart">
+    <div class="bar" style="height:40%; background:#0078d4;"><div class="bar-label">Jan</div></div>
+    <div class="bar" style="height:70%; background:#0078d4;"><div class="bar-label">Feb</div></div>
+    <div class="bar" style="height:90%; background:#0078d4;"><div class="bar-label">Mar</div></div>
+  </div>
+</div>
+"""
+DEFAULT_LINE_CHART = """
+<div class="chart-container">
+  <div class="chart-title">Sample Line Chart</div>
+  <div class="line-chart">
+    <div class="line-point" style="bottom:40px;"><div class="line-label">Jan</div></div>
+    <div class="line-point" style="bottom:80px;"><div class="line-label">Feb</div></div>
+    <div class="line-point" style="bottom:60px;"><div class="line-label">Mar</div></div>
+    <div class="line-path"><svg><polyline points="10,120 80,60 150,90" /></svg></div>
+  </div>
+</div>
+"""
+DEFAULT_PIE_CHART = """
+<div class="chart-container">
+  <div class="chart-title">Sample Pie Chart</div>
+  <div class="pie-chart">
+    <div class="slice" style="background:#0078d4; clip-path:polygon(50% 50%, 100% 50%, 100% 0, 50% 0);"></div>
+    <div class="slice" style="background:#ff9900; clip-path:polygon(50% 50%, 100% 0, 50% 0, 0 0);"></div>
+    <div class="slice" style="background:#33cc33; clip-path:polygon(50% 50%, 0 0, 0 50%, 50% 50%);"></div>
+  </div>
+  <div class="legend">
+    <div class="legend-item"><span class="legend-color" style="background:#0078d4"></span> A</div>
+    <div class="legend-item"><span class="legend-color" style="background:#ff9900"></span> B</div>
+    <div class="legend-item"><span class="legend-color" style="background:#33cc33"></span> C</div>
+  </div>
+</div>
+"""
+DEFAULT_STACKED_BAR_CHART = """
+<div class="chart-container">
+  <div class="chart-title">Sample Stacked Bar</div>
+  <div class="stacked-bar">
+    <div class="stacked-bar-segment" style="width:40%; background:#0078d4"></div>
+    <div class="stacked-bar-segment" style="width:35%; background:#ff9900"></div>
+    <div class="stacked-bar-segment" style="width:25%; background:#33cc33"></div>
+  </div>
+</div>
+"""
+DEFAULT_DONUT_CHART = """
+<div class="chart-container">
+  <div class="chart-title">Sample Donut Chart</div>
+  <div class="donut-chart">
+    <div class="donut-label">65%</div>
+  </div>
+</div>
+"""
+# -----------------------
+# Base PowerApps Layout
 # -----------------------
 BASE_TEMPLATE = """
 <!DOCTYPE html>
 <style>
   body { margin:0; font-family:Segoe UI, sans-serif; display:flex; height:100vh; background:#f9f9f9; }
   .sidebar {
+    width:240px; background:#f4f4f4; padding:15px; border-right:1px solid #ddd;
+    display:flex; flex-direction:column;
   }
   .sidebar h3 { margin-top:20px; margin-bottom:10px; font-size:13px; color:#666; font-weight:bold; text-transform:uppercase; }
   .sidebar ul { list-style:none; padding:0; margin:0; }
+  .sidebar li {
+    margin:8px 0; color:#333; cursor:pointer; display:flex; align-items:center; gap:10px;
+    padding:6px 10px; border-radius:6px; font-size:14px;
   }
   .sidebar li:hover { background:#e6e6e6; }
   .main { flex:1; display:flex; flex-direction:column; }
+  .content { flex:1; padding:25px; overflow:auto; background:white; }
+  /* Top bar */
+  .topbar {
+    display:flex; align-items:center; justify-content:space-between;
+    background:#0f1724; color:#e6eef6; padding:10px 14px; gap:12px;
   }
+  .topbar .left { display:flex; align-items:center; gap:12px; }
+  .topbar .logo { width:32px; height:32px; background:#0078d4; color:white;
+    display:flex; align-items:center; justify-content:center; font-weight:bold; border-radius:6px; }
+  .topbar .app-title { font-weight:600; font-size:15px; }
+  .topbar .subtitle { font-size:12px; color:#9aa6b2; }
+  .topbar .search { flex:1; display:flex; justify-content:center; max-width:500px; }
+  .topbar .search input {
+    width:100%; padding:6px 10px; border-radius:6px; border:1px solid #444;
+    background:#1c2333; color:white;
+  }
+  .topbar .right { display:flex; align-items:center; gap:12px; }
+  /* Table + Row Selection + Filters + Footer */
   table { width:100%; border-collapse:collapse; font-size:14px; }
+  thead { background:#f4f4f4; }
+  thead th { padding:10px; border-bottom:1px solid #ddd; }
   tbody tr { border-bottom:1px solid #eee; cursor:pointer; }
   tbody tr:hover { background:#f9f9f9; }
   tbody tr.selected { background:#e5f1fb !important; border-left:4px solid #0078d4; }
+  td { padding:10px; }
   .status.active { background:#dff7df; color:#107c41; }
   .status.pending { background:#fff3cd; color:#856404; }
   .status.closed { background:#f8d7da; color:#721c24; }
+  .th-filter { display:flex; flex-direction:column; gap:4px; }
+  .th-filter select { font-size:12px; padding:3px 6px; border:1px solid #ccc; border-radius:4px; }
+  .table-footer { display:flex; justify-content:space-between; align-items:center;
+    padding:10px; background:#fafafa; border-top:1px solid #ddd; font-size:13px; }
+  .pagination { display:flex; gap:6px; }
+  .page-btn { padding:4px 8px; border:1px solid #ccc; background:white; border-radius:4px; cursor:pointer; }
+  .page-btn.active { background:#0078d4; color:white; }
   /* Chart styles */
   .chart-container { margin:20px 0; padding:16px; border:1px solid #ddd; border-radius:6px; background:#fff; }
+  .bar-chart { display:flex; align-items:flex-end; gap:12px; height:200px; border-left:2px solid #ccc; border-bottom:2px solid #ccc; padding:10px; }
+  .bar { flex:1; min-height:20px; border-radius:4px 4px 0 0; position:relative; }
+  .bar-label { position:absolute; bottom:-20px; font-size:12px; }
+  .line-chart { position:relative; height:180px; border:1px solid #ddd; border-radius:6px; display:flex; justify-content:space-around; align-items:flex-end; padding-bottom:30px; }
+  .line-point { width:12px; height:12px; background:#0078d4; border-radius:50%; position:relative; }
+  .line-label { position:absolute; bottom:-22px; font-size:12px; }
+  .line-path { position:absolute; bottom:30px; left:0; width:100%; height:120px; }
   .line-path polyline { fill:none; stroke:#0078d4; stroke-width:2; }
   .pie-chart { width:180px; height:180px; border-radius:50%; position:relative; overflow:hidden; margin:auto; }
+  .slice { position:absolute; width:100%; height:100%; }
   .stacked-bar { display:flex; height:24px; border-radius:4px; overflow:hidden; margin-bottom:8px; }
   .stacked-bar-segment { height:100%; }
   .donut-chart { width:180px; height:180px; border-radius:50%; border:20px solid #0078d4; position:relative; margin:auto; }
   .donut-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:bold; }
+  .legend { margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; font-size:12px; }
   .legend-color { width:12px; height:12px; display:inline-block; border-radius:3px; }
+  /* KPI Dashboard Cards */
+  .kpi-grid {
+    display:grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
+    gap:16px;
+    margin:20px 0;
+  }
+  .kpi-card {
+    background:white;
+    border:1px solid #ddd;
+    border-radius:8px;
+    padding:16px;
+    display:flex;
+    align-items:center;
+    gap:12px;
+    box-shadow:0 2px 6px rgba(0,0,0,0.05);
+  }
+  .kpi-icon {
+    width:40px; height:40px;
+    display:flex; align-items:center; justify-content:center;
+    border-radius:8px;
+    background:#f3f6fa;
+    color:#0078d4;
+    font-size:18px;
+  }
+  .kpi-content { display:flex; flex-direction:column; }
+  .kpi-value { font-size:20px; font-weight:600; }
+  /* KPI Value Colors */
+  .kpi-value.positive { color:#107c41; }
+  .kpi-value.negative { color:#d13438; }
+  .kpi-value.neutral { color:#605e5c; }
+  /* KPI Trend Arrows */
+  .kpi-trend {
+    font-size:14px;
+    margin-left:4px;
+    font-weight:bold;
+  }
+  .kpi-value.positive .kpi-trend { color:#107c41; }
+  .kpi-value.negative .kpi-trend { color:#d13438; }
+  .kpi-value.neutral .kpi-trend { color:#605e5c; }
 </style>
 </head>
 <body>
   <div class="sidebar">
     <h3>Home</h3>
     <ul>
       <li><i class="fas fa-home"></i> Home</li>
+      <li><i class="fas fa-clock"></i> Recent</li>
+      <li><i class="fas fa-thumbtack"></i> Pinned</li>
     </ul>
+    <h3>My Work</h3>
     <ul>
       <li><i class="fas fa-chart-line"></i> Dashboard</li>
       <li><i class="fas fa-tasks"></i> Activities</li>
       <li><i class="fas fa-plus-circle"></i> Initiate Request</li>
     </ul>
     <h3>Requests</h3>
+    <ul>
+      <li><i class="fas fa-folder-open"></i> All Requests</li>
+    </ul>
     <h3>User Profile</h3>
     <ul>
       <li><i class="fas fa-user"></i> My Profile</li>
+      <li><i class="fas fa-bell"></i> Notifications</li>
+      <li><i class="fas fa-comments"></i> Comments</li>
     </ul>
   </div>
   <div class="main">
+    <header class="topbar">
+      <div class="left">
+        <i class="fas fa-bars"></i>
+        <div class="logo">PA</div>
+        <div>
+          <div class="app-title">PowerApps Mockup</div>
+          <div class="subtitle">Canvas App • Demo</div>
         </div>
       </div>
+      <div class="search"><input type="search" placeholder="Search..." /></div>
+      <div class="right">
+        <i class="fas fa-sync-alt"></i>
+        <i class="fas fa-filter"></i>
+        <i class="fas fa-sort"></i>
+        <i class="fas fa-plus"></i>
+        <i class="fas fa-bell"></i>
+        <i class="fas fa-user-circle"></i>
       </div>
     </header>
 # -----------------------
 # Function: Generate Mockup Image
 # -----------------------
+def generate_mockup_html(user_prompt, prev_html=None):
+    """
+    If prev_html is provided, treat user_prompt as a modification request.
+    Otherwise, treat it as fresh generation.
+    """
     system_prompt = (
         "You are a Power Apps mockup generator. "
+        "Generate ONLY the inner HTML for the main content area (inside <div class='content'>). "
+        "For tables: include filters in headers, footer with pagination + search, and row selection. "
+        "For forms: use <label> + <input>, with Save/Cancel buttons. "
+        "For dashboards: use KPI cards styled with <div class='kpi-grid'><div class='kpi-card'>...</div></div>. "
+        "Each KPI card must include .kpi-icon, .kpi-value, and .kpi-label. "
+        "Apply .positive (green), .negative (red), or .neutral (grey) to .kpi-value. "
+        "Inside .kpi-value, also include <span class='kpi-trend'>⬆️, ⬇️, or ➖</span>. "
+        "For charts: enforce visible bars, points, slices, stacked segments, and donut rings with legends. "
+    )
+    try:
+        if prev_html:  # Modification mode
+            mod_prompt = f"Here is the current HTML:\n{prev_html}\nModify it based on this request:\n{user_prompt}"
+            response = model.generate_content(mod_prompt)
+            user_html = response.text.strip()
+        else:  # Fresh generation
+            response = model.generate_content(system_prompt + "\n" + user_prompt)
+            user_html = response.text.strip()
+        # Strip markdown
+        if user_html.startswith("```"):
+            user_html = user_html.split("```")[1].replace("html", "").strip()
+        # Remove <html>/<body>
+        for tag in ["<html>", "</html>", "<body>", "</body>"]:
+            user_html = user_html.replace(tag, "")
+        # Fallbacks
+        if any(word in user_prompt.lower() for word in ["bar", "bar chart"]) and "bar-chart" not in user_html:
+            user_html += DEFAULT_BAR_CHART
+        if "line" in user_prompt.lower() and "line-chart" not in user_html:
+            user_html += DEFAULT_LINE_CHART
+        if "pie" in user_prompt.lower() and "pie-chart" not in user_html:
+            user_html += DEFAULT_PIE_CHART
+        if "stacked" in user_prompt.lower() and "stacked-bar" not in user_html:
+            user_html += DEFAULT_STACKED_BAR_CHART
+        if "donut" in user_prompt.lower() and "donut-chart" not in user_html:
+            user_html += DEFAULT_DONUT_CHART
+        # Wrap
         full_html = BASE_TEMPLATE.replace("{user_content}", user_html)
+        # Save
         unique_id = str(uuid.uuid4())
         html_file, img_file = f"mockup_{unique_id}.html", f"mockup_{unique_id}.png"
+        with open(html_file, "w", encoding="utf-8") as f:
+            f.write(full_html)
         hti.screenshot(html_file=html_file, save_as=img_file)
+        os.remove(html_file)
+        return user_html, img_file
     except Exception as e:
+        print("❌ Error:", e)
+        return prev_html, None
 # -----------------------
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
+    gr.Markdown("## ⚡ Power Apps Mockup Generator with Real-time Modifications")
+    state_html = gr.State()   # stores current HTML
+    state_img = gr.State()    # stores current image path
+    with gr.Row():
+        user_input = gr.Textbox(label="Describe your Power Apps mockup screen", lines=4)
+        generate_btn = gr.Button("Generate Mockup")
     image_output = gr.Image(label="Mockup Preview")
+    # Ask if user wants to modify
+    modify_prompt = gr.Textbox(label="Enter modification", visible=False, lines=2)
+    modify_btn = gr.Button("Apply Modification", visible=False)
+    # --- Actions ---
+    def generate_action(prompt):
+        html, img = generate_mockup_html(prompt)
+        return html, img, img, gr.update(visible=True), gr.update(visible=True)
+    def modify_action(mod_request, prev_html):
+        html, img = generate_mockup_html(mod_request, prev_html)
+        return html, img, img
+    generate_btn.click(
+        fn=generate_action,
+        inputs=[user_input],
+        outputs=[state_html, state_img, image_output, modify_prompt, modify_btn]
+    )
+    modify_btn.click(
+        fn=modify_action,
+        inputs=[modify_prompt, state_html],
+        outputs=[state_html, state_img, image_output]
+    )
 demo.launch(server_name="0.0.0.0", server_port=7860)