Update app.py

app.py

@@ -3,6 +3,7 @@ import gradio as gr
 from html2image import Html2Image
 import uuid
 import os
+import re
 
 # -----------------------
 # Configure Gemini API
@@ -16,23 +17,13 @@ model = genai.GenerativeModel("gemini-2.0-flash")
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 
 # -----------------------
-# Fluent-style SVG Icons
+# Default Chart Snippets (Fallbacks)
 # -----------------------
-SVG_FLUENT = {
-    "hamburger": """<svg viewBox="0 0 24 24" fill="#ccc"><rect y="4" width="24" height="2"/><rect y="11" width="24" height="2"/><rect y="18" width="24" height="2"/></svg>""",
-    "home": """<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""",
-    "recent": """<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8v5l3.5 3.5.8-.8L13 12.7V8z"/><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z"/></svg>""",
-    "pinned": """<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 4l-1 5h-6l-1-5H6l1 6-2 2v2h14v-2l-2-2 1-6zM11 22h2v-4h-2z"/></svg>"""
-}
-
-# -----------------------
-# Default Chart Snippets
-# -----------------------
-DEFAULT_BAR_CHART = """<div class='chart-container'><div class='chart-title'>Sample Bar Chart</div></div>"""
-DEFAULT_LINE_CHART = """<div class='chart-container'><div class='chart-title'>Sample Line Chart</div></div>"""
-DEFAULT_PIE_CHART = """<div class='chart-container'><div class='chart-title'>Sample Pie Chart</div></div>"""
-DEFAULT_STACKED_BAR_CHART = """<div class='chart-container'><div class='chart-title'>Sample Stacked Bar Chart</div></div>"""
-DEFAULT_DONUT_CHART = """<div class='chart-container'><div class='chart-title'>Sample Donut Chart</div></div>"""
+DEFAULT_BAR_CHART = """ ... same as before ... """
+DEFAULT_LINE_CHART = """ ... same as before ... """
+DEFAULT_PIE_CHART = """ ... same as before ... """
+DEFAULT_STACKED_BAR_CHART = """ ... same as before ... """
+DEFAULT_DONUT_CHART = """ ... same as before ... """
 
 # -----------------------
 # Base PowerApps Layout
@@ -46,11 +37,11 @@ body {
   font-family: 'Segoe UI', sans-serif;
   background: #f5f5f5;
 }
-
-/* ---------- shared ---------- */
 .sidebar {
   width: 240px;
   height: 100vh;
+  background: #2d2d2d;
+  color: #fff;
   float: left;
   display: flex;
   flex-direction: column;
@@ -61,11 +52,13 @@ body {
   padding: 12px 16px;
   font-size: 16px;
   font-weight: bold;
+  background: #1f1f1f;
 }
 .sidebar-header svg {
   width: 20px;
   height: 20px;
   margin-right: 8px;
+  fill: #ccc;
 }
 .sidebar-item {
   padding: 10px 18px;
@@ -78,6 +71,22 @@ body {
   width: 18px;
   height: 18px;
   margin-right: 10px;
+  fill: #c5c5c5;
+}
+.sidebar-item span {
+  color: #ccc;
+}
+.sidebar-item:hover {
+  background: #3a3a3a;
+}
+.sidebar-item.active {
+  background: #0078d4;
+}
+.sidebar-item.active span {
+  color: #fff;
+}
+.sidebar-item.active svg {
+  fill: #fff;
 }
 .sidebar-section {
   margin-top: 14px;
@@ -85,35 +94,8 @@ body {
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
+  color: #aaa;
 }
-
-/* ---------- dark theme ---------- */
-.dark-theme {
-  background: #2d2d2d;
-  color: #fff;
-}
-.dark-theme .sidebar-header { background: #1f1f1f; }
-.dark-theme .sidebar-item:hover { background: #3a3a3a; }
-.dark-theme .sidebar-section { color: #aaa; }
-.dark-theme .sidebar-item.active { background: #0078d4; }
-.dark-theme .sidebar-item.active svg,
-.dark-theme .sidebar-item.active span { color: #fff; fill: #fff; }
-
-/* ---------- light theme ---------- */
-.light-theme {
-  background: #f2f2f2;
-  color: #222;
-}
-.light-theme .sidebar-header { background: #e0e0e0; color: #222; }
-.light-theme .sidebar-item:hover { background: #ddd; }
-.light-theme .sidebar-section { color: #666; }
-.light-theme .sidebar-item.active {
-  background: #0078d4;
-}
-.light-theme .sidebar-item.active span,
-.light-theme .sidebar-item.active svg { color: #fff; fill: #fff; }
-
-/* ---------- topbar / content ---------- */
 .topbar {
   height: 50px;
   background: #0078d4;
@@ -123,7 +105,10 @@ body {
   padding: 0 20px;
   font-weight: bold;
 }
-.main { margin-left: 240px; padding: 20px; }
+.main {
+  margin-left: 240px;
+  padding: 20px;
+}
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -143,55 +128,79 @@ body {
 <body>
   {user_sidebar}
   <div class="topbar">PowerApps Mockup</div>
-  <div class="main">
-    {user_content}
-  </div>
+  <div class="main">{user_content}</div>
 </body>
 </html>
 """
 
 # -----------------------
-# Function: Generate Sidebar
+# Hardcoded Fluent SVG Icons (Home, Recent, Pinned)
 # -----------------------
-def generate_sidebar(user_prompt):
-    theme_class = "light-theme" if "light" in user_prompt.lower() else "dark-theme"
+SVG_FLUENT = {
+    "hamburger": """<svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>""",
+    "home": """<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""",
+    "recent": """<svg viewBox="0 0 24 24"><path d="M12 8v5l4 2 .7-1.2-3.2-1.8V8h-1.5zm0-6a10 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 d="M14 2v2l2 2v3l2 2v2H6v-2l2-2V6l2-2V2h4zm-1 13v7h-2v-7h2z"/></svg>""",
+}
 
-    sidebar_html = f"<div class='sidebar {theme_class}'>"
+# -----------------------
+# Function: Generate Sidebar (with Active State + Sections)
+# -----------------------
+def generate_sidebar(user_prompt):
+    sidebar_html = "<div class='sidebar'>"
     sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} App Title</div>"
 
-    # Default fixed items (SVG icons)
-    sidebar_html += f"<div class='sidebar-item active'>{SVG_FLUENT['home']} <span>Home</span></div>"
-    sidebar_html += f"<div class='sidebar-item'>{SVG_FLUENT['recent']} <span>Recent</span></div>"
-    sidebar_html += f"<div class='sidebar-item'>{SVG_FLUENT['pinned']} <span>Pinned</span></div>"
+    # Default hardcoded items
+    defaults = [("home", "Home"), ("recent", "Recent"), ("pinned", "Pinned")]
+    for key, label in defaults:
+        icon = SVG_FLUENT[key]
+        sidebar_html += f"<div class='sidebar-item'>{icon}<span>{label}</span></div>"
 
     sidebar_html += "<div class='sidebar-section'>My Work</div>"
 
-    # Ask Gemini to generate both labels and SVGs for My Work
-    system_prompt = (
-        "You are a PowerApps UI design assistant. "
-        "Based on the user's requirements, create 3–6 sidebar items for the 'My Work' section. "
-        "Each item must include a descriptive label and its Fluent-style SVG icon. "
-        "Output strictly in the format: Label | <svg ...></svg> , Label | <svg ...></svg>"
+    # Ask Gemini for structured sidebar with sections and active item
+    prompt = (
+        "You are a Microsoft PowerApps UI designer. "
+        "Based on the following user requirement, generate a complete sidebar structure under 'My Work'. "
+        "Include section headings (like MetaData, Templates, Settings, etc.) "
+        "and under each section, list items in this format:\n\n"
+        "Section Name:\n"
+        "  Label | <svg ...>\n"
+        "  Label | <svg ...>\n"
+        "\nAdditionally, mark one item as active by adding [ACTIVE] after its label if it represents the main context "
+        "(e.g., if the user says 'approval dashboard', mark 'Approvals' as active). "
+        "Return ONLY this structured plain text output with inline SVGs and [ACTIVE] tag if applicable."
     )
 
     try:
-        response = model.generate_content(system_prompt + "\n" + user_prompt)
-        generated_text = response.text.strip()
-
-        items = []
-        for pair in generated_text.split(","):
-            parts = pair.strip().split("|")
-            if len(parts) == 2:
-                label = parts[0].strip()
-                svg = parts[1].strip()
-                items.append((label, svg))
-
-        for label, svg in items:
-            sidebar_html += f"<div class='sidebar-item'>{svg}<span>{label}</span></div>"
-
-    except Exception as e:
-        # fallback
-        sidebar_html += "<div class='sidebar-item'><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='#0078d4'/></svg><span>Dashboard</span></div>"
+        response = model.generate_content(prompt + "\n\n" + user_prompt)
+        text = response.text.strip()
+    except Exception:
+        text = """MetaData:
+  Document Type | <svg viewBox='0 0 24 24'><path d='M3 13h8V3H3v10z'/></svg>
+  Division | <svg viewBox='0 0 24 24'><path d='M12 2L1 21h22L12 2z'/></svg>
+Templates:
+  Email Templates [ACTIVE] | <svg viewBox='0 0 24 24'><path d='M4 4h16v16H4V4z'/></svg>
+Settings:
+  QMS Settings | <svg viewBox='0 0 24 24'><path d='M19 3H5v18h14V3z'/></svg>"""
+
+    # Parse structured Gemini output
+    current_section = None
+    for line in text.splitlines():
+        if not line.strip():
+            continue
+        if not line.startswith(" ") and ":" in line:
+            section = line.split(":")[0].strip()
+            sidebar_html += f"<div class='sidebar-section'>{section}</div>"
+            current_section = section
+        elif "|" in line:
+            match = re.match(r"\s*(.+?)\s*\|\s*(<svg.*</svg>)", line.strip())
+            if match:
+                label_raw, svg = match.groups()
+                is_active = "[ACTIVE]" in label_raw
+                label = label_raw.replace("[ACTIVE]", "").strip()
+                active_class = "active" if is_active else ""
+                sidebar_html += f"<div class='sidebar-item {active_class}'>{svg}<span>{label}</span></div>"
 
     sidebar_html += "</div>"
     return sidebar_html
@@ -203,41 +212,24 @@ def generate_mockup(user_prompt):
     system_prompt = (
         "You are a Power Apps mockup generator. "
         "Generate ONLY the inner HTML for the main screen content. "
-        "Do NOT include <html>, <head>, or <body>. "
+        "Do NOT include <html>, <head>, or <body>."
     )
-
     try:
         response = model.generate_content(system_prompt + "\n" + user_prompt)
         user_html = response.text.strip()
-
-        # Clean Gemini formatting
         if user_html.startswith("```"):
-            user_html = user_html.split("```")[1]
-            user_html = user_html.replace("html", "").strip()
-
-        # Fallback chart injection
-        if "bar chart" in user_prompt.lower() and "<div class=\"bar-chart\"" not in user_html:
-            user_html += DEFAULT_BAR_CHART
-        if "line chart" in user_prompt.lower() and "<div class=\"line-chart\"" not in user_html:
-            user_html += DEFAULT_LINE_CHART
-        if "pie chart" in user_prompt.lower() and "<div class=\"pie-chart\"" not in user_html:
-            user_html += DEFAULT_PIE_CHART
-        if "stacked bar" in user_prompt.lower() and "<div class=\"stacked-bar-chart\"" not in user_html:
-            user_html += DEFAULT_STACKED_BAR_CHART
-        if "donut" in user_prompt.lower() and "<div class=\"donut-chart\"" not in user_html:
-            user_html += DEFAULT_DONUT_CHART
+            user_html = user_html.split("```")[1].replace("html", "").strip()
 
         sidebar_html = generate_sidebar(user_prompt)
-
         full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html).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:
+        uid = str(uuid.uuid4())
+        html_path, img_path = f"mockup_{uid}.html", f"mockup_{uid}.png"
+        with open(html_path, "w", encoding="utf-8") as f:
             f.write(full_html)
 
-        hti.screenshot(html_file=html_file, save_as=img_file)
-        return img_file
+        hti.screenshot(html_file=html_path, save_as=img_path)
+        return img_path
 
     except Exception as e:
         return f"Error: {e}"
@@ -246,11 +238,11 @@ def generate_mockup(user_prompt):
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## ⚡ Power Apps Mockup Generator (Gemini + Gradio)")
+    gr.Markdown("## ⚡ Power Apps Mockup Generator (Dynamic Sections + Model Icons + Active Item)")
     user_input = gr.Textbox(
         label="Describe your Power Apps mockup screen",
         lines=4,
-        placeholder="Example: A dark dashboard with reports and approvals section"
+        placeholder="Example: An approval dashboard showing requests, reports, and metadata sections"
     )
     generate_btn = gr.Button("Generate Mockup")
     image_output = gr.Image(label="Mockup Preview")