Update app.py

app.py

@@ -1,6 +1,6 @@
 # =========================================================
-# Intelligent PowerApps Mockup Generator (with Section Grouping)
-# From Business Requirement PDF → Multi-Screen, Grouped PowerApps-Style Mockups
+# Intelligent PowerApps Mockup Generator
+# From Business Requirement PDF → Multi-Screen PowerApps-Style Mockup Images
 # =========================================================
 
 import google.generativeai as genai
@@ -11,7 +11,6 @@ import uuid
 import os
 import re
 import time
-import json
 
 # -----------------------
 # Configure Gemini API
@@ -108,46 +107,51 @@ SVG_FLUENT = {
 }
 
 # -----------------------
-# Sidebar Generator (Grouped + Icons + Active Highlight)
+# Sidebar Generator
 # -----------------------
-def generate_sidebar(app_title, grouped_screens, active_label="Dashboard"):
+# -----------------------
+# Sidebar Generator (Enhanced with unique icons)
+# -----------------------
+def generate_sidebar(app_title, screens, active_label="Dashboard"):
     """
-    Builds a dynamic sidebar with section groupings, icons, and active highlight.
+    Dynamically builds the sidebar with unique icons for each screen.
+    The current screen (active_label) is highlighted in blue.
     """
+
+    # Additional Fluent-style icons for screens
     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>""",
-        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M12 4a8 8 0 0 0 0 16 8 8 0 1 0 0-16zm1 11h-2v-2h2zm0-4h-2V7h2z"/></svg>""",
-        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M12 2L2 7l10 5 10-5-10-5zm0 7l10 5-10 5-10-5 10-5zm0 7l10 5-10 5-10-5 10-5z"/></svg>"""
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M3 13h2v-2H3v2zm4 0h14v-2H7v2zm-4 5h2v-2H3v2zm4 0h14v-2H7v2zM3 8h2V6H3v2zm4 0h14V6H7v2z"/></svg>""",  # list-style
+        """<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>""",  # message/note
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M3 3h18v4H3V3zm0 7h18v4H3v-4zm0 7h18v4H3v-4z"/></svg>""",  # stacked docs
+        """<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>""",  # info icon
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M12 4a8 8 0 0 0 0 16 8 8 0 1 0 0-16zm1 11h-2v-2h2zm0-4h-2V7h2z"/></svg>""",  # alert-like
+        """<svg viewBox="0 0 24 24"><path fill="#c5c5c5" d="M12 2L2 7l10 5 10-5-10-5zm0 7l10 5-10 5-10-5 10-5zm0 7l10 5-10 5-10-5 10-5z"/></svg>"""  # layered archive
     ]
 
     sidebar_html = "<div class='sidebar'>"
     sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} {app_title}</div>"
 
-    # Default static items
+    # Default static options
     defaults = [("home", "Home"), ("recent", "Recent"), ("pinned", "Pinned")]
     for key, label in defaults:
         sidebar_html += f"<div class='sidebar-item'>{SVG_FLUENT[key]}<span>{label}</span></div>"
 
-    # Grouped section rendering
-    for group in grouped_screens:
-        section = group.get("section", "My Work")
-        sidebar_html += f"<div class='sidebar-section'>{section}</div>"
-        for i, screen in enumerate(group.get("screens", [])):
-            screen_name = screen.get("screen_name", f"Screen {i+1}")
-            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}'>{icon_svg}<span>{screen_name}</span></div>"
+    # Dynamic section
+    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}")
+        active_class = "active" if screen_name == active_label else ""
+        icon_svg = SCREEN_ICONS[i % len(SCREEN_ICONS)]
+        if active_class:
+            # Make active icon blue
+            icon_svg = icon_svg.replace("#c5c5c5", "#fff")
+        sidebar_html += f"<div class='sidebar-item {active_class}'>{icon_svg}<span>{screen_name}</span></div>"
 
     sidebar_html += "</div>"
     return sidebar_html
 
 # -----------------------
-# Analyze Business PDF → Generate Grouped Screens
+# Analyze Business PDF → Generate Multi-Screen HTML
 # -----------------------
 def analyze_business_pdf(pdf_file):
     text = ""
@@ -166,55 +170,49 @@ def analyze_business_pdf(pdf_file):
     except Exception:
         app_title = "PowerApp Solution"
 
-    # Step 2: Detect grouped screen structure
+    # Step 2: Ask Gemini to identify screens and their HTML layouts
     try:
         response = model.generate_content(
-            "You are a PowerApps UI/UX architect. Analyze the following business requirements and design a multi-screen PowerApp. "
-            "Detect logical section groupings if present (for example: 'Metadata', 'Templates', 'Settings', 'User Management'). "
-            "Return structured JSON ONLY, in this format:\n\n"
-            "[{\n"
-            "  \"section\": \"Templates\",\n"
-            "  \"screens\": [\n"
-            "     {\"screen_name\": \"Document Templates\", \"html\": \"<div>...</div>\"}\n"
-            "  ]\n"
-            "}]\n\n"
-            "Each screen should contain realistic PowerApps-like HTML components (cards, forms, grids, buttons, etc.). "
-            "Do not include explanations or text outside JSON."
+            "You are a PowerApps UI designer. Analyze the following business requirements and infer multiple PowerApps screens if applicable. "
+            "Return structured JSON like this:\n"
+            "[{\"screen_name\": \"Dashboard\", \"html\": \"<div>...</div>\"}, {\"screen_name\": \"Reports\", \"html\": \"<div>...</div>\"}]\n\n"
+            "Each HTML should represent a PowerApps-style UI (forms, tables, charts, buttons, labels). "
+            "Do not include explanations. Return valid JSON only."
             + "\n\n" + text
         )
         cleaned = re.sub(r"```(?:json)?|```", "", response.text.strip())
-        grouped_screens = json.loads(cleaned)
+        screens = []
+        try:
+            screens = eval(cleaned) if cleaned.strip().startswith("[") else []
+        except Exception:
+            screens = [{"screen_name": "Dashboard", "html": "<h2>Fallback Layout</h2><p>Unable to parse screen data.</p>"}]
     except Exception as e:
-        print("⚠️ Gemini failed to create groupings:", e)
-        grouped_screens = [{
-            "section": "My Work",
-            "screens": [{"screen_name": "Dashboard", "html": "<h2>Error</h2><p>Unable to parse screens.</p>"}]
-        }]
+        print("⚠️ Gemini failed to create screens:", e)
+        screens = [{"screen_name": "Dashboard", "html": "<h2>Error</h2><p>Gemini failed to process this PDF.</p>"}]
 
-    return app_title, grouped_screens
+    return app_title, screens
 
 # -----------------------
 # Generate HTML + Image per Screen
 # -----------------------
-def generate_mockups(app_title, grouped_screens):
+def generate_mockups(app_title, screens):
     image_paths = []
-    for group in grouped_screens:
-        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, grouped_screens, active_label=label)
-            full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html)\
-                                     .replace("{user_content}", html_content)\
-                                     .replace("{app_title}", app_title)
-
-            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 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)
+        full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html)\
+                                 .replace("{user_content}", html_content)\
+                                 .replace("{app_title}", app_title)
+
+        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
 
@@ -224,8 +222,8 @@ def generate_mockups(app_title, grouped_screens):
 def generate_from_pdf(pdf_file):
     for attempt in range(3):
         try:
-            app_title, grouped_screens = analyze_business_pdf(pdf_file)
-            image_paths = generate_mockups(app_title, grouped_screens)
+            app_title, screens = analyze_business_pdf(pdf_file)
+            image_paths = generate_mockups(app_title, screens)
             return image_paths
         except Exception as e:
             if "429" in str(e) or "quota" in str(e).lower():
@@ -239,8 +237,8 @@ def generate_from_pdf(pdf_file):
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## 🧩 Intelligent PowerApps Mockup Generator (with Section Grouping)")
-    gr.Markdown("Upload a **Business Requirement PDF**. Gemini 2.5 Pro will infer grouped sections, screens, and layouts — then render PowerApps-style mockup images for each screen.")
+    gr.Markdown("## 🧩 Intelligent PowerApps Mockup Generator (Multi-Screen Mode)")
+    gr.Markdown("Upload a **Business Requirement PDF**. Gemini 2.5 Pro will infer all screens, UI elements, and layouts — then render separate PowerApps-style mockup images for each screen.")
     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)