Update app.py

app.py

@@ -62,6 +62,15 @@ body {
   align-items: center;
   transition: background 0.2s ease;
 }
+.sidebar-item svg {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  margin-right: 8px;
+  fill: #c5c5c5;
+  flex-shrink: 0;
+}
 .sidebar-item span {
   color: #ccc;
 }
@@ -132,16 +141,21 @@ 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 icons
     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>"
 
     sidebar_html += "<div class='sidebar-section'>My Work</div>"
 
+    # Updated, cleaner sidebar generation prompt
     prompt = (
-        "You are a Microsoft PowerApps UI designer. "
-        "Based on the following user context, generate a structured sidebar under 'My Work' "
-        "with section headings and SVG icons for each item. Mark the main relevant item as [ACTIVE]."
+        "You are a Microsoft PowerApps UI designer. Based on the following business or user requirement, "
+        "generate ONLY the 'My Work' sidebar section (not the entire sidebar). "
+        "Each section must follow this format:\n"
+        "Section Name:\n  Label [ACTIVE optional] | <svg viewBox='0 0 24 24'><path ... /></svg>\n"
+        "Include concise section names and realistic Fluent-style icons. "
+        "Do NOT add explanations, just the raw structure as shown above."
     )
 
     try:
@@ -152,15 +166,20 @@ def generate_sidebar(user_prompt):
   Dashboard [ACTIVE] | <svg viewBox='0 0 24 24'><path d='M3 13h8V3H3v10z'/></svg>
   Analytics | <svg viewBox='0 0 24 24'><path d='M12 2L1 21h22L12 2z'/></svg>"""
 
-    current_section = None
+    # Clean out unwanted explanations, only valid icon lines
+    cleaned_lines = []
     for line in text.splitlines():
-        if not line.strip():
-            continue
+        if "| <svg" in line:
+            cleaned_lines.append(line.strip())
+        elif ":" in line and not line.strip().startswith("```"):
+            cleaned_lines.append(line.strip())
+
+    for line in cleaned_lines:
         if not line.startswith(" ") and ":" in line:
             section = line.split(":")[0].strip()
             sidebar_html += f"<div class='sidebar-section'>{section}</div>"
         elif "|" in line:
-            match = re.match(r"\s*(.+?)\s*\|\s*(<svg.*</svg>)", line.strip())
+            match = re.match(r"(.+?)\s*\|\s*(<svg.*?</svg>)", line)
             if match:
                 label_raw, svg = match.groups()
                 is_active = "[ACTIVE]" in label_raw
@@ -177,12 +196,13 @@ def generate_sidebar(user_prompt):
 def generate_mockup(user_prompt):
     system_prompt = (
         "You are a PowerApps mockup generator. "
-        "Generate ONLY the inner HTML for the main screen content based on the given inferred UI requirements."
+        "Generate ONLY the inner HTML for the main screen content, without <html> or sidebar. "
+        "Keep layout and styling consistent with Microsoft PowerApps."
     )
     response = model.generate_content(system_prompt + "\n" + user_prompt)
     user_html = response.text.strip()
-    if user_html.startswith("```"):
-        user_html = user_html.split("```")[1].replace("html", "").strip()
+    # Remove any code fences like ```html
+    user_html = re.sub(r"```(?:html)?", "", user_html).strip()
 
     sidebar_html = generate_sidebar(user_prompt)
     full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html).replace("{user_content}", user_html)
@@ -196,7 +216,7 @@ def generate_mockup(user_prompt):
     return img_path
 
 # -----------------------
-# New Function: Convert PDF → UI Requirement Text
+# Convert PDF → Inferred UI Requirements
 # -----------------------
 def analyze_business_pdf(pdf_file):
     text = ""
@@ -204,13 +224,11 @@ def analyze_business_pdf(pdf_file):
         for page in pdf.pages:
             text += page.extract_text() + "\n"
 
-    # Now convert business requirements into inferred UI requirements
     inference_prompt = (
         "You are an expert PowerApps UI architect. "
         "Analyze the following business requirements and infer what PowerApps modules, screens, and components "
         "the app would need. Describe the inferred UI requirements clearly, focusing on screen purpose, key components, "
-        "charts, forms, lists, and any relevant side menu items.\n\n"
-        "Business Requirements:\n"
+        "charts, forms, lists, and any relevant side menu items.\n\nBusiness Requirements:\n"
     )
 
     response = model.generate_content(inference_prompt + text)
@@ -218,7 +236,7 @@ def analyze_business_pdf(pdf_file):
     return inferred_ui
 
 # -----------------------
-# PDF-to-Mockup Pipeline
+# Full Pipeline: PDF → Mockup
 # -----------------------
 def generate_from_pdf(pdf_file):
     inferred_ui_text = analyze_business_pdf(pdf_file)