Hugging Face's logo

Spaces:
Rahul-8799
/
MAC_UI
Sleeping

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

Update agents/software_engineer.py

Browse files
Files changed (1) hide show
  1. agents/software_engineer.py +32 -18
agents/software_engineer.py CHANGED
@@ -6,41 +6,55 @@ def run(state):
6
  architecture = state["architecture"]
7
  user_prompt = state["messages"][0].content
8
 
9
- prompt = f"""You are a front-end engineer. Generate a fully styled and responsive HTML page with embedded CSS based on the user's request and the architecture plan below.
 
10
 
11
- User Prompt:
12
  "{user_prompt}"
13
 
14
- Architecture Plan:
15
  {architecture}
16
 
17
- Guidelines:
18
- - Your output must be a complete HTML document starting with <!DOCTYPE html> and ending with </html>
19
- - Use embedded CSS only (inside <style> tags in <head>)
20
- - Add a top-fixed navigation bar with 3-4 nav items (Home, About, Contact, etc.)
21
- - Add a full-width hero section with a background image from https://source.unsplash.com matching the theme (e.g., yoga, car, cafe)
22
- - Add at least 3 responsive content sections styled as cards
23
- - Include a styled footer with contact or copyright info
24
- - Use a clean, modern color palette
25
- - Make it mobile-friendly using media queries (stack cards, adjust nav)
26
- - No markdown, no commentary, no extra explanation — only raw HTML
 
 
 
27
 
28
- Focus strictly on the theme inferred from the prompt (e.g., coffee shop, car rental, travel agency). Do not generate yoga-related or unrelated templates unless it matches the prompt.
 
 
 
 
 
 
 
 
 
 
 
29
  """
30
 
31
  output = call_model(prompt)
32
 
33
- # Clean markdown remnants if any
34
  cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
35
 
36
- # Extract final HTML
37
  matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
38
  if matches:
39
  final_html = matches[0]
40
  elif cleaned.lower().startswith("<!doctype"):
41
  final_html = cleaned
42
  else:
43
- # fallback: wrap in valid HTML
44
  final_html = f"""<!DOCTYPE html>
45
  <html lang="en">
46
  <head>
@@ -49,8 +63,8 @@ Focus strictly on the theme inferred from the prompt (e.g., coffee shop, car ren
49
  <style>
50
  body {{
51
  font-family: Arial, sans-serif;
52
- background-color: #f4f4f4;
53
  padding: 2rem;
 
54
  }}
55
  </style>
56
  </head>
 
6
  architecture = state["architecture"]
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
  <style>
64
  body {{
65
  font-family: Arial, sans-serif;
 
66
  padding: 2rem;
67
+ background-color: #f5f5f5;
68
  }}
69
  </style>
70
  </head>