Spaces:

dina1
/

image1

Sleeping

App Files Files Community

dina1 commited on Oct 6, 2025

Commit

1338ec8

verified ·

1 Parent(s): a95a9b9

Update app.py

Browse files

Files changed (1) hide show

app.py +180 -61

app.py CHANGED Viewed

@@ -3,7 +3,6 @@ import gradio as gr
 from html2image import Html2Image
 import uuid
 import os
-import json
 # -----------------------
 # Configure Gemini API
@@ -16,91 +15,212 @@ model = genai.GenerativeModel("gemini-2.0-flash")
 # -----------------------
 hti = Html2Image(browser_executable="/usr/bin/chromium")
 # -----------------------
 # Base PowerApps Layout
 # -----------------------
 BASE_TEMPLATE = """
-<!DOCTYPE html>
-<html lang="en">
 <head>
-<meta charset="UTF-8">
-<title>Power Apps Mockup</title>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
-  body { margin:0; font-family:Segoe UI, sans-serif; display:flex; height:100vh; background:#f9f9f9; }
-  .sidebar { width:220px; background:#f4f4f4; padding:15px; border-right:1px solid #ddd; }
-  .sidebar h3 { margin-top:20px; margin-bottom:10px; font-size:13px; color:#666; font-weight:bold; text-transform:uppercase; }
-  .sidebar ul { list-style:none; padding:0; margin:0; }
-  .sidebar li { margin:10px 0; color:#333; cursor:pointer; display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:6px; }
-  .sidebar li:hover { background:#e6e6e6; }
-  .main { flex:1; display:flex; flex-direction:column; }
-  .content { flex:1; padding:25px; overflow:auto; background:white; }
 </style>
 </head>
 <body>
-  <div class="sidebar">
-    <h3>Home</h3>
-    <ul>
-      <li><i class="fas fa-home"></i> Home</li>
-      <li><i class="fas fa-clock"></i> Recent</li>
-      <li><i class="fas fa-thumbtack"></i> Pinned</li>
-    </ul>
-    <h3>My Works</h3>
-    <ul>
-      {sidebar_items}
-    </ul>
-  </div>
   <div class="main">
-    <div class="content">
-      {user_content}
-    </div>
   </div>
 </body>
 </html>
 """
 # -----------------------
-# Function: Generate Mockup
 # -----------------------
-def generate_mockup(user_prompt):
-    system_prompt = (
-        "You are a Power Apps mockup generator. "
-        "Always respond with valid JSON only, no explanations. "
-        "Format: { \"sidebar\": [list of sidebar items for 'My Works'], \"content\": \"<div>...</div>\" }. "
-        "The sidebar always includes fixed defaults: Home, Recent, Pinned. "
-        "You only generate the dynamic 'My Works' items depending on the user request. "
-        "The 'content' field must contain the mockup HTML for the main screen. "
-    )
-    try:
-        response = model.generate_content(system_prompt + "\nUser Request: " + user_prompt)
-        raw_output = response.text.strip()
-        # Parse JSON safely
-        try:
-            parsed = json.loads(raw_output)
-        except json.JSONDecodeError:
-            return f"Error: Model did not return valid JSON.\n\nOutput:\n{raw_output}"
-        sidebar_items = ""
-        for item in parsed.get("sidebar", []):
-            sidebar_items += f"<li><i class='fas fa-circle'></i> {item}</li>"
-        user_html = parsed.get("content", "<div>No content generated</div>")
-        # Final HTML
-        full_html = BASE_TEMPLATE.replace("{sidebar_items}", sidebar_items)
-        full_html = full_html.replace("{user_content}", user_html)
-        # Save and screenshot
         unique_id = str(uuid.uuid4())
         html_file, img_file = f"mockup_{unique_id}.html", f"mockup_{unique_id}.png"
         with open(html_file, "w", encoding="utf-8") as f:
             f.write(full_html)
-        hti.screenshot(html_file=html_file, save_as=img_file)
         return img_file
     except Exception as e:
@@ -110,15 +230,14 @@ def generate_mockup(user_prompt):
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
-    gr.Markdown("## ⚡ Power Apps Mockup Generator with Dynamic Sidebar")
     user_input = gr.Textbox(
         label="Describe your Power Apps mockup screen",
         lines=4,
-        placeholder="Example: An employee leave management app with leave requests, approvals, and reports"
     )
     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)
 demo.launch(server_name="0.0.0.0", server_port=7860)

 from html2image import Html2Image
 import uuid
 import os
 # -----------------------
 # Configure Gemini API
 # -----------------------
 hti = Html2Image(browser_executable="/usr/bin/chromium")
+# -----------------------
+# Default Chart Snippets (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 ... """
 # -----------------------
 # 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: #2c2c2c;
+  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: #1e1e1e;
+}
+.sidebar-header span {
+  margin-right: 10px;
+  font-size: 20px;
+}
+.sidebar-item {
+  padding: 12px 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.sidebar-item span {
+  margin-right: 10px;
+}
+.sidebar-item:hover {
+  background: #444;
+}
+.sidebar-section {
+  margin-top: 15px;
+  padding: 8px 20px;
+  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;
+}
+.table-container table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.table-container th, .table-container td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.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">PowerApps Mockup</div>
   <div class="main">
+    {user_content}
   </div>
 </body>
 </html>
 """
 # -----------------------
+# Function: Generate Sidebar
 # -----------------------
+def generate_sidebar(user_prompt):
+    # Default fixed items with icons
+    fixed_items = [
+        ("🏠", "Home"),
+        ("⏱", "Recent"),
+        ("📌", "Pinned")
+    ]
+    sidebar_html = "<div class='sidebar'>"
+    sidebar_html += "<div class='sidebar-header'><span>☰</span> App Title</div>"
+    # Add fixed items
+    for icon, label in fixed_items:
+        sidebar_html += f"<div class='sidebar-item'><span>{icon}</span> {label}</div>"
+    # Separator for "My Work"
+    sidebar_html += "<div class='sidebar-section'>My Work</div>"
+    # Ask Gemini for dynamic items
+    system_prompt = (
+        "You are a Microsoft PowerApps UI assistant. "
+        "From the user requirements, extract 3-6 sidebar items for 'My Work'. "
+        "Output only a comma-separated list of names."
+    )
+    try:
+        response = model.generate_content(system_prompt + "\n" + user_prompt)
+        dynamic_items = response.text.strip().split(",")
+        dynamic_items = [item.strip() for item in dynamic_items if item.strip()]
+    except:
+        dynamic_items = ["Dashboard", "Reports"]
+    # Add icons dynamically (basic mapping, fallback ✅)
+    icon_map = {
+        "dashboard": "📊",
+        "reports": "📑",
+        "activities": "✅",
+        "approvals": "✔️",
+        "sales": "💰",
+        "leads": "👥",
+        "analytics": "📈",
+        "requests": "📩"
+    }
+    for item in dynamic_items:
+        icon = icon_map.get(item.lower(), "📁")  # default folder icon
+        sidebar_html += f"<div class='sidebar-item'><span>{icon}</span> {item}</div>"
+    sidebar_html += "</div>"
+    return sidebar_html
+# -----------------------
+# Function: Generate Mockup Image
+# -----------------------
+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>. "
+    )
+    try:
+        response = model.generate_content(system_prompt + "\n" + user_prompt)
+        user_html = response.text.strip()
+        # Clean Gemini formatting
+        if user_html.startswith("```"):
+            user_html = user_html.split("```")[1]
+            user_html = user_html.replace("html", "").strip()
+        # Fallback chart injection
+        if "bar chart" in user_prompt.lower() and "<div class=\"bar-chart\"" not in user_html:
+            user_html += DEFAULT_BAR_CHART
+        if "line chart" in user_prompt.lower() and "<div class=\"line-chart\"" not in user_html:
+            user_html += DEFAULT_LINE_CHART
+        if "pie chart" in user_prompt.lower() and "<div class=\"pie-chart\"" not in user_html:
+            user_html += DEFAULT_PIE_CHART
+        if "stacked bar" in user_prompt.lower() and "<div class=\"stacked-bar-chart\"" not in user_html:
+            user_html += DEFAULT_STACKED_BAR_CHART
+        if "donut" in user_prompt.lower() and "<div class=\"donut-chart\"" not in user_html:
+            user_html += DEFAULT_DONUT_CHART
+        # Generate sidebar dynamically
+        sidebar_html = generate_sidebar(user_prompt)
+        # Wrap inside base template
+        full_html = BASE_TEMPLATE.replace("{user_sidebar}", sidebar_html).replace("{user_content}", user_html)
+        # Save files
         unique_id = str(uuid.uuid4())
         html_file, img_file = f"mockup_{unique_id}.html", f"mockup_{unique_id}.png"
         with open(html_file, "w", encoding="utf-8") as f:
             f.write(full_html)
+        hti.screenshot(html_file=html_file, save_as=img_file)
         return img_file
     except Exception as e:
 # Gradio UI
 # -----------------------
 with gr.Blocks() as demo:
+    gr.Markdown("## ⚡ Power Apps Mockup Generator (Gemini + Gradio)")
     user_input = gr.Textbox(
         label="Describe your Power Apps mockup screen",
         lines=4,
+        placeholder="Example: A login form, OR a requests table, OR a dashboard with charts"
     )
     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)
 demo.launch(server_name="0.0.0.0", server_port=7860)