Spaces:

faizee07
/

vibe-coder-agent

Sleeping

App Files Files Community

faizee07 commited on Oct 18, 2025

Commit

e55def7

verified ·

1 Parent(s): bf50e9c

Update app.py

Browse files

Files changed (1) hide show

app.py +958 -713

app.py CHANGED Viewed

@@ -7,500 +7,745 @@ import traceback
 import shutil
 import glob
 import json
 load_dotenv()
-# --- SYSTEM CONSTANTS ---
-PROMPTS_FOR_AI = [
-    # === SINGLE-PAGE WEBSITES ===
-    "🎨 Portfolio - Minimalist designer portfolio with projects grid and contact form (Single Page)",
-    "🚀 SaaS Landing Page - Modern software startup with pricing cards and demo CTA (Single Page)",
-    "💼 Personal CV - Professional resume website with timeline and skills section (Single Page)",
-    "🎯 Product Launch - Single product showcase with features and pre-order form (Single Page)",
-    "📱 App Landing - Mobile app presentation with screenshots and download buttons (Single Page)",
-    "🎪 Event Landing - Conference or workshop page with schedule and registration (Single Page)",
-    "🏋️ Fitness Landing - Gym or trainer page with services and transformation gallery (Single Page)",
-    "🍕 Restaurant Landing - Menu showcase with reservations and location info (Single Page)",
-    "📚 Course Landing - Online course sales page with curriculum and testimonials (Single Page)",
-    "🎵 Music Artist - Musician portfolio with discography and tour dates (Single Page)",
-    "💍 Wedding Invitation - Elegant RSVP page with event details and gallery (Single Page)",
-    "🏠 Real Estate Listing - Property showcase with virtual tour and contact form (Single Page)",
-    "🚗 Car Dealership - Vehicle showcase with specifications and test drive booking (Single Page)",
-    "💄 Beauty Salon - Services menu with pricing and appointment booking (Single Page)",
-    "🎮 Gaming Landing - Game showcase with trailer and download links (Single Page)",
-    "☕ Coffee Shop - Cozy cafe page with menu and ambiance gallery (Single Page)",
-    "📷 Photography Portfolio - Visual gallery with categories and booking info (Single Page)",
-    "🏢 Corporate Landing - Business services with team and contact sections (Single Page)",
-    "🌿 Wellness Center - Holistic services with practitioner profiles (Single Page)",
-    "🎬 Film Production - Studio portfolio with showreel and services (Single Page)",
-    # === MULTI-PAGE WEBSITES ===
-    "🛍️ E-commerce Platform - Full online store with products, cart, and checkout (Multi-Page)",
-    "📰 News Magazine - Multi-category blog with articles and authors (Multi-Page)",
-    "🎓 University Website - Campus site with departments and student portal (Multi-Page)",
-    "🏥 Healthcare Portal - Medical center with departments and patient services (Multi-Page)",
-    "🏨 Hotel Website - Accommodation with rooms, amenities, and booking system (Multi-Page)",
-    "📊 Dashboard Application - Analytics platform with multiple data views (Multi-Page)",
-    "🎭 Theatre Website - Shows, tickets, and venue information (Multi-Page)",
-    "⚖️ Law Firm - Practice areas, team, and case studies (Multi-Page)",
-    "🏗️ Construction Company - Projects portfolio, services, and team (Multi-Page)",
-    "🌍 Travel Agency - Destinations, packages, and booking system (Multi-Page)"
-]
-PROMPT_FOR_IMAGE_GENERATION = """
-When creating image placeholders, use the static.photos service:
-Format: http://static.photos/[category]/[dimensions]/[seed]
-IMPORTANT RULES:
-- Dimensions MUST be one of: 200x200, 320x240, 640x360, 1024x576, or 1200x630
-- Seed: Any number (1-999+) for consistent images, or omit for random
-- Categories: nature, office, people, technology, minimal, abstract, aerial, blurred, bokeh, gradient,
-  monochrome, vintage, white, black, blue, red, green, yellow, cityscape, workspace, food, travel,
-  textures, industry, indoor, outdoor, studio, finance, medical, season, holiday, event, sport,
-  science, legal, estate, restaurant, retail, wellness, agriculture, construction, craft, cosmetic,
-  automotive, gaming, or education
-USAGE EXAMPLES:
-- Hero section: http://static.photos/gradient/1200x630/42
-- Team photos: http://static.photos/people/320x240/[1-6] (use different seeds)
-- Product cards: http://static.photos/technology/640x360/100
-- Background: http://static.photos/abstract/1200x630/777
-- Testimonial avatars: http://static.photos/people/200x200/[201-203]
-- Gallery: http://static.photos/nature/640x360/[301-306]
-BEST PRACTICES:
-- Use consistent seeds within sections for cohesive design
-- Match category to content (e.g., 'office' for corporate, 'food' for restaurant)
-- Hero images: Use 1200x630 for full-width sections
-- Cards/Features: Use 640x360 for medium-sized images
-- Thumbnails: Use 320x240 or 200x200 for small images
-- Always include descriptive alt text
-- Add loading="lazy" for performance
 """
-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.0-flash-exp",
-        temperature=0.6,
         api_key=os.environ.get("GOOGLE_API_KEY")
     )
 except Exception as e:
-    print("\n\n---")
-    print("Error initializing Gemini LLM. Make sure you have set your GOOGLE_API_KEY.")
-    print(f"Error: {e}")
-    print("---\n\n")
     llm = None
-# --- 2. DEFINE TOOLS AND OUTPUT DIRECTORY ---
 os.makedirs("outputs", exist_ok=True)
 file_write_tool = FileWriterTool()
-# --- 3. DEFINE THE AGENT TEAM WITH ENHANCED PROMPTS ---
 designer = Agent(
-  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 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\n\n"
-      f"IMAGE GENERATION GUIDELINES:\n{PROMPT_FOR_IMAGE_GENERATION}"
-  ),
-  verbose=True,
-  llm=llm,
-  allow_delegation=False
 )
 copywriter = Agent(
-  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 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\n\n"
-      f"PROJECT NAMING GUIDELINES:\n{PROMPT_FOR_PROJECT_NAME}"
-  ),
-  verbose=True,
-  llm=llm,
-  allow_delegation=False
 )
 developer = Agent(
-  role='Senior Frontend Developer & UI Engineer',
-  goal='Build pixel-perfect, performant, and accessible websites using modern web technologies.',
-  backstory=(
-      "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"
-      "**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"
-      "- 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\n\n"
-      f"IMAGE IMPLEMENTATION:\n{PROMPT_FOR_IMAGE_GENERATION}"
-  ),
-  verbose=True,
-  llm=llm,
-  tools=[file_write_tool],
-  allow_delegation=False
 )
-# --- 4. DEFINE THE WORKFLOW WITH ENHANCED TASK DESCRIPTIONS ---
-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. **Project Overview:**\n"
-      "   - Creative project name with emoji\n"
-      "   - Project type (single-page or multi-page) - Check if prompt mentions '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"
-      "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"
-      "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"
-      "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"
-      "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"
-      "7. **Image & Media Strategy:**\n"
-      "   - Use static.photos service for all placeholder images\n"
-      "   - Specify exact URLs for each section using format: http://static.photos/[category]/[dimensions]/[seed]\n"
-      "   - Hero image: Use 1200x630 dimension\n"
-      "   - Feature cards: Use 640x360 dimension\n"
-      "   - Thumbnails: Use 320x240 or 200x200\n"
-      "   - Profile/avatar images: Use 200x200\n"
-      "   - Choose appropriate categories for the project type\n"
-      "   - Use consistent seed numbers within sections\n"
-      "   - Include alt text descriptions 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"
-      "   - 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"
-      "   - Shadow style (subtle, pronounced, none)\n"
-      "   - Any specific design trends to incorporate"
-  ),
-  expected_output=(
-      "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 based on the prompt. "
-      "Include specific static.photos URLs with proper dimensions and categories. "
-      "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 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. **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"
-      "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"
-      "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"
-      "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"
-      "6. **Call-to-Action Section:**\n"
-      "   - Headline (compelling, urgent)\n"
-      "   - Supporting text (20-40 words)\n"
-      "   - CTA button text\n\n"
-      "7. **Footer Content:**\n"
-      "   - Brief tagline or description\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"
-      "- 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 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. "
-      "If multi-page, provide content for all pages specified in the Design Brief."
-  ),
-  agent=copywriter,
-  context=[design_task]
-)
-development_task = Task(
-  description=(
-      "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"
-      "5. Use the exact static.photos URLs specified in the Design Brief\n\n"
-      "**MANDATORY TECHNICAL REQUIREMENTS:**\n\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"
-      "     - 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. **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"
-      "     :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"
-      "4. **Image Implementation:**\n"
-      "   - Use the exact static.photos URLs from the Design Brief\n"
-      "   - Format: <img src=\"http://static.photos/[category]/[dimensions]/[seed]\" alt=\"[description]\">\n"
-      "   - Include proper alt text for all images\n"
-      "   - Add loading=\"lazy\" for performance (except hero images)\n"
-      "   - Add class=\"w-full h-auto\" for responsive images\n"
-      "   - Example hero: <img src=\"http://static.photos/gradient/1200x630/42\" alt=\"Hero background\" class=\"w-full h-auto\">\n"
-      "   - Example card: <img src=\"http://static.photos/technology/640x360/100\" alt=\"Feature image\" class=\"w-full h-auto rounded-lg\">\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"
-      "     * `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"
-      "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"
-      "7. **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"
-      "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"
-      "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 all HTML files to 'outputs/' directory using FileWriterTool.\n"
-      "Files must be immediately viewable in a browser without any modifications.\n"
-      "Images must use static.photos URLs exactly as specified in the Design Brief.\n\n"
-      "**Design Brief Reference:** Use exact colors, fonts, spacing, images, 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. 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 static.photos image and animations\n"
-      "6. Build each content section with appropriate Tailwind classes\n"
-      "7. Add static.photos images with proper dimensions\n"
-      "8. Add AOS animations to key elements\n"
-      "9. Implement hover effects and transitions\n"
-      "10. Build responsive footer\n"
-      "11. Add mobile menu functionality\n"
-      "12. For multi-page: Repeat for each additional page\n"
-      "13. Test responsive breakpoints\n"
-      "14. Save all files to outputs/ directory"
-  ),
-  expected_output=(
-      "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 static.photos images with correct dimensions\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"
-  ),
-  agent=developer,
-  context=[design_task, copywriting_task],
-  tools=[file_write_tool]
-)
-# --- 5. ASSEMBLE THE CREW ---
-vibe_crew = Crew(
-  agents=[designer, copywriter, developer],
-  tasks=[design_task, copywriting_task, development_task],
-  process=Process.sequential,
-  verbose=True
-)
-# --- 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:
@@ -509,13 +754,10 @@ def clean_outputs_directory():
                 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
@@ -523,126 +765,158 @@ def create_zip_archive():
         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),
-                ""
             )
-        # 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 select a template or enter a custom prompt.",
-                None,
-                gr.update(visible=False),
-                gr.update(visible=False),
-                gr.update(visible=False),
-                ""
-            )
-        # Clean up previous output
         clean_outputs_directory()
-        print(f"\n🚀 Starting generation with prompt: {final_prompt[:100]}...")
-        # Run the crew
-        inputs = {'prompt': final_prompt}
-        result = vibe_crew.kickoff(inputs=inputs)
-        # 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}"
-            # Create ZIP archive
             zip_path = create_zip_archive()
-            if zip_path:
-                return (
-                    success_message,
-                    preview_html,
-                    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 (
                 success_message,
                 preview_html,
-                gr.update(value=preview_file, visible=True, label=f"📥 Download {project_name} (HTML)"),
                 gr.update(visible=False),
-                gr.update(visible=True),
-                project_name
             )
     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)
         return (
-            error_message,
-            None,
-            gr.update(visible=False),
-            gr.update(visible=False),
-            gr.update(visible=False),
-            ""
         )
-# --- 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: 12px;
@@ -651,225 +925,196 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
         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;
-    }
-    .template-badge {
         display: inline-block;
-        padding: 3px 8px;
-        border-radius: 4px;
-        font-size: 0.75rem;
         font-weight: 600;
-        margin-left: 8px;
-    }
-    .single-page-badge {
-        background: #48bb78;
-        color: white;
-    }
-    .multi-page-badge {
-        background: #4299e1;
         color: white;
     }
 """) as iface:
     gr.Markdown(
         """
-        # 🎨 Vibe Coder AI - Professional Edition
-        ### Create stunning websites with Tailwind CSS & AOS Animations
-        Generate complete, production-ready websites with our AI team. Support for both single-page and multi-page projects!
-        **🚀 Features:** Tailwind CSS • AOS Animations • Static.photos Images • Semantic HTML5 • Multi-page Support • Auto ZIP Export
-        **🖼️ Images:** Professional placeholders from static.photos with 30+ categories
         """
     )
-    # 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 (20 Single-Page | 10 Multi-Page)",
-            interactive=True,
-            visible=True
-        )
-        custom_prompt = gr.Textbox(
-            lines=4,
-            placeholder="Example: A minimalist portfolio website for a photographer with smooth animations and a gallery section. Single page design with modern layout.",
-            label="✍️ Or Describe Your Custom Website",
-            visible=False,
-            elem_classes="container"
-        )
-    # Hidden project name display
-    project_name_display = gr.Markdown(
-        visible=False,
-        elem_classes="project-name-display"
-    )
     with gr.Row():
         generate_btn = gr.Button(
             "🚀 Generate Professional Website",
             variant="primary",
-            size="lg",
-            scale=1
-        )
-    with gr.Row():
-        gr.Examples(
-            examples=[
-                ["🎨 Portfolio - Minimalist designer portfolio with projects grid and contact form (Single Page)"],
-                ["🚀 SaaS Landing Page - Modern software startup with pricing cards and demo CTA (Single Page)"],
-                ["🍕 Restaurant Landing - Menu showcase with reservations and location info (Single Page)"],
-                ["📚 Course Landing - Online course sales page with curriculum and testimonials (Single Page)"],
-                ["🛍️ E-commerce Platform - Full online store with products, cart, and checkout (Multi-Page)"],
-            ],
-            inputs=template_dropdown,
-            label="💡 Popular Templates"
-        )
-    with gr.Row():
-        status_output = gr.Markdown(
-            value="",
-            label="Status",
-            elem_classes="status-box"
         )
-    with gr.Row():
-        preview_output = gr.HTML(
-            label="🖥️ Live Preview (with animations)",
-            visible=True
-        )
-    with gr.Row():
-        with gr.Column(scale=1):
-            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",
-                visible=False,
-                variant="secondary"
             )
-    # Hidden code display
     with gr.Row(visible=False) as code_row:
         code_output = gr.Code(
-            label="📄 Generated HTML Source Code (Tailwind CSS + AOS + Static.photos)",
             language="html",
-            lines=15,
-            elem_classes="container"
         )
-    # 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(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_s,
-            download_z,
-            view_btn,
-            project_display
         )
     generate_btn.click(
         fn=generate_website,
-        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 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 (20 single-page, 10 multi-page)")
-    print("🖼️ Static.photos integration enabled")
-    print("🚀 Launching Gradio interface...\n")
     iface.launch(share=False)

 import shutil
 import glob
 import json
+from datetime import datetime
 load_dotenv()
+# --- WEBSITE TYPE SYSTEM DEFINITIONS ---
+WEBSITE_TYPES = {
+    "SaaS Platform": {
+        "emoji": "🚀",
+        "description": "Software as a Service platform website",
+        "pages": {
+            "single": ["Landing Page"],
+            "multi": ["Home", "Features", "Pricing", "About", "Blog", "Contact", "Login/Signup"]
+        },
+        "sections": {
+            "Hero": "Value proposition with clear CTA for free trial",
+            "Features": "Key features with icons and descriptions",
+            "How It Works": "3-step process visualization",
+            "Pricing": "Tiered pricing cards with feature comparison",
+            "Testimonials": "Customer success stories with metrics",
+            "Integration": "Logos of integrated platforms",
+            "FAQ": "Common questions addressed",
+            "CTA": "Final conversion section with trial offer"
+        },
+        "color_scheme": {
+            "primary": "#4F46E5",  # Indigo
+            "secondary": "#06B6D4", # Cyan
+            "accent": "#10B981",    # Emerald
+            "background": "#FFFFFF",
+            "text": "#1F2937",
+            "muted": "#6B7280"
+        },
+        "design_style": "Modern, clean, professional with subtle gradients",
+        "fonts": {
+            "heading": "Inter",
+            "body": "Inter"
+        },
+        "must_have_elements": [
+            "Sticky navigation with CTA button",
+            "Animated feature cards",
+            "Pricing toggle (monthly/yearly)",
+            "Trust badges and security icons",
+            "Live chat widget placeholder",
+            "Cookie consent banner"
+        ]
+    },
+    "E-commerce Store": {
+        "emoji": "🛍️",
+        "description": "Online shopping platform",
+        "pages": {
+            "single": ["Product Showcase"],
+            "multi": ["Home", "Shop", "Product Details", "Cart", "Checkout", "Account", "About", "Contact"]
+        },
+        "sections": {
+            "Hero": "Featured products carousel with offers",
+            "Categories": "Product categories grid",
+            "Featured Products": "Best sellers and new arrivals",
+            "Deals": "Special offers and discounts",
+            "Benefits": "Free shipping, returns, security",
+            "Newsletter": "Email subscription for deals",
+            "Reviews": "Customer testimonials",
+            "Brands": "Partner brand logos"
+        },
+        "color_scheme": {
+            "primary": "#DC2626",    # Red
+            "secondary": "#F59E0B",  # Amber
+            "accent": "#10B981",     # Green for CTAs
+            "background": "#FFFFFF",
+            "text": "#111827",
+            "muted": "#6B7280"
+        },
+        "design_style": "Clean, product-focused with high-quality imagery",
+        "fonts": {
+            "heading": "Poppins",
+            "body": "Open Sans"
+        },
+        "must_have_elements": [
+            "Shopping cart icon with counter",
+            "Search bar with filters",
+            "Product quick view modals",
+            "Wishlist functionality",
+            "Product image zoom",
+            "Rating stars",
+            "Size/color selectors",
+            "Secure payment badges"
+        ]
+    },
+    "Portfolio/Creative": {
+        "emoji": "🎨",
+        "description": "Creative professional or agency portfolio",
+        "pages": {
+            "single": ["Portfolio Showcase"],
+            "multi": ["Home", "Portfolio", "About", "Services", "Process", "Contact"]
+        },
+        "sections": {
+            "Hero": "Creative statement with animated text",
+            "Work": "Portfolio grid with hover effects",
+            "About": "Story and expertise",
+            "Services": "What we offer",
+            "Process": "Creative workflow",
+            "Clients": "Client logos and testimonials",
+            "Awards": "Recognition and achievements",
+            "Contact": "Get in touch form"
+        },
+        "color_scheme": {
+            "primary": "#000000",
+            "secondary": "#FFFFFF",
+            "accent": "#FF6B6B",
+            "background": "#FAFAFA",
+            "text": "#1A1A1A",
+            "muted": "#666666"
+        },
+        "design_style": "Bold, minimalist, typography-focused with creative layouts",
+        "fonts": {
+            "heading": "Playfair Display",
+            "body": "Roboto"
+        },
+        "must_have_elements": [
+            "Masonry or grid portfolio layout",
+            "Smooth scroll animations",
+            "Before/after sliders",
+            "Video backgrounds",
+            "Parallax effects",
+            "Custom cursor",
+            "Loading animation",
+            "Social media links"
+        ]
+    },
+    "Corporate/Business": {
+        "emoji": "🏢",
+        "description": "Professional business or corporate website",
+        "pages": {
+            "single": ["Company Overview"],
+            "multi": ["Home", "About", "Services", "Industries", "Case Studies", "Team", "Careers", "Contact"]
+        },
+        "sections": {
+            "Hero": "Company vision with professional imagery",
+            "Services": "Core service offerings",
+            "About": "Company history and values",
+            "Statistics": "Key metrics and achievements",
+            "Industries": "Sectors served",
+            "Team": "Leadership profiles",
+            "Partners": "Strategic partnerships",
+            "News": "Latest updates and press"
+        },
+        "color_scheme": {
+            "primary": "#1E40AF",    # Blue
+            "secondary": "#0F766E",  # Teal
+            "accent": "#F59E0B",     # Amber
+            "background": "#FFFFFF",
+            "text": "#1F2937",
+            "muted": "#6B7280"
+        },
+        "design_style": "Professional, trustworthy, clean with structured layouts",
+        "fonts": {
+            "heading": "Montserrat",
+            "body": "Source Sans Pro"
+        },
+        "must_have_elements": [
+            "Professional navigation",
+            "Dropdown menus",
+            "Team member cards",
+            "Timeline components",
+            "Statistics counters",
+            "Certificate badges",
+            "Newsletter signup",
+            "Office locations map"
+        ]
+    },
+    "Restaurant/Food": {
+        "emoji": "🍕",
+        "description": "Restaurant, cafe, or food service website",
+        "pages": {
+            "single": ["Restaurant Landing"],
+            "multi": ["Home", "Menu", "About", "Gallery", "Reservations", "Events", "Contact"]
+        },
+        "sections": {
+            "Hero": "Appetizing hero with reservation CTA",
+            "Menu Preview": "Featured dishes showcase",
+            "About": "Our story and chef",
+            "Specials": "Daily specials and offers",
+            "Gallery": "Food and ambiance photos",
+            "Testimonials": "Customer reviews",
+            "Hours": "Opening hours and location",
+            "Reservation": "Table booking form"
+        },
+        "color_scheme": {
+            "primary": "#DC2626",    # Red
+            "secondary": "#854D0E",  # Brown
+            "accent": "#16A34A",     # Green
+            "background": "#FEF3C7",
+            "text": "#1F2937",
+            "muted": "#78716C"
+        },
+        "design_style": "Warm, inviting, appetizing with rich imagery",
+        "fonts": {
+            "heading": "Merriweather",
+            "body": "Open Sans"
+        },
+        "must_have_elements": [
+            "Menu with prices",
+            "Online reservation system",
+            "Photo gallery",
+            "Google Maps integration",
+            "Social media feed",
+            "Special offers banner",
+            "Delivery/takeout options",
+            "Customer reviews"
+        ]
+    },
+    "Healthcare/Medical": {
+        "emoji": "🏥",
+        "description": "Medical, healthcare, or wellness website",
+        "pages": {
+            "single": ["Clinic Overview"],
+            "multi": ["Home", "Services", "Doctors", "Appointments", "Patient Portal", "Resources", "About", "Contact"]
+        },
+        "sections": {
+            "Hero": "Welcome with appointment booking",
+            "Services": "Medical services offered",
+            "Doctors": "Medical team profiles",
+            "Why Choose Us": "Credentials and approach",
+            "Testimonials": "Patient stories",
+            "Insurance": "Accepted providers",
+            "Resources": "Health tips and articles",
+            "Emergency": "Emergency contact info"
+        },
+        "color_scheme": {
+            "primary": "#0891B2",    # Cyan
+            "secondary": "#10B981",  # Green
+            "accent": "#3B82F6",     # Blue
+            "background": "#F0FDFA",
+            "text": "#0F172A",
+            "muted": "#64748B"
+        },
+        "design_style": "Clean, professional, trustworthy with calming colors",
+        "fonts": {
+            "heading": "Nunito Sans",
+            "body": "Open Sans"
+        },
+        "must_have_elements": [
+            "Appointment booking system",
+            "Doctor profiles with credentials",
+            "Service descriptions",
+            "Patient portal login",
+            "Insurance information",
+            "Emergency contacts",
+            "Health resources/blog",
+            "HIPAA compliance notice"
+        ]
+    },
+    "Education/E-learning": {
+        "emoji": "🎓",
+        "description": "Educational institution or online learning platform",
+        "pages": {
+            "single": ["Course Landing"],
+            "multi": ["Home", "Courses", "Programs", "Instructors", "Resources", "Student Portal", "About", "Contact"]
+        },
+        "sections": {
+            "Hero": "Learn and grow message with enrollment CTA",
+            "Courses": "Popular courses grid",
+            "Features": "Learning platform benefits",
+            "Instructors": "Expert teacher profiles",
+            "Testimonials": "Student success stories",
+            "Stats": "Graduation and success rates",
+            "Process": "How to get started",
+            "FAQ": "Common questions"
+        },
+        "color_scheme": {
+            "primary": "#7C3AED",    # Purple
+            "secondary": "#2563EB",  # Blue
+            "accent": "#F59E0B",     # Amber
+            "background": "#FAFAF9",
+            "text": "#18181B",
+            "muted": "#71717A"
+        },
+        "design_style": "Modern, engaging, accessible with clear information hierarchy",
+        "fonts": {
+            "heading": "Raleway",
+            "body": "Inter"
+        },
+        "must_have_elements": [
+            "Course catalog with filters",
+            "Enrollment/registration forms",
+            "Student dashboard mockup",
+            "Video player placeholder",
+            "Progress indicators",
+            "Certificate badges",
+            "Calendar/schedule",
+            "Resource library"
+        ]
+    },
+    "Real Estate": {
+        "emoji": "🏠",
+        "description": "Real estate agency or property listing website",
+        "pages": {
+            "single": ["Property Showcase"],
+            "multi": ["Home", "Properties", "Property Details", "Agents", "Services", "About", "Contact"]
+        },
+        "sections": {
+            "Hero": "Property search with filters",
+            "Featured": "Featured properties carousel",
+            "Search": "Advanced search options",
+            "Services": "Buying, selling, renting",
+            "Agents": "Team of realtors",
+            "Testimonials": "Client experiences",
+            "Market": "Market trends and insights",
+            "Contact": "Schedule viewing"
+        },
+        "color_scheme": {
+            "primary": "#0F766E",    # Teal
+            "secondary": "#B45309",  # Brown
+            "accent": "#3B82F6",     # Blue
+            "background": "#FFFFFF",
+            "text": "#1F2937",
+            "muted": "#6B7280"
+        },
+        "design_style": "Professional, clean, image-heavy with property showcases",
+        "fonts": {
+            "heading": "Playfair Display",
+            "body": "Source Sans Pro"
+        },
+        "must_have_elements": [
+            "Property search with filters",
+            "Property cards with details",
+            "Image galleries",
+            "Virtual tour buttons",
+            "Mortgage calculator",
+            "Agent contact cards",
+            "Map integration",
+            "Property comparison tool"
+        ]
+    },
+    "Fitness/Gym": {
+        "emoji": "🏋️",
+        "description": "Gym, fitness center, or personal training website",
+        "pages": {
+            "single": ["Fitness Landing"],
+            "multi": ["Home", "Classes", "Trainers", "Membership", "Schedule", "Blog", "Contact"]
+        },
+        "sections": {
+            "Hero": "Transform your body message with join CTA",
+            "Classes": "Class types and schedules",
+            "Trainers": "Expert trainer profiles",
+            "Membership": "Pricing plans",
+            "Transformation": "Before/after gallery",
+            "Features": "Gym facilities and equipment",
+            "Schedule": "Class timetable",
+            "Blog": "Fitness tips and nutrition"
+        },
+        "color_scheme": {
+            "primary": "#DC2626",    # Red
+            "secondary": "#000000",  # Black
+            "accent": "#22C55E",     # Green
+            "background": "#FAFAFA",
+            "text": "#171717",
+            "muted": "#525252"
+        },
+        "design_style": "Energetic, bold, motivational with dynamic imagery",
+        "fonts": {
+            "heading": "Bebas Neue",
+            "body": "Roboto"
+        },
+        "must_have_elements": [
+            "Class schedule/timetable",
+            "Membership pricing cards",
+            "Trainer profiles",
+            "Transformation gallery",
+            "Class booking system",
+            "Nutrition tips section",
+            "BMI calculator",
+            "Free trial CTA"
+        ]
+    },
+    "Technology/Startup": {
+        "emoji": "💡",
+        "description": "Tech startup or innovation company website",
+        "pages": {
+            "single": ["Startup Landing"],
+            "multi": ["Home", "Product", "Solutions", "Technology", "Company", "Blog", "Contact"]
+        },
+        "sections": {
+            "Hero": "Innovation message with demo request",
+            "Problem/Solution": "What we solve",
+            "Product": "Product features showcase",
+            "Technology": "Our tech stack",
+            "Partners": "Integration partners",
+            "Team": "Founding team",
+            "Investors": "Backed by",
+            "Press": "Media mentions"
+        },
+        "color_scheme": {
+            "primary": "#8B5CF6",    # Purple
+            "secondary": "#3B82F6",  # Blue
+            "accent": "#10B981",     # Green
+            "background": "#0F0F1E",
+            "text": "#FFFFFF",
+            "muted": "#9CA3AF"
+        },
+        "design_style": "Futuristic, gradient-heavy, dark mode with neon accents",
+        "fonts": {
+            "heading": "Space Grotesk",
+            "body": "Inter"
+        },
+        "must_have_elements": [
+            "Animated hero section",
+            "Interactive product demo",
+            "Tech stack icons",
+            "Gradient backgrounds",
+            "Particle effects",
+            "Timeline roadmap",
+            "API documentation link",
+            "Developer resources"
+        ]
+    }
+}
+# --- ENHANCED PROMPTS ---
+ENHANCED_IMAGE_PROMPT = """
+Image Guidelines for {website_type}:
+Use static.photos service with appropriate categories:
+- {category_suggestions}
+Recommended dimensions:
+- Hero: 1200x630
+- Features: 640x360
+- Testimonials: 200x200
+- Gallery: 640x360
+- Icons: 200x200
+Example URLs:
+{example_urls}
+Match images to the {design_style} style.
 """
+PROJECT_CONTEXT_PROMPT = """
+You are creating a {website_type} website with the following specifications:
+Project Name: {project_name}
+Type: {page_type}
+Style: {design_style}
+Primary Purpose: {description}
+Color Palette:
+{color_details}
+Typography:
+- Headings: {heading_font}
+- Body: {body_font}
+Required Sections:
+{sections}
+Must-Have Elements:
+{must_have_elements}
+Target Audience: {target_audience}
 """
+# --- SYSTEM SETUP ---
 try:
     llm = LLM(
         model="gemini/gemini-2.0-flash-exp",
+        temperature=0.7,
         api_key=os.environ.get("GOOGLE_API_KEY")
     )
 except Exception as e:
+    print(f"Error initializing Gemini LLM: {e}")
     llm = None
 os.makedirs("outputs", exist_ok=True)
 file_write_tool = FileWriterTool()
+# --- ENHANCED AGENTS ---
 designer = Agent(
+    role='Senior Design Systems Architect',
+    goal='Create comprehensive design systems tailored to specific website types',
+    backstory=(
+        "You are a design systems expert who specializes in creating cohesive, "
+        "type-specific design languages. You understand that different website types "
+        "have distinct requirements:\n\n"
+        "- SaaS needs trust indicators and clear value props\n"
+        "- E-commerce requires product focus and purchase flow\n"
+        "- Portfolio demands creative expression\n"
+        "- Corporate needs professionalism and structure\n\n"
+        "You always consider:\n"
+        "- Industry-specific design patterns\n"
+        "- User expectations for each website type\n"
+        "- Conversion optimization for the specific goal\n"
+        "- Accessibility and performance\n"
+        "- Mobile-first responsive design\n\n"
+        "You create detailed design tokens including:\n"
+        "- Precise color values with semantic naming\n"
+        "- Typography scales with exact sizes\n"
+        "- Spacing systems (4px/8px grid)\n"
+        "- Component specifications\n"
+        "- Animation timings and easings"
+    ),
+    verbose=True,
+    llm=llm,
+    allow_delegation=False
 )
 copywriter = Agent(
+    role='Conversion Copywriter & Content Strategist',
+    goal='Write compelling, type-specific copy that converts visitors into customers',
+    backstory=(
+        "You are a conversion-focused copywriter who understands that different "
+        "website types require different voices and messaging strategies:\n\n"
+        "- SaaS: Focus on benefits, ROI, and problem-solving\n"
+        "- E-commerce: Product benefits, urgency, and trust\n"
+        "- Portfolio: Creativity, expertise, and personality\n"
+        "- Corporate: Authority, reliability, and professionalism\n"
+        "- Healthcare: Empathy, trust, and expertise\n\n"
+        "You craft:\n"
+        "- Headlines that grab attention\n"
+        "- Subheadings that maintain interest\n"
+        "- CTAs that drive action\n"
+        "- Microcopy that guides users\n"
+        "- SEO-optimized content\n\n"
+        "You always match tone to the target audience and industry expectations."
+    ),
+    verbose=True,
+    llm=llm,
+    allow_delegation=False
 )
 developer = Agent(
+    role='Full-Stack Frontend Developer',
+    goal='Build pixel-perfect, performant websites tailored to specific industries',
+    backstory=(
+        "You are an expert frontend developer who specializes in building "
+        "industry-specific websites with modern technologies:\n\n"
+        "**Technical Expertise:**\n"
+        "- Tailwind CSS for rapid, consistent styling\n"
+        "- Custom CSS for unique requirements\n"
+        "- JavaScript for interactivity\n"
+        "- AOS for scroll animations\n"
+        "- Performance optimization\n\n"
+        "**Industry-Specific Knowledge:**\n"
+        "- SaaS: Pricing toggles, feature comparisons, dashboards\n"
+        "- E-commerce: Product grids, cart functionality, filters\n"
+        "- Portfolio: Galleries, sliders, creative layouts\n"
+        "- Corporate: Professional navigation, team sections\n"
+        "- Healthcare: Appointment forms, service listings\n\n"
+        "You always implement:\n"
+        "- Semantic HTML5\n"
+        "- ARIA labels for accessibility\n"
+        "- Responsive design (mobile-first)\n"
+        "- SEO best practices\n"
+        "- Performance optimizations\n"
+        "- Cross-browser compatibility"
+    ),
+    verbose=True,
+    llm=llm,
+    tools=[file_write_tool],
+    allow_delegation=False
 )
+# --- ENHANCED TASK CREATION ---
+def create_design_task(website_type, project_name, custom_requirements, page_type):
+    """Create a design task specific to the website type"""
+    type_config = WEBSITE_TYPES[website_type]
+    # Build context
+    context = PROJECT_CONTEXT_PROMPT.format(
+        website_type=website_type,
+        project_name=project_name,
+        page_type=page_type,
+        design_style=type_config["design_style"],
+        description=type_config["description"],
+        color_details=json.dumps(type_config["color_scheme"], indent=2),
+        heading_font=type_config["fonts"]["heading"],
+        body_font=type_config["fonts"]["body"],
+        sections=json.dumps(type_config["sections"], indent=2),
+        must_have_elements="\n".join(f"- {elem}" for elem in type_config["must_have_elements"]),
+        target_audience=f"Target audience for {website_type}"
+    )
+    # Build image guidelines
+    category_map = {
+        "SaaS Platform": "technology, office, abstract, gradient",
+        "E-commerce Store": "retail, product, lifestyle, fashion",
+        "Portfolio/Creative": "abstract, minimal, artistic, workspace",
+        "Corporate/Business": "office, business, professional, cityscape",
+        "Restaurant/Food": "food, restaurant, culinary, ambiance",
+        "Healthcare/Medical": "medical, wellness, healthcare, people",
+        "Education/E-learning": "education, study, classroom, books",
+        "Real Estate": "estate, architecture, interior, exterior",
+        "Fitness/Gym": "fitness, sport, gym, wellness",
+        "Technology/Startup": "technology, innovation, abstract, futuristic"
+    }
+    image_guidelines = ENHANCED_IMAGE_PROMPT.format(
+        website_type=website_type,
+        category_suggestions=category_map.get(website_type, "abstract, gradient"),
+        design_style=type_config["design_style"],
+        example_urls="\n".join([
+            f"- Hero: http://static.photos/{category_map.get(website_type, 'abstract').split(',')[0].strip()}/1200x630/100",
+            f"- Features: http://static.photos/{category_map.get(website_type, 'abstract').split(',')[0].strip()}/640x360/200",
+            f"- Team: http://static.photos/people/200x200/300"
+        ])
+    )
+    return Task(
+        description=(
+            f"{context}\n\n"
+            f"Additional Requirements from User:\n{custom_requirements}\n\n"
+            f"{image_guidelines}\n\n"
+            "Create a comprehensive Design System that includes:\n"
+            "1. Complete color palette with exact hex codes\n"
+            "2. Typography system with sizes and weights\n"
+            "3. Spacing and grid system\n"
+            "4. Component specifications\n"
+            "5. Animation guidelines\n"
+            "6. Image URLs using static.photos\n"
+            "7. Layout structure for all sections\n"
+            "8. Responsive breakpoints\n"
+            "9. Interaction patterns\n"
+            "10. Accessibility requirements"
+        ),
+        expected_output=(
+            "A detailed Design System document in markdown format with:\n"
+            "- All specifications clearly defined\n"
+            "- Exact measurements and values\n"
+            "- Static.photos URLs for all images\n"
+            "- Component states and variations\n"
+            "- Clear implementation guidelines"
+        ),
+        agent=designer
+    )
+def create_copywriting_task(website_type, project_name):
+    """Create a copywriting task specific to the website type"""
+    type_config = WEBSITE_TYPES[website_type]
+    return Task(
+        description=(
+            f"Write compelling copy for a {website_type} called '{project_name}'.\n\n"
+            f"Website Sections:\n{json.dumps(type_config['sections'], indent=2)}\n\n"
+            "For each section, provide:\n"
+            "- Headlines (powerful, benefit-focused)\n"
+            "- Subheadlines (supporting, clarifying)\n"
+            "- Body copy (clear, engaging)\n"
+            "- CTAs (action-oriented)\n"
+            "- Microcopy (helpful, guiding)\n\n"
+            f"Match the tone to {website_type} expectations.\n"
+            "Include industry-specific terminology and benefits."
+        ),
+        expected_output=(
+            "Complete website copy in markdown format with:\n"
+            "- All sections populated with relevant content\n"
+            "- Consistent brand voice throughout\n"
+            "- SEO-optimized headlines\n"
+            "- Clear CTAs for each section\n"
+            "- Professional, polished copy"
+        ),
+        agent=copywriter
+    )
+def create_development_task(website_type, page_type):
+    """Create a development task specific to the website type"""
+    type_config = WEBSITE_TYPES[website_type]
+    pages = type_config["pages"]["multi" if page_type == "Multi-Page" else "single"]
+    return Task(
+        description=(
+            f"Build a complete {website_type} website.\n\n"
+            f"Pages to create: {', '.join(pages)}\n"
+            f"Must-have elements: {', '.join(type_config['must_have_elements'])}\n\n"
+            "Technical Requirements:\n"
+            "- Use Tailwind CSS via CDN\n"
+            "- Implement AOS animations\n"
+            "- Use static.photos for all images\n"
+            "- Create responsive layouts\n"
+            "- Add interactive elements\n"
+            "- Implement smooth scrolling\n"
+            "- Add hover effects\n"
+            "- Include mobile menu\n\n"
+            f"Save files to 'outputs/' directory:\n"
+            f"- {'index.html' if page_type == 'Single-Page' else 'Multiple HTML files'}"
+        ),
+        expected_output=(
+            "Complete, production-ready HTML files that:\n"
+            "- Implement the exact design system\n"
+            "- Use all specified copy\n"
+            "- Include all required elements\n"
+            "- Are fully responsive\n"
+            "- Have smooth animations\n"
+            "- Work in all browsers"
+        ),
+        agent=developer,
+        tools=[file_write_tool]
+    )
+# --- CHAT HISTORY MANAGEMENT ---
+class ChatHistory:
+    def __init__(self):
+        self.history = []
+        self.current_project = None
+        self.website_type = None
+        self.project_name = None
+    def add_message(self, role, content):
+        self.history.append({
+            "role": role,
+            "content": content,
+            "timestamp": datetime.now().isoformat()
+        })
+    def get_context(self):
+        if not self.history:
+            return ""
+        return "\n".join([f"{msg['role']}: {msg['content']}" for msg in self.history[-5:]])
+    def reset(self):
+        self.history = []
+        self.current_project = None
+        self.website_type = None
+        self.project_name = None
+chat_history = ChatHistory()
+# --- HELPER FUNCTIONS ---
 def clean_outputs_directory():
+    """Clean the outputs directory"""
     if os.path.exists("outputs"):
         for file in glob.glob("outputs/*"):
             try:
                 print(f"Error removing {file}: {e}")
 def create_zip_archive():
+    """Create a ZIP archive of output files"""
     try:
         html_files = glob.glob("outputs/*.html")
         if len(html_files) > 1:
             shutil.make_archive("outputs/project", 'zip', "outputs")
             return "outputs/project.zip"
         return None
         print(f"Error creating ZIP: {e}")
         return None
+# --- MAIN GENERATION FUNCTION ---
+def generate_website(website_type, project_name_input, name_method, page_type, custom_requirements, is_modification=False):
     try:
         if llm is None:
             return (
+                "❌ **Error:** Gemini LLM not initialized. Please check your GOOGLE_API_KEY.",
+                None, gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
             )
+        # Handle project name
+        if name_method == "Enter manually":
+            project_name = project_name_input if project_name_input else "My Project"
         else:
+            # Generate project name with AI
+            project_name = f"{WEBSITE_TYPES[website_type]['emoji']} {website_type.split('/')[0]} Pro"
+        # Store in chat history
+        if not is_modification:
+            chat_history.reset()
+            chat_history.website_type = website_type
+            chat_history.project_name = project_name
+        chat_history.add_message("User", f"Generate {website_type} - {page_type}")
+        # Clean outputs
         clean_outputs_directory()
+        # Create tasks
+        design_task = create_design_task(website_type, project_name, custom_requirements, page_type)
+        copywriting_task = create_copywriting_task(website_type, project_name)
+        copywriting_task.context = [design_task]
+        development_task = create_development_task(website_type, page_type)
+        development_task.context = [design_task, copywriting_task]
+        # Create and run crew
+        crew = Crew(
+            agents=[designer, copywriter, developer],
+            tasks=[design_task, copywriting_task, development_task],
+            process=Process.sequential,
+            verbose=True
+        )
+        result = crew.kickoff()
+        # Check output files
         html_files = glob.glob("outputs/*.html")
         if not html_files:
             return (
+                "❌ No files generated. Please try again.",
+                None, gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
             )
+        # Create preview
         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 response
+        is_multipage = len(html_files) > 1
+        success_message = f"✅ **{project_name}** generated successfully!\n"
+        success_message += f"Type: {website_type} | Pages: {len(html_files)}"
+        chat_history.add_message("System", f"Generated {project_name}")
         if is_multipage:
             zip_path = create_zip_archive()
+            return (
+                success_message,
+                preview_html,
+                gr.update(value=preview_file, visible=True),
+                gr.update(value=zip_path, visible=True) if zip_path else gr.update(visible=False),
+                gr.update(visible=True)
+            )
         else:
             return (
                 success_message,
                 preview_html,
+                gr.update(value=preview_file, visible=True),
                 gr.update(visible=False),
+                gr.update(visible=True)
             )
     except Exception as e:
         error_trace = traceback.format_exc()
         print(error_trace)
         return (
+            f"❌ Error: {str(e)}",
+            None, gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)
         )
+def modify_website(modification_request):
+    """Modify the existing website based on user request"""
+    if not chat_history.current_project:
+        return "❌ Please generate a website first before requesting modifications."
+    chat_history.add_message("User", modification_request)
+    # Create modification task
+    modification_task = Task(
+        description=(
+            f"Modify the existing {chat_history.website_type} website.\n\n"
+            f"Previous context:\n{chat_history.get_context()}\n\n"
+            f"Modification request: {modification_request}\n\n"
+            "Update the HTML files accordingly."
+        ),
+        expected_output="Modified HTML files with requested changes",
+        agent=developer,
+        tools=[file_write_tool]
+    )
+    crew = Crew(
+        agents=[developer],
+        tasks=[modification_task],
+        process=Process.sequential
+    )
+    try:
+        result = crew.kickoff()
+        chat_history.add_message("System", f"Modified: {modification_request[:50]}...")
+        return "✅ Modifications applied successfully!"
+    except Exception as e:
+        return f"❌ Error applying modifications: {str(e)}"
+# --- GRADIO INTERFACE ---
 with gr.Blocks(theme=gr.themes.Soft(), css="""
     .container { max-width: 1400px; margin: auto; }
+    .type-card {
+        border: 2px solid #e2e8f0;
+        border-radius: 12px;
+        padding: 15px;
+        margin: 10px 0;
+        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+    .type-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+        border-color: #4F46E5;
+    }
+    .type-title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: #1a202c;
+        margin-bottom: 8px;
+    }
+    .type-description {
+        color: #4a5568;
+        font-size: 0.9rem;
+    }
     .status-box {
         padding: 20px;
         border-radius: 12px;
         color: white;
         font-weight: 500;
     }
+    .chat-box {
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
         padding: 15px;
+        margin: 10px 0;
         background: #f8fafc;
+        min-height: 100px;
     }
+    .feature-badge {
         display: inline-block;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 0.85rem;
         font-weight: 600;
+        margin: 4px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
     }
 """) as iface:
     gr.Markdown(
         """
+        # 🚀 Professional Website Builder AI
+        ### Industry-Specific Website Generation with Tailwind CSS & Modern Animations
+        Generate complete, production-ready websites tailored to your industry with our specialized AI team.
+        Each website type comes with industry-specific components, design patterns, and content.
         """
     )
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### 🎯 Step 1: Choose Website Type")
+            website_type = gr.Radio(
+                choices=list(WEBSITE_TYPES.keys()),
+                value="SaaS Platform",
+                label="Select Industry/Type",
+                interactive=True
+            )
+            # Display type details
+            with gr.Box():
+                type_details = gr.Markdown(
+                    value=f"**{WEBSITE_TYPES['SaaS Platform']['description']}**\n\n"
+                    f"Design Style: {WEBSITE_TYPES['SaaS Platform']['design_style']}\n\n"
+                    f"Key Elements: {', '.join(WEBSITE_TYPES['SaaS Platform']['must_have_elements'][:3])}..."
+                )
+        with gr.Column(scale=1):
+            gr.Markdown("### 📝 Step 2: Project Details")
+            name_method = gr.Radio(
+                choices=["Generate with AI", "Enter manually"],
+                value="Generate with AI",
+                label="Project Name Method"
+            )
+            project_name_input = gr.Textbox(
+                placeholder="Enter your project name (e.g., TechFlow Pro)",
+                label="Project Name",
+                visible=False
+            )
+            page_type = gr.Radio(
+                choices=["Single-Page", "Multi-Page"],
+                value="Single-Page",
+                label="Website Structure"
+            )
+            custom_requirements = gr.Textbox(
+                lines=3,
+                placeholder="Any specific requirements? (e.g., 'Add a video hero section', 'Include testimonial carousel', 'Dark mode design')",
+                label="Custom Requirements (Optional)"
+            )
     with gr.Row():
         generate_btn = gr.Button(
             "🚀 Generate Professional Website",
             variant="primary",
+            size="lg"
         )
+    # Status and Preview
+    status_output = gr.Markdown(elem_classes="status-box")
+    with gr.Tabs():
+        with gr.TabItem("🖥️ Live Preview"):
+            preview_output = gr.HTML()
+        with gr.TabItem("💬 Modify Website"):
+            gr.Markdown(
+                """
+                ### Make Changes to Your Generated Website
+                After generating a website, you can request modifications here.
+                """
             )
+            modification_input = gr.Textbox(
+                lines=3,
+                placeholder="E.g., 'Change the hero background to blue gradient', 'Add more testimonials', 'Make the navigation sticky'",
+                label="What would you like to change?"
             )
+            modify_btn = gr.Button("🔧 Apply Modifications", variant="secondary")
+            modification_status = gr.Markdown()
+    # Download Section
+    with gr.Row():
+        download_single = gr.File(label="📥 Download HTML", visible=False)
+        download_zip = gr.File(label="📦 Download Project (ZIP)", visible=False)
+        view_code_btn = gr.Button("👁️ View Source Code", visible=False)
+    # Code Display
     with gr.Row(visible=False) as code_row:
         code_output = gr.Code(
+            label="Generated HTML Source Code",
             language="html",
+            lines=20
         )
+    # Feature showcase
+    gr.Markdown(
+        """
+        ### ✨ Features by Website Type
+        """
     )
+    with gr.Row():
+        for i, (type_name, config) in enumerate(list(WEBSITE_TYPES.items())[:3]):
+            with gr.Column():
+                gr.Markdown(
+                    f"""
+                    **{config['emoji']} {type_name}**
+                    {' '.join([f'<span class="feature-badge">{elem.split()[0]}</span>' for elem in config['must_have_elements'][:3]])}
+                    """
+                )
+    # Event Handlers
+    def update_type_details(selected_type):
+        config = WEBSITE_TYPES[selected_type]
         return (
+            f"**{config['description']}**\n\n"
+            f"Design Style: {config['design_style']}\n\n"
+            f"Fonts: {config['fonts']['heading']} / {config['fonts']['body']}\n\n"
+            f"Key Elements: {', '.join(config['must_have_elements'][:3])}..."
         )
+    def toggle_name_input(method):
+        return gr.update(visible=(method == "Enter manually"))
+    # Connect events
+    website_type.change(
+        fn=update_type_details,
+        inputs=[website_type],
+        outputs=[type_details]
+    )
+    name_method.change(
+        fn=toggle_name_input,
+        inputs=[name_method],
+        outputs=[project_name_input]
+    )
     generate_btn.click(
         fn=generate_website,
+        inputs=[website_type, project_name_input, name_method, page_type, custom_requirements],
+        outputs=[status_output, preview_output, download_single, download_zip, view_code_btn]
+    )
+    modify_btn.click(
+        fn=modify_website,
+        inputs=[modification_input],
+        outputs=[modification_status]
     )
     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 ""
         ),
         outputs=[code_row, code_output]
     )
 if __name__ == "__main__":
     print("\n" + "="*50)
+    print("🚀 Professional Website Builder AI")
     print("="*50)
+    print(f"\n✅ {len(WEBSITE_TYPES)} website types loaded")
+    print("🎨 Industry-specific design systems ready")
+    print("💬 Chat modification system enabled")
+    print("\n🌐 Launching interface...\n")
     iface.launch(share=False)