Upload 4 files

.gitignore

@@ -0,0 +1,47 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+ENV/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Environment
+.env
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Gradio
+flagged/
+*.txt
+!requirements.txt
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Generated files
+ai_code_agent_prompt_*.txt

app.py

@@ -0,0 +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()

prompt.py

@@ -0,0 +1,247 @@
+"""
+AI Code Agent System Prompts and Constants
+This file contains all the prompts and format constants used by the AI code agent system.
+"""
+
+# ============================================================================
+# CODE AGENT FORMAT CONSTANTS
+# ============================================================================
+
+SEARCH_START = "<<<<<<< SEARCH"
+DIVIDER = "======="
+REPLACE_END = ">>>>>>> REPLACE"
+TITLE_PAGE_START = "<<<<<<< START_TITLE "
+TITLE_PAGE_END = " >>>>>>> END_TITLE"
+NEW_PAGE_START = "<<<<<<< NEW_PAGE_START "
+NEW_PAGE_END = " >>>>>>> NEW_PAGE_END"
+UPDATE_PAGE_START = "<<<<<<< UPDATE_PAGE_START "
+UPDATE_PAGE_END = " >>>>>>> UPDATE_PAGE_END"
+
+# ============================================================================
+# QUESTIONS FOR USER INPUT
+# ============================================================================
+
+WEB_DEV_QUESTIONS = [
+    "What type of website do you want? (e.g., portfolio, e-commerce, blog, landing page, dashboard)",
+    "What is the main purpose/goal of this website?",
+    "Who is the target audience?",
+    "What are the main sections/pages needed? (e.g., Home, About, Contact, Services)",
+    "What color scheme or theme do you prefer? (e.g., modern, minimalist, corporate, vibrant)",
+    "Do you need any specific features? (e.g., contact form, gallery, animations, responsive design)",
+    "Is this a new website or an update to existing pages?"
+]
+
+# ============================================================================
+# SUGGESTED ANSWERS
+# ============================================================================
+
+SUGGESTED_ANSWERS = {
+    0: "e.g., Portfolio website, Business landing page, Personal blog, E-commerce store",
+    1: "e.g., Showcase my work, Attract clients, Share knowledge, Sell products",
+    2: "e.g., Potential clients, General public, Specific industry professionals",
+    3: "e.g., Home, About Me, Portfolio/Projects, Services, Contact",
+    4: "e.g., Blue and white (professional), Dark theme (modern), Pastel colors (creative)",
+    5: "e.g., Contact form, Image gallery, Smooth scrolling, Animations, Mobile responsive",
+    6: "e.g., New website (creates from scratch) or Update existing pages (modifies existing code)"
+}
+
+# ============================================================================
+# IMAGE GENERATION PROMPT
+# ============================================================================
+
+PROMPT_FOR_IMAGE_GENERATION = """If you want to use image placeholder, http://Static.photos Usage:
+Format: http://static.photos/[category]/[dimensions]/[seed] where dimensions must be one of: 200x200, 320x240, 640x360, 1024x576, or 1200x630; seed can be any number (1-999+) for consistent images or omit for random; categories include: 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.
+Examples: http://static.photos/red/320x240/133 (red-themed with seed 133), http://static.photos/640x360 (random category and image), http://static.photos/nature/1200x630/42 (nature-themed with seed 42)."""
+
+# ============================================================================
+# INITIAL SYSTEM PROMPT (For Creating New Websites)
+# ============================================================================
+
+INITIAL_SYSTEM_PROMPT = f"""You are an expert UI/UX and Front-End Developer.
+You create website in a way a designer would, using ONLY HTML, CSS and Javascript.
+Try to create the best UI possible. Important: Make the website responsive by using TailwindCSS. Use it as much as you can, if you can't use it, use custom css (make sure to import tailwind with <script src="https://cdn.tailwindcss.com"></script> in the head).
+Also try to elaborate as much as you can, to create something unique, with a great design.
+If you want to use ICONS import Feather Icons (Make sure to add <script src="https://unpkg.com/feather-icons"></script> and <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> in the head., and <script>feather.replace();</script> in the body. Ex : <i data-feather="user"></i>).
+For scroll animations you can use: AOS.com (Make sure to add <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> and <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> and <script>AOS.init();</script>).
+For interactive animations you can use: Vanta.js (Make sure to add <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> and <script>VANTA.GLOBE({{...</script> in the body.).
+You can create multiple pages website at once (following the format rules below) or a Single Page Application. If the user doesn't ask for a specific version, you have to determine the best version for the user, depending on the request. (Try to avoid the Single Page Application if the user asks for multiple pages.)
+{PROMPT_FOR_IMAGE_GENERATION}
+No need to explain what you did. Just return the expected result. AVOID Chinese characters in the code if not asked by the user.
+Return the results in a ```html``` markdown. Format the results like:
+1. Start with {TITLE_PAGE_START}.
+2. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
+3. Close the start tag with the {TITLE_PAGE_END}.
+4. Start the HTML response with the triple backticks, like ```html.
+5. Insert the following html there.
+6. Close with the triple backticks, like ```.
+7. Retry if another pages.
+Example Code:
+{TITLE_PAGE_START}index.html{TITLE_PAGE_END}
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <script>AOS.init();</script>
+    <script>const {{ animate }} = anime;</script>
+    <script>feather.replace();</script>
+</body>
+</html>
+IMPORTANT: The first file should be always named index.html."""
+
+# ============================================================================
+# FOLLOW-UP SYSTEM PROMPT (For Updating Existing Websites)
+# ============================================================================
+FOLLOW_UP_SYSTEM_PROMPT = f"""You are an expert UI/UX and Front-End Developer modifying an existing HTML files.
+The user wants to apply changes and probably add new features/pages to the website, based on their request.
+You MUST output ONLY the changes required using the following UPDATE_PAGE_START and SEARCH/REPLACE format. Do NOT output the entire file.
+If it's a new page, you MUST applied the following NEW_PAGE_START and UPDATE_PAGE_END format.
+{PROMPT_FOR_IMAGE_GENERATION}
+Do NOT explain the changes or what you did, just return the expected results.
+Update Format Rules:
+
+1. Start with {UPDATE_PAGE_START}
+2. Provide the name of the page you are modifying.
+3. Close the start tag with the {UPDATE_PAGE_END}.
+4. Start with {SEARCH_START}
+5. Provide the exact lines from the current code that need to be replaced.
+6. Use {DIVIDER} to separate the search block from the replacement.
+7. Provide the new lines that should replace the original lines.
+8. End with {REPLACE_END}
+9. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
+10. To insert code, use an empty SEARCH block (only {SEARCH_START} and {DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line before the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
+11. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only {DIVIDER} and {REPLACE_END} on their lines).
+12. IMPORTANT: The SEARCH block must exactly match the current code, including indentation and whitespace.
+Example Modifying Code:
+Some explanation...
+{UPDATE_PAGE_START}index.html{UPDATE_PAGE_END}
+{SEARCH_START}
+    <h1>Old Title</h1>
+{DIVIDER}
+    <h1>New Title</h1>
+{REPLACE_END}
+{SEARCH_START}
+  </body>
+{DIVIDER}
+    <script>console.log("Added script");</script>
+  </body>
+{REPLACE_END}
+Example Deleting Code:
+Removing the paragraph...
+{UPDATE_PAGE_START}index.html{UPDATE_PAGE_END}
+{SEARCH_START}
+  <p>This paragraph will be deleted.</p>
+{DIVIDER}
+{REPLACE_END}
+The user can also ask to add a new page, in this case you should return the new page in the following format:
+1. Start with {NEW_PAGE_START}.
+2. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
+3. Close the start tag with the {NEW_PAGE_END}.
+4. Start the HTML response with the triple backticks, like ```html.
+5. Insert the following html there.
+6. Close with the triple backticks, like ```.
+7. Retry if another pages.
+Example Code:
+{NEW_PAGE_START}about.html{NEW_PAGE_END}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <h1>About Page</h1>
+    <script>AOS.init();</script>
+    <script>const {{ animate }} = anime;</script>
+    <script>feather.replace();</script>
+</body>
+</html>
+IMPORTANT: While creating a new page, UPDATE ALL THE OTHERS (using the UPDATE_PAGE_START and SEARCH/REPLACE format) pages to add or replace the link to the new page, otherwise the user will not be able to navigate to the new page. (Dont use onclick to navigate, only href)
+No need to explain what you did. Just return the expected result."""
+
+# ============================================================================
+# PROMPT ENGINEER SYSTEM PROMPT
+# ============================================================================
+PROMPT_ENGINEER_SYSTEM_PROMPT = """You are an expert web development prompt engineer. Your job is to create highly detailed,
+professional prompts that will work with AI code agents to generate production-ready, deployable websites.
+
+The prompts you create must follow a specific format for an AI code agent system that uses:
+
+TailwindCSS for styling
+Feather Icons for icons
+AOS for scroll animations
+Vanta.js for interactive animations
+Static.photos for placeholder images
+Create prompts that are clean, detailed, and ready to paste into an AI code agent.
+Do NOT include Q&A format in the output - only the final detailed specification."""
+
+# ============================================================================
+# HTML TEMPLATE EXAMPLE
+# ============================================================================
+HTML_TEMPLATE_EXAMPLE = """<!DOCTYPE html>
+
+<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<!-- TailwindCSS -->
+<script src="https://cdn.tailwindcss.com"></script>
+
+<!-- AOS Animations -->
+<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+
+<!-- Feather Icons -->
+<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+<script src="https://unpkg.com/feather-icons"></script>
+
+<!-- Anime.js -->
+<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+</head> <body> <!-- Your content here -->
+<!-- Initialize libraries -->
+<script>AOS.init();</script>
+<script>feather.replace();</script>
+</body> </html>"""
+
+# ============================================================================
+# CDN LINKS
+# ============================================================================
+CDN_LINKS = {
+    "tailwind": "https://cdn.tailwindcss.com",
+    "aos_css": "https://unpkg.com/aos@2.3.1/dist/aos.css",
+    "aos_js": "https://unpkg.com/aos@2.3.1/dist/aos.js",
+    "feather_icons": "https://unpkg.com/feather-icons",
+    "feather_icons_min": "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js",
+    "anime_js": "https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js",
+    "vanta_globe": "https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"
+}
+
+# ============================================================================
+# AVAILABLE MODELS
+# ============================================================================
+AVAILABLE_MODELS = [
+    "meta-llama/Llama-3.2-1B-Instruct",
+    "meta-llama/Llama-3.2-3B-Instruct",
+    "microsoft/Phi-3.5-mini-instruct",
+    "HuggingFaceH4/zephyr-7b-beta",
+    "mistralai/Mistral-7B-Instruct-v0.3"
+]
+
+DEFAULT_MODEL = "meta-llama/Llama-3.2-1B-Instruct"

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=4.0.0
+huggingface-hub>=0.19.0
+python-dotenv>=1.0.0