Update app.py

app.py

@@ -3,7 +3,6 @@ import gradio as gr
 from html2image import Html2Image
 import uuid
 import os
-import re
 
 # -----------------------
 # Configure Gemini API
@@ -29,70 +28,11 @@ SVG_FLUENT = {
 # -----------------------
 # Default Chart Snippets
 # -----------------------
-DEFAULT_BAR_CHART = """
-<div class="chart-container">
-  <div class="chart-title">Sample Bar Chart</div>
-  <div class="bar-chart">
-    <div class="bar" style="height:40%; background:#0078d4;"><div class="bar-label">Jan</div></div>
-    <div class="bar" style="height:70%; background:#0078d4;"><div class="bar-label">Feb</div></div>
-    <div class="bar" style="height:90%; background:#0078d4;"><div class="bar-label">Mar</div></div>
-  </div>
-</div>
-"""
-
-DEFAULT_LINE_CHART = """
-<div class="chart-container">
-  <div class="chart-title">Sample Line Chart</div>
-  <div class="line-chart">
-    <div class="line-point" style="bottom:40px;"><div class="line-label">Jan</div></div>
-    <div class="line-point" style="bottom:80px;"><div class="line-label">Feb</div></div>
-    <div class="line-point" style="bottom:60px;"><div class="line-label">Mar</div></div>
-    <div class="line-path"><svg><polyline points="10,120 80,60 150,90" /></svg></div>
-  </div>
-</div>
-"""
-
-DEFAULT_PIE_CHART = """
-<div class="chart-container">
-  <div class="chart-title">Sample Pie Chart</div>
-  <div class="pie-chart">
-    <div class="slice" style="background:#0078d4; clip-path:polygon(50% 50%, 100% 50%, 100% 0, 50% 0);"></div>
-    <div class="slice" style="background:#ff9900; clip-path:polygon(50% 50%, 100% 0, 50% 0, 0 0);"></div>
-    <div class="slice" style="background:#33cc33; clip-path:polygon(50% 50%, 0 0, 0 50%, 50% 50%);"></div>
-  </div>
-  <div class="legend">
-    <div class="legend-item"><span class="legend-color" style="background:#0078d4"></span> A</div>
-    <div class="legend-item"><span class="legend-color" style="background:#ff9900"></span> B</div>
-    <div class="legend-item"><span class="legend-color" style="background:#33cc33"></span> C</div>
-  </div>
-</div>
-"""
-
-DEFAULT_STACKED_BAR_CHART = """
-<div class="chart-container">
-  <div class="chart-title">Sample Stacked Bar</div>
-  <div class="stacked-bar-chart">
-    <div class="stacked-bar">
-      <div class="stacked-bar-segment" style="width:40%; background:#0078d4"></div>
-      <div class="stacked-bar-segment" style="width:30%; background:#ff9900"></div>
-      <div class="stacked-bar-segment" style="width:30%; background:#33cc33"></div>
-    </div>
-  </div>
-</div>
-"""
-
-DEFAULT_DONUT_CHART = """
-<div class="chart-container">
-  <div class="chart-title">Sample Donut Chart</div>
-  <div class="donut-chart">
-    <div class="donut-label">75%</div>
-  </div>
-  <div class="legend">
-    <div class="legend-item"><span class="legend-color" style="background:#0078d4"></span> Completed</div>
-    <div class="legend-item"><span class="legend-color" style="background:#ddd"></span> Pending</div>
-  </div>
-</div>
-"""
+DEFAULT_BAR_CHART = """<div class='chart-container'><div class='chart-title'>Sample Bar Chart</div></div>"""
+DEFAULT_LINE_CHART = """<div class='chart-container'><div class='chart-title'>Sample Line Chart</div></div>"""
+DEFAULT_PIE_CHART = """<div class='chart-container'><div class='chart-title'>Sample Pie Chart</div></div>"""
+DEFAULT_STACKED_BAR_CHART = """<div class='chart-container'><div class='chart-title'>Sample Stacked Bar Chart</div></div>"""
+DEFAULT_DONUT_CHART = """<div class='chart-container'><div class='chart-title'>Sample Donut Chart</div></div>"""
 
 # -----------------------
 # Base PowerApps Layout
@@ -132,8 +72,7 @@ body {
   cursor: pointer;
   display: flex;
   align-items: center;
-  position: relative;
-  transition: background 0.2s ease, color 0.2s ease;
+  transition: background 0.2s ease;
 }
 .sidebar-item svg {
   width: 18px;
@@ -148,23 +87,6 @@ body {
   text-transform: uppercase;
 }
 
-/* ---------- animated accent ---------- */
-.sidebar-item::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 0;
-  background-color: #0078d4;
-  border-radius: 0 3px 3px 0;
-  transition: width 0.3s ease;
-}
-.sidebar-item.active::before,
-.sidebar-item:hover::before {
-  width: 4px;
-}
-
 /* ---------- dark theme ---------- */
 .dark-theme {
   background: #2d2d2d;
@@ -228,18 +150,6 @@ body {
 </html>
 """
 
-# -----------------------
-# Function: Adjust SVG Color
-# -----------------------
-def adjust_svg_color(svg_code, theme_class):
-    if not svg_code:
-        return svg_code
-    if theme_class == "dark-theme":
-        svg_code = re.sub(r'fill="[^"]*"', 'fill="#fff"', svg_code)
-    else:
-        svg_code = re.sub(r'fill="[^"]*"', 'fill="#000"', svg_code)
-    return svg_code
-
 # -----------------------
 # Function: Generate Sidebar
 # -----------------------
@@ -249,19 +159,19 @@ def generate_sidebar(user_prompt):
     sidebar_html = f"<div class='sidebar {theme_class}'>"
     sidebar_html += f"<div class='sidebar-header'>{SVG_FLUENT['hamburger']} App Title</div>"
 
-    # Default fixed items
-    sidebar_html += f"<div class='sidebar-item'>{SVG_FLUENT['home']} <span>Home</span></div>"
+    # Default fixed items (SVG icons)
+    sidebar_html += f"<div class='sidebar-item active'>{SVG_FLUENT['home']} <span>Home</span></div>"
     sidebar_html += f"<div class='sidebar-item'>{SVG_FLUENT['recent']} <span>Recent</span></div>"
     sidebar_html += f"<div class='sidebar-item'>{SVG_FLUENT['pinned']} <span>Pinned</span></div>"
 
     sidebar_html += "<div class='sidebar-section'>My Work</div>"
 
-    # Ask Gemini to generate items with active state
+    # Ask Gemini to generate both labels and SVGs for My Work
     system_prompt = (
-        "You are a PowerApps UI assistant. Based on the user's requirements, "
-        "create 3–6 sidebar items under 'My Work'. Each must have a label and a Fluent-style SVG icon. "
-        "Also identify the most relevant one as 'active'. "
-        "Output format: Label | <svg ...></svg> | active OR inactive, Label | <svg ...></svg> | active OR inactive ..."
+        "You are a PowerApps UI design assistant. "
+        "Based on the user's requirements, create 3–6 sidebar items for the 'My Work' section. "
+        "Each item must include a descriptive label and its Fluent-style SVG icon. "
+        "Output strictly in the format: Label | <svg ...></svg> , Label | <svg ...></svg>"
     )
 
     try:
@@ -271,23 +181,17 @@ def generate_sidebar(user_prompt):
         items = []
         for pair in generated_text.split(","):
             parts = pair.strip().split("|")
-            if len(parts) >= 3:
+            if len(parts) == 2:
                 label = parts[0].strip()
                 svg = parts[1].strip()
-                state = parts[2].strip().lower()
-                svg = adjust_svg_color(svg, theme_class)
-                is_active = "active" if "active" in state else ""
-                items.append((label, svg, is_active))
+                items.append((label, svg))
 
-        for label, svg, is_active in items:
-            sidebar_html += f"<div class='sidebar-item {is_active}'>{svg}<span>{label}</span></div>"
+        for label, svg in items:
+            sidebar_html += f"<div class='sidebar-item'>{svg}<span>{label}</span></div>"
 
-    except Exception:
-        fallback_svg = adjust_svg_color(
-            "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='#0078d4'/></svg>",
-            theme_class
-        )
-        sidebar_html += f"<div class='sidebar-item active'>{fallback_svg}<span>Dashboard</span></div>"
+    except Exception as e:
+        # fallback
+        sidebar_html += "<div class='sidebar-item'><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='#0078d4'/></svg><span>Dashboard</span></div>"
 
     sidebar_html += "</div>"
     return sidebar_html
@@ -299,18 +203,19 @@ 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>."
+        "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()
 
-        # Chart fallbacks
+        # 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:
@@ -345,7 +250,7 @@ with gr.Blocks() as demo:
     user_input = gr.Textbox(
         label="Describe your Power Apps mockup screen",
         lines=4,
-        placeholder="Example: A light dashboard with reports and approvals section"
+        placeholder="Example: A dark dashboard with reports and approvals section"
     )
     generate_btn = gr.Button("Generate Mockup")
     image_output = gr.Image(label="Mockup Preview")