Spaces:

Rahul-8799
/

MAC_UI

Sleeping

App Files Files Community

Rahul-8799 commited on May 9, 2025

Commit

1836b2b

verified ·

1 Parent(s): ed2734f

Update agents/software_engineer.py

Browse files

Files changed (1) hide show

agents/software_engineer.py +35 -27

agents/software_engineer.py CHANGED Viewed

@@ -7,52 +7,60 @@ def run(state):
     user_prompt = state["messages"][0].content
     prompt = f"""
-You are a front-end engineer. Generate a fully functional, styled HTML page with embedded CSS based on the prompt and UI architecture below.
-🧾 User Prompt:
 "{user_prompt}"
-📐 Architecture Plan:
 {architecture}
-🎨 Design and Layout Requirements:
-- Fixed top navigation bar styled with `.navbar`, with links horizontally centered
-- Use `<nav><ul><li><a></a></li></ul></nav>` and style it with flexbox: center items horizontally, add background color
-- Add a `.hero` section:
-  - Full screen height
-  - Background image matching the theme via Unsplash
-  - A semi-transparent dark overlay (`rgba(0,0,0,0.6)`) behind white centered text
-- Include at least 3 content sections:
-  - Headline (`<h2>`), text, button
-  - Optional section background colors (light gray/white alternation)
-- Buttons with `.btn` class must look visually appealing with hover effects
-- Add a `.footer` at the bottom with padding and centered text
-📱 Responsiveness:
-- Add `@media` queries to stack nav links vertically on narrow screens
-- Make text and sections adapt fluidly to different screen sizes
-🧼 HTML Rules:
-- Use <style> in the <head> for all CSS
-- No markdown, no code fences, no explanation — only valid HTML
-- Final output must be a complete HTML page (start with <!DOCTYPE html>)
-Your output will be rendered directly in a browser.
 """
     output = call_model(prompt)
-    # Cleanup model response
     cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
-    # Extract clean HTML
     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 wrapper
         final_html = f"""<!DOCTYPE html>
 <html lang="en">
 <head>

     user_prompt = state["messages"][0].content
     prompt = f"""
+You are a senior front-end engineer. Based on the user prompt and architecture, generate a beautiful, fully responsive HTML page with embedded CSS.
+User Prompt:
 "{user_prompt}"
+UI Design Plan:
 {architecture}
+🎨 Design Requirements:
+- Full HTML page starting with <!DOCTYPE html>
+- Use semantic HTML5 tags: <nav>, <section>, <footer>, etc.
+- Fixed top `.navbar` with horizontally centered links (not floating), styled with padding, hover states, and active class
+- Hero section:
+  - Full viewport height
+  - Unsplash image background based on the theme (car, travel, food, etc.)
+  - A dark overlay using `rgba(0,0,0,0.6)`
+  - Centered text and a button styled as `.btn`
+- Content:
+  - Use `.container` with `max-width: 1200px; margin: auto;`
+  - 3 content sections styled with `.section` class, using alternating background colors (#fff, #f9f9f9)
+  - Each section must have a heading, paragraph, and one `.btn`
+- Footer:
+  - Centered, with solid dark background and padding
+- Color Palette:
+  - Use a visually appealing modern palette (not default black/gray)
+  - Accent color for buttons and nav hover states
+- Typography:
+  - Use system font stack or Google Fonts if needed
+- Responsiveness:
+  - Use Flexbox or Grid
+  - Add media queries for < 768px screens
+  - Stack nav items and center hero text on mobile
+🚫 DO NOT:
+- Return markdown or explanations
+- Include duplicate HTML tags
+- Forget to close any HTML tag
+Return only the final clean HTML code.
 """
     output = call_model(prompt)
+    # Clean markdown or triple backticks if any
     cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
+    # Extract valid HTML content
     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:
+        # Wrap fallback
         final_html = f"""<!DOCTYPE html>
 <html lang="en">
 <head>