Spaces:

AiCoderv2
/

anycoder-4b8ad708

Runtime error

App Files Files Community

AiCoderv2 commited on 8 days ago

Commit

fb786eb

verified ·

1 Parent(s): 3495de8

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

app.py +1052 -0
requirements.txt +6 -0

app.py ADDED Viewed

	@@ -0,0 +1,1052 @@

+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"}
+    ]
+)

requirements.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+gradio>=6.0
+requests
+Pillow
+numpy
+pandas
+matplotlib