Spaces:
Sleeping
Sleeping
Update agents/software_engineer.py
Browse files- agents/software_engineer.py +25 -17
agents/software_engineer.py
CHANGED
|
@@ -3,39 +3,47 @@ from utils.inference import call_model
|
|
| 3 |
import re
|
| 4 |
|
| 5 |
def run(state):
|
| 6 |
-
|
|
|
|
| 7 |
|
| 8 |
-
prompt = f"""You are a front-end engineer.
|
| 9 |
|
| 10 |
-
|
|
|
|
| 11 |
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
- CSS should be embedded in <style> within the <head> (do NOT link external CSS)
|
| 15 |
-
- Use a visually appealing color palette appropriate to the theme (e.g., yoga, fintech, photography, etc.)
|
| 16 |
-
- Use responsive layout (Flexbox or Grid) and mobile-friendly design
|
| 17 |
-
- Include a header, a hero section with image or bold title, at least 3 content cards/sections, and a footer
|
| 18 |
-
- If applicable, include a contact or testimonial section
|
| 19 |
-
- Use realistic placeholder images from https://source.unsplash.com
|
| 20 |
-
- NEVER return markdown formatting or explanations — just raw HTML only
|
| 21 |
-
- Structure the page in a way that makes sense for the theme (yoga, tech, travel, art, etc.)
|
| 22 |
|
| 23 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
"""
|
| 25 |
|
| 26 |
output = call_model(prompt)
|
| 27 |
|
| 28 |
-
#
|
| 29 |
cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
|
| 30 |
|
| 31 |
-
#
|
| 32 |
matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
|
| 33 |
if matches:
|
| 34 |
final_html = matches[0]
|
| 35 |
elif cleaned.lower().startswith("<!doctype"):
|
| 36 |
final_html = cleaned
|
| 37 |
else:
|
| 38 |
-
# Fallback
|
| 39 |
final_html = f"""<!DOCTYPE html>
|
| 40 |
<html lang="en">
|
| 41 |
<head>
|
|
|
|
| 3 |
import re
|
| 4 |
|
| 5 |
def run(state):
|
| 6 |
+
architecture = state["architecture"]
|
| 7 |
+
user_prompt = state["messages"][0].content
|
| 8 |
|
| 9 |
+
prompt = f"""You are a front-end engineer. Based on the following project prompt and architecture plan, generate a fully functional HTML page with embedded CSS.
|
| 10 |
|
| 11 |
+
User Prompt:
|
| 12 |
+
"{user_prompt}"
|
| 13 |
|
| 14 |
+
Architecture Plan:
|
| 15 |
+
{architecture}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
|
| 17 |
+
Your HTML output should:
|
| 18 |
+
- Be visually aligned with the theme of the project (e.g., car rental, gym, fintech, portfolio)
|
| 19 |
+
- Start with <!DOCTYPE html> and end with </html>
|
| 20 |
+
- Embed all CSS inside <style> in the <head> section
|
| 21 |
+
- Be fully mobile-responsive (use flex/grid, media queries)
|
| 22 |
+
- Include:
|
| 23 |
+
- A <header> with brand/title
|
| 24 |
+
- A hero section with background image and call-to-action
|
| 25 |
+
- At least 3 visually distinct content sections
|
| 26 |
+
- A footer with contact or links
|
| 27 |
+
- Use realistic images (e.g., cars for car rental) via https://source.unsplash.com
|
| 28 |
+
- Use professional design choices (padding, spacing, color palette)
|
| 29 |
+
- Only return the raw HTML — no explanation, markdown, or commentary
|
| 30 |
+
|
| 31 |
+
NOTE: Focus on the correct topic (e.g., CAR RENTAL) based on the prompt. Do not reuse other examples like yoga or studios.
|
| 32 |
"""
|
| 33 |
|
| 34 |
output = call_model(prompt)
|
| 35 |
|
| 36 |
+
# Remove markdown if added
|
| 37 |
cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
|
| 38 |
|
| 39 |
+
# Extract valid HTML
|
| 40 |
matches = re.findall(r"<!DOCTYPE html>.*?</html>", cleaned, flags=re.DOTALL | re.IGNORECASE)
|
| 41 |
if matches:
|
| 42 |
final_html = matches[0]
|
| 43 |
elif cleaned.lower().startswith("<!doctype"):
|
| 44 |
final_html = cleaned
|
| 45 |
else:
|
| 46 |
+
# Fallback wrapper
|
| 47 |
final_html = f"""<!DOCTYPE html>
|
| 48 |
<html lang="en">
|
| 49 |
<head>
|