Spaces:

Rahul-8799
/

MAC_UI

Sleeping

App Files Files Community

Rahul-8799 commited on May 9, 2025

Commit

ea519a9

verified ·

1 Parent(s): cbc2771

Update app.py by S

Browse files

Files changed (1) hide show

app.py +30 -77

app.py CHANGED Viewed

@@ -5,61 +5,16 @@ from bs4 import BeautifulSoup
 from langchain_core.messages import HumanMessage
 from utils.langgraph_pipeline import run_pipeline_and_save
 TEMP_DIR = "generated_output"
 os.makedirs(TEMP_DIR, exist_ok=True)
-# Tailwind HTML layout with placeholder for title and content
-TAILWIND_TEMPLATE = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>{title}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-</head>
-<body class="bg-white text-gray-800 font-sans leading-relaxed antialiased">
-  <header class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6 text-white shadow">
-    <div class="max-w-7xl mx-auto text-center">
-      <h1 class="text-3xl font-bold">{title}</h1>
-      <p class="text-lg mt-2">Generated by our multi-agent AI system</p>
-    </div>
-  </header>
-  <main class="max-w-5xl mx-auto px-6 py-10 space-y-10">
-    {content}
-  </main>
-  <footer class="bg-gray-100 text-center text-sm text-gray-500 py-4">
-    &copy; 2025 Multi-Agent Generator. All rights reserved.
-  </footer>
-</body>
-</html>
-"""
-# Try to extract the body content and remove nested HTML/head/style
-def clean_agent_html(raw_html: str):
     soup = BeautifulSoup(raw_html, "html.parser")
-    # If nested HTML exists, extract body content
-    if soup.body:
-        return soup.body.decode_contents()
-    # Otherwise remove common structural tags
-    for tag in soup(["html", "head", "body", "style", "script"]):
-        tag.decompose()
-    return str(soup)
-# Build final HTML by injecting cleaned content and a dynamic title
-def format_html(agent_html: str, user_input: str):
-    content = clean_agent_html(agent_html)
-    # Try to infer a title from user input (e.g., "yoga retreat" becomes "Yoga Retreat")
-    title = user_input.split("for")[-1].strip().capitalize() if "for" in user_input.lower() else "Generated Website"
-    final_html = TAILWIND_TEMPLATE.format(title=title, content=content)
-    return BeautifulSoup(final_html, "html.parser").prettify()
-# Save output files to zip
 def save_files(html: str, log: str):
     html_path = os.path.join(TEMP_DIR, "ui.html")
     log_path = os.path.join(TEMP_DIR, "agent_log.txt")
@@ -77,47 +32,44 @@ def save_files(html: str, log: str):
     return html_path, log_path, zip_path
-# Main logic with formatting + preview
 def process(user_input):
     messages = [HumanMessage(content=user_input)]
     final_state = run_pipeline_and_save(messages)
     raw_html = final_state["html_output"]
-    cleaned_html = format_html(raw_html, user_input)
     log = "\n\n".join([f"{msg.type.upper()}: {msg.content}" for msg in final_state["messages"]])
-    html_file, log_file, zip_file = save_files(cleaned_html, log)
-    escaped = cleaned_html.replace('"', "&quot;")
-    preview = f"<iframe srcdoc='{escaped}' width='100%' height='600px' style='border:1px solid #ccc; border-radius:8px;'></iframe>"
-    return preview, cleaned_html, log, html_file, log_file, zip_file
 # Gradio UI
-with gr.Blocks(css=".gr-box { border-radius: 12px; padding: 10px; }") as demo:
-    gr.Markdown("## 🤖 Multi-Agent UI Generator")
-    gr.Markdown("Describe your dream website and let our agents generate a styled, responsive layout using TailwindCSS.")
-    user_prompt = gr.Textbox(
-        label="💬 Describe Your Web Page",
-        lines=4,
-        value="Create a yoga retreat homepage with a hero section, class schedule, testimonials, and contact info."
-    )
-    run_btn = gr.Button("🚀 Generate")
-    with gr.Tab("🌐 Website Preview"):
-        preview_html = gr.HTML()
-    with gr.Tab("🧩 HTML Code & Agent Log"):
-        with gr.Row():
-            html_output = gr.Textbox(label="🖥️ Final HTML Code", lines=15, interactive=True, show_copy_button=True)
-            log_output = gr.Textbox(label="📜 Agent Conversation Log", lines=15, interactive=True, show_copy_button=True)
-    with gr.Tab("📥 Downloads"):
-        with gr.Row():
-            html_download = gr.File(label="📄 Download HTML")
-            log_download = gr.File(label="📝 Download Agent Log")
-            zip_download = gr.File(label="🗂️ Download All Files")
     run_btn.click(
         fn=process,
@@ -125,5 +77,6 @@ with gr.Blocks(css=".gr-box { border-radius: 12px; padding: 10px; }") as demo:
         outputs=[preview_html, html_output, log_output, html_download, log_download, zip_download]
     )
 if __name__ == "__main__":
     demo.launch()

 from langchain_core.messages import HumanMessage
 from utils.langgraph_pipeline import run_pipeline_and_save
+# Directory to store generated files
 TEMP_DIR = "generated_output"
 os.makedirs(TEMP_DIR, exist_ok=True)
+# Function to beautify HTML
+def clean_html(raw_html: str) -> str:
     soup = BeautifulSoup(raw_html, "html.parser")
+    return soup.prettify()
+# Save HTML, log, and bundle into zip
 def save_files(html: str, log: str):
     html_path = os.path.join(TEMP_DIR, "ui.html")
     log_path = os.path.join(TEMP_DIR, "agent_log.txt")
     return html_path, log_path, zip_path
+# Main processing function
 def process(user_input):
     messages = [HumanMessage(content=user_input)]
     final_state = run_pipeline_and_save(messages)
     raw_html = final_state["html_output"]
+    html = clean_html(raw_html)  # Beautify the HTML
     log = "\n\n".join([f"{msg.type.upper()}: {msg.content}" for msg in final_state["messages"]])
+    html_file, log_file, zip_file = save_files(html, log)
+    # Escape quotes for safe iframe preview
+    escaped_html = html.replace('"', "&quot;").replace("\n", " ")
+    preview = f"<iframe srcdoc='{escaped_html}' width='100%' height='600px' style='border:1px solid #ccc;'></iframe>"
+    return preview, html, log, html_file, log_file, zip_file
 # Gradio UI
+with gr.Blocks() as demo:
+    gr.Markdown("# 🤖 Multi-Agent UI Generator")
+    user_prompt = gr.Textbox(label="Describe your UI", lines=4, value="A yoga retreat homepage with schedule and testimonials.")
+    run_btn = gr.Button("Run Agents")
+    gr.Markdown("### 🔍 Website Preview")
+    preview_html = gr.HTML()
+    gr.Markdown("### 🖥️ Generated HTML Code")
+    html_output = gr.Textbox(lines=15, label="Final HTML")
+    gr.Markdown("### 💬 Agent Dialogue")
+    log_output = gr.Textbox(lines=15, label="Conversation Log")
+    gr.Markdown("### 📥 Download Files")
+    html_download = gr.File(label="Download HTML")
+    log_download = gr.File(label="Download Agent Log")
+    zip_download = gr.File(label="Download All (.zip)")
     run_btn.click(
         fn=process,
         outputs=[preview_html, html_output, log_output, html_download, log_download, zip_download]
     )
+# Run the app
 if __name__ == "__main__":
     demo.launch()