Hugging Face's logo

Spaces:
Rahul-8799
/
MAC_UI
Sleeping

App Files Community
3
Rahul-8799 commited on
Commit
ed2734f
·
verified ·
1 Parent(s): fd0d99b

Update agents/software_engineer.py

Browse files
Files changed (1) hide show
  1. agents/software_engineer.py +27 -29
agents/software_engineer.py CHANGED
@@ -7,54 +7,52 @@ def run(state):
7
  user_prompt = state["messages"][0].content
8
 
9
  prompt = f"""
10
- You are a senior front-end engineer. Based on the user's request and the UI design plan below, generate a fully styled, modern HTML page with embedded CSS.
11
 
12
- User Request:
13
  "{user_prompt}"
14
 
15
- UI Design Plan:
16
  {architecture}
17
 
18
- ✅ HTML Requirements:
19
- - Use a clean modern design, starting with <!DOCTYPE html> and ending with </html>
20
- - Add a fixed top navigation bar with visible branding and 3–4 nav links
21
- - Add a <section class="hero"> with:
22
- - A full-screen background image matching the theme (e.g., car, cafe, yoga)
23
- - A centered headline and optional subtext
24
- - A semi-transparent dark overlay for contrast
25
- - Add 2–4 visually styled content sections (like cards or blocks) with:
26
- - Headings
27
- - Paragraphs
28
- - Optional images from https://source.unsplash.com
29
- - At least one call-to-action button in any section
30
- - Add a styled footer with basic contact or copyright info
31
 
32
- 🎨 Styling Requirements:
33
- - Use embedded <style> in <head>, no external CSS
34
- - Use Google-style modern color palette (e.g., #f8f9fa background, #333 text)
35
- - All sections should have spacing and visual hierarchy (margin, padding, background)
36
- - Make it fully responsive using flexbox/grid and @media queries
37
- - Use system or Google-friendly fonts (Arial, Helvetica, sans-serif)
38
 
39
- ⚠️ IMPORTANT:
40
- - Never generate yoga or unrelated themes unless prompted
41
- - DO NOT include markdown, code fences, or explanation — return ONLY the raw HTML code
 
42
 
43
- Output: Final valid HTML code only.
44
  """
45
 
46
  output = call_model(prompt)
47
 
48
- # Clean model output
49
  cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
50
 
51
- # Try to extract full HTML
52
  matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
53
  if matches:
54
  final_html = matches[0]
55
  elif cleaned.lower().startswith("<!doctype"):
56
  final_html = cleaned
57
  else:
 
58
  final_html = f"""<!DOCTYPE html>
59
  <html lang="en">
60
  <head>
@@ -63,8 +61,8 @@ Output: Final valid HTML code only.
63
  <style>
64
  body {{
65
  font-family: Arial, sans-serif;
 
66
  padding: 2rem;
67
- background-color: #f5f5f5;
68
  }}
69
  </style>
70
  </head>
 
7
  user_prompt = state["messages"][0].content
8
 
9
  prompt = f"""
10
+ You are a front-end engineer. Generate a fully functional, styled HTML page with embedded CSS based on the prompt and UI architecture below.
11
 
12
+ 🧾 User Prompt:
13
  "{user_prompt}"
14
 
15
+ 📐 Architecture Plan:
16
  {architecture}
17
 
18
+ 🎨 Design and Layout Requirements:
19
+ - Fixed top navigation bar styled with `.navbar`, with links horizontally centered
20
+ - Use `<nav><ul><li><a></a></li></ul></nav>` and style it with flexbox: center items horizontally, add background color
21
+ - Add a `.hero` section:
22
+ - Full screen height
23
+ - Background image matching the theme via Unsplash
24
+ - A semi-transparent dark overlay (`rgba(0,0,0,0.6)`) behind white centered text
25
+ - Include at least 3 content sections:
26
+ - Headline (`<h2>`), text, button
27
+ - Optional section background colors (light gray/white alternation)
28
+ - Buttons with `.btn` class must look visually appealing with hover effects
29
+ - Add a `.footer` at the bottom with padding and centered text
 
30
 
31
+ 📱 Responsiveness:
32
+ - Add `@media` queries to stack nav links vertically on narrow screens
33
+ - Make text and sections adapt fluidly to different screen sizes
 
 
 
34
 
35
+ 🧼 HTML Rules:
36
+ - Use <style> in the <head> for all CSS
37
+ - No markdown, no code fences, no explanation — only valid HTML
38
+ - Final output must be a complete HTML page (start with <!DOCTYPE html>)
39
 
40
+ Your output will be rendered directly in a browser.
41
  """
42
 
43
  output = call_model(prompt)
44
 
45
+ # Cleanup model response
46
  cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
47
 
48
+ # Extract clean HTML
49
  matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
50
  if matches:
51
  final_html = matches[0]
52
  elif cleaned.lower().startswith("<!doctype"):
53
  final_html = cleaned
54
  else:
55
+ # Fallback wrapper
56
  final_html = f"""<!DOCTYPE html>
57
  <html lang="en">
58
  <head>
 
61
  <style>
62
  body {{
63
  font-family: Arial, sans-serif;
64
+ background-color: #f4f4f4;
65
  padding: 2rem;
 
66
  }}
67
  </style>
68
  </head>