Update app.py

app.py

@@ -1,6 +1,7 @@
 import google.generativeai as genai
 import gradio as gr
 from html2image import Html2Image
+import pdfplumber
 import uuid
 import os
 import re
@@ -17,13 +18,13 @@ model = genai.GenerativeModel("gemini-2.0-flash")
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 
 # -----------------------
-# Default Chart Snippets (Fallbacks)
+# Default Chart Snippets (Optional / Fallbacks)
 # -----------------------
-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 ... """
+DEFAULT_BAR_CHART = """ ... """
+DEFAULT_LINE_CHART = """ ... """
+DEFAULT_PIE_CHART = """ ... """
+DEFAULT_STACKED_BAR_CHART = """ ... """
+DEFAULT_DONUT_CHART = """ ... """
 
 # -----------------------
 # Base PowerApps Layout
@@ -54,12 +55,6 @@ body {
   font-weight: bold;
   background: #1f1f1f;
 }
-.sidebar-header svg {
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  fill: #ccc;
-}
 .sidebar-item {
   padding: 10px 18px;
   cursor: pointer;
@@ -67,27 +62,14 @@ body {
   align-items: center;
   transition: background 0.2s ease;
 }
-.sidebar-item svg {
-  width: 18px;
-  height: 18px;
-  margin-right: 10px;
-  fill: #c5c5c5;
-}
 .sidebar-item span {
   color: #ccc;
 }
-.sidebar-item:hover {
-  background: #3a3a3a;
-}
+.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;
   padding: 8px 18px;
@@ -134,7 +116,7 @@ body {
 """
 
 # -----------------------
-# Hardcoded Fluent SVG Icons (Home, Recent, Pinned)
+# Hardcoded Fluent SVG Icons
 # -----------------------
 SVG_FLUENT = {
     "hamburger": """<svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>""",
@@ -144,47 +126,32 @@ SVG_FLUENT = {
 }
 
 # -----------------------
-# Function: Generate Sidebar (with Active State + Sections)
+# Sidebar Generator
 # -----------------------
 def generate_sidebar(user_prompt):
     sidebar_html = "<div class='sidebar'>"
     sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} App Title</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 += f"<div class='sidebar-item'>{SVG_FLUENT[key]}<span>{label}</span></div>"
 
     sidebar_html += "<div class='sidebar-section'>My Work</div>"
 
-    # 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."
+        "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]."
     )
 
     try:
         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
+        text = """Reports:
+  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
     for line in text.splitlines():
         if not line.strip():
@@ -192,7 +159,6 @@ Settings:
         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:
@@ -206,46 +172,67 @@ Settings:
     return sidebar_html
 
 # -----------------------
-# Function: Generate Mockup Image
+# Mockup Generator
 # -----------------------
 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>."
+        "You are a PowerApps mockup generator. "
+        "Generate ONLY the inner HTML for the main screen content based on the given inferred UI requirements."
+    )
+    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()
+
+    sidebar_html = generate_sidebar(user_prompt)
+    full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html).replace("{user_content}", user_html)
+
+    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_path, save_as=img_path)
+    return img_path
+
+# -----------------------
+# New Function: Convert PDF → UI Requirement Text
+# -----------------------
+def analyze_business_pdf(pdf_file):
+    text = ""
+    with pdfplumber.open(pdf_file.name) as pdf:
+        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"
     )
-    try:
-        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()
-
-        sidebar_html = generate_sidebar(user_prompt)
-        full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html).replace("{user_content}", user_html)
-
-        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_path, save_as=img_path)
-        return img_path
+    response = model.generate_content(inference_prompt + text)
+    inferred_ui = response.text.strip()
+    return inferred_ui
 
-    except Exception as e:
-        return f"Error: {e}"
+# -----------------------
+# PDF-to-Mockup Pipeline
+# -----------------------
+def generate_from_pdf(pdf_file):
+    inferred_ui_text = analyze_business_pdf(pdf_file)
+    mockup_img = generate_mockup(inferred_ui_text)
+    return mockup_img
 
 # -----------------------
-# Gradio UI
+# Gradio Interface
 # -----------------------
 with gr.Blocks() as demo:
-    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: An approval dashboard showing requests, reports, and metadata sections"
-    )
-    generate_btn = gr.Button("Generate Mockup")
-    image_output = gr.Image(label="Mockup Preview")
-    generate_btn.click(fn=generate_mockup, inputs=user_input, outputs=image_output)
+    gr.Markdown("## 🧩 Business Requirements → PowerApps Mockup Generator")
+    pdf_input = gr.File(label="Upload Business Requirements PDF", file_types=[".pdf"])
+    generate_btn = gr.Button("Generate PowerApps Mockup")
+    image_output = gr.Image(label="Generated Mockup Preview")
+    generate_btn.click(fn=generate_from_pdf, inputs=pdf_input, outputs=image_output)
 
 demo.launch(server_name="0.0.0.0", server_port=7860)