Update app.py

app.py

@@ -1,814 +1,814 @@
-import gradio as gr
-from huggingface_hub import InferenceClient
-import os
-from datetime import datetime
-
-# Import all prompts and constants from prompts.py
-from prompts import (
-    SEARCH_START, DIVIDER, REPLACE_END,
-    TITLE_PAGE_START, TITLE_PAGE_END,
-    NEW_PAGE_START, NEW_PAGE_END,
-    UPDATE_PAGE_START, UPDATE_PAGE_END,
-    WEB_DEV_QUESTIONS, PROMPT_FOR_IMAGE_GENERATION,
-    INITIAL_SYSTEM_PROMPT, FOLLOW_UP_SYSTEM_PROMPT,
-    PROMPT_ENGINEER_SYSTEM_PROMPT, SUGGESTED_ANSWERS,
-    HTML_TEMPLATE_EXAMPLE, CDN_LINKS,
-    AVAILABLE_MODELS, DEFAULT_MODEL
-)
-
-# Initialize the Hugging Face Inference Client
-client = InferenceClient(token=os.getenv("HF_TOKEN"))
-
-class WebsitePromptEnhancer:
-    def __init__(self):
-        self.context = []
-        self.current_question_idx = 0
-        self.user_responses = {}
-        self.initial_prompt = ""
-        self.is_update = False
-    
-    def reset(self):
-        self.context = []
-        self.current_question_idx = 0
-        self.user_responses = {}
-        self.initial_prompt = ""
-        self.is_update = False
-    
-    def start_enhancement(self, initial_prompt):
-        self.reset()
-        self.initial_prompt = initial_prompt
-        self.current_question_idx = 0
-        return self.get_next_question()
-    
-    def get_next_question(self):
-        if self.current_question_idx < len(WEB_DEV_QUESTIONS):
-            return WEB_DEV_QUESTIONS[self.current_question_idx]
-        return None
-    
-    def get_suggested_answer(self):
-        """Generate suggested answer based on context"""
-        if self.current_question_idx < len(WEB_DEV_QUESTIONS):
-            return SUGGESTED_ANSWERS.get(self.current_question_idx, "")
-        return ""
-    
-    def process_answer(self, answer):
-        if self.current_question_idx < len(WEB_DEV_QUESTIONS):
-            question = WEB_DEV_QUESTIONS[self.current_question_idx]
-            self.user_responses[question] = answer
-            self.context.append(f"Q: {question}\nA: {answer}")
-            
-            # Check if it's an update request
-            if self.current_question_idx == len(WEB_DEV_QUESTIONS) - 1:
-                if "update" in answer.lower() or "modify" in answer.lower() or "change" in answer.lower():
-                    self.is_update = True
-            
-            self.current_question_idx += 1
-        
-        next_q = self.get_next_question()
-        return next_q
-    
-    def generate_enhanced_prompt(self, model_name=DEFAULT_MODEL):
-        # Extract structured information from responses
-        website_type = self.user_responses.get(WEB_DEV_QUESTIONS[0], "website")
-        purpose = self.user_responses.get(WEB_DEV_QUESTIONS[1], "general purpose")
-        audience = self.user_responses.get(WEB_DEV_QUESTIONS[2], "general audience")
-        sections = self.user_responses.get(WEB_DEV_QUESTIONS[3], "Home, About, Contact")
-        color_scheme = self.user_responses.get(WEB_DEV_QUESTIONS[4], "modern and professional")
-        features = self.user_responses.get(WEB_DEV_QUESTIONS[5], "responsive design")
-        update_type = self.user_responses.get(WEB_DEV_QUESTIONS[6], "new website")
-        
-        # Determine if it's an update or new website
-        is_update = "update" in update_type.lower() or "modify" in update_type.lower()
-        
-        enhancement_prompt = f"""Create a detailed prompt for an AI code agent to build a professional website based on these requirements:
-
-Project: {self.initial_prompt}
-Type: {website_type}
-Purpose: {purpose}
-Target Audience: {audience}
-Required Sections/Pages: {sections}
-Design Theme: {color_scheme}
-Features: {features}
-Request Type: {"Update existing website" if is_update else "Create new website"}
-
-Generate a comprehensive, production-ready specification following the AI code agent format.
-The output should be a clean prompt (no Q&A) that includes:
-1. Clear project description
-2. Required pages/sections with specific details
-3. Design specifications (colors, layout, typography)
-4. Feature requirements with implementation details
-5. Technical stack specifications (TailwindCSS, Feather Icons, AOS, Vanta.js)
-6. Responsive design requirements
-7. Accessibility guidelines
-8. Image placeholder usage (static.photos)
-
-The prompt should be ready to paste directly into an AI code agent system."""
-
-        try:
-            messages = [
-                {"role": "system", "content": PROMPT_ENGINEER_SYSTEM_PROMPT},
-                {"role": "user", "content": enhancement_prompt}
-            ]
-            
-            response = client.chat_completion(
-                messages=messages,
-                model=model_name,
-                max_tokens=3000,
-                temperature=0.7,
-                stream=False
-            )
-            
-            enhanced_prompt = response.choices[0].message.content
-            return self._format_for_code_agent(enhanced_prompt, is_update)
-            
-        except Exception as e:
-            try:
-                full_prompt = f"{PROMPT_ENGINEER_SYSTEM_PROMPT}\n\n{enhancement_prompt}"
-                response = client.text_generation(
-                    full_prompt,
-                    model=model_name,
-                    max_new_tokens=3000,
-                    temperature=0.7,
-                    return_full_text=False
-                )
-                return self._format_for_code_agent(response, is_update)
-            except Exception as e2:
-                return self._create_fallback_prompt(
-                    website_type, purpose, audience, sections, 
-                    color_scheme, features, is_update
-                )
-    
-    def _format_for_code_agent(self, prompt, is_update=False):
-        """Format the prompt to work with the AI code agent system"""
-        
-        formatted_prompt = f"""# AI Code Agent Prompt - Website Generation
-
-{prompt}
-
----
-
-## Technical Requirements for AI Code Agent
-
-### Technology Stack
-- **CSS Framework:** TailwindCSS (CDN: {CDN_LINKS['tailwind']})
-- **Icons:** Feather Icons ({CDN_LINKS['feather_icons']})
-- **Scroll Animations:** AOS.js ({CDN_LINKS['aos_css']})
-- **Interactive Animations:** Vanta.js ({CDN_LINKS['vanta_globe']})
-- **Additional:** Anime.js for advanced animations
-
-### Image Placeholders
-{PROMPT_FOR_IMAGE_GENERATION}
-
-### Output Format Instructions
-{"**For Updates/Modifications:**" if is_update else "**For New Website:**"}
-
-{'Use the UPDATE_PAGE format:' if is_update else 'Use the TITLE_PAGE format:'}"""
-
-        if is_update:
-            formatted_prompt += f"""
-1. Start with: {UPDATE_PAGE_START}
-2. Specify the page name (e.g., index.html)
-3. Close with: {UPDATE_PAGE_END}
-4. Use SEARCH/REPLACE blocks:
-   - {SEARCH_START}
-   - (exact code to replace)
-   - {DIVIDER}
-   - (new code)
-   - {REPLACE_END}
-
-For new pages during update:
-1. Start with: {NEW_PAGE_START}
-2. Specify page name (e.g., about.html)
-3. Close with: {NEW_PAGE_END}
-4. Provide complete HTML in ```html``` blocks
-5. Update navigation links in all existing pages"""
-        else:
-            formatted_prompt += f"""
-1. Start with: {TITLE_PAGE_START}
-2. Add page name (e.g., index.html)
-3. Close with: {TITLE_PAGE_END}
-4. Provide complete HTML in ```html``` blocks
-5. First file must be index.html
-6. Include all required CDN links in <head>
-7. Initialize all libraries in <body>"""
-
-        formatted_prompt += f"""
-
-### Required Code Structure
-
-**Every HTML file must include:**
-
-```html
-{HTML_TEMPLATE_EXAMPLE}
-```
-
-### Design Guidelines
-- Mobile-first responsive design using TailwindCSS
-- Use semantic HTML5 elements
-- Implement smooth scroll animations with AOS
-- Add interactive animations where appropriate (Vanta.js)
-- Use Feather icons for all icons: <i data-feather="icon-name"></i>
-- Ensure accessibility (ARIA labels, semantic tags)
-- Cross-browser compatibility
-- Performance optimized
-
-### Navigation
-- For multi-page websites: Use <a href="page.html"> (no onclick)
-- Ensure all pages have consistent navigation
-- Mobile-responsive hamburger menu
-
-### Ready for AI Code Agent
-This prompt is formatted for direct use with AI code agents.
-Simply paste it into your AI coding assistant to generate the website."""
-        return formatted_prompt
-
-    def _create_fallback_prompt(self, website_type, purpose, audience, sections, color_scheme, features, is_update=False):
-        """Create a detailed fallback prompt in code agent format"""
-        
-        sections_list = [s.strip() for s in sections.split(',')]
-        
-        fallback = f"""# AI Code Agent Prompt - Professional Website Project Overview
-Create a professional {website_type} website optimized for {audience}.
-
-Primary Goal: {purpose}
-
-Design Theme: {color_scheme} with modern UI/UX
-
-Required Pages/Sections
-"""
-        for i, section in enumerate(sections_list, 1):
-            fallback += f"{i}. **{section.strip()}** - Complete page with relevant content\n"
-        
-        fallback += f"""Feature Requirements
-{features}
-
-Core Features:
-✅ Fully responsive design (mobile, tablet, desktop)
-✅ Smooth scroll animations using AOS.js
-✅ Modern icons using Feather Icons
-✅ Interactive animations with Vanta.js (hero section)
-✅ TailwindCSS for all styling
-✅ Contact forms with validation (if applicable)
-✅ Image galleries with lightbox effect
-✅ Smooth navigation with active states
-✅ Loading animations and transitions
-✅ Accessibility compliant (WCAG 2.1)
-
-## Technology Stack
-### Required Libraries (CDN)
-<!-- TailwindCSS -->
-<script src="{CDN_LINKS['tailwind']}"></script>
-
-<!-- AOS Scroll Animations -->
-<link href="{CDN_LINKS['aos_css']}" rel="stylesheet">
-<script src="{CDN_LINKS['aos_js']}"></script>
-
-<!-- Feather Icons -->
-<script src="{CDN_LINKS['feather_icons_min']}"></script>
-<script src="{CDN_LINKS['feather_icons']}"></script>
-
-<!-- Anime.js -->
-<script src="{CDN_LINKS['anime_js']}"></script>
-
-<!-- Vanta.js (for hero backgrounds) -->
-<script src="{CDN_LINKS['vanta_globe']}"></script>
-
-## Design Specifications
-### Color Scheme
-Primary theme: {color_scheme}
-
-Suggested TailwindCSS Colors:
-- Primary: bg-blue-600, text-blue-600
-- Secondary: bg-gray-800, text-gray-800
-- Accent: bg-purple-500, text-purple-500
-- Background: bg-white, bg-gray-50
-- Text: text-gray-900, text-gray-600
-
-### Typography
-- Headings: Bold, large (text-4xl, text-5xl, font-bold)
-- Body: Readable size (text-base, text-lg)
-- Use TailwindCSS typography utilities
-
-### Layout Structure
-- Header: Fixed/sticky navigation with logo and menu
-- Hero Section: Full-screen with Vanta.js background animation
-- Content Sections: Alternating layouts with AOS animations
-- Footer: Links, social media, copyright
-
-### Responsive Breakpoints
-- Mobile: sm: (640px)
-- Tablet: md: (768px)
-- Desktop: lg: (1024px)
-- Large: xl: (1280px)
-
-### Image Guidelines
-Use Static.Photos for Placeholders
-{PROMPT_FOR_IMAGE_GENERATION}
-
-Recommended Usage:
-- Hero images: http://static.photos/abstract/1200x630/1
-- Portfolio/Gallery: http://static.photos/technology/640x360/[1-10]
-- Team photos: http://static.photos/people/320x240/[1-5]
-- Background images: http://static.photos/minimal/1024x576/42
-
-### Animation Requirements
-#### AOS Scroll Animations
-Use on all major sections:
-<div data-aos="fade-up" data-aos-duration="1000">
-    Content here
-</div>
-Available Effects: fade-up, fade-down, fade-left, fade-right, zoom-in, flip-up
-
-#### Vanta.js Hero Background
-Implement on hero section:
-<script>
-VANTA.GLOBE({{
-  el: "#hero",
-  mouseControls: true,
-  touchControls: true,
-  gyroControls: false,
-  minHeight: 200.00,
-  minWidth: 200.00,
-  scale: 1.00,
-  scaleMobile: 1.00,
-  color: 0x3b82f6,
-  backgroundColor: 0x0f172a
-}})
-</script>
-
-#### Feather Icons Usage
-<i data-feather="menu"></i>
-<i data-feather="mail"></i>
-<i data-feather="phone"></i>
-<i data-feather="github"></i>
-
-### Code Structure Format
-{"Update Format (Modifying Existing Pages)" if is_update else "New Website Format"}
-{"Use UPDATE_PAGE blocks:" if is_update else "Use TITLE_PAGE blocks:"}"""
-
-        if is_update:
-            fallback += f"""
-{UPDATE_PAGE_START}index.html{UPDATE_PAGE_END}
-
-{SEARCH_START}
-    <h1>Old Title</h1>
-{DIVIDER}
-    <h1 class="text-4xl font-bold text-blue-600">New Title</h1>
-{REPLACE_END}
-
-For adding new pages:
-{NEW_PAGE_START}about.html{NEW_PAGE_END}
-```html
-{HTML_TEMPLATE_EXAMPLE}
-```"""
-        else:
-            fallback += f"""
-{TITLE_PAGE_START}index.html{TITLE_PAGE_END}
-```html
-{HTML_TEMPLATE_EXAMPLE}
-```"""
-        
-        fallback += """
-## Quality Standards
-### Code Quality
-- Clean, well-commented code
-- Proper indentation and formatting
-- Semantic HTML5 elements
-- Modular CSS with TailwindCSS utilities
-- Efficient JavaScript
-
-### Accessibility
-- ARIA labels on interactive elements
-- Alt text on all images
-- Proper heading hierarchy (h1-h6)
-- Keyboard navigation support
-- Sufficient color contrast
-
-### Performance
-- Optimized images
-- Minified assets where possible
-- Efficient animations
-- Fast loading times (<3 seconds)
-- Mobile-optimized
-
-### Browser Compatibility
-- Chrome, Firefox, Safari, Edge (latest 2 versions)
-- iOS Safari and Chrome Mobile
-- Graceful degradation for older browsers
-
-## Deliverable
-Create a complete, production-ready website that:
-✅ Follows all format requirements for the AI code agent
-✅ Includes all specified pages/sections
-✅ Uses TailwindCSS for ALL styling
-✅ Implements animations (AOS, Vanta.js)
-✅ Uses Feather Icons for all icons
-✅ Uses static.photos for all images
-✅ Is fully responsive (mobile-first)
-✅ Is accessible (WCAG 2.1 AA)
-✅ Has clean, professional code
-✅ Is ready for immediate deployment
-
-Generate the complete website code now following the format specified above."""
-        return fallback
-
-# Initialize enhancer
-enhancer = WebsitePromptEnhancer()
-
-# Gradio Interface Functions
-def submit_answer(answer):
-    if not answer.strip():
-        return (
-            "",
-            "",
-            "",
-            gr.update(interactive=False),
-            gr.update(interactive=False),
-            gr.update(visible=False),
-            "⚠️ Please enter your initial website idea first!",
-            "",
-            gr.update(visible=False)
-        )
-    
-    next_question = enhancer.process_answer(answer)
-
-    if next_question:
-        suggestion = enhancer.get_suggested_answer()
-        return (
-            next_question,
-            suggestion,
-            "",
-            gr.update(interactive=True),
-            gr.update(interactive=True),
-            gr.update(visible=False),
-            f"��� Progress: {enhancer.current_question_idx}/{len(WEB_DEV_QUESTIONS)} questions answered",
-            "",
-            gr.update(visible=False)
-        )
-    else:
-        return (
-            "🎉 All questions completed! Click 'Generate Enhanced Prompt' below.",
-            "",
-            "",
-            gr.update(interactive=False),
-            gr.update(interactive=False),
-            gr.update(visible=True),
-            "✅ All questions answered! Ready to generate your AI Code Agent prompt.",
-            "",
-            gr.update(visible=False)
-        )
-
-def start_process(initial_prompt):
-    if not initial_prompt.strip():
-        return (
-            "",
-            "",
-            "",
-            gr.update(interactive=False),
-            gr.update(interactive=False),
-            gr.update(visible=False),
-            "⚠️ Please enter your initial website idea first!",
-            "",
-            gr.update(visible=False)
-        )
-    
-    next_question = enhancer.start_enhancement(initial_prompt)
-    suggestion = enhancer.get_suggested_answer()
-    
-    return (
-        next_question,
-        suggestion,
-        "",
-        gr.update(interactive=True),
-        gr.update(interactive=True),
-        gr.update(visible=False),
-        f"✅ Progress: {enhancer.current_question_idx}/{len(WEB_DEV_QUESTIONS)} questions answered",
-        "",
-        gr.update(visible=False)
-    )
-
-def generate_final_prompt(model_choice):
-    try:
-        status_msg = "🔄 Generating AI Code Agent prompt... Please wait."
-        yield "", status_msg, gr.update(visible=False)
-        enhanced = enhancer.generate_enhanced_prompt(model_choice)
-        
-        yield enhanced, "✅ AI Code Agent prompt generated! Copy and paste into your AI code agent to generate the website.", gr.update(visible=True)
-    except Exception as e:
-        yield f"Error: {str(e)}", "❌ Generation failed. Please try again or use a different model.", gr.update(visible=False)
-
-def save_prompt_to_file(prompt_text):
-    """Save the prompt to a text file and return the file path"""
-    if not prompt_text or prompt_text.strip() == "":
-        return None
-    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
-    filename = f"ai_code_agent_prompt_{timestamp}.txt"
-
-    with open(filename, "w", encoding="utf-8") as f:
-        f.write("=" * 80 + "\n")
-        f.write("AI CODE AGENT - WEBSITE DEVELOPMENT PROMPT\n")
-        f.write(f"Generated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n")
-        f.write("=" * 80 + "\n\n")
-        f.write(prompt_text)
-        f.write("\n\n" + "=" * 80 + "\n")
-        f.write("Paste this prompt into your AI Code Agent to generate the website\n")
-        f.write("Compatible with: Custom AI Code Agents, Cursor, Bolt.new, v0.dev, etc.\n")
-        f.write("=" * 80 + "\n")
-
-    return filename
-
-# Custom CSS
-custom_css = """
-.container {max-width: 1200px; margin: auto; padding: 20px;}
-.header {
-    text-align: center;
-    margin-bottom: 30px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 30px;
-    border-radius: 15px;
-    color: white;
-}
-.question-box {
-    background: #f0f7ff;
-    padding: 20px;
-    border-radius: 10px;
-    margin: 10px 0;
-    border-left: 4px solid #667eea;
-}
-.status-box {
-    background: #e8f5e9;
-    padding: 15px;
-    border-radius: 8px;
-    margin: 10px 0;
-    font-weight: 500;
-}
-.suggestion-box {
-    background: #fff3e0;
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 0.9em;
-    color: #e65100;
-}
-.download-btn {
-    background: #4CAF50 !important;
-}
-.code-agent-badge {
-    background: #667eea;
-    color: white;
-    padding: 5px 15px;
-    border-radius: 20px;
-    font-size: 0.85em;
-    display: inline-block;
-    margin: 5px;
-}
-"""
-
-# Build Interface
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="AI Code Agent Prompt Enhancer") as demo:
-    gr.Markdown("""
-# 🚀 AI Code Agent Prompt Enhancer
-### Transform Ideas into Professional AI Code Agent Prompts
-Generate detailed, production-ready prompts optimized for AI code agent systems.
-
-<div style="text-align: center; margin: 10px 0;">
-    <span class="code-agent-badge">✨ TailwindCSS</span>
-    <span class="code-agent-badge">🎨 Feather Icons</span>
-    <span class="code-agent-badge">📱 AOS Animations</span>
-    <span class="code-agent-badge">🌟 Vanta.js</span>
-    <span class="code-agent-badge">🖼️ Static.photos</span>
-</div>
-""", elem_classes="header")
-
-    with gr.Row():
-        with gr.Column(scale=2):
-            initial_prompt = gr.Textbox(
-                label="💡 Your Website Idea",
-                placeholder="Example: 'Create a modern portfolio website for a photographer with gallery and contact form'",
-                lines=3,
-                info="Describe what kind of website you want to create"
-            )
-        with gr.Column(scale=1):
-            start_btn = gr.Button(
-                "🎯 Start Enhancement",
-                variant="primary",
-                size="lg"
-            )
-
-    status_text = gr.Markdown("👆 Enter your idea above and click 'Start Enhancement'", elem_classes="status-box")
-
-    gr.Markdown("---")
-
-    with gr.Row():
-        with gr.Column():
-            current_question = gr.Textbox(
-                label="❓ Current Question",
-                interactive=False,
-                lines=2,
-                elem_classes="question-box"
-            )
-            
-            suggestion_text = gr.Textbox(
-                label="💭 Suggestion",
-                interactive=False,
-                lines=2,
-                elem_classes="suggestion-box"
-            )
-            
-            answer_input = gr.Textbox(
-                label="✍️ Your Answer",
-                placeholder="Type your answer here...",
-                lines=4,
-                interactive=False
-            )
-            
-            submit_btn = gr.Button(
-                "Submit Answer ➡️",
-                interactive=False,
-                variant="primary"
-            )
-
-    gr.Markdown("---")
-
-    with gr.Row():
-        model_choice = gr.Dropdown(
-            choices=AVAILABLE_MODELS,
-            value=DEFAULT_MODEL,
-            label="🤖 Select AI Model",
-            info="Choose the model for prompt generation"
-        )
-
-    generate_btn = gr.Button(
-        "✨ Generate AI Code Agent Prompt",
-        variant="primary",
-        size="lg",
-        visible=False
-    )
-
-    enhanced_output = gr.Textbox(
-        label="🎨 AI Code Agent Prompt (Ready to Use)",
-        lines=30,
-        show_copy_button=True,
-        placeholder="Your AI code agent prompt will appear here...",
-        info="Copy this prompt and paste it into your AI code agent system"
-    )
-
-    download_btn = gr.File(
-        label="📥 Download Prompt as Text File",
-        visible=False
-    )
-
-    gr.Markdown("""
----
-## 📋 How to Use
-
-### Step 1: Create Your Prompt
-1. **Enter Your Idea** - Describe your website concept
-2. **Answer Questions** - Respond to guided questions (7 total)
-3. **Generate Prompt** - Click to create your AI code agent prompt
-4. **Download/Copy** - Save or copy the generated prompt
-
-### Step 2: Use with AI Code Agent
-1. **Copy the generated prompt**
-2. **Paste into your AI code agent** (Cursor, Bolt.new, v0.dev, custom agents)
-3. **Get production-ready code** with proper formatting
-
----
-
-## 🎯 What You Get
-
-✅ **Clean, Professional Prompt** - No Q&A clutter, just specifications  
-✅ **AI Code Agent Format** - Uses TITLE_PAGE, UPDATE_PAGE, SEARCH/REPLACE blocks  
-✅ **TailwindCSS Integration** - Modern, responsive styling  
-✅ **Animation Ready** - AOS scroll animations + Vanta.js backgrounds  
-✅ **Icon System** - Feather Icons integrated  
-✅ **Image Placeholders** - Static.photos for all images  
-✅ **Production Ready** - Complete technical specifications  
-✅ **Downloadable** - Save for future use  
-
----
-
-## 🔧 Compatible Systems
-
-This tool generates prompts compatible with:
-- ✨ **Custom AI Code Agents** (using the TITLE_PAGE/UPDATE_PAGE format)
-- ✨ **Cursor AI** - Paste and generate
-- ✨ **Bolt.new** - Direct integration
-- ✨ **v0.dev** - Component generation
-- ✨ **GitHub Copilot** - Enhanced context
-- ✨ **Any LLM** - ChatGPT, Claude, Gemini
-
----
-
-## 📚 Output Format
-
-The generated prompts use a specific format for AI code agents:
-
-### For New Websites:
-```
-<<<<<<< START_TITLE index.html >>>>>>> END_TITLE
-```html
-<!DOCTYPE html>
-...complete HTML code...
-```
-```
-
-### For Updates:
-```
-<<<<<<< UPDATE_PAGE_START index.html >>>>>>> UPDATE_PAGE_END
-<<<<<<< SEARCH
-    <h1>Old Content</h1>
-=======
-    <h1 class="text-4xl font-bold">New Content</h1>
->>>>>>> REPLACE
-```
-
----
-
-## 💡 Pro Tips
-
-- 📝 Be specific in your answers for better results
-- 🎨 Mention preferred colors, styles, and layouts
-- 📱 Specify if you need mobile-first design
-- 🔄 Indicate if updating existing code or creating new
-- ⚡ The more detail you provide, the better the output
-
----
-
-## 🛠️ Technical Stack Included
-
-Every generated prompt includes:
-- **TailwindCSS** - Utility-first CSS framework
-- **Feather Icons** - Beautiful icon set
-- **AOS.js** - Scroll animation library
-- **Vanta.js** - Animated backgrounds
-- **Anime.js** - Advanced animations
-- **Static.photos** - Professional placeholder images
-
----
-
-Made with ❤️ for developers | Optimized for AI Code Agents
-""")
-
-# Event Handlers
-start_btn.click(
-    fn=start_process,
-    inputs=[initial_prompt],
-    outputs=[
-        current_question,
-        suggestion_text,
-        answer_input,
-        answer_input,
-        submit_btn,
-        generate_btn,
-        status_text,
-        enhanced_output,
-        download_btn
-    ]
-)
-
-submit_btn.click(
-    fn=submit_answer,
-    inputs=[answer_input],
-    outputs=[
-        current_question,
-        suggestion_text,
-        answer_input,
-        answer_input,
-        submit_btn,
-        generate_btn,
-        status_text,
-        enhanced_output,
-        download_btn
-    ]
-)
-
-answer_input.submit(
-    fn=submit_answer,
-    inputs=[answer_input],
-    outputs=[
-        current_question,
-        suggestion_text,
-        answer_input,
-        answer_input,
-        submit_btn,
-        generate_btn,
-        status_text,
-        enhanced_output,
-        download_btn
-    ]
-)
-
-generate_btn.click(
-    fn=generate_final_prompt,
-    inputs=[model_choice],
-    outputs=[enhanced_output, status_text, download_btn]
-)
-
-enhanced_output.change(
-    fn=save_prompt_to_file,
-    inputs=[enhanced_output],
-    outputs=[download_btn]
-)
-
-if __name__ == "__main__":
-    demo.launch()
+import gradio as gr
+from huggingface_hub import InferenceClient
+import os
+from datetime import datetime
+
+# Import all prompts and constants from prompts.py
+from prompts import (
+    SEARCH_START, DIVIDER, REPLACE_END,
+    TITLE_PAGE_START, TITLE_PAGE_END,
+    NEW_PAGE_START, NEW_PAGE_END,
+    UPDATE_PAGE_START, UPDATE_PAGE_END,
+    WEB_DEV_QUESTIONS, PROMPT_FOR_IMAGE_GENERATION,
+    INITIAL_SYSTEM_PROMPT, FOLLOW_UP_SYSTEM_PROMPT,
+    PROMPT_ENGINEER_SYSTEM_PROMPT, SUGGESTED_ANSWERS,
+    HTML_TEMPLATE_EXAMPLE, CDN_LINKS,
+    AVAILABLE_MODELS, DEFAULT_MODEL
+)
+
+# Initialize the Hugging Face Inference Client
+client = InferenceClient(token=os.getenv("HF_TOKEN"))
+
+class WebsitePromptEnhancer:
+    def __init__(self):
+        self.context = []
+        self.current_question_idx = 0
+        self.user_responses = {}
+        self.initial_prompt = ""
+        self.is_update = False
+    
+    def reset(self):
+        self.context = []
+        self.current_question_idx = 0
+        self.user_responses = {}
+        self.initial_prompt = ""
+        self.is_update = False
+    
+    def start_enhancement(self, initial_prompt):
+        self.reset()
+        self.initial_prompt = initial_prompt
+        self.current_question_idx = 0
+        return self.get_next_question()
+    
+    def get_next_question(self):
+        if self.current_question_idx < len(WEB_DEV_QUESTIONS):
+            return WEB_DEV_QUESTIONS[self.current_question_idx]
+        return None
+    
+    def get_suggested_answer(self):
+        """Generate suggested answer based on context"""
+        if self.current_question_idx < len(WEB_DEV_QUESTIONS):
+            return SUGGESTED_ANSWERS.get(self.current_question_idx, "")
+        return ""
+    
+    def process_answer(self, answer):
+        if self.current_question_idx < len(WEB_DEV_QUESTIONS):
+            question = WEB_DEV_QUESTIONS[self.current_question_idx]
+            self.user_responses[question] = answer
+            self.context.append(f"Q: {question}\nA: {answer}")
+            
+            # Check if it's an update request
+            if self.current_question_idx == len(WEB_DEV_QUESTIONS) - 1:
+                if "update" in answer.lower() or "modify" in answer.lower() or "change" in answer.lower():
+                    self.is_update = True
+            
+            self.current_question_idx += 1
+        
+        next_q = self.get_next_question()
+        return next_q
+    
+    def generate_enhanced_prompt(self, model_name=DEFAULT_MODEL):
+        # Extract structured information from responses
+        website_type = self.user_responses.get(WEB_DEV_QUESTIONS[0], "website")
+        purpose = self.user_responses.get(WEB_DEV_QUESTIONS[1], "general purpose")
+        audience = self.user_responses.get(WEB_DEV_QUESTIONS[2], "general audience")
+        sections = self.user_responses.get(WEB_DEV_QUESTIONS[3], "Home, About, Contact")
+        color_scheme = self.user_responses.get(WEB_DEV_QUESTIONS[4], "modern and professional")
+        features = self.user_responses.get(WEB_DEV_QUESTIONS[5], "responsive design")
+        update_type = self.user_responses.get(WEB_DEV_QUESTIONS[6], "new website")
+        
+        # Determine if it's an update or new website
+        is_update = "update" in update_type.lower() or "modify" in update_type.lower()
+        
+        enhancement_prompt = f"""Create a detailed prompt for an AI code agent to build a professional website based on these requirements:
+
+Project: {self.initial_prompt}
+Type: {website_type}
+Purpose: {purpose}
+Target Audience: {audience}
+Required Sections/Pages: {sections}
+Design Theme: {color_scheme}
+Features: {features}
+Request Type: {"Update existing website" if is_update else "Create new website"}
+
+Generate a comprehensive, production-ready specification following the AI code agent format.
+The output should be a clean prompt (no Q&A) that includes:
+1. Clear project description
+2. Required pages/sections with specific details
+3. Design specifications (colors, layout, typography)
+4. Feature requirements with implementation details
+5. Technical stack specifications (TailwindCSS, Feather Icons, AOS, Vanta.js)
+6. Responsive design requirements
+7. Accessibility guidelines
+8. Image placeholder usage (static.photos)
+
+The prompt should be ready to paste directly into an AI code agent system."""
+
+        try:
+            messages = [
+                {"role": "system", "content": PROMPT_ENGINEER_SYSTEM_PROMPT},
+                {"role": "user", "content": enhancement_prompt}
+            ]
+            
+            response = client.chat_completion(
+                messages=messages,
+                model=model_name,
+                max_tokens=3000,
+                temperature=0.7,
+                stream=False
+            )
+            
+            enhanced_prompt = response.choices[0].message.content
+            return self._format_for_code_agent(enhanced_prompt, is_update)
+            
+        except Exception as e:
+            try:
+                full_prompt = f"{PROMPT_ENGINEER_SYSTEM_PROMPT}\n\n{enhancement_prompt}"
+                response = client.text_generation(
+                    full_prompt,
+                    model=model_name,
+                    max_new_tokens=3000,
+                    temperature=0.7,
+                    return_full_text=False
+                )
+                return self._format_for_code_agent(response, is_update)
+            except Exception as e2:
+                return self._create_fallback_prompt(
+                    website_type, purpose, audience, sections, 
+                    color_scheme, features, is_update
+                )
+    
+    def _format_for_code_agent(self, prompt, is_update=False):
+        """Format the prompt to work with the AI code agent system"""
+        
+        formatted_prompt = f"""# AI Code Agent Prompt - Website Generation
+
+{prompt}
+
+---
+
+## Technical Requirements for AI Code Agent
+
+### Technology Stack
+- **CSS Framework:** TailwindCSS (CDN: {CDN_LINKS['tailwind']})
+- **Icons:** Feather Icons ({CDN_LINKS['feather_icons']})
+- **Scroll Animations:** AOS.js ({CDN_LINKS['aos_css']})
+- **Interactive Animations:** Vanta.js ({CDN_LINKS['vanta_globe']})
+- **Additional:** Anime.js for advanced animations
+
+### Image Placeholders
+{PROMPT_FOR_IMAGE_GENERATION}
+
+### Output Format Instructions
+{"**For Updates/Modifications:**" if is_update else "**For New Website:**"}
+
+{'Use the UPDATE_PAGE format:' if is_update else 'Use the TITLE_PAGE format:'}"""
+
+        if is_update:
+            formatted_prompt += f"""
+1. Start with: {UPDATE_PAGE_START}
+2. Specify the page name (e.g., index.html)
+3. Close with: {UPDATE_PAGE_END}
+4. Use SEARCH/REPLACE blocks:
+   - {SEARCH_START}
+   - (exact code to replace)
+   - {DIVIDER}
+   - (new code)
+   - {REPLACE_END}
+
+For new pages during update:
+1. Start with: {NEW_PAGE_START}
+2. Specify page name (e.g., about.html)
+3. Close with: {NEW_PAGE_END}
+4. Provide complete HTML in ```html``` blocks
+5. Update navigation links in all existing pages"""
+        else:
+            formatted_prompt += f"""
+1. Start with: {TITLE_PAGE_START}
+2. Add page name (e.g., index.html)
+3. Close with: {TITLE_PAGE_END}
+4. Provide complete HTML in ```html``` blocks
+5. First file must be index.html
+6. Include all required CDN links in <head>
+7. Initialize all libraries in <body>"""
+
+        formatted_prompt += f"""
+
+### Required Code Structure
+
+**Every HTML file must include:**
+
+```html
+{HTML_TEMPLATE_EXAMPLE}
+```
+
+### Design Guidelines
+- Mobile-first responsive design using TailwindCSS
+- Use semantic HTML5 elements
+- Implement smooth scroll animations with AOS
+- Add interactive animations where appropriate (Vanta.js)
+- Use Feather icons for all icons: <i data-feather="icon-name"></i>
+- Ensure accessibility (ARIA labels, semantic tags)
+- Cross-browser compatibility
+- Performance optimized
+
+### Navigation
+- For multi-page websites: Use <a href="page.html"> (no onclick)
+- Ensure all pages have consistent navigation
+- Mobile-responsive hamburger menu
+
+### Ready for AI Code Agent
+This prompt is formatted for direct use with AI code agents.
+Simply paste it into your AI coding assistant to generate the website."""
+        return formatted_prompt
+
+    def _create_fallback_prompt(self, website_type, purpose, audience, sections, color_scheme, features, is_update=False):
+        """Create a detailed fallback prompt in code agent format"""
+        
+        sections_list = [s.strip() for s in sections.split(',')]
+        
+        fallback = f"""# AI Code Agent Prompt - Professional Website Project Overview
+Create a professional {website_type} website optimized for {audience}.
+
+Primary Goal: {purpose}
+
+Design Theme: {color_scheme} with modern UI/UX
+
+Required Pages/Sections
+"""
+        for i, section in enumerate(sections_list, 1):
+            fallback += f"{i}. **{section.strip()}** - Complete page with relevant content\n"
+        
+        fallback += f"""Feature Requirements
+{features}
+
+Core Features:
+✅ Fully responsive design (mobile, tablet, desktop)
+✅ Smooth scroll animations using AOS.js
+✅ Modern icons using Feather Icons
+✅ Interactive animations with Vanta.js (hero section)
+✅ TailwindCSS for all styling
+✅ Contact forms with validation (if applicable)
+✅ Image galleries with lightbox effect
+✅ Smooth navigation with active states
+✅ Loading animations and transitions
+✅ Accessibility compliant (WCAG 2.1)
+
+## Technology Stack
+### Required Libraries (CDN)
+<!-- TailwindCSS -->
+<script src="{CDN_LINKS['tailwind']}"></script>
+
+<!-- AOS Scroll Animations -->
+<link href="{CDN_LINKS['aos_css']}" rel="stylesheet">
+<script src="{CDN_LINKS['aos_js']}"></script>
+
+<!-- Feather Icons -->
+<script src="{CDN_LINKS['feather_icons_min']}"></script>
+<script src="{CDN_LINKS['feather_icons']}"></script>
+
+<!-- Anime.js -->
+<script src="{CDN_LINKS['anime_js']}"></script>
+
+<!-- Vanta.js (for hero backgrounds) -->
+<script src="{CDN_LINKS['vanta_globe']}"></script>
+
+## Design Specifications
+### Color Scheme
+Primary theme: {color_scheme}
+
+Suggested TailwindCSS Colors:
+- Primary: bg-blue-600, text-blue-600
+- Secondary: bg-gray-800, text-gray-800
+- Accent: bg-purple-500, text-purple-500
+- Background: bg-white, bg-gray-50
+- Text: text-gray-900, text-gray-600
+
+### Typography
+- Headings: Bold, large (text-4xl, text-5xl, font-bold)
+- Body: Readable size (text-base, text-lg)
+- Use TailwindCSS typography utilities
+
+### Layout Structure
+- Header: Fixed/sticky navigation with logo and menu
+- Hero Section: Full-screen with Vanta.js background animation
+- Content Sections: Alternating layouts with AOS animations
+- Footer: Links, social media, copyright
+
+### Responsive Breakpoints
+- Mobile: sm: (640px)
+- Tablet: md: (768px)
+- Desktop: lg: (1024px)
+- Large: xl: (1280px)
+
+### Image Guidelines
+Use Static.Photos for Placeholders
+{PROMPT_FOR_IMAGE_GENERATION}
+
+Recommended Usage:
+- Hero images: http://static.photos/abstract/1200x630/1
+- Portfolio/Gallery: http://static.photos/technology/640x360/[1-10]
+- Team photos: http://static.photos/people/320x240/[1-5]
+- Background images: http://static.photos/minimal/1024x576/42
+
+### Animation Requirements
+#### AOS Scroll Animations
+Use on all major sections:
+<div data-aos="fade-up" data-aos-duration="1000">
+    Content here
+</div>
+Available Effects: fade-up, fade-down, fade-left, fade-right, zoom-in, flip-up
+
+#### Vanta.js Hero Background
+Implement on hero section:
+<script>
+VANTA.GLOBE({{
+  el: "#hero",
+  mouseControls: true,
+  touchControls: true,
+  gyroControls: false,
+  minHeight: 200.00,
+  minWidth: 200.00,
+  scale: 1.00,
+  scaleMobile: 1.00,
+  color: 0x3b82f6,
+  backgroundColor: 0x0f172a
+}})
+</script>
+
+#### Feather Icons Usage
+<i data-feather="menu"></i>
+<i data-feather="mail"></i>
+<i data-feather="phone"></i>
+<i data-feather="github"></i>
+
+### Code Structure Format
+{"Update Format (Modifying Existing Pages)" if is_update else "New Website Format"}
+{"Use UPDATE_PAGE blocks:" if is_update else "Use TITLE_PAGE blocks:"}"""
+
+        if is_update:
+            fallback += f"""
+{UPDATE_PAGE_START}index.html{UPDATE_PAGE_END}
+
+{SEARCH_START}
+    <h1>Old Title</h1>
+{DIVIDER}
+    <h1 class="text-4xl font-bold text-blue-600">New Title</h1>
+{REPLACE_END}
+
+For adding new pages:
+{NEW_PAGE_START}about.html{NEW_PAGE_END}
+```html
+{HTML_TEMPLATE_EXAMPLE}
+```"""
+        else:
+            fallback += f"""
+{TITLE_PAGE_START}index.html{TITLE_PAGE_END}
+```html
+{HTML_TEMPLATE_EXAMPLE}
+```"""
+        
+        fallback += """
+## Quality Standards
+### Code Quality
+- Clean, well-commented code
+- Proper indentation and formatting
+- Semantic HTML5 elements
+- Modular CSS with TailwindCSS utilities
+- Efficient JavaScript
+
+### Accessibility
+- ARIA labels on interactive elements
+- Alt text on all images
+- Proper heading hierarchy (h1-h6)
+- Keyboard navigation support
+- Sufficient color contrast
+
+### Performance
+- Optimized images
+- Minified assets where possible
+- Efficient animations
+- Fast loading times (<3 seconds)
+- Mobile-optimized
+
+### Browser Compatibility
+- Chrome, Firefox, Safari, Edge (latest 2 versions)
+- iOS Safari and Chrome Mobile
+- Graceful degradation for older browsers
+
+## Deliverable
+Create a complete, production-ready website that:
+✅ Follows all format requirements for the AI code agent
+✅ Includes all specified pages/sections
+✅ Uses TailwindCSS for ALL styling
+✅ Implements animations (AOS, Vanta.js)
+✅ Uses Feather Icons for all icons
+✅ Uses static.photos for all images
+✅ Is fully responsive (mobile-first)
+✅ Is accessible (WCAG 2.1 AA)
+✅ Has clean, professional code
+✅ Is ready for immediate deployment
+
+Generate the complete website code now following the format specified above."""
+        return fallback
+
+# Initialize enhancer
+enhancer = WebsitePromptEnhancer()
+
+# Gradio Interface Functions
+def submit_answer(answer):
+    if not answer.strip():
+        return (
+            "",
+            "",
+            "",
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(visible=False),
+            "⚠️ Please enter your initial website idea first!",
+            "",
+            gr.update(visible=False)
+        )
+    
+    next_question = enhancer.process_answer(answer)
+
+    if next_question:
+        suggestion = enhancer.get_suggested_answer()
+        return (
+            next_question,
+            suggestion,
+            "",
+            gr.update(interactive=True),
+            gr.update(interactive=True),
+            gr.update(visible=False),
+            f"✅ Progress: {enhancer.current_question_idx}/{len(WEB_DEV_QUESTIONS)} questions answered",
+            "",
+            gr.update(visible=False)
+        )
+    else:
+        return (
+            "🎉 All questions completed! Click 'Generate Enhanced Prompt' below.",
+            "",
+            "",
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(visible=True),
+            "✅ All questions answered! Ready to generate your AI Code Agent prompt.",
+            "",
+            gr.update(visible=False)
+        )
+
+def start_process(initial_prompt):
+    if not initial_prompt.strip():
+        return (
+            "",
+            "",
+            "",
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+            gr.update(visible=False),
+            "⚠️ Please enter your initial website idea first!",
+            "",
+            gr.update(visible=False)
+        )
+    
+    next_question = enhancer.start_enhancement(initial_prompt)
+    suggestion = enhancer.get_suggested_answer()
+    
+    return (
+        next_question,
+        suggestion,
+        "",
+        gr.update(interactive=True),
+        gr.update(interactive=True),
+        gr.update(visible=False),
+        f"✅ Progress: {enhancer.current_question_idx}/{len(WEB_DEV_QUESTIONS)} questions answered",
+        "",
+        gr.update(visible=False)
+    )
+
+def generate_final_prompt(model_choice):
+    try:
+        status_msg = "🔄 Generating AI Code Agent prompt... Please wait."
+        yield "", status_msg, gr.update(visible=False)
+        enhanced = enhancer.generate_enhanced_prompt(model_choice)
+        
+        yield enhanced, "✅ AI Code Agent prompt generated! Copy and paste into your AI code agent to generate the website.", gr.update(visible=True)
+    except Exception as e:
+        yield f"Error: {str(e)}", "❌ Generation failed. Please try again or use a different model.", gr.update(visible=False)
+
+def save_prompt_to_file(prompt_text):
+    """Save the prompt to a text file and return the file path"""
+    if not prompt_text or prompt_text.strip() == "":
+        return None
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    filename = f"ai_code_agent_prompt_{timestamp}.txt"
+
+    with open(filename, "w", encoding="utf-8") as f:
+        f.write("=" * 80 + "\n")
+        f.write("AI CODE AGENT - WEBSITE DEVELOPMENT PROMPT\n")
+        f.write(f"Generated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n")
+        f.write("=" * 80 + "\n\n")
+        f.write(prompt_text)
+        f.write("\n\n" + "=" * 80 + "\n")
+        f.write("Paste this prompt into your AI Code Agent to generate the website\n")
+        f.write("Compatible with: Custom AI Code Agents, Cursor, Bolt.new, v0.dev, etc.\n")
+        f.write("=" * 80 + "\n")
+
+    return filename
+
+# Custom CSS
+custom_css = """
+.container {max-width: 1200px; margin: auto; padding: 20px;}
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 30px;
+    border-radius: 15px;
+    color: white;
+}
+.question-box {
+    background: #f0f7ff;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 10px 0;
+    border-left: 4px solid #667eea;
+}
+.status-box {
+    background: #e8f5e9;
+    padding: 15px;
+    border-radius: 8px;
+    margin: 10px 0;
+    font-weight: 500;
+}
+.suggestion-box {
+    background: #fff3e0;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 0.9em;
+    color: #e65100;
+}
+.download-btn {
+    background: #4CAF50 !important;
+}
+.code-agent-badge {
+    background: #667eea;
+    color: white;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 0.85em;
+    display: inline-block;
+    margin: 5px;
+}
+"""
+
+# Build Interface
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="AI Code Agent Prompt Enhancer") as demo:
+    gr.Markdown("""
+# 🚀 AI Code Agent Prompt Enhancer
+### Transform Ideas into Professional AI Code Agent Prompts
+Generate detailed, production-ready prompts optimized for AI code agent systems.
+
+<div style="text-align: center; margin: 10px 0;">
+    <span class="code-agent-badge">✨ TailwindCSS</span>
+    <span class="code-agent-badge">🎨 Feather Icons</span>
+    <span class="code-agent-badge">📱 AOS Animations</span>
+    <span class="code-agent-badge">🌟 Vanta.js</span>
+    <span class="code-agent-badge">🖼️ Static.photos</span>
+</div>
+""", elem_classes="header")
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            initial_prompt = gr.Textbox(
+                label="💡 Your Website Idea",
+                placeholder="Example: 'Create a modern portfolio website for a photographer with gallery and contact form'",
+                lines=3,
+                info="Describe what kind of website you want to create"
+            )
+        with gr.Column(scale=1):
+            start_btn = gr.Button(
+                "🎯 Start Enhancement",
+                variant="primary",
+                size="lg"
+            )
+
+    status_text = gr.Markdown("👆 Enter your idea above and click 'Start Enhancement'", elem_classes="status-box")
+
+    gr.Markdown("---")
+
+    with gr.Row():
+        with gr.Column():
+            current_question = gr.Textbox(
+                label="❓ Current Question",
+                interactive=False,
+                lines=2,
+                elem_classes="question-box"
+            )
+            
+            suggestion_text = gr.Textbox(
+                label="💭 Suggestion",
+                interactive=False,
+                lines=2,
+                elem_classes="suggestion-box"
+            )
+            
+            answer_input = gr.Textbox(
+                label="✍️ Your Answer",
+                placeholder="Type your answer here...",
+                lines=4,
+                interactive=False
+            )
+            
+            submit_btn = gr.Button(
+                "Submit Answer ➡️",
+                interactive=False,
+                variant="primary"
+            )
+
+    gr.Markdown("---")
+
+    with gr.Row():
+        model_choice = gr.Dropdown(
+            choices=AVAILABLE_MODELS,
+            value=DEFAULT_MODEL,
+            label="🤖 Select AI Model",
+            info="Choose the model for prompt generation"
+        )
+
+    generate_btn = gr.Button(
+        "✨ Generate AI Code Agent Prompt",
+        variant="primary",
+        size="lg",
+        visible=False
+    )
+
+    enhanced_output = gr.Textbox(
+        label="🎨 AI Code Agent Prompt (Ready to Use)",
+        lines=30,
+        show_copy_button=True,
+        placeholder="Your AI code agent prompt will appear here...",
+        info="Copy this prompt and paste it into your AI code agent system"
+    )
+
+    download_btn = gr.File(
+        label="📥 Download Prompt as Text File",
+        visible=False
+    )
+
+    gr.Markdown("""
+---
+## 📋 How to Use
+
+### Step 1: Create Your Prompt
+1. **Enter Your Idea** - Describe your website concept
+2. **Answer Questions** - Respond to guided questions (7 total)
+3. **Generate Prompt** - Click to create your AI code agent prompt
+4. **Download/Copy** - Save or copy the generated prompt
+
+### Step 2: Use with AI Code Agent
+1. **Copy the generated prompt**
+2. **Paste into your AI code agent** (Cursor, Bolt.new, v0.dev, custom agents)
+3. **Get production-ready code** with proper formatting
+
+---
+
+## 🎯 What You Get
+
+✅ **Clean, Professional Prompt** - No Q&A clutter, just specifications  
+✅ **AI Code Agent Format** - Uses TITLE_PAGE, UPDATE_PAGE, SEARCH/REPLACE blocks  
+✅ **TailwindCSS Integration** - Modern, responsive styling  
+✅ **Animation Ready** - AOS scroll animations + Vanta.js backgrounds  
+✅ **Icon System** - Feather Icons integrated  
+✅ **Image Placeholders** - Static.photos for all images  
+✅ **Production Ready** - Complete technical specifications  
+✅ **Downloadable** - Save for future use  
+
+---
+
+## 🔧 Compatible Systems
+
+This tool generates prompts compatible with:
+- ✨ **Custom AI Code Agents** (using the TITLE_PAGE/UPDATE_PAGE format)
+- ✨ **Cursor AI** - Paste and generate
+- ✨ **Bolt.new** - Direct integration
+- ✨ **v0.dev** - Component generation
+- ✨ **GitHub Copilot** - Enhanced context
+- ✨ **Any LLM** - ChatGPT, Claude, Gemini
+
+---
+
+## 📚 Output Format
+
+The generated prompts use a specific format for AI code agents:
+
+### For New Websites:
+```
+<<<<<<< START_TITLE index.html >>>>>>> END_TITLE
+```html
+<!DOCTYPE html>
+...complete HTML code...
+```
+```
+
+### For Updates:
+```
+<<<<<<< UPDATE_PAGE_START index.html >>>>>>> UPDATE_PAGE_END
+<<<<<<< SEARCH
+    <h1>Old Content</h1>
+=======
+    <h1 class="text-4xl font-bold">New Content</h1>
+>>>>>>> REPLACE
+```
+
+---
+
+## 💡 Pro Tips
+
+- 📝 Be specific in your answers for better results
+- 🎨 Mention preferred colors, styles, and layouts
+- 📱 Specify if you need mobile-first design
+- 🔄 Indicate if updating existing code or creating new
+- ⚡ The more detail you provide, the better the output
+
+---
+
+## 🛠️ Technical Stack Included
+
+Every generated prompt includes:
+- **TailwindCSS** - Utility-first CSS framework
+- **Feather Icons** - Beautiful icon set
+- **AOS.js** - Scroll animation library
+- **Vanta.js** - Animated backgrounds
+- **Anime.js** - Advanced animations
+- **Static.photos** - Professional placeholder images
+
+---
+
+Made with ❤️ for developers | Optimized for AI Code Agents
+""")
+
+    # Event Handlers
+    start_btn.click(
+        fn=start_process,
+        inputs=[initial_prompt],
+        outputs=[
+            current_question,
+            suggestion_text,
+            answer_input,
+            answer_input,
+            submit_btn,
+            generate_btn,
+            status_text,
+            enhanced_output,
+            download_btn
+        ]
+    )
+
+    submit_btn.click(
+        fn=submit_answer,
+        inputs=[answer_input],
+        outputs=[
+            current_question,
+            suggestion_text,
+            answer_input,
+            answer_input,
+            submit_btn,
+            generate_btn,
+            status_text,
+            enhanced_output,
+            download_btn
+        ]
+    )
+
+    answer_input.submit(
+        fn=submit_answer,
+        inputs=[answer_input],
+        outputs=[
+            current_question,
+            suggestion_text,
+            answer_input,
+            answer_input,
+            submit_btn,
+            generate_btn,
+            status_text,
+            enhanced_output,
+            download_btn
+        ]
+    )
+
+    generate_btn.click(
+        fn=generate_final_prompt,
+        inputs=[model_choice],
+        outputs=[enhanced_output, status_text, download_btn]
+    )
+
+    enhanced_output.change(
+        fn=save_prompt_to_file,
+        inputs=[enhanced_output],
+        outputs=[download_btn]
+    )
+
+if __name__ == "__main__":
+    demo.launch()