Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Oct 10, 2025

Commit

e264067

verified ·

1 Parent(s): a245a66

Update app.py

Browse files

Files changed (1) hide show

app.py +158 -190

app.py CHANGED Viewed

@@ -1,3 +1,8 @@
 import google.generativeai as genai
 import gradio as gr
 from html2image import Html2Image
@@ -19,7 +24,7 @@ model = genai.GenerativeModel("gemini-2.5-pro")
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
-# Base Layout Template
 # -----------------------
 BASE_TEMPLATE = """
 <html>
@@ -28,8 +33,11 @@ BASE_TEMPLATE = """
 body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
-  background: #f5f5f5;
 }
 .sidebar {
   width: 240px;
   height: 100vh;
@@ -51,7 +59,14 @@ body {
   width: 18px;
   height: 18px;
   margin-right: 8px;
-  flex-shrink: 0;
 }
 .sidebar-item {
   padding: 10px 18px;
@@ -71,34 +86,14 @@ 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;
-}
-.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;
@@ -106,41 +101,90 @@ body {
   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>
@@ -152,10 +196,10 @@ 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>""",
@@ -163,14 +207,38 @@ SVG_FLUENT = {
 }
 # -----------------------
-# 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>""",
@@ -179,85 +247,21 @@ 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>"""
     }
-    # 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, groups, 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>"
-    # Default static options
-    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>
-        """
-    # Dynamically render group sections
-    for group in groups:
-        group_name = group.get("group", "My Work")
-        sidebar_html += f"<div class='sidebar-section'>{group_name}</div>"
-        for i, screen in enumerate(group.get("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
 # -----------------------
@@ -265,89 +269,56 @@ 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"
-    # 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):
@@ -355,20 +326,17 @@ 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():
-                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)

+# =========================================================
+# Intelligent PowerApps Mockup Generator (Full Smart Edition)
+# From Business Requirement PDF → Multi-Screen PowerApps-Style Mockup Images
+# =========================================================
 import google.generativeai as genai
 import gradio as gr
 from html2image import Html2Image
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
+# Base PowerApps Layout Template
 # -----------------------
 BASE_TEMPLATE = """
 <html>
 body {
   margin: 0;
   font-family: 'Segoe UI', sans-serif;
+  background: #f3f3f3;
+  color: #323130;
 }
+/* --- Sidebar --- */
 .sidebar {
   width: 240px;
   height: 100vh;
   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;
   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;
   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>
 """
 # -----------------------
+# 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>""",
 }
 # -----------------------
+# 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>""",
         "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
 # -----------------------
     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):
             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)