| import gradio as gr
|
| from huggingface_hub import InferenceClient
|
| import os
|
| from datetime import datetime
|
|
|
|
|
| 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
|
| )
|
|
|
|
|
| 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}")
|
|
|
|
|
| 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):
|
|
|
| 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")
|
|
|
|
|
| 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
|
|
|
|
|
| enhancer = WebsitePromptEnhancer()
|
|
|
|
|
| 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 = """
|
| .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;
|
| }
|
| """
|
|
|
|
|
| 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
|
| """)
|
|
|
|
|
| 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()
|
|
|
