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''' Generated Website

Welcome to Our Website

Generated based on: "{description}"

Features

Feature 1

Amazing feature description

Feature 2

Another great feature

Feature 3

Third amazing feature

''' def generate_portfolio_site(description: str) -> str: """Generate a portfolio website template""" return f''' Portfolio - Generated Website

John Doe

Web Developer & Designer

Based on: "{description}"

My Projects

Project 1

Amazing project description

View Project

Project 2

Another great project

View Project
''' def generate_business_site(description: str) -> str: """Generate a business website template""" return f''' Business Website

Professional Business Solutions

Generated for: "{description}"

Our Services

Service 1

Professional service description

Service 2

Expert service offering

Service 3

Quality service solution

Contact Us

Ready to get started? Contact us today!

''' def generate_blog_site(description: str) -> str: """Generate a blog website template""" return f''' My Blog

Welcome to My Blog

Generated for: "{description}"

Sharing thoughts, stories, and insights

Latest Posts

Blog Post 1

This is an excerpt from the first blog post...

Read More

Blog Post 2

This is an excerpt from the second blog post...

Read More

Blog Post 3

This is an excerpt from the third blog post...

Read More
''' def generate_landing_site(description: str) -> str: """Generate a landing page template""" return f''' Product Landing Page

Amazing Product

Revolutionary solution for: "{description}"

Transform your business today!

Key Features

šŸš€ Fast

Lightning-fast performance

šŸ”’ Secure

Enterprise-grade security

šŸ“± Responsive

Works on all devices

Simple Pricing

Starter

$9/month
  • Basic features
  • Email support

Pro

$29/month
  • All features
  • Priority support
  • Advanced analytics
''' 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("""

šŸš€ AI Web Coder

Powered by Qwen Small Models - Generate websites in under 15 seconds!

Built with anycoder

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