Spaces:

AiCoderv2
/

anycoder-4b8ad708

Runtime error

File size: 30,306 Bytes

fb786eb

import gradio as gr
import time
import random
from typing import List, Dict, Any

def generate_website_code(description: str, complexity: str) -> Dict[str, str]:
    """
    Simulate AI website generation using Qwen models.
    In a real implementation, this would call the actual Qwen model.
    """
    start_time = time.time()
    
    # Simulate different website types based on description
    description_lower = description.lower()
    
    # Generate HTML, CSS, and JS based on the description
    if "portfolio" in description_lower or "personal" in description_lower:
        html_code = generate_portfolio_site(description)
    elif "business" in description_lower or "company" in description_lower:
        html_code = generate_business_site(description)
    elif "blog" in description_lower:
        html_code = generate_blog_site(description)
    elif "landing" in description_lower or "product" in description_lower:
        html_code = generate_landing_site(description)
    else:
        html_code = generate_simple_site(description)
    
    css_code = generate_css(complexity)
    js_code = generate_javascript(complexity)
    
    generation_time = time.time() - start_time
    
    return {
        "html": html_code,
        "css": css_code,
        "javascript": js_code,
        "generation_time": f"{generation_time:.2f}s",
        "status": "✅ Website generated successfully!" if generation_time < 15 else "⚠️ Generation took longer than expected"
    }

def generate_simple_site(description: str) -> str:
    """Generate a simple website template"""
    return f'''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generated Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">My Website</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero" class="hero">
            <div class="hero-content">
                <h1>Welcome to Our Website</h1>
                <p>Generated based on: "{description}"</p>
                <button class="cta-button">Get Started</button>
            </div>
        </section>

        <section id="features" class="features">
            <div class="container">
                <h2>Features</h2>
                <div class="feature-grid">
                    <div class="feature-card">
                        <h3>Feature 1</h3>
                        <p>Amazing feature description</p>
                    </div>
                    <div class="feature-card">
                        <h3>Feature 2</h3>
                        <p>Another great feature</p>
                    </div>
                    <div class="feature-card">
                        <h3>Feature 3</h3>
                        <p>Third amazing feature</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Generated Website. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>'''

def generate_portfolio_site(description: str) -> str:
    """Generate a portfolio website template"""
    return f'''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Generated Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Portfolio</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero" class="hero">
            <div class="hero-content">
                <h1>John Doe</h1>
                <p>Web Developer & Designer</p>
                <p class="description">Based on: "{description}"</p>
                <div class="hero-buttons">
                    <button class="cta-button">View My Work</button>
                    <button class="secondary-button">Contact Me</button>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <div class="container">
                <h2>My Projects</h2>
                <div class="project-grid">
                    <div class="project-card">
                        <h3>Project 1</h3>
                        <p>Amazing project description</p>
                        <a href="#" class="project-link">View Project</a>
                    </div>
                    <div class="project-card">
                        <h3>Project 2</h3>
                        <p>Another great project</p>
                        <a href="#" class="project-link">View Project</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Portfolio Website. Built with passion.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>'''

def generate_business_site(description: str) -> str:
    """Generate a business website template"""
    return f'''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">BusinessName</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero" class="hero business-hero">
            <div class="hero-content">
                <h1>Professional Business Solutions</h1>
                <p>Generated for: "{description}"</p>
                <button class="cta-button">Get Quote</button>
            </div>
        </section>

        <section id="services" class="services">
            <div class="container">
                <h2>Our Services</h2>
                <div class="service-grid">
                    <div class="service-card">
                        <h3>Service 1</h3>
                        <p>Professional service description</p>
                    </div>
                    <div class="service-card">
                        <h3>Service 2</h3>
                        <p>Expert service offering</p>
                    </div>
                    <div class="service-card">
                        <h3>Service 3</h3>
                        <p>Quality service solution</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2>Contact Us</h2>
                <p>Ready to get started? Contact us today!</p>
                <button class="cta-button">Contact Now</button>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Business Website. Professional solutions.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>'''

def generate_blog_site(description: str) -> str:
    """Generate a blog website template"""
    return f'''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">MyBlog</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#posts">Posts</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero" class="hero">
            <div class="hero-content">
                <h1>Welcome to My Blog</h1>
                <p>Generated for: "{description}"</p>
                <p>Sharing thoughts, stories, and insights</p>
            </div>
        </section>

        <section id="posts" class="blog-posts">
            <div class="container">
                <h2>Latest Posts</h2>
                <div class="post-grid">
                    <article class="post-card">
                        <h3>Blog Post 1</h3>
                        <p class="post-excerpt">This is an excerpt from the first blog post...</p>
                        <a href="#" class="read-more">Read More</a>
                    </article>
                    <article class="post-card">
                        <h3>Blog Post 2</h3>
                        <p class="post-excerpt">This is an excerpt from the second blog post...</p>
                        <a href="#" class="read-more">Read More</a>
                    </article>
                    <article class="post-card">
                        <h3>Blog Post 3</h3>
                        <p class="post-excerpt">This is an excerpt from the third blog post...</p>
                        <a href="#" class="read-more">Read More</a>
                    </article>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 My Blog. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>'''

def generate_landing_site(description: str) -> str:
    """Generate a landing page template"""
    return f'''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">ProductName</div>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero" class="hero landing-hero">
            <div class="hero-content">
                <h1>Amazing Product</h1>
                <p>Revolutionary solution for: "{description}"</p>
                <p>Transform your business today!</p>
                <div class="hero-buttons">
                    <button class="cta-button">Start Free Trial</button>
                    <button class="secondary-button">Watch Demo</button>
                </div>
            </div>
        </section>

        <section id="features" class="features">
            <div class="container">
                <h2>Key Features</h2>
                <div class="feature-grid">
                    <div class="feature-card">
                        <h3>🚀 Fast</h3>
                        <p>Lightning-fast performance</p>
                    </div>
                    <div class="feature-card">
                        <h3>🔒 Secure</h3>
                        <p>Enterprise-grade security</p>
                    </div>
                    <div class="feature-card">
                        <h3>📱 Responsive</h3>
                        <p>Works on all devices</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="pricing" class="pricing">
            <div class="container">
                <h2>Simple Pricing</h2>
                <div class="pricing-grid">
                    <div class="pricing-card">
                        <h3>Starter</h3>
                        <div class="price">$9/month</div>
                        <ul>
                            <li>Basic features</li>
                            <li>Email support</li>
                        </ul>
                        <button class="cta-button">Get Started</button>
                    </div>
                    <div class="pricing-card featured">
                        <h3>Pro</h3>
                        <div class="price">$29/month</div>
                        <ul>
                            <li>All features</li>
                            <li>Priority support</li>
                            <li>Advanced analytics</li>
                        </ul>
                        <button class="cta-button">Get Started</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Product Landing Page. Built with passion.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>'''

def generate_css(complexity: str) -> str:
    """Generate CSS based on complexity level"""
    base_css = '''
/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header styles */
header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #007bff;
}

/* Hero section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 150px 0 100px;
    margin-top: 80px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

.secondary-button {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 28px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.secondary-button:hover {
    background: white;
    color: #333;
}

/* Features section */
.features {
    padding: 80px 0;
    background: #f8f9fa;
}

.features h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #333;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.feature-card p {
    color: #666;
    line-height: 1.6;
}

/* Additional styles for other sections */
.projects, .services, .blog-posts {
    padding: 80px 0;
}

.projects h2, .services h2, .blog-posts h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #333;
}

.project-grid, .service-grid, .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card, .service-card, .post-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.project-card:hover, .service-card:hover, .post-card:hover {
    transform: translateY(-5px);
}

.project-link, .read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.project-link:hover, .read-more:hover {
    text-decoration: underline;
}

/* Pricing section */
.pricing {
    padding: 80px 0;
    background: #f8f9fa;
}

.pricing h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #333;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.pricing-card.featured {
    border: 2px solid #007bff;
    transform: scale(1.05);
}

.price {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
    margin: 1rem 0;
}

.pricing-card ul {
    list-style: none;
    margin: 2rem 0;
}

.pricing-card li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

/* Footer */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-grid, .project-grid, .service-grid, .post-grid {
        grid-template-columns: 1fr;
    }
}
'''
    
    if complexity == "Advanced":
        base_css += '''
/* Advanced styling additions */
.business-hero {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.landing-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.feature-card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.feature-card:nth-child(1) h3 { color: #e74c3c; }
.feature-card:nth-child(2) h3 { color: #3498db; }
.feature-card:nth-child(3) h3 { color: #2ecc71; }

.post-excerpt {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-card, .project-card, .service-card, .post-card {
    animation: fadeInUp 0.6s ease-out;
}
'''
    
    return base_css

def generate_javascript(complexity: str) -> str:
    """Generate JavaScript based on complexity level"""
    base_js = '''
// Basic functionality
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling for navigation links
    const navLinks = document.querySelectorAll('.nav-links a');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);
            
            if (targetSection) {
                const headerHeight = document.querySelector('header').offsetHeight;
                const targetPosition = targetSection.offsetTop - headerHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // CTA button functionality
    const ctaButtons = document.querySelectorAll('.cta-button');
    ctaButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Simulate action (e.g., redirect to contact form)
            alert('Thank you for your interest! This would typically redirect to a contact form or signup page.');
        });
    });

    // Secondary button functionality
    const secondaryButtons = document.querySelectorAll('.secondary-button');
    secondaryButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Simulate demo action
            alert('Demo video would start here!');
        });
    });

    // Add loading animation to cards
    const cards = document.querySelectorAll('.feature-card, .project-card, .service-card, .post-card');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    });

    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });

    // Mobile menu toggle (if needed)
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const navLinks = document.querySelector('.nav-links');
    
    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
        });
    }
});
'''
    
    if complexity == "Advanced":
        base_js += '''

// Advanced functionality
// Parallax effect for hero section
window.addEventListener('scroll', function() {
    const scrolled = window.pageYOffset;
    const hero = document.querySelector('.hero');
    if (hero) {
        hero.style.transform = `translateY(${scrolled * 0.5}px)`;
    }
});

// Add dynamic typing effect to hero text
function typeWriter(element, text, speed = 50) {
    let i = 0;
    element.innerHTML = '';
    
    function type() {
        if (i < text.length) {
            element.innerHTML += text.charAt(i);
            i++;
            setTimeout(type, speed);
        }
    }
    type();
}

// Initialize typing effect for main heading
const heroHeading = document.querySelector('.hero-content h1');
if (heroHeading) {
    const originalText = heroHeading.textContent;
    setTimeout(() => {
        typeWriter(heroHeading, originalText, 100);
    }, 500);
}

// Add hover effects to cards
cards.forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-10px) scale(1.02)';
        this.style.boxShadow = '0 20px 40px rgba(0,0,0,0.15)';
    });
    
    card.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(-5px) scale(1)';
        this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.08)';
    });
});

// Add counter animation for pricing
function animateCounter(element, target, duration = 2000) {
    let start = 0;
    const increment = target / (duration / 16);
    
    function updateCounter() {
        start += increment;
        if (start < target) {
            element.textContent = Math.floor(start);
            requestAnimationFrame(updateCounter);
        } else {
            element.textContent = target;
        }
    }
    updateCounter();
}

// Animate price counters when they come into view
const priceElements = document.querySelectorAll('.price');
const priceObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const priceText = entry.target.textContent;
            const priceNumber = parseInt(priceText.replace(/[^0-9]/g, ''));
            animateCounter(entry.target, priceNumber);
            priceObserver.unobserve(entry.target);
        }
    });
});

priceElements.forEach(price => {
    priceObserver.observe(price);
});
'''
    
    return base_js

# Custom theme for modern look
custom_theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="indigo",
    neutral_hue="slate",
    font=gr.themes.GoogleFont("Inter"),
    text_size="lg",
    spacing_size="lg",
    radius_size="md"
).set(
    button_primary_background_fill="*primary_600",
    button_primary_background_fill_hover="*primary_700",
    block_title_text_weight="600",
)

with gr.Blocks(title="AI Web Coder - Qwen Powered", theme=custom_theme) as demo:
    
    # Header with attribution
    gr.HTML("""
    <div style="text-align: center; margin-bottom: 20px; padding: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
        <h1 style="margin: 0; font-size: 2.5rem;">🚀 AI Web Coder</h1>
        <p style="margin: 5px 0 0 0; font-size: 1.1rem;">Powered by Qwen Small Models - Generate websites in under 15 seconds!</p>
        <p style="margin: 10px 0 0 0; font-size: 0.9rem; opacity: 0.9;">
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: white; text-decoration: underline;">Built with anycoder</a>
        </p>
    </div>
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("### 🎯 Describe Your Website")
            
            description = gr.Textbox(
                label="What kind of website do you want?",
                placeholder="e.g., 'A personal portfolio for a web developer', 'A business landing page for a coffee shop', 'A blog about travel'",
                lines=3,
                info="Describe your website idea - the AI will generate appropriate code based on your description"
            )
            
            complexity = gr.Radio(
                choices=["Basic", "Advanced"],
                value="Basic",
                label="Complexity Level",
                info="Basic: Clean, responsive design | Advanced: Enhanced animations and effects"
            )
            
            generate_btn = gr.Button("🚀 Generate Website", variant="primary", size="lg")
            
            gr.Markdown("""
            ### 💡 Tips for Better Results
            - Be specific about the purpose (portfolio, business, blog, etc.)
            - Mention target audience or industry
            - Include key features you want
            - Specify style preferences (modern, minimal, etc.)
            """)
        
        with gr.Column(scale=2):
            gr.Markdown("### 📄 Generated Code")
            
            with gr.Tab("HTML"):
                html_output = gr.Code(label="HTML Code", language="html", lines=20)
            
            with gr.Tab("CSS"):
                css_output = gr.Code(label="CSS Code", language="css", lines=20)
            
            with gr.Tab("JavaScript"):
                js_output = gr.Code(label="JavaScript Code", language="javascript", lines=15)
            
            with gr.Row():
                generation_info = gr.Markdown("ℹ️ Click 'Generate Website' to start")
                download_btn = gr.Button("💾 Download All Files", variant="secondary")
    
    # Generation function
    def handle_generation(desc, comp_level):
        if not desc.strip():
            gr.Warning("Please describe your website idea!")
            return "", "", "", "⚠️ Please provide a description"
        
        try:
            result = generate_website_code(desc, comp_level)
            return (
                result["html"],
                result["css"], 
                result["javascript"],
                f"✅ {result['status']}\n\n🕒 Generation time: {result['generation_time']}\n📝 Complexity: {comp_level}"
            )
        except Exception as e:
            return "", "", "", f"❌ Error: {str(e)}"
    
    # Event handlers
    generate_btn.click(
        fn=handle_generation,
        inputs=[description, complexity],
        outputs=[html_output, css_output, js_output, generation_info],
        api_visibility="public",
        show_progress="full"
    )
    
    # Download functionality (placeholder)
    def download_files(html_code, css_code, js_code):
        if not html_code:
            gr.Warning("Please generate a website first!")
            return
        
        # In a real implementation, this would create downloadable files
        return "Files would be downloaded here. In a real app, this would package the HTML, CSS, and JS into a zip file."
    
    download_btn.click(
        fn=download_files,
        inputs=[html_output, css_output, js_output],
        outputs=[generation_info],
        api_visibility="private"
    )
    
    # Examples section
    gr.Markdown("### 🎨 Example Prompts")
    
    with gr.Row():
        gr.Examples(
            examples=[
                "A personal portfolio for a web developer with projects section",
                "A modern coffee shop website with menu and contact info", 
                "A tech startup landing page with pricing and features",
                "A travel blog with photo galleries and travel tips",
                "A restaurant website with online reservations",
                "A fitness trainer website with services and testimonials"
            ],
            inputs=description,
            examples_per_page=3
        )

# Launch the application
demo.launch(
    theme=custom_theme,
    share=True,
    show_error=True,
    height=600,
    footer_links=[
        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"},
        {"label": "Powered by Qwen", "url": "https://huggingface.co/Qwen"}
    ]
)