Update app.py

app.py

@@ -9,7 +9,6 @@ load_dotenv()
 
 # --- 1. SET UP THE GEMINI LLM ---
 try:
-    # Use CrewAI's LLM class with proper format for Gemini
     llm = LLM(
         model="gemini/gemini-2.5-flash",
         temperature=0.6,
@@ -26,36 +25,94 @@ except Exception as e:
 os.makedirs("outputs", exist_ok=True)
 file_write_tool = FileWriterTool()
 
-# --- 3. DEFINE THE AGENT TEAM ---
+# --- 3. DEFINE THE AGENT TEAM WITH ENHANCED PROMPTS ---
 designer = Agent(
-  role='Principal Brand Designer',
-  goal='Translate a user\'s "vibe" into a concrete, professional design brief for a website.',
+  role='Principal Brand & UI/UX Designer',
+  goal='Translate a user\'s "vibe" into a concrete, professional design brief with modern UI specifications.',
   backstory=(
-      "You are a world-class brand designer with a keen eye for aesthetics and deep knowledge of design trends. "
-      "You excel at understanding abstract concepts and turning them into actionable design elements. "
-      "You have extensive knowledge of color theory, typography, and modern web design best practices."
+      "You are a world-class brand and UI/UX designer with 15+ years of experience at top tech companies. "
+      "You have deep expertise in:\n"
+      "- Modern design systems (Material Design, Apple HIG, Fluent Design)\n"
+      "- Color theory and accessible color palettes (WCAG AA/AAA compliance)\n"
+      "- Typography hierarchies and font pairing psychology\n"
+      "- Micro-interactions and motion design principles\n"
+      "- Current web design trends (glassmorphism, neumorphism, brutalism, minimalism)\n"
+      "- Spacing systems (4px/8px grids, golden ratio)\n"
+      "- Visual hierarchy and F/Z-pattern layouts\n\n"
+      "You always consider:\n"
+      "- User psychology and emotional design\n"
+      "- Mobile-first responsive breakpoints\n"
+      "- Accessibility (contrast ratios, focus states, ARIA)\n"
+      "- Performance (optimized assets, loading strategies)\n"
+      "- Brand consistency and design tokens"
   ),
   verbose=True,
   llm=llm,
   allow_delegation=False
 )
+
 copywriter = Agent(
-  role='Senior UX Copywriter',
-  goal='Write compelling, vibe-appropriate copy for all sections of a website based on a design brief.',
+  role='Senior UX Copywriter & Content Strategist',
+  goal='Write compelling, conversion-focused copy that matches brand voice and guides user behavior.',
   backstory=(
-      "You are an expert copywriter who specializes in creating website content that resonates with the target audience. "
-      "You understand how to match tone and style to brand identity."
+      "You are an expert UX copywriter who combines psychology, marketing, and user experience. "
+      "Your expertise includes:\n"
+      "- Microcopy that guides users intuitively\n"
+      "- Conversion-focused CTAs with action-oriented language\n"
+      "- Voice and tone frameworks for brand consistency\n"
+      "- SEO-optimized content structure\n"
+      "- Accessibility considerations (clear language, screen reader friendly)\n"
+      "- Storytelling techniques that create emotional connections\n\n"
+      "You follow principles:\n"
+      "- Clarity over cleverness\n"
+      "- Active voice and direct language\n"
+      "- Scannable content with proper heading hierarchy\n"
+      "- Benefits-focused rather than features-focused\n"
+      "- Appropriate reading level for target audience"
   ),
   verbose=True,
   llm=llm,
   allow_delegation=False
 )
+
 developer = Agent(
-  role='Senior Frontend Developer',
-  goal='Take a design brief and content map to build a complete, self-contained HTML file.',
+  role='Senior Frontend Developer & UI Engineer',
+  goal='Build pixel-perfect, performant, and accessible websites using modern web technologies.',
   backstory=(
-      "You are a skilled frontend developer who can build beautiful and functional websites from scratch. "
-      "You are expert in HTML5, CSS3, responsive design, and creating visually stunning web experiences."
+      "You are an elite frontend developer with expertise in modern web development. "
+      "Your technical stack and knowledge includes:\n\n"
+      "**CSS Frameworks & Libraries:**\n"
+      "- Tailwind CSS (utility-first approach, responsive design)\n"
+      "- Custom CSS with CSS Grid, Flexbox, and CSS Variables\n"
+      "- Modern CSS features (clamp, aspect-ratio, container queries)\n\n"
+      "**Animation Libraries:**\n"
+      "- AOS (Animate On Scroll) for scroll-triggered animations\n"
+      "- CSS animations and transitions (cubic-bezier, keyframes)\n"
+      "- Intersection Observer API for performance\n\n"
+      "**UI Components:**\n"
+      "- Hero sections with parallax/gradient backgrounds\n"
+      "- Cards with hover effects and shadows\n"
+      "- Smooth scroll navigation with offset\n"
+      "- Modal/overlay patterns\n"
+      "- Form validation and interactive states\n"
+      "- Loading states and skeleton screens\n\n"
+      "**Best Practices:**\n"
+      "- Semantic HTML5 (proper heading hierarchy, landmarks, ARIA)\n"
+      "- Mobile-first responsive design (320px to 4K)\n"
+      "- Performance optimization (minimal dependencies, defer/async scripts)\n"
+      "- Cross-browser compatibility\n"
+      "- SEO meta tags and Open Graph\n"
+      "- Accessibility (keyboard navigation, focus management, color contrast)\n"
+      "- Clean, maintainable code with comments\n\n"
+      "You ALWAYS include:\n"
+      "- Tailwind CSS via CDN for rapid, consistent styling\n"
+      "- AOS library for smooth scroll animations\n"
+      "- Google Fonts with font-display: swap\n"
+      "- Responsive images and proper alt text\n"
+      "- Smooth scrolling behavior\n"
+      "- Hover states and micro-interactions\n"
+      "- Mobile hamburger menu when needed\n"
+      "- Consistent spacing using design tokens"
   ),
   verbose=True,
   llm=llm,
@@ -63,57 +120,227 @@ developer = Agent(
   allow_delegation=False
 )
 
-# --- 4. DEFINE THE WORKFLOW (TASKS) ---
+# --- 4. DEFINE THE WORKFLOW WITH ENHANCED TASK DESCRIPTIONS ---
 design_task = Task(
   description=(
-      "Analyze the user's prompt: '{prompt}' to understand the desired vibe. "
-      "Using your extensive design knowledge, create a comprehensive 'Design Brief' document that includes:\n"
-      "1. A carefully selected color palette with 3-5 colors (provide hex codes)\n"
-      "2. Font pairing recommendations using Google Fonts (specify primary and secondary fonts)\n"
-      "3. Overall aesthetic direction (modern, minimalist, bold, etc.)\n"
-      "4. Detailed page structure with sections (hero, about, portfolio/services, contact, etc.)\n"
-      "5. Design principles to follow (spacing, imagery style, etc.)"
+      "Analyze the user's prompt: '{prompt}' and create a comprehensive Design System Brief.\n\n"
+      "**Required Deliverables:**\n\n"
+      "1. **Color Palette (5-7 colors with specific usage):**\n"
+      "   - Primary color (brand identity, CTAs)\n"
+      "   - Secondary color (accents, highlights)\n"
+      "   - Background colors (light/dark mode if applicable)\n"
+      "   - Text colors (headings, body, muted)\n"
+      "   - Semantic colors (success, warning, error)\n"
+      "   - Provide exact hex codes and ensure WCAG AA contrast ratios\n\n"
+      "2. **Typography System:**\n"
+      "   - Primary font (headings) from Google Fonts with fallbacks\n"
+      "   - Secondary font (body text) from Google Fonts with fallbacks\n"
+      "   - Font size scale (h1: Xpx, h2: Xpx, body: Xpx, small: Xpx)\n"
+      "   - Line heights and letter spacing recommendations\n"
+      "   - Font weights to use (300, 400, 600, 700)\n\n"
+      "3. **Spacing & Layout System:**\n"
+      "   - Base spacing unit (4px or 8px)\n"
+      "   - Section padding/margins (mobile and desktop)\n"
+      "   - Container max-width\n"
+      "   - Grid system (columns, gaps)\n\n"
+      "4. **UI Components & Patterns:**\n"
+      "   - Button styles (primary, secondary, ghost)\n"
+      "   - Card designs with shadows/borders\n"
+      "   - Navigation style (sticky header, transparent, solid)\n"
+      "   - Form input styles\n"
+      "   - Image treatment (rounded corners, shadows, overlays)\n\n"
+      "5. **Animation & Interaction Guidelines:**\n"
+      "   - Scroll animations (fade, slide, zoom)\n"
+      "   - Hover effects (buttons, cards, links)\n"
+      "   - Transition timings (fast: 150ms, normal: 300ms, slow: 500ms)\n"
+      "   - Easing functions to use\n\n"
+      "6. **Page Structure:**\n"
+      "   - Header/Navigation\n"
+      "   - Hero section (with specific layout description)\n"
+      "   - 3-5 main content sections with purposes\n"
+      "   - Footer with sitemap\n\n"
+      "7. **Design Style & Aesthetic:**\n"
+      "   - Overall aesthetic (minimalist, bold, playful, corporate, etc.)\n"
+      "   - Imagery style (photos, illustrations, abstract)\n"
+      "   - Border radius approach (sharp, slightly rounded, very rounded)\n"
+      "   - Shadow style (subtle, pronounced, none)\n"
+      "   - Any specific design trends to incorporate"
   ),
   expected_output=(
-      "A structured markdown document with the complete Design Brief including Color Palette (with hex codes), "
-      "Font Pairing (Google Fonts names), Aesthetic Direction, Page Structure, and Design Principles."
+      "A detailed, structured Design System Brief in markdown format with all 7 sections completed. "
+      "Include specific values, measurements, and clear implementation guidelines. "
+      "The brief should be detailed enough for a developer to implement without additional questions."
   ),
   agent=designer
 )
+
 copywriting_task = Task(
   description=(
-      "Using the Design Brief, write all text content for the website. "
-      "Ensure the tone and style match the specified vibe perfectly. "
-      "Create engaging, professional copy for each section including:\n"
-      "- Hero section headline and subheadline\n"
-      "- About section text\n"
-      "- Service/Portfolio descriptions\n"
-      "- Call-to-action text\n"
-      "- Contact section copy\n"
-      "Make the content authentic and compelling."
+      "Using the Design Brief, write comprehensive, professional website copy.\n\n"
+      "**Content Requirements:**\n\n"
+      "1. **Hero Section:**\n"
+      "   - Main headline (6-10 words, powerful, benefit-focused)\n"
+      "   - Subheadline (15-25 words, supporting the headline)\n"
+      "   - Primary CTA text (2-4 words, action-oriented)\n"
+      "   - Secondary CTA text if needed\n\n"
+      "2. **About/Value Proposition Section:**\n"
+      "   - Section headline\n"
+      "   - 2-3 paragraphs explaining who/what/why (100-150 words)\n"
+      "   - Key value propositions (3-4 bullet points)\n\n"
+      "3. **Features/Services Section:**\n"
+      "   - Section headline\n"
+      "   - 3-6 feature/service cards, each with:\n"
+      "     * Title (3-5 words)\n"
+      "     * Description (30-50 words)\n"
+      "     * Icon suggestion (describe the icon)\n\n"
+      "4. **Social Proof/Testimonials (if applicable):**\n"
+      "   - Section headline\n"
+      "   - 2-3 testimonials with:\n"
+      "     * Quote (20-40 words)\n"
+      "     * Name and title/company\n\n"
+      "5. **Call-to-Action Section:**\n"
+      "   - Headline (compelling, urgent)\n"
+      "   - Supporting text (20-40 words)\n"
+      "   - CTA button text\n\n"
+      "6. **Footer Content:**\n"
+      "   - Brief tagline or description\n"
+      "   - Navigation links\n"
+      "   - Copyright text\n"
+      "   - Social media platform suggestions\n\n"
+      "**Writing Guidelines:**\n"
+      "- Match the vibe/tone from the design brief perfectly\n"
+      "- Use active voice and power words\n"
+      "- Keep sentences concise (max 20 words)\n"
+      "- Include emotional triggers appropriate to the brand\n"
+      "- Make CTAs clear and action-oriented\n"
+      "- Ensure natural keyword integration for SEO\n"
+      "- Write at appropriate reading level for target audience"
   ),
   expected_output=(
-      "A structured markdown 'Content Map' with polished, ready-to-use text for each section of the website."
+      "A complete Content Map in markdown format with all 6 sections filled out. "
+      "Content should be polished, professional, and ready to copy-paste into HTML. "
+      "Include clear labels for each content piece and its placement on the page."
   ),
   agent=copywriter,
   context=[design_task]
 )
+
 development_task = Task(
   description=(
-      "Based on the Design Brief and Content Map, create a complete, production-ready, single-file HTML website. "
-      "Requirements:\n"
-      "- Self-contained HTML file with embedded CSS (in <style> tags)\n"
-      "- Use the exact colors from the design brief (hex codes)\n"
-      "- Import and use the specified Google Fonts\n"
-      "- Fully responsive design that works on mobile, tablet, and desktop\n"
-      "- Modern, clean code with proper semantic HTML5\n"
-      "- Include smooth scrolling and subtle animations where appropriate\n"
-      "- Use the content from the Content Map\n"
-      "- Save the complete HTML to 'outputs/index.html' using the FileWriterTool\n\n"
-      "The file path for FileWriterTool should be: outputs/index.html"
+      "Build a complete, production-ready, single-file HTML website using modern web technologies.\n\n"
+      "**MANDATORY TECHNICAL REQUIREMENTS:**\n\n"
+      "1. **HTML Structure:**\n"
+      "   ```html\n"
+      "   <!DOCTYPE html>\n"
+      "   <html lang=\"en\">\n"
+      "   <head>\n"
+      "     - Meta charset UTF-8\n"
+      "     - Viewport meta tag\n"
+      "     - SEO meta tags (title, description, keywords)\n"
+      "     - Open Graph tags for social sharing\n"
+      "     - Favicon (data URI or emoji)\n"
+      "     - Tailwind CSS CDN: <script src=\"https://cdn.tailwindcss.com\"></script>\n"
+      "     - Google Fonts from design brief\n"
+      "     - AOS library:\n"
+      "       <link href=\"https://unpkg.com/aos@2.3.1/dist/aos.css\" rel=\"stylesheet\">\n"
+      "       <script src=\"https://unpkg.com/aos@2.3.1/dist/aos.js\"></script>\n"
+      "     - Custom CSS in <style> tags\n"
+      "   </head>\n"
+      "   ```\n\n"
+      "2. **CSS Implementation:**\n"
+      "   - Use Tailwind utility classes for layout, spacing, and responsive design\n"
+      "   - Define custom CSS variables for colors from design brief:\n"
+      "     ```css\n"
+      "     :root {\n"
+      "       --color-primary: #HEXCODE;\n"
+      "       --color-secondary: #HEXCODE;\n"
+      "       --color-text: #HEXCODE;\n"
+      "       --color-bg: #HEXCODE;\n"
+      "       /* etc */\n"
+      "     }\n"
+      "     ```\n"
+      "   - Add custom CSS for:\n"
+      "     * Smooth scroll behavior\n"
+      "     * Custom button hover effects\n"
+      "     * Gradient backgrounds if specified\n"
+      "     * Any design-specific styles not achievable with Tailwind\n\n"
+      "3. **Animation Implementation:**\n"
+      "   - Initialize AOS in script: `AOS.init({duration: 800, once: true});`\n"
+      "   - Add AOS attributes to elements:\n"
+      "     * `data-aos=\"fade-up\"` for hero elements\n"
+      "     * `data-aos=\"fade-in\"` for content sections\n"
+      "     * `data-aos=\"zoom-in\"` for cards/features\n"
+      "     * `data-aos=\"slide-up\"` for CTAs\n"
+      "   - Add CSS transitions for hover effects:\n"
+      "     * Buttons: transform, shadow, background changes\n"
+      "     * Cards: lift effect (translateY + shadow)\n"
+      "     * Links: color/underline transitions\n"
+      "   - Use staggered animations with `data-aos-delay`\n\n"
+      "4. **Responsive Design (Mobile-First):**\n"
+      "   - Base styles for mobile (320px+)\n"
+      "   - Tablet breakpoint (768px): `md:` prefix\n"
+      "   - Desktop breakpoint (1024px): `lg:` prefix\n"
+      "   - Large desktop (1280px): `xl:` prefix\n"
+      "   - Test all sections at each breakpoint\n"
+      "   - Mobile navigation (hamburger menu with smooth toggle)\n\n"
+      "5. **Required Sections (use semantic HTML):**\n"
+      "   - `<header>` with `<nav>` (sticky or fixed)\n"
+      "   - `<main>` containing:\n"
+      "     * `<section>` for hero with unique background\n"
+      "     * `<section>` for about/value prop\n"
+      "     * `<section>` for features/services (grid layout)\n"
+      "     * `<section>` for testimonials/social proof (if applicable)\n"
+      "     * `<section>` for final CTA\n"
+      "   - `<footer>` with navigation and credits\n\n"
+      "6. **UI Components to Implement:**\n"
+      "   - **Navigation:** Responsive, with smooth scroll to sections, active state\n"
+      "   - **Buttons:** Primary (filled), Secondary (outline), with hover/active states\n"
+      "   - **Cards:** For features/services with consistent styling, hover effects\n"
+      "   - **Hero:** Eye-catching background (gradient/image), centered content\n"
+      "   - **Forms (if needed):** Styled inputs with focus states, validation-ready\n\n"
+      "7. **Accessibility Requirements:**\n"
+      "   - Semantic HTML5 elements\n"
+      "   - ARIA labels where needed\n"
+      "   - Keyboard navigable (focus visible)\n"
+      "   - Alt text for all images\n"
+      "   - Sufficient color contrast (test against WCAG)\n"
+      "   - Skip to content link\n\n"
+      "8. **Performance Optimizations:**\n"
+      "   - Defer non-critical scripts\n"
+      "   - Use font-display: swap for Google Fonts\n"
+      "   - Minimize custom CSS/JS\n"
+      "   - Use CSS transforms for animations (GPU accelerated)\n\n"
+      "9. **Code Quality:**\n"
+      "   - Proper indentation (2 spaces)\n"
+      "   - Comments for major sections\n"
+      "   - Clean, readable code\n"
+      "   - No console errors\n\n"
+      "**CRITICAL:** Save the complete, working HTML file to 'outputs/index.html' using FileWriterTool.\n"
+      "The file must be immediately viewable in a browser without any modifications.\n\n"
+      "**Design Brief Reference:** Use exact colors, fonts, and spacing from the Design Brief.\n"
+      "**Content Reference:** Use exact copy from the Content Map.\n\n"
+      "Think step-by-step:\n"
+      "1. Set up HTML boilerplate with all CDN links\n"
+      "2. Define CSS variables for the color palette\n"
+      "3. Build header/navigation\n"
+      "4. Create hero section with animations\n"
+      "5. Build each content section with appropriate Tailwind classes\n"
+      "6. Add AOS animations to key elements\n"
+      "7. Implement hover effects and transitions\n"
+      "8. Build responsive footer\n"
+      "9. Add mobile menu functionality if needed\n"
+      "10. Test responsive breakpoints\n"
+      "11. Save to outputs/index.html"
   ),
   expected_output=(
-      "A complete, functional HTML website file saved to 'outputs/index.html'."
+      "A complete, self-contained HTML file saved to 'outputs/index.html' that:\n"
+      "- Renders perfectly in all modern browsers\n"
+      "- Is fully responsive (mobile to 4K)\n"
+      "- Includes smooth animations and transitions\n"
+      "- Uses Tailwind CSS and AOS library\n"
+      "- Implements the exact design and content from previous tasks\n"
+      "- Has no errors or missing dependencies\n"
+      "- Is production-ready and deployable"
   ),
   agent=developer,
   context=[design_task, copywriting_task],
@@ -164,7 +391,7 @@ def run_crew(prompt):
                 # Create preview
                 preview_html = f'<iframe srcdoc="{html_content.replace(chr(34), "&quot;")}" width="100%" height="800px" style="border: 2px solid #e0e0e0; border-radius: 8px;"></iframe>'
                 
-                success_message = "✅ **Success!** Your website has been generated and is ready to download."
+                success_message = "✅ **Success!** Your website has been generated with Tailwind CSS and AOS animations. Ready to download!"
                 
                 return (
                     success_message,
@@ -190,7 +417,7 @@ def run_crew(prompt):
     except Exception as e:
         error_trace = traceback.format_exc()
         error_message = f"❌ **Error occurred during execution:**\n\n```python\n{str(e)}\n```\n\nPlease try again or check your API keys."
-        print(error_trace)  # Also print to console
+        print(error_trace)
         return (
             error_message,
             None,
@@ -198,7 +425,7 @@ def run_crew(prompt):
             gr.update(visible=False)
         )
 
-# --- 7. CREATE THE GRADIO INTERFACE WITH CUSTOM LAYOUT ---
+# --- 7. CREATE THE GRADIO INTERFACE ---
 with gr.Blocks(theme=gr.themes.Soft(), css="""
     .container { max-width: 1400px; margin: auto; }
     .status-box { padding: 20px; border-radius: 8px; margin: 10px 0; }
@@ -207,30 +434,33 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
     
     gr.Markdown(
         """
-        # 🎨 Vibe Coder AI
-        ### Create beautiful websites with AI - Just describe your vision!
-        Enter the 'vibe' for your website, and our multi-agent team will design, write, and code a complete webpage for you.
+        # 🎨 Vibe Coder AI - Professional Edition
+        ### Create stunning websites with Tailwind CSS & AOS Animations
+        Enter your website vision, and our AI team will design, write, and code a complete, animated webpage using modern frameworks.
+        
+        **🚀 Powered by:** Tailwind CSS • AOS Animations • Google Fonts • Semantic HTML5
         """
     )
     
     with gr.Row():
         prompt_input = gr.Textbox(
             lines=4,
-            placeholder="Example: A website for my new coffee shop in Brooklyn. The vibe should be cozy, rustic, and artisanal.",
+            placeholder="Example: A website for my new coffee shop in Brooklyn. The vibe should be cozy, rustic, and artisanal with warm colors and smooth animations.",
             label="✍️ Describe Your Website Vibe",
             elem_classes="container"
         )
     
     with gr.Row():
-        generate_btn = gr.Button("🚀 Generate Website", variant="primary", size="lg", scale=1)
+        generate_btn = gr.Button("🚀 Generate Professional Website", variant="primary", size="lg", scale=1)
     
     with gr.Row():
         gr.Examples(
             examples=[
-                ["A personal portfolio for a photographer. The vibe should be minimalist, modern, and clean."],
-                ["A landing page for a new tech startup focused on AI. Vibe: futuristic, sleek, professional."],
-                ["A website for a local bakery. Vibe: warm, friendly, and homemade."],
-                ["A fitness coach website. Vibe: energetic, motivating, and bold."]
+                ["A personal portfolio for a photographer. The vibe should be minimalist, modern, and clean with elegant fade-in animations."],
+                ["A landing page for a new tech startup focused on AI. Vibe: futuristic, sleek, professional with bold gradients and smooth scrolling effects."],
+                ["A website for a local bakery. Vibe: warm, friendly, and homemade with playful animations and pastel colors."],
+                ["A fitness coach website. Vibe: energetic, motivating, and bold with dynamic animations and vibrant colors."],
+                ["A luxury real estate agency. Vibe: sophisticated, elegant, minimal with subtle animations and gold accents."]
             ],
             inputs=prompt_input,
             label="💡 Try these examples"
@@ -245,7 +475,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
     
     with gr.Row():
         preview_output = gr.HTML(
-            label="🖥️ Live Preview",
+            label="🖥️ Live Preview (with animations)",
             visible=True
         )
     
@@ -263,10 +493,10 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
                 variant="secondary"
             )
     
-    # Hidden code display (only shown when user clicks "View Source Code")
+    # Hidden code display
     with gr.Row(visible=False) as code_row:
         code_output = gr.Code(
-            label="📄 Generated HTML Source Code",
+            label="📄 Generated HTML Source Code (Tailwind CSS + AOS)",
             language="html",
             lines=15,
             elem_classes="container"