app.py

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()