Update app.py

app.py

@@ -4,13 +4,59 @@ from crewai import Agent, Task, Crew, Process, LLM
 from crewai_tools import FileWriterTool
 from dotenv import load_dotenv
 import traceback
+import shutil
+import glob
+import json
 
 load_dotenv()
 
+# --- SYSTEM CONSTANTS ---
+PROMPTS_FOR_AI = [
+    "🚀 SaaS Landing Page - Modern software startup with pricing, features, and demo CTA",
+    "💼 Professional Portfolio - Multi-page developer/designer portfolio with projects gallery",
+    "🎮 Interactive Quiz App - Educational quiz with multiple categories and score tracking",
+    "🛍️ E-commerce Product Page - Product showcase with cart, reviews, and checkout flow",
+    "📚 Online Course Platform - Multi-page learning platform with courses, instructors, and enrollment",
+    "🍔 Restaurant Website - Menu, reservations, locations, and online ordering system",
+    "🏋️ Fitness Tracker App - Dashboard with workouts, progress charts, and meal planning",
+    "📰 News Magazine - Multi-category blog with articles, authors, and comments",
+    "🎨 Digital Art Gallery - Virtual exhibition with artist profiles and artwork collections",
+    "🏠 Real Estate Platform - Property listings with search, filters, and virtual tours",
+    "📅 Event Management - Conference website with schedule, speakers, and registration",
+    "🎵 Music Streaming UI - Player interface with playlists, albums, and artist pages",
+    "💳 Banking Dashboard - Account overview, transactions, and financial analytics",
+    "🎓 University Website - Multi-page campus site with departments, admissions, and student portal",
+    "🚗 Car Rental Service - Vehicle catalog with booking system and pricing calculator"
+]
+
+PROMPT_FOR_IMAGE_GENERATION = """
+When creating image placeholders or suggesting imagery:
+1. Use professional stock photo services URLs (via placeholder services like unsplash.com/photos/...)
+2. Suggest specific image dimensions (e.g., hero: 1920x1080, thumbnails: 400x300)
+3. Include descriptive alt text for accessibility
+4. Recommend image styles that match the brand (lifestyle, abstract, product shots)
+5. Use CSS gradients or patterns as fallbacks
+6. Ensure images are optimized for web (WebP format suggestion)
+7. Consider lazy loading for performance
+Example placeholder: https://source.unsplash.com/1920x1080/?[keyword]
+"""
+
+PROMPT_FOR_PROJECT_NAME = """
+Generate a creative, memorable project name that:
+1. Starts with a relevant emoji that represents the project
+2. Is 2-3 words maximum
+3. Is catchy and brandable
+4. Reflects the project's purpose or vibe
+5. Could work as a domain name
+6. Avoids generic terms
+Examples: "🚀 LaunchPad Pro", "🎨 PixelCraft Studio", "💫 Stellar Pages"
+Format: Always return as "[emoji] [ProjectName]"
+"""
+
 # --- 1. SET UP THE GEMINI LLM ---
 try:
     llm = LLM(
-        model="gemini/gemini-2.5-flash",
+        model="gemini/gemini-2.0-flash-exp",
         temperature=0.6,
         api_key=os.environ.get("GOOGLE_API_KEY")
     )
@@ -44,7 +90,8 @@ designer = Agent(
       "- Mobile-first responsive breakpoints\n"
       "- Accessibility (contrast ratios, focus states, ARIA)\n"
       "- Performance (optimized assets, loading strategies)\n"
-      "- Brand consistency and design tokens"
+      "- Brand consistency and design tokens\n\n"
+      f"IMAGE GENERATION GUIDELINES:\n{PROMPT_FOR_IMAGE_GENERATION}"
   ),
   verbose=True,
   llm=llm,
@@ -68,7 +115,8 @@ copywriter = Agent(
       "- 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"
+      "- Appropriate reading level for target audience\n\n"
+      f"PROJECT NAMING GUIDELINES:\n{PROMPT_FOR_PROJECT_NAME}"
   ),
   verbose=True,
   llm=llm,
@@ -89,6 +137,11 @@ developer = Agent(
       "- AOS (Animate On Scroll) for scroll-triggered animations\n"
       "- CSS animations and transitions (cubic-bezier, keyframes)\n"
       "- Intersection Observer API for performance\n\n"
+      "**Multi-Page Support:**\n"
+      "- Create separate HTML files for multi-page projects\n"
+      "- Implement consistent navigation across pages\n"
+      "- Use relative links between pages\n"
+      "- Maintain design consistency across all pages\n\n"
       "**UI Components:**\n"
       "- Hero sections with parallax/gradient backgrounds\n"
       "- Cards with hover effects and shadows\n"
@@ -112,7 +165,8 @@ developer = Agent(
       "- Smooth scrolling behavior\n"
       "- Hover states and micro-interactions\n"
       "- Mobile hamburger menu when needed\n"
-      "- Consistent spacing using design tokens"
+      "- Consistent spacing using design tokens\n\n"
+      f"IMAGE IMPLEMENTATION:\n{PROMPT_FOR_IMAGE_GENERATION}"
   ),
   verbose=True,
   llm=llm,
@@ -124,42 +178,53 @@ developer = Agent(
 design_task = Task(
   description=(
       "Analyze the user's prompt: '{prompt}' and create a comprehensive Design System Brief.\n\n"
+      "**PROJECT NAME:** Generate a creative project name following the naming guidelines.\n\n"
       "**Required Deliverables:**\n\n"
-      "1. **Color Palette (5-7 colors with specific usage):**\n"
+      "1. **Project Overview:**\n"
+      "   - Creative project name with emoji\n"
+      "   - Project type (single-page or multi-page)\n"
+      "   - If multi-page, list all pages needed (e.g., index.html, about.html, contact.html)\n\n"
+      "2. **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"
+      "3. **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"
+      "4. **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"
+      "5. **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"
+      "6. **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"
+      "7. **Image & Media Strategy:**\n"
+      "   - Follow the image generation guidelines\n"
+      "   - Specify placeholder images for each section\n"
+      "   - Include dimensions and alt text requirements\n"
+      "   - Suggest specific Unsplash keywords for each image\n\n"
+      "8. **Page Structure:**\n"
+      "   - Header/Navigation (consistent across pages if multi-page)\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"
+      "   - Footer with sitemap\n"
+      "   - Additional pages structure if multi-page project\n\n"
+      "9. **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"
@@ -167,7 +232,9 @@ design_task = Task(
       "   - Any specific design trends to incorporate"
   ),
   expected_output=(
-      "A detailed, structured Design System Brief in markdown format with all 7 sections completed. "
+      "A detailed, structured Design System Brief in markdown format with all 9 sections completed. "
+      "Include the creative project name with emoji at the top. "
+      "Clearly specify if this is a single-page or multi-page project. "
       "Include specific values, measurements, and clear implementation guidelines. "
       "The brief should be detailed enough for a developer to implement without additional questions."
   ),
@@ -177,36 +244,45 @@ design_task = Task(
 copywriting_task = Task(
   description=(
       "Using the Design Brief, write comprehensive, professional website copy.\n\n"
+      "**IMPORTANT:** Use the project name from the Design Brief throughout the content.\n\n"
       "**Content Requirements:**\n\n"
-      "1. **Hero Section:**\n"
+      "1. **Project Identity:**\n"
+      "   - Use the creative project name with emoji from the Design Brief\n"
+      "   - Create a tagline that complements the project name\n"
+      "   - Establish brand voice based on the project type\n\n"
+      "2. **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"
+      "3. **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"
+      "4. **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"
+      "5. **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"
+      "6. **Call-to-Action Section:**\n"
       "   - Headline (compelling, urgent)\n"
       "   - Supporting text (20-40 words)\n"
       "   - CTA button text\n\n"
-      "6. **Footer Content:**\n"
+      "7. **Footer Content:**\n"
       "   - Brief tagline or description\n"
-      "   - Navigation links\n"
-      "   - Copyright text\n"
+      "   - Navigation links (for all pages if multi-page)\n"
+      "   - Copyright text with project name\n"
       "   - Social media platform suggestions\n\n"
+      "8. **Additional Pages Content (if multi-page):**\n"
+      "   - Content for each additional page specified in the Design Brief\n"
+      "   - Maintain consistent voice and tone\n"
+      "   - Include page-specific CTAs and navigation\n\n"
       "**Writing Guidelines:**\n"
       "- Match the vibe/tone from the design brief perfectly\n"
       "- Use active voice and power words\n"
@@ -217,9 +293,11 @@ copywriting_task = Task(
       "- Write at appropriate reading level for target audience"
   ),
   expected_output=(
-      "A complete Content Map in markdown format with all 6 sections filled out. "
+      "A complete Content Map in markdown format with all sections filled out. "
+      "The project name with emoji should be prominently featured. "
       "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."
+      "Include clear labels for each content piece and its placement on the page. "
+      "If multi-page, provide content for all pages specified in the Design Brief."
   ),
   agent=copywriter,
   context=[design_task]
@@ -227,15 +305,21 @@ copywriting_task = Task(
 
 development_task = Task(
   description=(
-      "Build a complete, production-ready, single-file HTML website using modern web technologies.\n\n"
+      "Build a complete, production-ready website using modern web technologies.\n\n"
+      "**CRITICAL INSTRUCTIONS:**\n"
+      "1. Check the Design Brief for project type (single-page vs multi-page)\n"
+      "2. If SINGLE-PAGE: Save as 'outputs/index.html'\n"
+      "3. If MULTI-PAGE: Save each page separately (e.g., 'outputs/index.html', 'outputs/about.html', etc.)\n"
+      "4. Use the project name from the Design Brief in all page titles and metadata\n\n"
       "**MANDATORY TECHNICAL REQUIREMENTS:**\n\n"
-      "1. **HTML Structure:**\n"
+      "1. **HTML Structure (for each page):**\n"
       "   ```html\n"
       "   <!DOCTYPE html>\n"
       "   <html lang=\"en\">\n"
       "   <head>\n"
       "     - Meta charset UTF-8\n"
       "     - Viewport meta tag\n"
+      "     - Title with project name\n"
       "     - SEO meta tags (title, description, keywords)\n"
       "     - Open Graph tags for social sharing\n"
       "     - Favicon (data URI or emoji)\n"
@@ -247,7 +331,12 @@ development_task = Task(
       "     - Custom CSS in <style> tags\n"
       "   </head>\n"
       "   ```\n\n"
-      "2. **CSS Implementation:**\n"
+      "2. **Multi-Page Navigation (if applicable):**\n"
+      "   - Consistent navigation bar across all pages\n"
+      "   - Use relative links (e.g., href=\"about.html\")\n"
+      "   - Active page highlighting in navigation\n"
+      "   - Mobile-responsive hamburger menu\n\n"
+      "3. **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"
@@ -264,7 +353,12 @@ development_task = Task(
       "     * Custom button hover effects\n"
       "     * Gradient backgrounds if specified\n"
       "     * Any design-specific styles not achievable with Tailwind\n\n"
-      "3. **Animation Implementation:**\n"
+      "4. **Image Implementation:**\n"
+      "   - Use Unsplash placeholder images as specified in Design Brief\n"
+      "   - Format: https://source.unsplash.com/[width]x[height]/?[keyword]\n"
+      "   - Include proper alt text for all images\n"
+      "   - Add loading=\"lazy\" for performance\n\n"
+      "5. **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"
@@ -276,14 +370,14 @@ development_task = Task(
       "     * 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"
+      "6. **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"
+      "7. **Required Sections (use semantic HTML):**\n"
       "   - `<header>` with `<nav>` (sticky or fixed)\n"
       "   - `<main>` containing:\n"
       "     * `<section>` for hero with unique background\n"
@@ -292,53 +386,51 @@ development_task = Task(
       "     * `<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"
+      "8. **File Saving Instructions:**\n"
+      "   - Single-page: Save to 'outputs/index.html'\n"
+      "   - Multi-page: Save each page with descriptive names\n"
+      "   - Ensure all internal links work correctly\n"
+      "   - Test navigation between pages\n\n"
+      "9. **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"
+      "10. **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"
+      "**CRITICAL:** Save all HTML files to 'outputs/' directory using FileWriterTool.\n"
+      "Files must be immediately viewable in a browser without any modifications.\n\n"
+      "**Design Brief Reference:** Use exact colors, fonts, spacing, and project name 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"
+      "1. Identify if single-page or multi-page from Design Brief\n"
+      "2. Set up HTML boilerplate with all CDN links\n"
+      "3. Define CSS variables for the color palette\n"
+      "4. Build header/navigation (with multi-page links if applicable)\n"
+      "5. Create hero section with animations\n"
+      "6. Build each content section with appropriate Tailwind classes\n"
+      "7. Add AOS animations to key elements\n"
+      "8. Implement hover effects and transitions\n"
+      "9. Build responsive footer\n"
+      "10. Add mobile menu functionality\n"
+      "11. For multi-page: Repeat for each additional page\n"
+      "12. Test responsive breakpoints\n"
+      "13. Save all files to outputs/ directory"
   ),
   expected_output=(
-      "A complete, self-contained HTML file saved to 'outputs/index.html' that:\n"
+      "Complete, self-contained HTML file(s) saved to 'outputs/' directory 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"
+      "- Uses the project name consistently\n"
+      "- Has working navigation for multi-page projects\n"
       "- Has no errors or missing dependencies\n"
       "- Is production-ready and deployable"
   ),
@@ -355,63 +447,133 @@ vibe_crew = Crew(
   verbose=True
 )
 
-# --- 6. CREATE THE GRADIO WEB INTERFACE ---
-def run_crew(prompt):
+# --- 6. HELPER FUNCTIONS ---
+def clean_outputs_directory():
+    """Clean the outputs directory before generating new files."""
+    if os.path.exists("outputs"):
+        for file in glob.glob("outputs/*"):
+            try:
+                os.remove(file)
+            except Exception as e:
+                print(f"Error removing {file}: {e}")
+
+def create_zip_archive():
+    """Create a ZIP archive of all files in the outputs directory."""
+    try:
+        # Get all HTML files in outputs directory
+        html_files = glob.glob("outputs/*.html")
+        
+        if len(html_files) > 1:
+            # Create ZIP file
+            shutil.make_archive("outputs/project", 'zip', "outputs")
+            return "outputs/project.zip"
+        return None
+    except Exception as e:
+        print(f"Error creating ZIP: {e}")
+        return None
+
+def extract_project_name(result_text):
+    """Extract project name from the crew result."""
+    try:
+        # Look for emoji + project name pattern
+        import re
+        pattern = r'([🚀🎨💫🌟✨🎯🔥💎🌈🎭🎪🎸🎬🎮🎯💼🏆🌸🦄🍕🍔🛍️📚🏠🏋️📰🎵💳🎓🚗][^\n]*(?:Pro|Studio|Hub|Lab|Plus|App|Site|Portal|Platform|Space|Zone|World|Center|Market|Shop|Store|Pages?))'
+        match = re.search(pattern, str(result_text))
+        if match:
+            return match.group(1).strip()
+        return "✨ Awesome Project"
+    except:
+        return "✨ Awesome Project"
+
+# --- 7. CREATE THE GRADIO WEB INTERFACE ---
+def run_crew(prompt, use_template):
     try:
         if llm is None:
             return (
                 "❌ **Error:** Gemini LLM not initialized. Please check your GOOGLE_API_KEY in environment variables.",
                 None,
                 gr.update(visible=False),
-                gr.update(visible=False)
+                gr.update(visible=False),
+                gr.update(visible=False),
+                ""
             )
         
-        if not prompt or prompt.strip() == "":
+        # Determine the actual prompt to use
+        if use_template and prompt in PROMPTS_FOR_AI:
+            final_prompt = prompt
+        elif not use_template and prompt and prompt.strip() != "":
+            final_prompt = prompt
+        else:
             return (
-                "❌ **Error:** Please enter a prompt describing your desired website vibe.",
+                "❌ **Error:** Please select a template or enter a custom prompt.",
                 None,
                 gr.update(visible=False),
-                gr.update(visible=False)
+                gr.update(visible=False),
+                gr.update(visible=False),
+                ""
             )
         
         # Clean up previous output
-        if os.path.exists("outputs/index.html"):
-            os.remove("outputs/index.html")
+        clean_outputs_directory()
+        
+        print(f"\n🚀 Starting generation with prompt: {final_prompt[:100]}...")
         
         # Run the crew
-        inputs = {'prompt': prompt}
+        inputs = {'prompt': final_prompt}
         result = vibe_crew.kickoff(inputs=inputs)
         
-        # Check if file was created
-        if os.path.exists("outputs/index.html"):
-            with open("outputs/index.html", "r", encoding="utf-8") as file:
-                html_content = file.read()
+        # Extract project name
+        project_name = extract_project_name(result)
+        print(f"\n✅ Project Name: {project_name}")
+        
+        # Check generated files
+        html_files = glob.glob("outputs/*.html")
+        
+        if not html_files:
+            return (
+                "❌ **Error:** No HTML files were generated. Please try again.",
+                None,
+                gr.update(visible=False),
+                gr.update(visible=False),
+                gr.update(visible=False),
+                ""
+            )
+        
+        # Determine if single or multi-page
+        is_multipage = len(html_files) > 1
+        
+        # Create preview (show index.html or first file)
+        preview_file = "outputs/index.html" if os.path.exists("outputs/index.html") else html_files[0]
+        with open(preview_file, "r", encoding="utf-8") as file:
+            html_content = file.read()
+        
+        preview_html = f'<iframe srcdoc="{html_content.replace(chr(34), "&quot;")}" width="100%" height="800px" style="border: 2px solid #e0e0e0; border-radius: 8px;"></iframe>'
+        
+        # Prepare success message
+        if is_multipage:
+            file_list = ", ".join([os.path.basename(f) for f in html_files])
+            success_message = f"✅ **Project Generated: {project_name}**\n\nMulti-page website created with {len(html_files)} pages: {file_list}"
             
-            if html_content.strip():
-                # 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 with Tailwind CSS and AOS animations. Ready to download!"
-                
+            # Create ZIP archive
+            zip_path = create_zip_archive()
+            if zip_path:
                 return (
                     success_message,
                     preview_html,
-                    gr.update(value="outputs/index.html", visible=True),
-                    gr.update(visible=True)
-                )
-            else:
-                return (
-                    "⚠️ **Warning:** File created but is empty. Please try again.",
-                    None,
-                    gr.update(visible=False),
-                    gr.update(visible=False)
+                    gr.update(value=preview_file, visible=True),
+                    gr.update(value=zip_path, visible=True, label=f"📦 Download {project_name} (ZIP)"),
+                    gr.update(visible=True),
+                    project_name
                 )
         else:
+            success_message = f"✅ **Project Generated: {project_name}**\n\nSingle-page website ready to download!"
             return (
-                "❌ **Error:** Output file not found. The developer agent might have failed. Please try again.",
-                None,
+                success_message,
+                preview_html,
+                gr.update(value=preview_file, visible=True, label=f"📥 Download {project_name} (HTML)"),
                 gr.update(visible=False),
-                gr.update(visible=False)
+                gr.update(visible=True),
+                project_name
             )
     
     except Exception as e:
@@ -422,48 +584,96 @@ def run_crew(prompt):
             error_message,
             None,
             gr.update(visible=False),
-            gr.update(visible=False)
+            gr.update(visible=False),
+            gr.update(visible=False),
+            ""
         )
 
-# --- 7. CREATE THE GRADIO INTERFACE ---
+# --- 8. 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; }
-    .download-section { text-align: center; padding: 20px; }
+    .status-box { 
+        padding: 20px; 
+        border-radius: 12px; 
+        margin: 20px 0; 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        font-weight: 500;
+    }
+    .download-section { 
+        text-align: center; 
+        padding: 20px; 
+        background: #f7fafc;
+        border-radius: 12px;
+        margin: 10px;
+    }
+    .template-selector {
+        border: 2px solid #e2e8f0;
+        border-radius: 12px;
+        padding: 15px;
+        background: #f8fafc;
+    }
+    .project-name-display {
+        font-size: 1.5rem;
+        font-weight: bold;
+        text-align: center;
+        padding: 15px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin: 20px 0;
+    }
 """) as iface:
     
     gr.Markdown(
         """
         # 🎨 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.
+        Generate complete, production-ready websites with our AI team. Support for both single-page and multi-page projects!
         
-        **🚀 Powered by:** Tailwind CSS • AOS Animations • Google Fonts • Semantic HTML5
+        **🚀 Features:** Tailwind CSS • AOS Animations • Google Fonts • Semantic HTML5 • Multi-page Support • Auto ZIP Export
         """
     )
     
-    with gr.Row():
-        prompt_input = gr.Textbox(
+    # Template Selection Section
+    with gr.Group(elem_classes="template-selector"):
+        gr.Markdown("### 📋 Choose Your Project Type")
+        
+        use_template = gr.Radio(
+            choices=["Use Template", "Custom Prompt"],
+            value="Use Template",
+            label="Selection Mode",
+            interactive=True
+        )
+        
+        template_dropdown = gr.Dropdown(
+            choices=PROMPTS_FOR_AI,
+            value=PROMPTS_FOR_AI[0],
+            label="🎯 Select a Template",
+            interactive=True,
+            visible=True
+        )
+        
+        custom_prompt = gr.Textbox(
             lines=4,
             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",
+            label="✍️ Or Describe Your Custom Website",
+            visible=False,
             elem_classes="container"
         )
     
-    with gr.Row():
-        generate_btn = gr.Button("🚀 Generate Professional Website", variant="primary", size="lg", scale=1)
+    # Hidden project name display
+    project_name_display = gr.Markdown(
+        visible=False,
+        elem_classes="project-name-display"
+    )
     
     with gr.Row():
-        gr.Examples(
-            examples=[
-                ["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"
+        generate_btn = gr.Button(
+            "🚀 Generate Professional Website", 
+            variant="primary", 
+            size="lg", 
+            scale=1
         )
     
     with gr.Row():
@@ -481,11 +691,17 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
     
     with gr.Row():
         with gr.Column(scale=1):
-            download_btn = gr.File(
+            download_single = gr.File(
                 label="📥 Download Website (HTML)",
                 visible=False,
                 elem_classes="download-section"
             )
+        with gr.Column(scale=1):
+            download_zip = gr.File(
+                label="📦 Download Project (ZIP)",
+                visible=False,
+                elem_classes="download-section"
+            )
         with gr.Column(scale=1):
             view_code_btn = gr.Button(
                 "👁️ View Source Code",
@@ -502,29 +718,76 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
             elem_classes="container"
         )
     
-    def toggle_code_view():
-        return gr.update(visible=True)
+    # Event handlers
+    def toggle_input_mode(mode):
+        if mode == "Use Template":
+            return gr.update(visible=True), gr.update(visible=False)
+        else:
+            return gr.update(visible=False), gr.update(visible=True)
+    
+    use_template.change(
+        fn=toggle_input_mode,
+        inputs=[use_template],
+        outputs=[template_dropdown, custom_prompt]
+    )
     
-    def generate_website(prompt):
-        status, preview, download, view_btn = run_crew(prompt)
+    def generate_website(use_template_val, template_val, custom_val):
+        # Determine which prompt to use
+        if use_template_val == "Use Template":
+            prompt = template_val
+            is_template = True
+        else:
+            prompt = custom_val
+            is_template = False
+        
+        status, preview, download_s, download_z, view_btn, project_name = run_crew(prompt, is_template)
+        
+        # Update project name display
+        if project_name:
+            project_display = gr.update(
+                value=f"### {project_name}",
+                visible=True
+            )
+        else:
+            project_display = gr.update(visible=False)
+        
         return (
             status,
             preview,
-            download,
-            view_btn
+            download_s,
+            download_z,
+            view_btn,
+            project_display
         )
     
     generate_btn.click(
         fn=generate_website,
-        inputs=[prompt_input],
-        outputs=[status_output, preview_output, download_btn, view_code_btn]
+        inputs=[use_template, template_dropdown, custom_prompt],
+        outputs=[
+            status_output, 
+            preview_output, 
+            download_single, 
+            download_zip, 
+            view_code_btn,
+            project_name_display
+        ]
     )
     
     view_code_btn.click(
-        fn=lambda: (gr.update(visible=True), open("outputs/index.html", "r", encoding="utf-8").read() if os.path.exists("outputs/index.html") else ""),
+        fn=lambda: (
+            gr.update(visible=True), 
+            open("outputs/index.html", "r", encoding="utf-8").read() if os.path.exists("outputs/index.html") else open(glob.glob("outputs/*.html")[0], "r", encoding="utf-8").read() if glob.glob("outputs/*.html") else ""
+        ),
         inputs=None,
         outputs=[code_row, code_output]
     )
 
 if __name__ == "__main__":
+    print("\n" + "="*50)
+    print("🎨 Vibe Coder AI - Professional Edition")
+    print("="*50)
+    print("\n✅ System initialized successfully!")
+    print(f"📋 {len(PROMPTS_FOR_AI)} templates loaded")
+    print("🚀 Launching Gradio interface...\n")
+    
     iface.launch(share=False)