Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Oct 9, 2025

Commit

4dc83f5

verified ·

1 Parent(s): 3dd0623

Update app.py

Browse files

Files changed (1) hide show

app.py +134 -282

app.py CHANGED Viewed

@@ -1,381 +1,233 @@
-import os
-import re
-import json
-import uuid
-import pdfplumber
 import google.generativeai as genai
 import gradio as gr
 from html2image import Html2Image
 # -----------------------
-# Configure Gemini
 # -----------------------
-genai.configure(api_key=os.environ["GEMINI_API_KEY"])
 model = genai.GenerativeModel("gemini-2.5-pro")
 # -----------------------
-# Ensure headless chromium exists (Spaces friendly)
 # -----------------------
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
-# BASE HTML/CSS tuned to uploaded PowerApps mockups
-# (colors, sizes, active-left-accent, compact spacing)
 # -----------------------
 BASE_TEMPLATE = """
 <html>
 <head>
-<meta charset="utf-8">
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <style>
-:root{
-  --sidebar-bg:#2b2b2b; --sidebar-section:#1f1f1f; --muted:#bfbfbf; --accent:#0078d4;
-  --main-bg:#f3f3f3; --card-bg:#ffffff;
-}
-*{box-sizing:border-box}
 body {
   margin: 0;
-  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
-  background: var(--main-bg);
-  color: #222;
-  -webkit-font-smoothing:antialiased;
 }
 .sidebar {
   width: 240px;
   height: 100vh;
-  background: var(--sidebar-bg);
   color: #fff;
   float: left;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid rgba(255,255,255,0.03);
 }
 .sidebar-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
-  font-size: 14px;
-  font-weight: 600;
-  background: var(--sidebar-section);
 }
-.sidebar-header svg { width: 18px; height:18px; flex-shrink:0; }
-.app-title-mini { font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .sidebar-item {
-  padding: 10px 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 10px;
-  transition: background 0.12s ease;
-  position: relative;
 }
-.sidebar-item svg { width: 14px; height:14px; min-width:14px; min-height:14px; fill: var(--muted); flex-shrink:0; }
-.sidebar-item span { color: var(--muted); font-size:13px; }
-.sidebar-item:hover { background: rgba(255,255,255,0.02); }
-.sidebar-item.active { background: rgba(0,0,0,0.06); color: #fff; }
-.sidebar-item.active span { color: #fff; font-weight:600; }
-.sidebar-item.active::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 4px;
-  background: var(--accent);
-  border-top-right-radius:4px;
-  border-bottom-right-radius:4px;
 }
-/* section header small uppercase */
 .sidebar-section {
-  margin-top: 12px;
-  padding: 10px 14px;
-  font-size: 11px;
-  font-weight:700;
-  text-transform:uppercase;
-  color: #a7a7a7;
-  letter-spacing:0.6px;
 }
-/* My Work nested / indented look */
-.sidebar-item.indent { padding-left: 30px; font-size:13px; }
-/* topbar */
 .topbar {
-  height: 52px;
-  background: var(--accent);
   color: #fff;
   display: flex;
   align-items: center;
   padding: 0 20px;
-  font-weight: 600;
-  font-size: 15px;
-  position: sticky;
-  top:0;
 }
-/* main area */
 .main {
   margin-left: 240px;
-  padding: 18px;
 }
-/* content cards */
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
-  gap: 14px;
 }
 .card {
-  background: var(--card-bg);
   border-radius: 8px;
-  padding: 12px;
-  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
-  border: 1px solid rgba(0,0,0,0.03);
 }
-.card h3 { margin:0 0 8px 0; font-size:14px; }
-.card p { margin:0; color:#444; font-size:13px; }
-/* KPI chart container */
-.chart-container { width:100%; height:220px; }
-/* table */
-.table-container { margin-top:10px; overflow-x:auto; }
-table { width:100%; border-collapse:collapse; font-size:13px; }
-th,td { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; }
-th { background:#fafafa; font-weight:600; font-size:12px; color:#333; }
-/* right spacing for large views */
-.page-row { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
-.page-col { flex:1; min-width:220px; }
-/* small helper */
-.small-muted { color:#777; font-size:12px; }
 </style>
 </head>
 <body>
   {user_sidebar}
   <div class="topbar">{app_title}</div>
-  <div class="main">
-    {user_content}
-  </div>
-  <script>
-  {chart_js}
-  </script>
 </body>
 </html>
 """
 # -----------------------
-# Basic fluent icons used as defaults (small/compact)
 # -----------------------
 SVG_FLUENT = {
-    "hamburger": """<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>""",
-    "home": """<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""",
-    "recent": """<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M12 8v5l4 2 .7-1.2-3.2-1.8V8h-1.5zM12 2a10 10 0 100 20 10 10 0 000-20z"/></svg>""",
-    "pinned": """<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M14 2v2l2 2v3l2 2v2H6v-2l2-2V6l2-2V2h4z"/></svg>""",
 }
 # -----------------------
-# Extract text from PDF
 # -----------------------
-def extract_pdf_text(pdf_path):
-    text = ""
-    with pdfplumber.open(pdf_path) as pdf:
-        for p in pdf.pages:
-            page_text = p.extract_text()
-            if page_text:
-                text += page_text + "\n"
-    return text.strip()
-# -----------------------
-# Ask Gemini for structured sidebar and which item is active
-# This endpoint will ask for JSON: [{label, icon_svg, active}]
-# -----------------------
-def infer_sidebar_items(ui_description):
-    prompt = (
-        "You are a PowerApps UI designer. Based on the following app description, "
-        "return a JSON array of 3-6 'My Work' sidebar items. For each item provide:\n"
-        " - label (short string),\n"
-        " - icon (a minimal Fluent-style SVG string with fill '#c5c5c5'),\n"
-        " - active (true/false)\n"
-        "Return only JSON. Example:\n"
-        "[{\"label\":\"Dashboard\",\"icon\":\"<svg ...></svg>\",\"active\":true}, ...]"
     )
-    resp = model.generate_content(prompt + "\n\n" + ui_description)
-    json_text = re.sub(r"```(?:json)?|```", "", resp.text.strip())
     try:
         items = json.loads(json_text)
-    except Exception:
-        # fallback if model output not parseable
         items = [
-            {"label": "Dashboard", "icon": "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='6' fill='#c5c5c5'/></svg>", "active": True},
-            {"label": "Requests", "icon": "<svg viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='12' fill='#c5c5c5'/></svg>", "active": False},
-            {"label": "Templates", "icon": "<svg viewBox='0 0 24 24'><path d='M4 6h16v12H4z' fill='#c5c5c5'/></svg>", "active": False}
         ]
-    return items
-# -----------------------
-# Ask Gemini for KPIs: chart/table JSON
-# -----------------------
-def infer_kpis(ui_description):
-    prompt = (
-        "From the app/business description below, extract 2-4 KPIs and return JSON array where each item is either:\n"
-        " - {\"type\":\"chart\",\"title\":\"...\",\"chart_type\":\"bar|line|pie\",\"labels\":[...],\"values\":[...]}\n"
-        " - {\"type\":\"table\",\"title\":\"...\",\"columns\":[...],\"rows\":[[...],[...]]}\n"
-        "Return only JSON."
-    )
-    resp = model.generate_content(prompt + "\n\n" + ui_description)
-    json_text = re.sub(r"```(?:json)?|```", "", resp.text.strip())
-    try:
-        kpis = json.loads(json_text)
-    except Exception:
-        kpis = [{"type":"chart","title":"Sample KPI","chart_type":"bar","labels":["Jan","Feb","Mar"],"values":[30,45,28]}]
-    return kpis
 # -----------------------
-# Ask Gemini for main content skeleton (cards, short description)
 # -----------------------
-def infer_main_content(ui_description):
-    prompt = (
-        "Based on this inferred app description, produce a short HTML fragment (no full page) "
-        "that contains a short hero/summary area and placeholders for KPI cards. Keep it concise."
     )
-    resp = model.generate_content(prompt + "\n\n" + ui_description)
-    html = re.sub(r"```(?:html)?|```", "", resp.text.strip())
-    # If model returns plain text, create a tiny hero
-    if "<" not in html:
-        html = f"<div class='card'><h3>Summary</h3><p class='small-muted'>{html}</p></div>"
-    return html
-# -----------------------
-# Build sidebar HTML (static defaults + dynamic My Work items)
-# -----------------------
-def build_sidebar(app_title, ui_description):
-    items = infer_sidebar_items(ui_description)
-    html = "<div class='sidebar'>"
-    html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']}<div class='app-title-mini'>{app_title}</div></div>"
-    # defaults
-    html += f"<div class='sidebar-item'>{SVG_FLUENT['home']}<span>Home</span></div>"
-    html += f"<div class='sidebar-item'>{SVG_FLUENT['recent']}<span>Recent</span></div>"
-    html += f"<div class='sidebar-item'>{SVG_FLUENT['pinned']}<span>Pinned</span></div>"
-    html += "<div class='sidebar-section'>My Work</div>"
-    for it in items:
-        active = "active" if it.get("active") else ""
-        # ensure icon exists
-        icon = it.get("icon") or "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='5' fill='#c5c5c5'/></svg>"
-        label = it.get("label","Item")
-        # indent small items like subsections if label contains colon or dash (simple heuristic)
-        indent_class = " indent" if label.lower().startswith(("•","-")) or label.startswith("  ") else ""
-        html += f"<div class='sidebar-item {active}{indent_class}'>{icon}<span>{label}</span></div>"
-    html += "</div>"
-    return html
-# -----------------------
-# Render KPI HTML + Chart.js script
-# -----------------------
-def render_kpis(kpis):
-    html_parts = []
-    js_parts = []
-    for idx,k in enumerate(kpis):
-        if k.get("type") == "chart":
-            cid = f"chart_{idx}"
-            title = k.get("title","KPI")
-            chart_type = k.get("chart_type","bar")
-            labels = json.dumps(k.get("labels",[]))
-            values = json.dumps(k.get("values",[]))
-            html_parts.append(f"<div class='card'><h3>{title}</h3><div class='chart-container'><canvas id='{cid}'></canvas></div></div>")
-            js = f"""
-new Chart(document.getElementById('{cid}'), {{
-  type: '{chart_type}',
-  data: {{
-    labels: {labels},
-    datasets: [{{
-      label: '{title}',
-      data: {values},
-      backgroundColor: 'rgba(0,120,212,0.6)',
-      borderColor: 'rgba(0,120,212,0.9)',
-      borderWidth: 1
-    }}]
-  }},
-  options: {{ responsive: true, maintainAspectRatio: false, plugins: {{ legend: {{ display: false }} }} }}
-}});
-"""
-            js_parts.append(js)
-        elif k.get("type") == "table":
-            title = k.get("title","Table")
-            cols = k.get("columns",[])
-            rows = k.get("rows",[])
-            table_html = f"<div class='card table-container'><h3>{title}</h3><table><tr>"
-            for c in cols: table_html += f"<th>{c}</th>"
-            table_html += "</tr>"
-            for r in rows:
-                table_html += "<tr>" + "".join(f"<td>{cell}</td>" for cell in r) + "</tr>"
-            table_html += "</table></div>"
-            html_parts.append(table_html)
-    return "\n".join(html_parts), "\n".join(js_parts)
 # -----------------------
-# Full generation pipeline
 # -----------------------
-def generate_mockup_from_pdf(pdf_file):
-    # 1) extract text
-    text = extract_pdf_text(pdf_file.name)
-    # 2) infer app title
-    title_prompt = "Read the following business document and reply with a concise PowerApps-style app title (one short line). Return only the title."
-    try:
-        app_title = model.generate_content(title_prompt + "\n\n" + text).text.strip()
-        if not app_title:
-            app_title = "AI Generated App"
-    except Exception:
-        app_title = "AI Generated App"
-    # 3) infer overall UI description (plain English)
-    ui_prompt = "You are an expert PowerApps architect. From the text below, describe in plain English the app's screens, main components, and what sorts of KPIs/charts/tables would be useful."
-    try:
-        ui_text = model.generate_content(ui_prompt + "\n\n" + text).text.strip()
-    except Exception:
-        ui_text = "Dashboard with pending requests and summary KPIs."
-    # 4) infer KPIs JSON
-    kpis = infer_kpis(ui_text)
-    # 5) build sidebar
-    sidebar_html = build_sidebar(app_title, ui_text)
-    # 6) main content skeleton
-    main_frag = infer_main_content(ui_text)
-    # 7) render kpis
-    kpi_html, kpi_js = render_kpis(kpis)
-    # combine content — keep model-produced skeleton and attach KPIs
-    user_content = f"{main_frag}\n<div class='page-row'>{kpi_html}</div>"
-    full_html = BASE_TEMPLATE.format(
-        user_sidebar=sidebar_html,
-        app_title=app_title,
-        user_content=user_content,
-        chart_js=kpi_js
-    )
-    # write and snapshot
-    uid = uuid.uuid4().hex
-    html_path = f"mockup_{uid}.html"
-    img_path = f"mockup_{uid}.png"
-    with open(html_path, "w", encoding="utf-8") as fh:
-        fh.write(full_html)
-    # render (Html2Image can take html_file)
     hti.screenshot(html_file=html_path, save_as=img_path)
     return img_path
 # -----------------------
-# Gradio app
 # -----------------------
 with gr.Blocks() as demo:
     gr.Markdown("## 🧠 Intelligent PowerApps Mockup Generator (PDF → UI)")

 import google.generativeai as genai
 import gradio as gr
 from html2image import Html2Image
+import pdfplumber
+import uuid
+import os
+import re
+import json
 # -----------------------
+# Configure Gemini API
 # -----------------------
+genai.configure(api_key=os.environ.get("GEMINI_API_KEY"))
 model = genai.GenerativeModel("gemini-2.5-pro")
 # -----------------------
+# Html2Image Setup
 # -----------------------
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
+# Base PowerApps Layout
 # -----------------------
 BASE_TEMPLATE = """
 <html>
 <head>
 <style>
 body {
   margin: 0;
+  font-family: 'Segoe UI', sans-serif;
+  background: #f5f5f5;
 }
 .sidebar {
   width: 240px;
   height: 100vh;
+  background: #2d2d2d;
   color: #fff;
   float: left;
   display: flex;
   flex-direction: column;
 }
 .sidebar-header {
   display: flex;
   align-items: center;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  background: #1f1f1f;
 }
 .sidebar-item {
+  padding: 10px 18px;
   cursor: pointer;
   display: flex;
   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;
+}
+.sidebar-item:hover { background: #3a3a3a; }
+.sidebar-item.active {
+  background: #0078d4;
+  color: #fff;
 }
 .sidebar-section {
+  margin-top: 14px;
+  padding: 8px 18px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #aaa;
 }
 .topbar {
+  height: 50px;
+  background: #0078d4;
   color: #fff;
   display: flex;
   align-items: center;
   padding: 0 20px;
+  font-weight: bold;
 }
 .main {
   margin-left: 240px;
+  padding: 20px;
 }
 .card-grid {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 15px;
 }
 .card {
+  background: #fff;
   border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
 }
+.status.active { color: green; font-weight: bold; }
+.status.inactive { color: red; font-weight: bold; }
+.chart-container { margin: 20px 0; }
 </style>
 </head>
 <body>
   {user_sidebar}
   <div class="topbar">{app_title}</div>
+  <div class="main">{user_content}</div>
 </body>
 </html>
 """
 # -----------------------
+# Default Fluent Icons
 # -----------------------
 SVG_FLUENT = {
+    "hamburger": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>""",
+    "home": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""",
+    "recent": """<svg viewBox="0 0 24 24"><path fill="#fff" d="M12 8v5l4 2 .7-1.2-3.2-1.8V8h-1.5zM12 2a10 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 fill="#fff" d="M14 2v2l2 2v3l2 2v2H6v-2l2-2V6l2-2V2h4zm-1 13v7h-2v-7h2z"/></svg>"""
 }
 # -----------------------
+# Generate Sidebar (Dynamic + Static)
 # -----------------------
+def generate_sidebar(ui_description, app_title):
+    sidebar_html = "<div class='sidebar'>"
+    sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} {app_title}</div>"
+    # Default 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>"
+    sidebar_html += "<div class='sidebar-section'>My Work</div>"
+    # Ask Gemini to produce structured JSON for dynamic sidebar
+    sidebar_prompt = (
+        "You are a PowerApps UI designer. Based on the inferred app description below, "
+        "generate 3–6 realistic items for the 'My Work' section. "
+        "For each item, provide: label, a minimal SVG icon (Fluent-style, color #c5c5c5), "
+        "and specify one as active (true). Return only JSON in this format:\n\n"
+        "[{\"label\": \"Dashboard\", \"icon\": \"<svg...>\", \"active\": true}, ...]"
     )
     try:
+        response = model.generate_content(sidebar_prompt + "\n\n" + ui_description)
+        text = response.text.strip()
+        json_text = re.sub(r"```(?:json)?|```", "", text)
         items = json.loads(json_text)
+    except Exception as e:
         items = [
+            {"label": "Dashboard", "icon": "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='5' fill='#c5c5c5'/></svg>", "active": True},
+            {"label": "Requests", "icon": "<svg viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' fill='#c5c5c5'/></svg>", "active": False},
         ]
+    for item in items:
+        active_class = "active" if item.get("active") else ""
+        sidebar_html += f"<div class='sidebar-item {active_class}'>{item['icon']}<span>{item['label']}</span></div>"
+    sidebar_html += "</div>"
+    return sidebar_html
 # -----------------------
+# Analyze Business PDF → Infer App UI
 # -----------------------
+def analyze_business_pdf(pdf_file):
+    text = ""
+    with pdfplumber.open(pdf_file.name) as pdf:
+        for page in pdf.pages:
+            page_text = page.extract_text()
+            if page_text:
+                text += page_text + "\n"
+    # Extract app title
+    title_prompt = (
+        "Read the following business requirements and infer the most appropriate PowerApp title "
+        "(e.g., 'Employee Leave Tracker', 'Sales Dashboard'). Return only the title text."
     )
+    app_title = model.generate_content(title_prompt + "\n\n" + text).text.strip()
+    inference_prompt = (
+        "You are an expert PowerApps architect. Analyze the following business requirements "
+        "and infer what kind of PowerApps solution is needed. "
+        "Identify screens, forms, charts, and navigation ideas in plain English."
+    )
+    ui_text = model.generate_content(inference_prompt + "\n\n" + text).text.strip()
+    return app_title, ui_text
 # -----------------------
+# Generate Full Mockup
 # -----------------------
+def generate_mockup(app_title, ui_text):
+    ui_prompt = (
+        "You are a PowerApps UI generator. Based on this inferred app description, "
+        "generate only the inner HTML for main content — include cards, forms, charts, or tables. "
+        "Use realistic placeholder data and PowerApps-style components."
+    )
+    response = model.generate_content(ui_prompt + "\n\n" + ui_text)
+    user_html = re.sub(r"```(?:html)?|```", "", response.text.strip())
+    sidebar_html = generate_sidebar(ui_text, app_title)
+    full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html).replace("{user_content}", user_html).replace("{app_title}", app_title)
+    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
 # -----------------------
+# Full Pipeline
+# -----------------------
+def generate_from_pdf(pdf_file):
+    app_title, ui_text = analyze_business_pdf(pdf_file)
+    mockup_img = generate_mockup(app_title, ui_text)
+    return mockup_img
+# -----------------------
+# Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
     gr.Markdown("## 🧠 Intelligent PowerApps Mockup Generator (PDF → UI)")