Update app.py

app.py

@@ -1,8 +1,3 @@
-# =========================================================
-# Intelligent PowerApps Mockup Generator
-# From Business Requirement PDF → Multi-Screen PowerApps-Style Mockup Images
-# =========================================================
-
 import google.generativeai as genai
 import gradio as gr
 from html2image import Html2Image
@@ -222,7 +217,7 @@ def generate_topbar(screen_name, user_name="Mauricio Moutinho"):
 # -----------------------
 # Sidebar Generator
 # -----------------------
-def generate_sidebar(app_title, screens, active_label="Dashboard"):
+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>""",
@@ -233,6 +228,7 @@ def generate_sidebar(app_title, screens, active_label="Dashboard"):
     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"""
@@ -245,22 +241,26 @@ def generate_sidebar(app_title, screens, active_label="Dashboard"):
         </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>
+    # 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>
-        </div>
-        """
+            """
+
     sidebar_html += "</div>"
     return sidebar_html
 
@@ -281,38 +281,57 @@ def analyze_business_pdf(pdf_file):
     except Exception:
         app_title = "PowerApp Solution"
 
+    # Ask Gemini to infer logical app structure (grouped screens)
     try:
-        response = model.generate_content(
-            "You are a PowerApps UI designer. Infer multiple PowerApps screens with HTML layouts.\n"
-            "Return JSON like: [{\"screen_name\": \"DashboardScreen\", \"html\": \"<div>...</div>\"}]\n\n" + text
+        prompt = (
+            "You are a PowerApps UI designer. Analyze the following business requirements and detect the app's structure. "
+            "Return JSON in this format:\n"
+            "["
+            "  {\"group\": \"Metadata\", \"screens\": ["
+            "    {\"screen_name\": \"Metadata Dashboard\", \"html\": \"<div>...</div>\"},"
+            "    {\"screen_name\": \"Document Metadata\", \"html\": \"<div>...</div>\"}"
+            "  ]},"
+            "  {\"group\": \"Settings\", \"screens\": ["
+            "    {\"screen_name\": \"User Preferences\", \"html\": \"<div>...</div>\"}"
+            "  ]}"
+            "]\n\n"
+            "If the app does not have clear groupings, return a single group called 'My Work'."
+            "\n\n" + text
         )
+        response = model.generate_content(prompt)
         cleaned = re.sub(r"```(?:json)?|```", "", response.text.strip())
-        screens = eval(cleaned) if cleaned.strip().startswith("[") else []
+        groups = eval(cleaned) if cleaned.strip().startswith("[") else []
     except Exception as e:
         print("⚠️ Gemini failed:", e)
-        screens = [{"screen_name": "DashboardScreen", "html": "<h2>Error</h2>"}]
-    return app_title, screens
+        groups = [{
+            "group": "My Work",
+            "screens": [{"screen_name": "Dashboard", "html": "<h2>Error</h2>"}]
+        }]
+
+    return app_title, groups
 
 # -----------------------
 # Generate Mockups
 # -----------------------
-def generate_mockups(app_title, screens):
+def generate_mockups(app_title, groups):
     image_paths = []
-    for screen in screens:
-        label = screen.get("screen_name", "Screen")
-        html_content = screen.get("html", "<h2>Empty Screen</h2>")
-        sidebar_html = generate_sidebar(app_title, screens, active_label=label)
-        topbar_html = generate_topbar(label)
-        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)
+    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)
+            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
 
 # -----------------------