models.py

import json
import re
from typing import Dict, List, Optional
from pathlib import Path
import random

class QwenWebsiteBuilder:
    """AI-powered website builder using Qwen model logic"""
    
    def __init__(self):
        self.templates = self._load_templates()
        self.components = self._load_components()
    
    def generate_website(self, prompt: str, project_name: str) -> Dict[str, str]:
        """Generate a complete website based on the prompt"""
        # Parse requirements from prompt
        requirements = self._parse_requirements(prompt)
        
        # Generate HTML structure
        html_content = self._generate_html(requirements, project_name)
        
        # Generate CSS styles
        css_content = self._generate_css(requirements)
        
        # Generate JavaScript functionality
        js_content = self._generate_js(requirements)
        
        # Generate additional files based on requirements
        files = {
            "index.html": html_content,
            "styles/main.css": css_content,
            "scripts/main.js": js_content,
            "README.md": self._generate_readme(requirements, project_name),
            "package.json": self._generate_package_json(requirements),
        }
        
        # Add framework-specific files
        if requirements.get("framework") == "react":
            files.update(self._generate_react_files(requirements))
        elif requirements.get("framework") == "vue":
            files.update(self._generate_vue_files(requirements))
        
        # Add additional pages if requested
        if requirements.get("pages"):
            for page in requirements["pages"]:
                files.update(self._generate_page(page, requirements))
        
        # Add assets
        files.update(self._generate_assets(requirements))
        
        return files
    
    def _parse_requirements(self, prompt: str) -> Dict:
        """Parse user requirements from the prompt"""
        requirements = {
            "type": "website",
            "design": "modern",
            "features": [],
            "pages": ["home"],
            "framework": None,
            "color_scheme": "blue",
            "responsive": True,
            "interactive": True
        }
        
        prompt_lower = prompt.lower()
        
        # Detect website type
        if "portfolio" in prompt_lower:
            requirements["type"] = "portfolio"
            requirements["features"].extend(["gallery", "about", "contact"])
        elif "ecommerce" in prompt_lower or "shop" in prompt_lower:
            requirements["type"] = "ecommerce"
            requirements["features"].extend(["products", "cart", "checkout"])
        elif "blog" in prompt_lower:
            requirements["type"] = "blog"
            requirements["features"].extend(["posts", "categories", "comments"])
        elif "landing" in prompt_lower:
            requirements["type"] = "landing"
            requirements["features"].extend(["hero", "features", "cta"])
        
        # Detect framework preferences
        if "react" in prompt_lower:
            requirements["framework"] = "react"
        elif "vue" in prompt_lower:
            requirements["framework"] = "vue"
        elif "bootstrap" in prompt_lower:
            requirements["framework"] = "bootstrap"
        
        # Detect color preferences
        colors = ["blue", "red", "green", "purple", "orange", "dark", "light"]
        for color in colors:
            if color in prompt_lower:
                requirements["color_scheme"] = color
                break
        
        # Detect specific features
        features_map = {
            "contact": ["contact form", "contact"],
            "gallery": ["gallery", "images", "photos"],
            "navigation": ["navigation", "menu", "navbar"],
            "search": ["search", "filter"],
            "animation": ["animation", "animate", "transition"],
            "responsive": ["responsive", "mobile"],
            "dark mode": ["dark mode", "dark theme"]
        }
        
        for feature, keywords in features_map.items():
            if any(keyword in prompt_lower for keyword in keywords):
                requirements["features"].append(feature)
        
        return requirements
    
    def _generate_html(self, requirements: Dict, project_name: str) -> str:
        """Generate HTML structure"""
        html_template = f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{project_name.title()}</title>
    <meta name="description" content="{requirements.get('description', 'A modern website built with AI')}">
    <link rel="stylesheet" href="styles/main.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    {self._generate_navigation(requirements)}
    
    <main>
        {self._generate_hero_section(requirements)}
        {self._generate_features_section(requirements)}
        {self._generate_content_sections(requirements)}
    </main>
    
    {self._generate_footer(requirements)}
    
    <script src="scripts/main.js"></script>
</body>
</html>"""
        return html_template
    
    def _generate_css(self, requirements: Dict) -> str:
        """Generate CSS styles"""
        color_scheme = requirements.get("color_scheme", "blue")
        colors = self._get_color_palette(color_scheme)
        
        css = f"""/* Global Styles */
* {{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}}

:root {{
    --primary-color: {colors['primary']};
    --secondary-color: {colors['secondary']};
    --accent-color: {colors['accent']};
    --text-color: {colors['text']};
    --bg-color: {colors['background']};
    --light-bg: {colors['light_bg']};
}}

body {{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
}}

/* Navigation */
.navbar {{
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}}

.nav-container {{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}}

.nav-logo {{
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
}}

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

.nav-link {{
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}}

.nav-link:hover {{
    opacity: 0.8;
}}

/* Hero Section */
.hero {{
    margin-top: 80px;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-align: center;
}}

.hero h1 {{
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
}}

.hero p {{
    font-size: 1.2rem;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease 0.2s both;
}}

.cta-button {{
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--accent-color);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInUp 1s ease 0.4s both;
}}

.cta-button:hover {{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}}

/* Features Section */
.features {{
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}}

.features h2 {{
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
}}

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

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

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

.feature-icon {{
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}}

/* Footer */
.footer {{
    background: var(--secondary-color);
    color: white;
    text-align: center;
    padding: 2rem;
}}

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

/* Responsive Design */
@media (max-width: 768px) {{
    .nav-menu {{
        flex-direction: column;
        gap: 1rem;
    }}
    
    .hero h1 {{
        font-size: 2rem;
    }}
    
    .feature-grid {{
        grid-template-columns: 1fr;
    }}
}}"""
        
        return css
    
    def _generate_js(self, requirements: Dict) -> str:
        """Generate JavaScript functionality"""
        js = """// Website JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scrolling for navigation links
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            if (this.getAttribute('href').startsWith('#')) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            }
        });
    });
    
    // Mobile menu toggle
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const navMenu = document.querySelector('.nav-menu');
    
    if (mobileMenuBtn) {
        mobileMenuBtn.addEventListener('click', function() {
            navMenu.classList.toggle('active');
        });
    }
    
    // Scroll animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe feature cards
    const featureCards = document.querySelectorAll('.feature-card');
    featureCards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        observer.observe(card);
    });
    
    // Form validation
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            const data = Object.fromEntries(formData);
            
            // Simple validation
            let isValid = true;
            const requiredFields = form.querySelectorAll('[required]');
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.classList.add('error');
                } else {
                    field.classList.remove('error');
                }
            });
            
            if (isValid) {
                // Show success message
                showMessage('Form submitted successfully!', 'success');
                form.reset();
            } else {
                showMessage('Please fill in all required fields.', 'error');
            }
        });
    });
    
    // Utility function to show messages
    function showMessage(message, type) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${type}`;
        messageDiv.textContent = message;
        messageDiv.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 2rem;
            border-radius: 5px;
            color: white;
            z-index: 10000;
            animation: slideIn 0.3s ease;
        `;
        
        if (type === 'success') {
            messageDiv.style.background = '#4CAF50';
        } else {
            messageDiv.style.background = '#f44336';
        }
        
        document.body.appendChild(messageDiv);
        
        setTimeout(() => {
            messageDiv.remove();
        }, 3000);
    }
});

// Add slide-in animation
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .message {
        animation: slideIn 0.3s ease;
    }
    
    .form-input.error {
        border-color: #f44336;
    }
`;
document.head.appendChild(style);"""
        
        return js
    
    def _generate_navigation(self, requirements: Dict) -> str:
        """Generate navigation HTML"""
        return f"""<nav class="navbar">
    <div class="nav-container">
        <a href="#" class="nav-logo">
            <i class="fas fa-rocket"></i> {requirements['type'].title()}
        </a>
        <ul class="nav-menu">
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#features" class="nav-link">Features</a></li>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
        <button class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </button>
    </div>
</nav>"""
    
    def _generate_hero_section(self, requirements: Dict) -> str:
        """Generate hero section HTML"""
        return f"""<section class="hero" id="home">
    <div class="hero-content">
        <h1>Welcome to Your {requirements['type'].title()}</h1>
        <p>A modern, responsive website built with AI-powered technology</p>
        <a href="#features" class="cta-button">Get Started</a>
    </div>
</section>"""
    
    def _generate_features_section(self, requirements: Dict) -> str:
        """Generate features section HTML"""
        features = requirements.get("features", ["responsive", "modern"])
        
        feature_html = """<section class="features" id="features">
    <h2>Features</h2>
    <div class="feature-grid">"""
        
        feature_icons = {
            "responsive": "fas fa-mobile-alt",
            "modern": "fas fa-paint-brush",
            "gallery": "fas fa-images",
            "contact": "fas fa-envelope",
            "navigation": "fas fa-compass",
            "search": "fas fa-search",
            "animation": "fas fa-magic",
            "dark mode": "fas fa-moon"
        }
        
        for feature in features[:6]:  # Limit to 6 features
            icon = feature_icons.get(feature, "fas fa-star")
            feature_html += f"""
        <div class="feature-card">
            <div class="feature-icon">
                <i class="{icon}"></i>
            </div>
            <h3>{feature.title()}</h3>
            <p>Experience the power of {feature} functionality in our modern website.</p>
        </div>"""
        
        feature_html += """
    </div>
</section>"""
        
        return feature_html
    
    def _generate_content_sections(self, requirements: Dict) -> str:
        """Generate additional content sections"""
        sections = ""
        
        if "about" in requirements.get("features", []):
            sections += """
<section class="about" id="about">
    <div class="container">
        <h2>About Us</h2>
        <p>We are dedicated to creating amazing web experiences that combine beautiful design with powerful functionality.</p>
    </div>
</section>"""
        
        if "contact" in requirements.get("features", []):
            sections += """
<section class="contact" id="contact">
    <div class="container">
        <h2>Get In Touch</h2>
        <form class="contact-form">
            <input type="text" placeholder="Your Name" required>
            <input type="email" placeholder="Your Email" required>
            <textarea placeholder="Your Message" rows="5" required></textarea>
            <button type="submit" class="cta-button">Send Message</button>
        </form>
    </div>
</section>"""
        
        return sections
    
    def _generate_footer(self, requirements: Dict) -> str:
        """Generate footer HTML"""
        return f"""<footer class="footer">
    <div class="container">
        <p>&copy; 2024 {requirements['type'].title()}. Built with AI Website Builder.</p>
        <div class="social-links">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-github"></i></a>
        </div>
    </div>
</footer>"""
    
    def _generate_readme(self, requirements: Dict, project_name: str) -> str:
        """Generate README.md file"""
        return f"""# {project_name.title()}

A modern {requirements['type']} website built with AI Website Builder.

## Features

{chr(10).join(f"- {feature.title()}" for feature in requirements.get('features', []))}

## Technologies Used

- HTML5
- CSS3
- JavaScript (ES6+)
- Responsive Design
- Font Awesome Icons

## Getting Started

1. Clone or download this project
2. Open `index.html` in your web browser
3. Or serve it with a local server:
   python -m http.server 8000

## Customization

- Edit `styles/main.css` to modify the appearance
- Edit `scripts/main.js` to add functionality
- Edit `index.html` to modify the structure

## License

MIT License - feel free to use this project for personal or commercial purposes.

---

Built with [AI Website Builder](https://github.com/ai-website-builder)
"""
    
    def _generate_package_json(self, requirements: Dict) -> str:
        """Generate package.json file"""
        return json.dumps({
            "name": "ai-generated-website",
            "version": "1.0.0",
            "description": f"A {requirements['type']} website built with AI",
            "main": "index.html",
            "scripts": {
                "start": "python -m http.server 8000",
                "dev": "python -m http.server 8000"
            },
            "keywords": ["website", "html", "css", "javascript", "ai-generated"],
            "author": "AI Website Builder",
            "license": "MIT"
        }, indent=2)
    
    def _get_color_palette(self, scheme: str) -> Dict[str, str]:
        """Get color palette based on scheme"""
        palettes = {
            "blue": {
                "primary": "#3498db",
                "secondary": "#2980b9",
                "accent": "#e74c3c",
                "text": "#2c3e50",
                "background": "#ecf0f1",
                "light_bg": "#ffffff"
            },
            "red": {
                "primary": "#e74c3c",
                "secondary": "#c0392b",
                "accent": "#f39c12",
                "text": "#2c3e50",
                "background": "#ecf0f1",
                "light_bg": "#ffffff"
            },
            "green": {
                "primary": "#27ae60",
                "secondary": "#229954",
                "accent": "#f39c12",
                "text": "#2c3e50",
                "background": "#ecf0f1",
                "light_bg": "#ffffff"
            },
            "purple": {
                "primary": "#9b59b6",
                "secondary": "#8e44ad",
                "accent": "#e74c3c",
                "text": "#2c3e50",
                "background": "#ecf0f1",
                "light_bg": "#ffffff"
            },
            "dark": {
                "primary": "#34495e",
                "secondary": "#2c3e50",
                "accent": "#3498db",
                "text": "#ecf0f1",
                "background": "#1a1a1a",
                "light_bg": "#2c3e50"
            },
            "light": {
                "primary": "#95a5a6",
                "secondary": "#7f8c8d",
                "accent": "#3498db",
                "text": "#2c3e50",
                "background": "#ffffff",
                "light_bg": "#ecf0f1"
            }
        }
        return palettes.get(scheme, palettes["blue"])
    
    def _load_templates(self) -> Dict:
        """Load website templates"""
        return {}
    
    def _load_components(self) -> Dict:
        """Load reusable components"""
        return {}
    
    def _generate_react_files(self, requirements: Dict) -> Dict[str, str]:
        """Generate React-specific files"""
        return {
            "src/App.js": """import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React Website</h1>
        <p>Welcome to your AI-generated React application!</p>
      </header>
    </div>
  );
}

export default App;""",
            "src/App.css": """.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}""",
            "src/index.js": """import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);""",
            "src/index.css": """body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}""",
            "public/index.html": """<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>"""
        }
    
    def _generate_vue_files(self, requirements: Dict) -> Dict[str, str]:
        """Generate Vue-specific files"""
        return {
            "src/App.vue": """<template>
  <div id="app">
    <header>
      <h1>Vue Website</h1>
      <p>Welcome to your AI-generated Vue application!</p>
    </header>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

header {
  background-color: #42b983;
  color: white;
  padding: 20px;
}
</style>""",
            "src/main.js": """import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')""",
            "public/index.html": """<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>"""
        }
    
    def _generate_page(self, page: str, requirements: Dict) -> Dict[str, str]:
        """Generate additional pages"""
        page_content = f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{page.title()} - {requirements['type'].title()}</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="nav-logo">
                <i class="fas fa-rocket"></i> {requirements['type'].title()}
            </a>
            <ul class="nav-menu">
                <li><a href="index.html" class="nav-link">Home</a></li>
                <li><a href="{page.lower()}.html" class="nav-link">{page.title()}</a></li>
            </ul>
        </div>
    </nav>
    
    <main style="margin-top: 80px; padding: 2rem;">
        <h1>{page.title()}</h1>
        <p>This is the {page.lower()} page of your website.</p>
    </main>
    
    <footer class="footer">
        <p>&copy; 2024 {requirements['type'].title()}. All rights reserved.</p>
    </footer>
</body>
</html>"""
        
        return {f"{page.lower()}.html": page_content}
    
    def _generate_assets(self, requirements: Dict) -> Dict[str, str]:
        """Generate asset files"""
        assets = {}
        
        # Generate favicon
        assets["favicon.ico"] = "data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A"
        
        # Generate robots.txt
        assets["robots.txt"] = """User-agent: *
Allow: /

Sitemap: https://yoursite.com/sitemap.xml"""
        
        return assets