Update app.py

app.py

@@ -12,33 +12,71 @@ 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"
+    # === 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 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]
+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 = """
@@ -182,7 +220,7 @@ design_task = Task(
       "**Required Deliverables:**\n\n"
       "1. **Project Overview:**\n"
       "   - Creative project name with emoji\n"
-      "   - Project type (single-page or multi-page)\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"
@@ -214,10 +252,15 @@ design_task = Task(
       "   - Transition timings (fast: 150ms, normal: 300ms, slow: 500ms)\n"
       "   - Easing functions to use\n\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"
+      "   - 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"
@@ -234,7 +277,8 @@ design_task = Task(
   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. "
+      "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."
   ),
@@ -310,7 +354,8 @@ development_task = Task(
       "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"
+      "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"
@@ -354,10 +399,13 @@ development_task = Task(
       "     * Gradient backgrounds if specified\n"
       "     * Any design-specific styles not achievable with Tailwind\n\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"
+      "   - 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\n\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"
@@ -404,23 +452,25 @@ development_task = Task(
       "   - 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\n"
-      "**Design Brief Reference:** Use exact colors, fonts, spacing, and project name from the Design Brief.\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 animations\n"
+      "5. Create hero section with static.photos image and 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"
+      "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"
@@ -429,6 +479,7 @@ development_task = Task(
       "- 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"
@@ -477,7 +528,7 @@ def extract_project_name(result_text):
     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?))'
+        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()
@@ -623,6 +674,22 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
         -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(
@@ -631,7 +698,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
         ### 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 • Google Fonts • Semantic HTML5 • Multi-page Support • Auto ZIP Export
+        **🚀 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
         """
     )
     
@@ -649,14 +717,14 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
         template_dropdown = gr.Dropdown(
             choices=PROMPTS_FOR_AI,
             value=PROMPTS_FOR_AI[0],
-            label="🎯 Select a Template",
+            label="🎯 Select a Template (20 Single-Page | 10 Multi-Page)",
             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.",
+            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"
@@ -676,6 +744,19 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
             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="",
@@ -712,7 +793,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
     # Hidden code display
     with gr.Row(visible=False) as code_row:
         code_output = gr.Code(
-            label="📄 Generated HTML Source Code (Tailwind CSS + AOS)",
+            label="📄 Generated HTML Source Code (Tailwind CSS + AOS + Static.photos)",
             language="html",
             lines=15,
             elem_classes="container"
@@ -787,7 +868,8 @@ if __name__ == "__main__":
     print("🎨 Vibe Coder AI - Professional Edition")
     print("="*50)
     print("\n✅ System initialized successfully!")
-    print(f"📋 {len(PROMPTS_FOR_AI)} templates loaded")
+    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)