Update app.py

app.py

@@ -4,12 +4,23 @@ import re
 from typing import Dict, List, Tuple
 import os
 
-from crewai import Agent, Task, Crew, Process
-from langchain_openai import ChatOpenAI
+# Important: Make sure you have python-dotenv installed (`pip install python-dotenv`)
+# and a .env file if you run locally. On HF Spaces, use secrets.
+from dotenv import load_dotenv
+
+# Try to import CrewAI libraries. If they fail, it means they are not installed.
+try:
+    from crewai import Agent, Task, Crew, Process
+    from langchain_openai import ChatOpenAI
+except ImportError:
+    raise ImportError(
+        "CrewAI or LangChain not installed. Please ensure your requirements.txt is correct and dependencies are installed."
+    )
+
+load_dotenv()
 
 # --- Configuration ---
-# Set a default model. Using a fast and capable one is best.
-# Claude 3 Haiku is excellent for this and very cheap.
+# You can change the model here. Claude 3 Haiku is fast, cheap, and very capable.
 DEFAULT_MODEL = "minimax/minimax-m2:free"
 
 # --- Agent Definitions ---
@@ -19,10 +30,10 @@ color_specialist = Agent(
     role='Expert Color Palette Designer',
     goal="""Select a visually appealing and contextually appropriate color palette 
     based on the user's website description. The palette must include primary, 
-    secondary, accent, background, surface, and text colors.""",
+    secondary, background, surface, and text colors.""",
     backstory="""You are a world-renowned graphic designer with a deep understanding of 
     color theory and its psychological impact. You create palettes that are not 
-    only beautiful but also functional and accessible (WCAG compliant).""",
+    only beautiful but also functional and accessible.""",
     verbose=True,
     allow_delegation=False
 )
@@ -30,11 +41,11 @@ color_specialist = Agent(
 # 2. Typography Specialist Agent
 typography_specialist = Agent(
     role='Master Typographer for Digital Interfaces',
-    goal="""Define a complete and harmonious typography system, including font families 
-    and a responsive size scale (h1, h2, body, small).""",
-    backstory="""With decades of experience from print to digital, you excel at choosing 
-    fonts that are readable, stylish, and appropriate for the brand's voice. 
-    You create clear typographic hierarchies that work perfectly on the web.""",
+    goal="""Define a complete and harmonious typography system, including a web-safe 
+    font family and a responsive size scale (h1, h2, body, small).""",
+    backstory="""With decades of experience, you excel at choosing fonts that are readable, 
+    stylish, and appropriate for a brand's voice. You create clear typographic 
+    hierarchies that work perfectly on the web.""",
     verbose=True,
     allow_delegation=False
 )
@@ -43,11 +54,11 @@ typography_specialist = Agent(
 design_system_architect = Agent(
     role='Senior UI Design System Architect',
     goal="""Consolidate the color and typography schemes into a single, comprehensive,
-    and developer-friendly JSON design system. Also add standard spacing and 
-    border-radius systems.""",
+    and developer-friendly JSON design system. Also add standard 'spacing' and 
+    'borderRadius' systems.""",
     backstory="""You are a meticulous senior UI designer who creates robust and scalable 
-    design systems for large tech companies. Your work ensures absolute consistency 
-    and serves as the single source of truth for the entire development team.""",
+    design systems. Your work ensures absolute consistency and serves as the single 
+    source of truth for the entire development team.""",
     verbose=True,
     allow_delegation=False
 )
@@ -60,36 +71,34 @@ web_developer = Agent(
     responsive, and modern.""",
     backstory="""You are a pixel-perfect frontend developer who translates design systems 
     into clean, responsive, and maintainable HTML and CSS. You never deviate from 
-    the design specifications and your work is always of the highest quality.""",
+    the design specifications.""",
     verbose=True,
     allow_delegation=False
 )
 
-
 # --- Task Definitions ---
 
 def create_design_tasks(prompt):
     task_colors = Task(
         description=f"""Analyze the user's prompt: '{prompt}'. 
-        Generate a JSON object representing the color palette. 
-        The JSON must contain keys: 'primary', 'secondary', 'accent', 
-        'background', 'surface', 'text', 'textLight', 'border'.""",
-        expected_output="A single, valid JSON object containing the color palette with 8 specified keys.",
+        Generate a JSON object for the color palette. 
+        The JSON must contain keys: 'primary', 'secondary', 'background', 'surface', 'text'.""",
+        expected_output="A single, valid JSON object containing the color palette.",
         agent=color_specialist
     )
 
     task_typography = Task(
         description=f"""Analyze the user's prompt: '{prompt}'. 
         Generate a JSON object for the typography system. 
-        It must include 'fontFamily' (web-safe), and sizes for 'h1', 'h2', 'body', and 'small'.""",
-        expected_output="A single, valid JSON object containing the typography system with 5 specified keys.",
+        It must include 'fontFamily', and sizes for 'h1', 'h2', 'body', 'small'.""",
+        expected_output="A single, valid JSON object for the typography system.",
         agent=typography_specialist
     )
 
     task_architect = Task(
         description="""Take the color palette and typography system from the specialists. 
         Combine them into a single, final JSON object. Also, add standard 'spacing' 
-        (sm, md, lg, xl) and 'borderRadius' (sm, md, lg) systems. 
+        (sm, md, lg) and 'borderRadius' (md, lg) systems. 
         Your final output must be ONLY this complete JSON object and nothing else.""",
         expected_output="A single, valid JSON object representing the complete design system.",
         agent=design_system_architect,
@@ -113,7 +122,10 @@ def create_developer_task(design_system_json, page_description):
 
 def create_ui_design(prompt: str, api_key: str, progress=gr.Progress(track_tqdm=True)):
     if not api_key:
-        return ("Missing API Key",) * 5
+        error_msg = "API Key is missing. Please enter your OpenRouter API key."
+        return (error_msg,) * 5
+    
+    os.environ["OPENROUTER_API_KEY"] = api_key
     
     # Configure the LLM to use OpenRouter
     openrouter_llm = ChatOpenAI(
@@ -123,12 +135,10 @@ def create_ui_design(prompt: str, api_key: str, progress=gr.Progress(track_tqdm=
     )
 
     try:
-        # --- Part 1: Run the Design Crew to create the Design System ---
         progress(0.1, desc="Briefing the design team...")
-        design_agents = [color_specialist, typography_specialist, design_system_architect]
         design_tasks = create_design_tasks(prompt)
         design_crew = Crew(
-            agents=design_agents,
+            agents=[color_specialist, typography_specialist, design_system_architect],
             tasks=list(design_tasks),
             process=Process.sequential,
             verbose=2,
@@ -138,10 +148,8 @@ def create_ui_design(prompt: str, api_key: str, progress=gr.Progress(track_tqdm=
         progress(0.3, desc="Architecting the Design System...")
         design_system_json_string = design_crew.kickoff(inputs={'prompt': prompt})
         
-        # Parse the final JSON from the architect
         design_system = json.loads(design_system_json_string)
         
-        # --- Part 2: Run the Developer Agent for each page ---
         progress(0.6, desc="Briefing the Web Developer...")
         page_descriptions = re.findall(r'\d+\)([^0-9]+?)(?=\d+\)|$)', prompt) or [prompt]
         while len(page_descriptions) < 3:
@@ -164,39 +172,31 @@ def create_ui_design(prompt: str, api_key: str, progress=gr.Progress(track_tqdm=
         return generated_pages[0], generated_pages[1], generated_pages[2], design_system_json_string, visualizer_html
 
     except Exception as e:
-        error_html = f"An error occurred with the CrewAI agents: {e}"
+        error_html = f"An error occurred with the CrewAI agents: {str(e)}. Check the logs for details."
         print(error_html)
         return (error_html,) * 5
 
-# --- Visualizer (from previous answer, it's perfect) ---
+# --- Visualizer Function ---
 def visualize_design_system(design_system: Dict) -> str:
-    # This function is the same as the previous answer. It works perfectly.
-    # [Paste the entire visualize_design_system function from the previous answer here]
-    if not design_system or not isinstance(design_system, dict):
-        return "<div class='error-box'>No valid design system to display.</div>"
+    if not design_system or not isinstance(design_system, dict): return "<div class='error-box'>No valid design system to display.</div>"
     colors = design_system.get('colors', {})
     typography = design_system.get('typography', {})
-    # ... rest of the function ...
-    html = """
-    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Design System</title><style>body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background-color:#f9fafb;color:#374151;padding:1.5rem;line-height:1.6}.section{margin-bottom:2.5rem}h2{font-size:1.5rem;font-weight:600;color:#111827;border-bottom:1px solid #e5e7eb;padding-bottom:.5rem;margin-bottom:1.5rem}.swatch-container{display:flex;flex-wrap:wrap;gap:1.5rem}.swatch{width:120px;height:120px;border-radius:.75rem;display:flex;flex-direction:column;justify-content:flex-end;padding:.75rem;font-size:.875rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.swatch .name{font-weight:600}.swatch .hex{opacity:.8}.type-container .sample{padding:1rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:.5rem;margin-bottom:1rem}.type-container .label{font-size:.9rem;color:#6b7280;margin-bottom:.25rem}.component-container{display:flex;flex-direction:column;gap:2rem;background-color:#fff;padding:2rem;border-radius:.75rem;border:1px solid #e5e7eb}.error-box{padding:1rem;background:#fee2e2;color:#b91c1c;border-radius:.5rem}</style></head><body>
-    """
+    html = """<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Design System</title><style>body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background-color:#f9fafb;color:#374151;padding:1.5rem;}.section{margin-bottom:2rem;}h2{font-size:1.5rem;font-weight:600;border-bottom:1px solid #e5e7eb;padding-bottom:.5rem;margin-bottom:1rem;}.swatch-container{display:flex;flex-wrap:wrap;gap:1rem;}.swatch{width:100px;height:100px;border-radius:.5rem;display:flex;flex-direction:column;justify-content:flex-end;padding:.5rem;font-size:.8rem;box-shadow:0 2px 4px rgba(0,0,0,0.1);}.swatch .name{font-weight:600;}.type-container .sample{padding:1rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:.5rem;margin-bottom:1rem;}</style></head><body>"""
     html += "<div class='section'><h2>Color Palette</h2><div class='swatch-container'>"
     for name, hex_val in colors.items():
-        try: r,g,b=int(hex_val[1:3],16),int(hex_val[3:5],16),int(hex_val[5:7],16); text_color='#ffffff' if (0.299*r+0.587*g+0.114*b)/255<0.5 else '#000000'
-        except: text_color='#000000'
-        html+=f'<div class="swatch" style="background-color:{hex_val};color:{text_color};"><span class="name">{name.capitalize()}</span><span class="hex">{hex_val}</span></div>'
+        try: r,g,b=int(hex_val[1:3],16),int(hex_val[3:5],16),int(hex_val[5:7],16); text_color='#fff' if (0.299*r+0.587*g+0.114*b)/255<0.5 else '#000'
+        except: text_color='#000'
+        html+=f'<div class="swatch" style="background-color:{hex_val};color:{text_color};"><span class="name">{name.capitalize()}</span><span>{hex_val}</span></div>'
     html += "</div></div>"
     font_family = typography.get('fontFamily', 'sans-serif')
-    html += f"<div class='section type-container'><h2>Typography</h2><p style='margin-bottom:1.5rem;'>Font Family: <code>{font_family}</code></p>"
-    for name, sample_text in {'h1':'Heading 1','h2':'Heading 2','body':'This is a paragraph of body text.','small':'Small utility text'}.items():
-        html+=f'<div class="sample"><div class="label">{name.capitalize()} ({typography.get(name,"1rem")})</div><div style="font-family:{font_family};font-size:{typography.get(name,"1rem")};">{sample_text}</div></div>'
-    html += "</div>"
-    html += "</body></html>"
+    html += f"<div class='section'><h2>Typography</h2><p>Font: <code>{font_family}</code></p>"
+    for name, sample_text in {'h1':'Heading 1','h2':'Heading 2','body':'This is a paragraph of body text.'}.items():
+        html+=f'<div class="sample"><div style="font-family:{font_family};font-size:{typography.get(name,"1rem")};">{sample_text}</div></div>'
+    html += "</div></body></html>"
     return html
 
 # --- Gradio Interface ---
 def create_interface():
-    # This UI layout is the same as the previous answer.
     with gr.Blocks(title="CrewAI UI Designer", theme=gr.themes.Soft()) as demo:
         gr.Markdown("# 🤖 CrewAI Powered UI Designer")
         with gr.Row():
@@ -205,20 +205,14 @@ def create_interface():
                 prompt_input = gr.Textbox(label="Website Description", placeholder="e.g., A dark-mode, futuristic site for a synthwave musician: 1) landing page, 2) music, 3) tour dates", lines=4)
                 generate_btn = gr.Button("🚀 Assemble the Crew!", variant="primary")
                 with gr.Tabs():
-                    with gr.TabItem("Visualizer"):
-                        design_system_visualizer = gr.HTML(label="Design System Visualizer")
-                    with gr.TabItem("JSON"):
-                        design_system_output = gr.Code(label="Design System JSON", language="json", lines=15)
+                    with gr.TabItem("Visualizer"): design_system_visualizer = gr.HTML()
+                    with gr.TabItem("JSON"): design_system_output = gr.Code(language="json", lines=15)
             with gr.Column(scale=2):
                 with gr.Tabs():
                     with gr.TabItem("📄 Page 1"): page1_output = gr.HTML()
                     with gr.TabItem("📄 Page 2"): page2_output = gr.HTML()
                     with gr.TabItem("📄 Page 3"): page3_output = gr.HTML()
-        generate_btn.click(
-            fn=create_ui_design, 
-            inputs=[prompt_input, api_key_input], 
-            outputs=[page1_output, page2_output, page3_output, design_system_output, design_system_visualizer]
-        )
+        generate_btn.click(fn=create_ui_design, inputs=[prompt_input, api_key_input], outputs=[page1_output, page2_output, page3_output, design_system_output, design_system_visualizer])
     return demo
 
 if __name__ == "__main__":