Spaces:
Sleeping
Sleeping
| from langchain_core.messages import AIMessage | |
| from utils.inference import call_model | |
| import re | |
| def run(state): | |
| design = state["architecture"] | |
| prompt = f"""You are a front-end engineer. Create a complete HTML page with embedded CSS for the following UI design: | |
| {design} | |
| Requirements: | |
| - Self-contained HTML document with <!DOCTYPE> | |
| - CSS must be embedded in <style> inside <head> | |
| - Design should reflect the user’s theme (e.g., yoga site, fintech dashboard, travel blog, etc.) | |
| - Use a mobile-responsive layout (flex/grid, media queries) | |
| - Include common web elements like a header, hero section, content cards, and footer | |
| - Only return the final HTML. Do NOT explain or include markdown. Do NOT include planning or wireframes. | |
| """ | |
| output = call_model(prompt) | |
| # Remove any markdown fences or extra explanations | |
| cleaned = re.sub(r"```(?:html|css)?", "", output).strip() | |
| # Try to extract a clean HTML document | |
| 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: | |
| # If malformed, wrap it in a basic HTML structure | |
| final_html = f"""<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Generated UI</title> | |
| <style> | |
| body {{ | |
| font-family: Arial, sans-serif; | |
| padding: 2rem; | |
| background-color: #f4f4f4; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| {cleaned} | |
| </body> | |
| </html>""" | |
| return { | |
| "messages": state["messages"] + [AIMessage(content=final_html)], | |
| "html_output": final_html | |
| } | |