Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Oct 10, 2025

Commit

193f103

verified ·

1 Parent(s): e264067

Update app.py

Browse files

Files changed (1) hide show

app.py +186 -154

app.py CHANGED Viewed

@@ -1,5 +1,5 @@
 # =========================================================
-# Intelligent PowerApps Mockup Generator (Full Smart Edition)
 # From Business Requirement PDF → Multi-Screen PowerApps-Style Mockup Images
 # =========================================================
@@ -24,7 +24,7 @@ model = genai.GenerativeModel("gemini-2.5-pro")
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
-# Base PowerApps Layout Template
 # -----------------------
 BASE_TEMPLATE = """
 <html>
@@ -33,11 +33,8 @@ BASE_TEMPLATE = """
 body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
-  background: #f3f3f3;
-  color: #323130;
 }
-/* --- Sidebar --- */
 .sidebar {
   width: 240px;
   height: 100vh;
@@ -59,14 +56,7 @@ body {
   width: 18px;
   height: 18px;
   margin-right: 8px;
-}
-.sidebar-section {
-  margin-top: 14px;
-  padding: 8px 18px;
-  font-size: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #aaa;
 }
 .sidebar-item {
   padding: 10px 18px;
@@ -86,14 +76,34 @@ body {
   margin-right: 8px;
   fill: #c5c5c5;
 }
-.sidebar-item span { color: #ccc; }
-.sidebar-item:hover { background: #3a3a3a; }
-.sidebar-item.active { background: #0078d4; color: #fff; }
-.sidebar-item.active svg { fill: #fff; }
-/* --- Top Bar --- */
 .topbar {
-  height: 50px;
   background: #0078d4;
   color: #fff;
   display: flex;
@@ -101,90 +111,41 @@ body {
   justify-content: space-between;
   padding: 0 20px;
   font-weight: bold;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
-.topbar-left {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
-.topbar-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
 }
 .topbar-user {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
 }
 .user-avatar {
-  width: 26px;
-  height: 26px;
   border-radius: 50%;
-  background: #004578;
-  color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
 }
-/* --- Main Canvas --- */
 .main {
   margin-left: 240px;
-  padding: 40px 60px;
-  background: #f9f9f9;
-  min-height: calc(100vh - 50px);
-  display: flex;
-  flex-direction: column;
-}
-/* --- PowerApps-Like Components --- */
-.app-card {
-  background: #fff;
-  border-radius: 10px;
-  padding: 20px 25px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
-  margin-bottom: 20px;
-}
-.app-card h2, .app-card h3 {
-  margin-top: 0;
-  color: #0078d4;
-}
-.app-section-title {
-  font-weight: 600;
-  font-size: 18px;
-  margin-bottom: 10px;
-}
-.app-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 20px;
-}
-.app-stat {
-  background: #fff;
-  border-radius: 10px;
   padding: 20px;
-  text-align: center;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-.app-stat-value {
-  color: #0078d4;
-  font-size: 28px;
-  font-weight: bold;
 }
-button {
-  background: #0078d4;
-  color: #fff;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-button:hover { background: #005a9e; }
 </style>
 </head>
 <body>
@@ -196,10 +157,10 @@ button:hover { background: #005a9e; }
 """
 # -----------------------
-# Fluent Icons
 # -----------------------
 SVG_FLUENT = {
-    "hamburger": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M3 6h18v2H3zM3 12h18v2H3zM3 18h18v2H3z"/></svg>""",
     "home": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""",
     "recent": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M12 8v5l4 2 .7-1.2-3.2-1.8V8h-1.5zM12 2a10 10 0 00-10 10H0l4 4 4-4H5a7 7 0 117 7 7 7 0 01-7-7H3a9 9 0 109-9z"/></svg>""",
     "pinned": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M14 2v2l2 2v3l2 2v2H6v-2l2-2V6l2-2V2h4zm-1 13v7h-2v-7h2z"/></svg>""",
@@ -207,38 +168,14 @@ SVG_FLUENT = {
 }
 # -----------------------
-# Sidebar Generator
-# -----------------------
-def generate_sidebar(app_title, groups, active_label="Dashboard"):
-    sidebar_html = "<div class='sidebar'>"
-    sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} {app_title}</div>"
-    defaults = [("home", "Home"), ("recent", "Recent"), ("pinned", "Pinned")]
-    for key, label in defaults:
-        sidebar_html += f"""
-        <div class='sidebar-item'>
-            <div class='sidebar-item-left'>
-                {SVG_FLUENT[key]}<span>{label}</span>
-            </div>
-            {SVG_FLUENT['chevron_down']}
-        </div>
-        """
-    for group in groups:
-        group_name = group.get("group", "Section").replace("Screen", "").strip()
-        sidebar_html += f"<div class='sidebar-section'>{group_name.upper()}</div>"
-        for screen in group.get("screens", []):
-            screen_name = screen.get("screen_name", "Screen").replace("Screen", "").strip()
-            active_class = "active" if screen_name == active_label else ""
-            sidebar_html += f"<div class='sidebar-item {active_class}'><div class='sidebar-item-left'><span>{screen_name}</span></div></div>"
-    sidebar_html += "</div>"
-    return sidebar_html
-# -----------------------
-# Top Bar Generator
 # -----------------------
 def generate_topbar(screen_name, role="default", user_name="John Joe"):
     initials = "".join([x[0] for x in user_name.split()[:2]]).upper()
     ICONS = {
-        "menu": SVG_FLUENT["hamburger"],
         "back": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>""",
         "share": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.5 2.5 0 000-1.4l7.02-4.11A2.5 2.5 0 0018 7.91a2.5 2.5 0 10-2.5-2.5 2.5 2.5 0 00-.1.71L8.59 10.3a2.5 2.5 0 100 3.4l7.02 4.11a2.5 2.5 0 00-.1.71 2.5 2.5 0 102.5-2.44z"/></svg>""",
         "add": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>""",
@@ -247,21 +184,80 @@ def generate_topbar(screen_name, role="default", user_name="John Joe"):
         "filter": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M10 18h4v-2h-4v2zm-7-7v2h18v-2H3zm3-5v2h12V6H6z"/></svg>""",
         "user_icon": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M12 12c2.67 0 8 1.34 8 4v2H4v-2c0-2.66 5.33-4 8-4zm0-2a4 4 0 110-8 4 4 0 010 8z"/></svg>"""
     }
-    left_icon, right_icons = ICONS["menu"], ICONS["user_icon"]
-    if role == "dashboard": right_icons = ICONS["share"] + ICONS["info"] + ICONS["user_icon"]
-    elif role == "list": right_icons = ICONS["add"] + ICONS["filter"] + ICONS["user_icon"]
-    elif role == "form": left_icon, right_icons = ICONS["back"], ICONS["check"] + ICONS["user_icon"]
-    elif role == "settings": left_icon, right_icons = ICONS["back"], ICONS["info"] + ICONS["user_icon"]
     return f"""
     <div class="topbar">
       <div class="topbar-left">{left_icon}<span>{screen_name}</span></div>
       <div class="topbar-right">
         {right_icons}
-        <div class="topbar-user"><span>Welcome, {user_name}</span><div class="user-avatar">{initials}</div></div>
       </div>
     </div>
     """
 # -----------------------
 # Analyze Business PDF
 # -----------------------
@@ -269,56 +265,89 @@ def analyze_business_pdf(pdf_file):
     text = ""
     with pdfplumber.open(pdf_file.name) as pdf:
         for page in pdf.pages:
-            if (t := page.extract_text()): text += t + "\n"
-    user_name = "John Joe"
-    for pattern in [r"Prepared by[:\-]\s*([A-Z][a-z]+(?:\s[A-Z][a-z]+)+)", r"Author[:\-]\s*([A-Z][a-z]+(?:\s[A-Z][a-z]+)+)"]:
-        if m := re.search(pattern, text): user_name = m.group(1).strip(); break
     try:
-        app_title = model.generate_content("From the following business requirements, infer a concise PowerApp title.\n\n" + text).text.strip()
-    except Exception: app_title = "PowerApp Solution"
     try:
         prompt = (
-            "You are a senior PowerApps architect. Analyze the document and output JSON like:\n"
-            "[{\"group\":\"Metadata\",\"screens\":[{\"screen_name\":\"Metadata Dashboard\",\"role\":\"dashboard\",\"html\":\"<div>...</div>\"}]}]"
-            "\nDetect functional modules, classify screen roles (dashboard, list, form, settings, detail), and generate compact valid JSON.\n\n" + text)
-        cleaned = re.sub(r"```(?:json)?|```", "", model.generate_content(prompt).text.strip())
         groups = eval(cleaned) if cleaned.strip().startswith("[") else []
-    except Exception: groups = [{"group": "My Work", "screens": [{"screen_name": "Dashboard", "role": "dashboard", "html": "<h2>Error</h2>"}]}]
     return app_title, groups, user_name
 # -----------------------
-# Generate HTML + Image
 # -----------------------
 def generate_mockups(app_title, groups, user_name):
     image_paths = []
     for group in groups:
         for screen in group.get("screens", []):
-            label, role = screen.get("screen_name", "Screen"), screen.get("role", "default")
-            raw_html = screen.get("html", "<h2>Empty Screen</h2>")
-            html_content = f"<div class='app-card'>{raw_html}</div>"
-            if role == "dashboard":
-                html_content = f"""
-                <div class='app-grid'>
-                    <div class='app-stat'><div class='app-section-title'>Documents in Staging</div><div class='app-stat-value'>12</div></div>
-                    <div class='app-stat'><div class='app-section-title'>Archived This Month</div><div class='app-stat-value'>8</div></div>
-                    <div class='app-stat'><div class='app-section-title'>Total Archived</div><div class='app-stat-value'>1,245</div></div>
-                </div>
-                <div class='app-card'>{raw_html}</div>
-                """
             sidebar_html = generate_sidebar(app_title, groups, active_label=label)
-            topbar_html = generate_topbar(label, role=role, user_name=user_name)
             full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html)\
-                                     .replace("{user_topbar}", topbar_html)\
-                                     .replace("{user_content}", html_content)
             uid = str(uuid.uuid4())[:8]
-            html_path, img_path = f"mockup_{label.replace(' ', '_')}_{uid}.html", f"mockup_{label.replace(' ', '_')}_{uid}.png"
-            with open(html_path, "w", encoding="utf-8") as f: f.write(full_html)
             hti.screenshot(html_file=html_path, save_as=img_path)
             image_paths.append(img_path)
     return image_paths
 # -----------------------
-# Full Pipeline
 # -----------------------
 def generate_from_pdf(pdf_file):
     for attempt in range(3):
@@ -326,17 +355,20 @@ def generate_from_pdf(pdf_file):
             app_title, groups, user_name = analyze_business_pdf(pdf_file)
             return generate_mockups(app_title, groups, user_name)
         except Exception as e:
-            if "429" in str(e) or "quota" in str(e).lower(): time.sleep(10)
-            else: raise e
-    raise Exception("❌ Failed after 3 retries.")
 # -----------------------
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## 🧩 Intelligent PowerApps Mockup Generator (Full Smart Edition)")
     pdf_input = gr.File(label="📄 Upload Business Requirement PDF", file_types=[".pdf"])
-    generate_btn = gr.Button("🚀 Generate PowerApps Mockups")
     gallery_output = gr.Gallery(label="Generated Screens", show_label=True, columns=2)
     generate_btn.click(fn=generate_from_pdf, inputs=pdf_input, outputs=gallery_output)

 # =========================================================
+# Intelligent PowerApps Mockup Generator
 # From Business Requirement PDF → Multi-Screen PowerApps-Style Mockup Images
 # =========================================================
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
+# Base Layout Template
 # -----------------------
 BASE_TEMPLATE = """
 <html>
 body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
+  background: #f5f5f5;
 }
 .sidebar {
   width: 240px;
   height: 100vh;
   width: 18px;
   height: 18px;
   margin-right: 8px;
+  flex-shrink: 0;
 }
 .sidebar-item {
   padding: 10px 18px;
   margin-right: 8px;
   fill: #c5c5c5;
 }
+.sidebar-item span {
+  color: #ccc;
+}
+.sidebar-item:hover {
+  background: #3a3a3a;
+}
+.sidebar-item.active {
+  background: #0078d4;
+  color: #fff;
+}
+.sidebar-item.active svg {
+  fill: #fff;
+}
+.sidebar-item-arrow {
+  width: 14px;
+  height: 14px;
+  fill: #aaa;
+}
+.sidebar-section {
+  margin-top: 14px;
+  padding: 8px 18px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #aaa;
+}
 .topbar {
+  height: 52px;
   background: #0078d4;
   color: #fff;
   display: flex;
   justify-content: space-between;
   padding: 0 20px;
   font-weight: bold;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 }
+.topbar-left, .topbar-right {
   display: flex;
   align-items: center;
+  gap: 10px;
 }
+.topbar svg {
+  width: 18px;
+  height: 18px;
+  fill: #fff;
+  cursor: pointer;
 }
 .topbar-user {
   display: flex;
   align-items: center;
   gap: 8px;
+  font-weight: normal;
   font-size: 14px;
 }
 .user-avatar {
+  background: #005a9e;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
+  font-weight: bold;
 }
 .main {
   margin-left: 240px;
   padding: 20px;
 }
 </style>
 </head>
 <body>
 """
 # -----------------------
+# Fluent SVG Icons
 # -----------------------
 SVG_FLUENT = {
+    "hamburger": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>""",
     "home": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""",
     "recent": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M12 8v5l4 2 .7-1.2-3.2-1.8V8h-1.5zM12 2a10 10 0 00-10 10H0l4 4 4-4H5a7 7 0 117 7 7 7 0 01-7-7H3a9 9 0 109-9z"/></svg>""",
     "pinned": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M14 2v2l2 2v3l2 2v2H6v-2l2-2V6l2-2V2h4zm-1 13v7h-2v-7h2z"/></svg>""",
 }
 # -----------------------
+# Dynamic Top Bar Generator
 # -----------------------
 def generate_topbar(screen_name, role="default", user_name="John Joe"):
+    """Generate dynamic PowerApps-style top bar with role-based icons and user avatar."""
     initials = "".join([x[0] for x in user_name.split()[:2]]).upper()
     ICONS = {
+        "menu": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M3 6h18v2H3zM3 12h18v2H3zM3 18h18v2H3z"/></svg>""",
         "back": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>""",
         "share": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.5 2.5 0 000-1.4l7.02-4.11A2.5 2.5 0 0018 7.91a2.5 2.5 0 10-2.5-2.5 2.5 2.5 0 00-.1.71L8.59 10.3a2.5 2.5 0 100 3.4l7.02 4.11a2.5 2.5 0 00-.1.71 2.5 2.5 0 102.5-2.44z"/></svg>""",
         "add": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>""",
         "filter": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M10 18h4v-2h-4v2zm-7-7v2h18v-2H3zm3-5v2h12V6H6z"/></svg>""",
         "user_icon": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M12 12c2.67 0 8 1.34 8 4v2H4v-2c0-2.66 5.33-4 8-4zm0-2a4 4 0 110-8 4 4 0 010 8z"/></svg>"""
     }
+    # Default icons
+    left_icon = ICONS["menu"]
+    right_icons = ICONS["user_icon"]
+    if role == "dashboard":
+        right_icons = ICONS["share"] + ICONS["info"] + ICONS["user_icon"]
+    elif role == "list":
+        right_icons = ICONS["add"] + ICONS["filter"] + ICONS["user_icon"]
+    elif role == "form":
+        left_icon = ICONS["back"]
+        right_icons = ICONS["check"] + ICONS["user_icon"]
+    elif role == "settings":
+        left_icon = ICONS["back"]
+        right_icons = ICONS["info"] + ICONS["user_icon"]
     return f"""
     <div class="topbar">
       <div class="topbar-left">{left_icon}<span>{screen_name}</span></div>
       <div class="topbar-right">
         {right_icons}
+        <div class="topbar-user">
+          <span>Welcome, {user_name}</span>
+          <div class="user-avatar">{initials}</div>
+        </div>
       </div>
     </div>
     """
+# -----------------------
+# Sidebar Generator
+# -----------------------
+def generate_sidebar(app_title, screens, active_label="Dashboard"):
+    SCREEN_ICONS = [
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M3 13h2v-2H3v2zm4 0h14v-2H7v2zm-4 5h2v-2H3v2zm4 0h14v-2H7v2zM3 8h2V6H3v2zm4 0h14V6H7v2z"/></svg>""",
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M19 3H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/></svg>""",
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M3 3h18v4H3V3zm0 7h18v4H3v-4zm0 7h18v4H3v-4z"/></svg>""",
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2zm1 15h-2v-2h2zm0-4h-2V7h2z"/></svg>"""
+    ]
+    sidebar_html = "<div class='sidebar'>"
+    sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} {app_title}</div>"
+    defaults = [("home", "Home"), ("recent", "Recent"), ("pinned", "Pinned")]
+    for key, label in defaults:
+        sidebar_html += f"""
+        <div class='sidebar-item'>
+            <div class='sidebar-item-left'>
+                {SVG_FLUENT[key]}
+                <span>{label}</span>
+            </div>
+            {SVG_FLUENT['chevron_down']}
+        </div>
+        """
+    sidebar_html += "<div class='sidebar-section'>My Work</div>"
+    for i, screen in enumerate(screens):
+        screen_name = screen.get("screen_name", f"Screen {i+1}")
+        screen_label = re.sub(r'screen$', '', screen_name, flags=re.IGNORECASE).strip()
+        active_class = "active" if screen_name == active_label else ""
+        icon_svg = SCREEN_ICONS[i % len(SCREEN_ICONS)]
+        if active_class:
+            icon_svg = icon_svg.replace("#c5c5c5", "#fff")
+        sidebar_html += f"""
+        <div class='sidebar-item {active_class}'>
+            <div class='sidebar-item-left'>
+                {icon_svg}
+                <span>{screen_label}</span>
+            </div>
+        </div>
+        """
+    sidebar_html += "</div>"
+    return sidebar_html
 # -----------------------
 # Analyze Business PDF
 # -----------------------
     text = ""
     with pdfplumber.open(pdf_file.name) as pdf:
         for page in pdf.pages:
+            if (t := page.extract_text()):
+                text += t + "\n"
+    # Try extracting user name from the PDF text
+    user_name = None
+    possible_name_patterns = [
+        r"Prepared by[:\-]\s*([A-Z][a-z]+(?:\s[A-Z][a-z]+)+)",
+        r"Author[:\-]\s*([A-Z][a-z]+(?:\s[A-Z][a-z]+)+)",
+        r"Created by[:\-]\s*([A-Z][a-z]+(?:\s[A-Z][a-z]+)+)",
+        r"Owner[:\-]\s*([A-Z][a-z]+(?:\s[A-Z][a-z]+)+)"
+    ]
+    for pattern in possible_name_patterns:
+        match = re.search(pattern, text)
+        if match:
+            user_name = match.group(1).strip()
+            break
+    if not user_name:
+        user_name = "John Joe"  # Default fallback name
+    # Generate concise app title
     try:
+        app_title = model.generate_content(
+            "From the following business requirements, infer a concise PowerApp title. Return only the title.\n\n" + text
+        ).text.strip()
+    except Exception:
+        app_title = "PowerApp Solution"
+    # Ask Gemini for structural, grouped analysis
     try:
         prompt = (
+            "You are a senior PowerApps architect. Analyze the business requirements and return JSON structure like:\n"
+            "["
+            "  {\"group\": \"Metadata\", \"screens\": ["
+            "    {\"screen_name\": \"Metadata Dashboard\", \"role\": \"dashboard\", \"html\": \"<div>...</div>\"}"
+            "  ]}"
+            "]\n"
+            "- Identify user roles (dashboard, list, form, settings, etc.)\n"
+            "- Group screens into modules (Metadata, Templates, Settings...)\n"
+            "- Return valid JSON only.\n\n"
+            f"Document:\n{text}"
+        )
+        response = model.generate_content(prompt)
+        cleaned = re.sub(r"```(?:json)?|```", "", response.text.strip())
         groups = eval(cleaned) if cleaned.strip().startswith("[") else []
+    except Exception as e:
+        print("⚠️ Gemini failed:", e)
+        groups = [{
+            "group": "My Work",
+            "screens": [{"screen_name": "Dashboard", "role": "dashboard", "html": "<h2>Error</h2>"}]
+        }]
     return app_title, groups, user_name
 # -----------------------
+# Generate Mockups
 # -----------------------
 def generate_mockups(app_title, groups, user_name):
     image_paths = []
     for group in groups:
         for screen in group.get("screens", []):
+            label = screen.get("screen_name", "Screen")
+            html_content = screen.get("html", "<h2>Empty Screen</h2>")
             sidebar_html = generate_sidebar(app_title, groups, active_label=label)
+            topbar_html = generate_topbar(label, role=screen.get("role", "default"), user_name=user_name)
             full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html)\
+                                     .replace("{user_content}", html_content)\
+                                     .replace("{user_topbar}", topbar_html)
             uid = str(uuid.uuid4())[:8]
+            html_path = f"mockup_{label.replace(' ', '_')}_{uid}.html"
+            img_path = f"mockup_{label.replace(' ', '_')}_{uid}.png"
+            with open(html_path, "w", encoding="utf-8") as f:
+                f.write(full_html)
             hti.screenshot(html_file=html_path, save_as=img_path)
             image_paths.append(img_path)
     return image_paths
 # -----------------------
+# Retry Wrapper
 # -----------------------
 def generate_from_pdf(pdf_file):
     for attempt in range(3):
             app_title, groups, user_name = analyze_business_pdf(pdf_file)
             return generate_mockups(app_title, groups, user_name)
         except Exception as e:
+            if "429" in str(e) or "quota" in str(e).lower():
+                print("⏳ Waiting for Gemini quota reset... retrying in 10 seconds")
+                time.sleep(10)
+            else:
+                raise e
+    raise Exception("❌ Failed after 3 retries due to Gemini API quota limits.")
 # -----------------------
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
+    gr.Markdown("## 🧩 Intelligent PowerApps Mockup Generator (Multi-Screen Mode)")
     pdf_input = gr.File(label="📄 Upload Business Requirement PDF", file_types=[".pdf"])
+    generate_btn = gr.Button("🚀 Generate Mockups")
     gallery_output = gr.Gallery(label="Generated Screens", show_label=True, columns=2)
     generate_btn.click(fn=generate_from_pdf, inputs=pdf_input, outputs=gallery_output)