Spaces:
Sleeping
Sleeping
File size: 2,580 Bytes
6e4b85e 5b769a5 6e4b85e 7eec9cb 46dad67 fd0d99b 31beef4 46dad67 31beef4 7eec9cb 6e4b85e 31beef4 7eec9cb 1ff23ba 31beef4 1836b2b 31beef4 1836b2b 31beef4 46dad67 6e4b85e 46dad67 8e7a9cf 5b769a5 a2fd7cc 5b769a5 31beef4 5b769a5 a2fd7cc 8e7a9cf a2fd7cc 6e4b85e 8e7a9cf 31beef4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
from langchain_core.messages import AIMessage
from utils.inference import call_model
import re
def run(state):
architecture = state["architecture"]
user_prompt = state["messages"][0].content
prompt = f"""
You are a senior front-end developer. Generate a complete modern HTML page with embedded CSS that visually matches the user's request and UI architecture.
🧾 User Prompt:
"{user_prompt}"
📐 UI Architecture:
{architecture}
✅ Output Requirements:
- Start with <!DOCTYPE html> and end with </html>
- All CSS must be inside a <style> tag in the <head>
- Use semantic HTML5 tags: <nav>, <header>, <section>, <footer>, etc.
🎨 Visual Requirements:
- Navigation bar:
- Fixed to top with background color
- Horizontal <ul><li><a> layout centered using flexbox
- Hover effect on links
- Hero section:
- Full-screen height
- Background image via Unsplash based on prompt theme
- Semi-transparent dark overlay
- Centered headline and subheadline with readable white text
- A call-to-action button styled with .btn
- Section layout:
- Use <section> with class .section
- Alternate light/dark backgrounds (.section--light and .section--dark)
- Limit content width with a .container class (max-width: 1200px)
- Buttons:
- Use class .btn with hover effect, padding, rounded corners
- Accent color (e.g. #007BFF) with hover shade
- Footer:
- Dark background, centered text, padding
📱 Responsiveness:
- Use Flexbox/Grid
- Stack nav items vertically on small screens (<768px)
- Adjust padding/font-size
🚫 Do NOT:
- Include <link> or external stylesheets
- Use markdown or explanations
- Leave any element unstyled
Return only the final HTML code.
"""
output = call_model(prompt)
cleaned = re.sub(r"```(?:html|css)?", "", output).strip()
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:
final_html = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generated UI</title>
<style>
body {{
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
}}
header, footer {{
padding: 1rem;
background-color: #333;
color: #fff;
text-align: center;
}}
</style>
</head>
<body>
{cleaned}
</body>
</html>"""
return {
"messages": state["messages"] + [AIMessage(content=final_html)],
"html_output": final_html
} |