Spaces:

Rahul-8799
/

MAC_UI

Sleeping

App Files Files Community

Rahul-8799 commited on May 9, 2025

Commit

1ff23ba

verified ·

1 Parent(s): 46dad67

Update agents/software_engineer.py

Browse files

Files changed (1) hide show

agents/software_engineer.py +15 -10

agents/software_engineer.py CHANGED Viewed

@@ -5,32 +5,37 @@ import re
 def run(state):
     design = state["architecture"]
-    prompt = f"""You are a front-end engineer. Create a complete HTML page with embedded CSS for the following UI design:
 {design}
 Requirements:
-- Self-contained HTML document with <!DOCTYPE>
-- CSS must be embedded in <style> inside <head>
-- Design should reflect the user’s theme (e.g., yoga site, fintech dashboard, travel blog, etc.)
-- Use a mobile-responsive layout (flex/grid, media queries)
-- Include common web elements like a header, hero section, content cards, and footer
-- Only return the final HTML. Do NOT explain or include markdown. Do NOT include planning or wireframes.
 """
     output = call_model(prompt)
-    # Remove any markdown fences or extra explanations
     cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
-    # Try to extract a clean HTML document
     matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
     if matches:
         final_html = matches[0]
     elif cleaned.lower().startswith("<!doctype"):
         final_html = cleaned
     else:
-        # If malformed, wrap it in a basic HTML structure
         final_html = f"""<!DOCTYPE html>
 <html lang="en">
 <head>

 def run(state):
     design = state["architecture"]
+    prompt = f"""You are a front-end engineer. Your task is to generate a fully styled, professional-looking website as a complete HTML document, based on the following UI design specification:
 {design}
 Requirements:
+- Output must be a complete HTML page, starting with <!DOCTYPE html> and ending with </html>
+- CSS should be embedded in <style> within the <head> (do NOT link external CSS)
+- Use a visually appealing color palette appropriate to the theme (e.g., yoga, fintech, photography, etc.)
+- Use responsive layout (Flexbox or Grid) and mobile-friendly design
+- Include a header, a hero section with image or bold title, at least 3 content cards/sections, and a footer
+- If applicable, include a contact or testimonial section
+- Use realistic placeholder images from https://source.unsplash.com
+- NEVER return markdown formatting or explanations — just raw HTML only
+- Structure the page in a way that makes sense for the theme (yoga, tech, travel, art, etc.)
+Only return the raw HTML. Do NOT explain the code or include commentary.
 """
     output = call_model(prompt)
+    # 🧹 Clean up markdown (if model still adds it)
     cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
+    # 🛡 Extract just one clean HTML document
     matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
     if matches:
         final_html = matches[0]
     elif cleaned.lower().startswith("<!doctype"):
         final_html = cleaned
     else:
+        # Fallback: wrap whatever came back
         final_html = f"""<!DOCTYPE html>
 <html lang="en">
 <head>