Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Oct 9, 2025

Commit

40d4548

verified ·

1 Parent(s): a7c6ba3

Update app.py

Browse files

Files changed (1) hide show

app.py +294 -144

app.py CHANGED Viewed

@@ -1,242 +1,392 @@
-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)")
-    gr.Markdown("Upload a **Business Requirement PDF**. Gemini 2.5 Pro will infer app needs, extract a title, and render a PowerApps-style mockup.")
-    pdf_input = gr.File(label="Upload Business Requirement PDF", file_types=[".pdf"])
-    generate_btn = gr.Button("Generate 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)

+# app.py
 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)
 # -----------------------
+os.system("apt-get update -y || true")
+os.system("apt-get install -y chromium-browser || true")
+hti = Html2Image(browser_executable="chromium-browser")
 # -----------------------
+# 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("## PowerApps-style Mockup Generator — styled to your uploaded samples")
+    gr.Markdown("Upload a Business Requirements PDF and the AI will infer the app title, sidebar, KPIs and generate a PowerApps-like mockup image.")
+    pdf_input = gr.File(label="Business requirements (PDF)", file_types=[".pdf"])
+    btn = gr.Button("Generate Mockup")
+    out = gr.Image(label="Generated Mockup")
+    btn.click(fn=generate_mockup_from_pdf, inputs=pdf_input, outputs=out)
+if __name__ == '__main__':
+    demo.launch(server_name="0.0.0.0", server_port=7860)