Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Oct 9, 2025

Commit

ad01bea

verified ·

1 Parent(s): d94a6bf

Update app.py

Browse files

Files changed (1) hide show

app.py +67 -114

app.py CHANGED Viewed

@@ -1,6 +1,6 @@
 # =========================================================
-# Intelligent PowerApps Mockup Generator
-# From Business Requirement PDF → Multi-Screen PowerApps-Style Mockup Images
 # =========================================================
 import google.generativeai as genai
@@ -11,6 +11,7 @@ import uuid
 import os
 import re
 import time
 # -----------------------
 # Configure Gemini API
@@ -63,14 +64,11 @@ body {
   width: 16px;
   height: 16px;
   margin-right: 8px;
 }
 .sidebar-item span { color: #ccc; }
 .sidebar-item:hover { background: #3a3a3a; }
-.sidebar-item.active {
-  background: #0078d4;
-  color: #fff;
-}
-.sidebar-item.active span { color: #fff; }
 .sidebar-section {
   margin-top: 14px;
   padding: 8px 18px;
@@ -88,37 +86,13 @@ body {
   padding: 0 20px;
   font-weight: bold;
 }
-.main {
-  margin-left: 240px;
-  padding: 20px;
-}
-.screen {
-  display: none;
-}
-.screen.active {
-  display: block;
-}
 </style>
-<script>
-function showScreen(name) {
-  document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
-  document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
-  const target = document.querySelector(`[data-screen='${name}']`);
-  if (target) target.classList.add('active');
-  const activeItem = Array.from(document.querySelectorAll('.sidebar-item'))
-    .find(el => el.textContent.trim() === name);
-  if (activeItem) activeItem.classList.add('active');
-}
-</script>
 </head>
 <body>
   {user_sidebar}
   <div class="topbar">{app_title}</div>
-  <div class="main">
-    {user_content}
-  </div>
 </body>
 </html>
 """
@@ -134,18 +108,12 @@ SVG_FLUENT = {
 }
 # -----------------------
-# Sidebar Generator
-# -----------------------
-# -----------------------
-# -----------------------
-# Sidebar Generator (Interactive version)
 # -----------------------
-def generate_sidebar(app_title, screens, active_label="Dashboard"):
     """
-    Builds sidebar with clickable screen items.
-    The current screen (active_label) is highlighted.
     """
     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>""",
@@ -158,29 +126,28 @@ 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"<div class='sidebar-item'>{SVG_FLUENT[key]}<span>{label}</span></div>"
-    # Dynamic “My Work” section with clickable screens
-    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:
-            icon_svg = icon_svg.replace("#c5c5c5", "#fff")
-        sidebar_html += (
-            f"<div class='sidebar-item {active_class}' onclick=\"showScreen('{screen_name}')\">"
-            f"{icon_svg}<span>{screen_name}</span></div>"
-        )
     sidebar_html += "</div>"
     return sidebar_html
 # -----------------------
-# Analyze Business PDF → Generate Multi-Screen HTML
 # -----------------------
 def analyze_business_pdf(pdf_file):
     text = ""
@@ -199,58 +166,57 @@ def analyze_business_pdf(pdf_file):
     except Exception:
         app_title = "PowerApp Solution"
-    # Step 2: Ask Gemini to identify screens and their HTML layouts
     try:
         response = model.generate_content(
-            "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())
-        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 screens:", e)
-        screens = [{"screen_name": "Dashboard", "html": "<h2>Error</h2><p>Gemini failed to process this PDF.</p>"}]
-    return app_title, screens
 # -----------------------
 # Generate HTML + Image per Screen
 # -----------------------
-def generate_mockups(app_title, screens):
-    """
-    Generates one interactive HTML mockup (clickable navigation).
-    """
-    sidebar_html = generate_sidebar(app_title, screens, active_label=screens[0].get("screen_name"))
-    screens_html = ""
-    for i, screen in enumerate(screens):
-        name = screen.get("screen_name", f"Screen {i+1}")
-        html = screen.get("html", "<p>Empty</p>")
-        active_class = "active" if i == 0 else ""
-        screens_html += f"<div class='screen {active_class}' data-screen='{name}'>{html}</div>"
-    full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html)\
-                             .replace("{user_content}", screens_html)\
-                             .replace("{app_title}", app_title)
-    uid = str(uuid.uuid4())[:8]
-    html_path = f"mockup_interactive_{uid}.html"
-    with open(html_path, "w", encoding="utf-8") as f:
-        f.write(full_html)
-    # Generate one image preview (first screen)
-    img_path = f"mockup_preview_{uid}.png"
-    hti.screenshot(html_file=html_path, save_as=img_path)
-    return [img_path]
 # -----------------------
 # Full Pipeline with Retry Logic
@@ -258,8 +224,8 @@ def generate_mockups(app_title, screens):
 def generate_from_pdf(pdf_file):
     for attempt in range(3):
         try:
-            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():
@@ -269,28 +235,15 @@ def generate_from_pdf(pdf_file):
                 raise e
     raise Exception("❌ Failed after 3 retries due to Gemini API quota limits.")
-# -----------------------
-# Gradio UI
-# -----------------------
 # -----------------------
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## 🧩 Intelligent PowerApps Mockup Generator (Interactive Prototype Mode)")
     pdf_input = gr.File(label="📄 Upload Business Requirement PDF", file_types=[".pdf"])
-    generate_btn = gr.Button("🚀 Generate Interactive App")
-    gallery_output = gr.Gallery(label="Generated Preview", show_label=True, columns=2)
-    html_link = gr.HTML()
-    def generate_and_return_link(pdf_file):
-        images = generate_from_pdf(pdf_file)
-        html_files = [f for f in os.listdir('.') if f.startswith('mockup_interactive_') and f.endswith('.html')]
-        if html_files:
-            last_html = sorted(html_files, key=os.path.getmtime)[-1]
-            html_url = f"<a href='file://{os.path.abspath(last_html)}' target='_blank' style='font-size:16px;color:#0078d4;text-decoration:none;'>🔗 Open Interactive Prototype</a>"
-            return images, html_url
-        return images, "<p style='color:red;'>No HTML file found.</p>"
-    generate_btn.click(fn=generate_and_return_link, inputs=pdf_input, outputs=[gallery_output, html_link])
 demo.launch(server_name="0.0.0.0", server_port=7860)

 # =========================================================
+# Intelligent PowerApps Mockup Generator (with Section Grouping)
+# From Business Requirement PDF → Multi-Screen, Grouped PowerApps-Style Mockups
 # =========================================================
 import google.generativeai as genai
 import os
 import re
 import time
+import json
 # -----------------------
 # Configure Gemini API
   width: 16px;
   height: 16px;
   margin-right: 8px;
+  fill: #c5c5c5;
 }
 .sidebar-item span { color: #ccc; }
 .sidebar-item:hover { background: #3a3a3a; }
+.sidebar-item.active { background: #0078d4; color: #fff; }
 .sidebar-section {
   margin-top: 14px;
   padding: 8px 18px;
   padding: 0 20px;
   font-weight: bold;
 }
+.main { margin-left: 240px; padding: 20px; }
 </style>
 </head>
 <body>
   {user_sidebar}
   <div class="topbar">{app_title}</div>
+  <div class="main">{user_content}</div>
 </body>
 </html>
 """
 }
 # -----------------------
+# Sidebar Generator (Grouped + Icons + Active Highlight)
 # -----------------------
+def generate_sidebar(app_title, grouped_screens, active_label="Dashboard"):
     """
+    Builds a dynamic sidebar with section groupings, icons, and active highlight.
     """
     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>""",
     sidebar_html = "<div class='sidebar'>"
     sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} {app_title}</div>"
+    # Default static items
     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>"
     sidebar_html += "</div>"
     return sidebar_html
 # -----------------------
+# Analyze Business PDF → Generate Grouped Screens
 # -----------------------
 def analyze_business_pdf(pdf_file):
     text = ""
     except Exception:
         app_title = "PowerApp Solution"
+    # Step 2: Detect grouped screen structure
     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."
             + "\n\n" + text
         )
         cleaned = re.sub(r"```(?:json)?|```", "", response.text.strip())
+        grouped_screens = json.loads(cleaned)
     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>"}]
+        }]
+    return app_title, grouped_screens
 # -----------------------
 # Generate HTML + Image per Screen
 # -----------------------
+def generate_mockups(app_title, grouped_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)
+    return image_paths
 # -----------------------
 # Full Pipeline with Retry Logic
 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)
             return image_paths
         except Exception as e:
             if "429" in str(e) or "quota" in str(e).lower():
                 raise e
     raise Exception("❌ Failed after 3 retries due to Gemini API quota limits.")
 # -----------------------
 # 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.")
     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)
+    generate_btn.click(fn=generate_from_pdf, inputs=pdf_input, outputs=gallery_output)
 demo.launch(server_name="0.0.0.0", server_port=7860)