Spaces:

dina1
/

mockup_agent

Sleeping

App Files Files Community

dina1 commited on Nov 10, 2025

Commit

eb107e0

verified ·

1 Parent(s): b480129

Update agents/ui_generator.py

Browse files

Files changed (1) hide show

agents/ui_generator.py +33 -9

agents/ui_generator.py CHANGED Viewed

@@ -6,13 +6,11 @@ PROMPT = """
 You are an expert PowerApps-style UI generator and business workflow designer.
 Your goal is to create a Recruitment Management Application HTML layout that follows
 exactly the same layout, structure, and JavaScript logic as the reference QMS app design provided below.
 ### 🔧 INSTRUCTIONS
 1️⃣ Mimic the UI structure and components of the QMS reference exactly:
 - Keep the sidebar, header, and multi-screen logic identical.
 - Each .menu-item must open a corresponding .screen using the same showScreen() JS pattern.
 - Each workflow stage (like Draft → Manage → Review → etc.) should be clickable and update the workflow progress using the same logic from the reference.
 2️⃣ Adapt the content to Recruitment Workflow:
 Replace QMS-specific names with Recruitment equivalents while keeping UI consistency.
 For example:
@@ -20,19 +18,16 @@ For example:
 - “Draft / Review / Approval / Published” → “Requisition / Sourcing / Interview / Offer / Hired”
 - “Document Type / Identifier” → “Job Role / Candidate ID”
 - “Reviewer / Approver” → “Hiring Manager / HR Lead”
 3️⃣ Keep CSS and JS identical to the reference except where labels or icons differ.
 - Preserve all existing class names (e.g., .workflow-step, .screen, .menu-item, .kanban-board).
 - Only modify inner HTML and labels.
 - Keep inline scripts functional — do not remove event handlers.
 4️⃣ Functional Requirements:
 - Must be a single standalone HTML document (no markdown, no external JS).
 - Include embedded <style> and <script> tags (like the reference).
 - Maintain all transitions, dynamic toggles, and progress updates.
 - All UI parts (menu, header, cards, workflow) must remain interactive.
 - Icons should use Font Awesome 6 syntax.
 5️⃣ Sidebar and Navigation Consistency (Dynamic Rule):
 - Automatically detect all sidebar sections and menu items from the reference design’s <div class="sidebar"> block.
 - Recreate the same sidebar structure, menu hierarchy, and icons exactly as they appear in the reference.
@@ -40,11 +35,9 @@ For example:
 - Only replace text labels where the business context clearly requires recruitment-related equivalents.
 - Maintain the same onclick="showScreen('...')" mapping and active class behavior.
 - If new screens are generated from recruitment documents, append them under the most relevant section while preserving the reference menu’s ordering.
 📘 Reference Design:
 --------------------
 {reference_html}
 📄 Recruitment Document Content:
 --------------------
 {requirements}
@@ -58,6 +51,7 @@ async def generate_ui_html(requirements: Dict, reference_html: str) -> Dict:
     req_json = json.dumps(requirements, ensure_ascii=False, indent=2)
     prompt = PROMPT.format(reference_html=reference_html[:12000], requirements=req_json)
     html = await call_llm(
         prompt,
         system="Generate a standalone interactive HTML UI following the reference structure.",
@@ -65,9 +59,39 @@ async def generate_ui_html(requirements: Dict, reference_html: str) -> Dict:
         api_key=GEMINI_KEY_GENERATOR,
     )
-    # Extract only the <html> block if extra text or logs present
     match = re.search(r"(<html[\s\S]*?</html>)", html, flags=re.IGNORECASE)
     if match:
         html = match.group(1)
-    return {"html": html.strip()}

 You are an expert PowerApps-style UI generator and business workflow designer.
 Your goal is to create a Recruitment Management Application HTML layout that follows
 exactly the same layout, structure, and JavaScript logic as the reference QMS app design provided below.
 ### 🔧 INSTRUCTIONS
 1️⃣ Mimic the UI structure and components of the QMS reference exactly:
 - Keep the sidebar, header, and multi-screen logic identical.
 - Each .menu-item must open a corresponding .screen using the same showScreen() JS pattern.
 - Each workflow stage (like Draft → Manage → Review → etc.) should be clickable and update the workflow progress using the same logic from the reference.
 2️⃣ Adapt the content to Recruitment Workflow:
 Replace QMS-specific names with Recruitment equivalents while keeping UI consistency.
 For example:
 - “Draft / Review / Approval / Published” → “Requisition / Sourcing / Interview / Offer / Hired”
 - “Document Type / Identifier” → “Job Role / Candidate ID”
 - “Reviewer / Approver” → “Hiring Manager / HR Lead”
 3️⃣ Keep CSS and JS identical to the reference except where labels or icons differ.
 - Preserve all existing class names (e.g., .workflow-step, .screen, .menu-item, .kanban-board).
 - Only modify inner HTML and labels.
 - Keep inline scripts functional — do not remove event handlers.
 4️⃣ Functional Requirements:
 - Must be a single standalone HTML document (no markdown, no external JS).
 - Include embedded <style> and <script> tags (like the reference).
 - Maintain all transitions, dynamic toggles, and progress updates.
 - All UI parts (menu, header, cards, workflow) must remain interactive.
 - Icons should use Font Awesome 6 syntax.
 5️⃣ Sidebar and Navigation Consistency (Dynamic Rule):
 - Automatically detect all sidebar sections and menu items from the reference design’s <div class="sidebar"> block.
 - Recreate the same sidebar structure, menu hierarchy, and icons exactly as they appear in the reference.
 - Only replace text labels where the business context clearly requires recruitment-related equivalents.
 - Maintain the same onclick="showScreen('...')" mapping and active class behavior.
 - If new screens are generated from recruitment documents, append them under the most relevant section while preserving the reference menu’s ordering.
 📘 Reference Design:
 --------------------
 {reference_html}
 📄 Recruitment Document Content:
 --------------------
 {requirements}
     req_json = json.dumps(requirements, ensure_ascii=False, indent=2)
     prompt = PROMPT.format(reference_html=reference_html[:12000], requirements=req_json)
+    print("🚀 [UI Generator] Sending prompt to Gemini...")
     html = await call_llm(
         prompt,
         system="Generate a standalone interactive HTML UI following the reference structure.",
         api_key=GEMINI_KEY_GENERATOR,
     )
+    # Debug preview
+    print("🔧 Raw Gemini output (first 400 chars):\n", html[:400])
+    # ==========================================================
+    # 🧼 CLEANUP PHASE — remove markdown, explanations, artifacts
+    # ==========================================================
+    if not html or len(html.strip()) < 20:
+        raise ValueError("Gemini returned an empty or invalid response.")
+    # Remove markdown code fences (```html ... ``` or ```)
+    html = re.sub(r"^```html", "", html.strip(), flags=re.IGNORECASE | re.MULTILINE)
+    html = re.sub(r"^```", "", html.strip(), flags=re.MULTILINE)
+    html = re.sub(r"```$", "", html.strip(), flags=re.MULTILINE)
+    # Remove common prefix like "Here’s your HTML:" or "Sure, here is"
+    html = re.sub(r"^(Here[’']?s|Sure,|OK,|Below is|Here is).*?<html", "<html", html, flags=re.IGNORECASE | re.DOTALL)
+    # ==========================================================
+    # 🧩 EXTRACT OR WRAP HTML
+    # ==========================================================
     match = re.search(r"(<html[\s\S]*?</html>)", html, flags=re.IGNORECASE)
     if match:
         html = match.group(1)
+    else:
+        print("⚠️ No <html> tag found — wrapping raw output manually.")
+        html = f"<html><body>{html}</body></html>"
+    # ==========================================================
+    # ✅ FINAL VALIDATION
+    # ==========================================================
+    if "<html" not in html or "</html>" not in html:
+        raise ValueError("Generated HTML missing <html> structure after cleaning.")
+    print(f"✅ [UI Generator] Cleaned HTML ready — length {len(html)} chars")
+    return {"html": html.strip()}