Update app.py from anycoder

app.py

@@ -2,332 +2,261 @@ import gradio as gr
 import json
 import base64
 from datetime import datetime
+import os
+
+# --- Utility Functions ---
 
 def generate_theme_preview(primary_color, secondary_color, accent_color, background_color, 
                           header_style, animation_type, layout_type, enable_woocommerce,
                           gallery_columns, show_videos, contact_form_fields):
-    """Generate a live preview of the WordPress theme with all customizations"""
+    """Generate a live HTML/CSS preview of the WordPress theme"""
     
-    # Generate CSS based on selections
-    css_preview = f"""
+    # Determine font based on layout
+    font_family = "'Inter', sans-serif"
+    if layout_type == "modern":
+        font_family = "'Outfit', sans-serif" # Modern geometric font for 3D printing
+    elif layout_type == "clean":
+        font_family = "'Roboto', sans-serif"
+        
+    # CSS Generation
+    css = f"""
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Outfit:wght@300;500;700&family=Roboto:wght@400;500&display=swap');
+        
         :root {{
-            --primary-color: {primary_color};
-            --secondary-color: {secondary_color};
-            --accent-color: {accent_color};
-            --background-color: {background_color};
-            --header-style: {header_style};
+            --primary: {primary_color};
+            --secondary: {secondary_color};
+            --accent: {accent_color};
+            --bg: {background_color};
         }}
         
-        body {{
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: {background_color};
-            margin: 0;
-            padding: 0;
-            animation: {animation_type} 0.5s ease-in-out;
+        .wp-theme-preview {{
+            font-family: {font_family};
+            background-color: var(--bg);
+            color: #333;
+            overflow: hidden;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            position: relative;
         }}
         
+        /* Header Styles */
         .theme-header {{
-            background: linear-gradient(135deg, {primary_color}, {secondary_color});
-            color: white;
             padding: 2rem;
-            text-align: center;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            color: white;
             position: relative;
             overflow: hidden;
+            transition: all 0.3s ease;
         }}
         
-        .theme-header::before {{
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-            animation: shimmer 3s infinite linear;
+        .header-gradient {{ background: linear-gradient(135deg, var(--primary), var(--secondary)); }}
+        .header-solid {{ background: var(--primary); }}
+        .header-glass {{ 
+            background: rgba(255, 255, 255, 0.1); 
+            backdrop-filter: blur(10px); 
+            border-bottom: 1px solid rgba(255,255,255,0.2);
+            color: var(--primary);
         }}
         
-        .theme-nav {{
-            background: {secondary_color};
-            padding: 1rem;
+        .logo {{
+            font-size: 1.8rem;
+            font-weight: 800;
+            letter-spacing: -0.5px;
             display: flex;
-            justify-content: center;
-            gap: 2rem;
-            flex-wrap: wrap;
+            align-items: center;
+            gap: 10px;
         }}
         
-        .theme-nav a {{
-            color: white;
+        .nav-menu {{
+            display: flex;
+            gap: 20px;
+            margin-top: 1rem;
+            font-weight: 500;
+        }}
+        
+        .nav-menu a {{
+            color: inherit;
             text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
+            opacity: 0.9;
+            transition: 0.2s;
+        }}
+        .nav-menu a:hover {{ opacity: 1; transform: translateY(-2px); }}
+
+        /* Hero Section */
+        .hero {{
+            padding: 4rem 2rem;
+            text-align: center;
+            animation: {animation_type} 0.8s ease-out;
         }}
         
-        .theme-nav a:hover {{
-            background: {accent_color};
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        .hero h2 {{
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: -webkit-linear-gradient(45deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }}
         
-        .theme-content {{
-            max-width: 1200px;
-            margin: 2rem auto;
-            padding: 0 1rem;
+        /* Product Grid */
+        .products-grid {{
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 2rem;
+            padding: 2rem;
         }}
         
         .product-card {{
             background: white;
             border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            animation: fadeInUp 0.6s ease-out;
+            padding: 1rem;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            animation: {animation_type} 0.6s ease-out backwards;
         }}
         
         .product-card:hover {{
-            transform: translateY(-8px) scale(1.02);
-            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+            transform: translateY(-10px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+            border: 2px solid var(--accent);
         }}
         
-        .product-card img {{
+        .product-img {{
             width: 100%;
-            height: 200px;
+            height: 150px;
+            background: #f0f0f0;
+            border-radius: 8px;
+            margin-bottom: 1rem;
             object-fit: cover;
-            transition: transform 0.5s ease;
         }}
         
-        .product-card:hover img {{
-            transform: scale(1.05);
-        }}
-        
-        .product-info {{
-            padding: 1.5rem;
-        }}
-        
-        .product-title {{
-            font-size: 1.25rem;
-            font-weight: 700;
-            color: {primary_color};
-            margin-bottom: 0.5rem;
-        }}
-        
-        .product-price {{
-            font-size: 1.5rem;
+        .price-tag {{
+            color: var(--accent);
             font-weight: 800;
-            color: {accent_color};
-        }}
-        
-        .theme-footer {{
-            background: {primary_color};
-            color: white;
-            padding: 3rem 2rem;
-            margin-top: 4rem;
-            text-align: center;
-        }}
-        
-        .contact-form {{
-            background: white;
-            padding: 2rem;
-            border-radius: 16px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-            max-width: 600px;
-            margin: 2rem auto;
-        }}
-        
-        .form-field {{
-            margin-bottom: 1.5rem;
-        }}
-        
-        .form-field label {{
-            display: block;
-            font-weight: 600;
-            color: {primary_color};
-            margin-bottom: 0.5rem;
-        }}
-        
-        .form-field input,
-        .form-field textarea {{
-            width: 100%;
-            padding: 0.75rem;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
-            font-size: 1rem;
-            transition: border-color 0.3s ease;
-        }}
-        
-        .form-field input:focus,
-        .form-field textarea:focus {{
-            outline: none;
-            border-color: {accent_color};
+            font-size: 1.2rem;
         }}
         
-        .btn-primary {{
-            background: linear-gradient(135deg, {accent_color}, {secondary_color});
+        .btn {{
+            background: var(--primary);
             color: white;
-            padding: 0.75rem 2rem;
             border: none;
-            border-radius: 12px;
-            font-size: 1rem;
-            font-weight: 600;
+            padding: 8px 16px;
+            border-radius: 6px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        }}
-        
-        .btn-primary:hover {{
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
-        }}
-        
-        .woocommerce-badge {{
-            display: {'inline-block' if enable_woocommerce else 'none'};
-            background: #7b68ee;
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.75rem;
+            width: 100%;
+            margin-top: 10px;
             font-weight: 600;
-            margin-left: 0.5rem;
-        }}
-        
-        @keyframes shimmer {{
-            0% {{ transform: rotate(0deg); }}
-            100% {{ transform: rotate(360deg); }}
-        }}
-        
-        @keyframes fadeInUp {{
-            from {{ opacity: 0; transform: translateY(30px); }}
-            to {{ opacity: 1; transform: translateY(0); }}
-        }}
-        
-        @keyframes slideInLeft {{
-            from {{ opacity: 0; transform: translateX(-30px); }}
-            to {{ opacity: 1; transform: translateX(0); }}
-        }}
-        
-        @keyframes bounceIn {{
-            0% {{ opacity: 0; transform: scale(0.3); }}
-            50% {{ opacity: 1; transform: scale(1.05); }}
-            70% {{ transform: scale(0.9); }}
-            100% {{ transform: scale(1); }}
+            transition: 0.2s;
         }}
         
-        .gallery-grid {{
+        .btn:hover {{ background: var(--accent); }}
+
+        /* Gallery */
+        .gallery {{
             display: grid;
             grid-template-columns: repeat({gallery_columns}, 1fr);
-            gap: 1rem;
-            margin: 2rem 0;
+            gap: 10px;
+            padding: 2rem;
         }}
-        
-        .video-embed {{
-            width: 100%;
-            height: 300px;
-            border-radius: 12px;
+        .gallery-item {{
+            aspect-ratio: 1;
+            background: #ddd;
+            border-radius: 8px;
             overflow: hidden;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-            display: {'block' if show_videos else 'none'};
         }}
         
-        .layout-{layout_type} {{
-            font-family: {'"Roboto", sans-serif' if layout_type == 'modern' else '"Inter", sans-serif'};
-            line-height: {1.6 if layout_type == 'clean' else 1.5};
+        /* Contact Form */
+        .contact-section {{
+            background: white;
+            margin: 2rem;
+            padding: 2rem;
+            border-radius: 16px;
+            border-left: 5px solid var(--accent);
+        }}
+        
+        .form-input {{
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #eee;
+            border-radius: 6px;
         }}
+
+        /* Animations */
+        @keyframes fadeInUp {{ from {{ opacity: 0; transform: translateY(20px); }} to {{ opacity: 1; transform: translateY(0); }} }}
+        @keyframes slideInLeft {{ from {{ opacity: 0; transform: translateX(-50px); }} to {{ opacity: 1; transform: translateX(0); }} }}
+        @keyframes bounceIn {{ 0% {{ transform: scale(0.3); opacity: 0; }} 50% {{ transform: scale(1.05); }} 70% {{ transform: scale(0.9); }} 100% {{ transform: scale(1); opacity: 1; }} }}
+        @keyframes pulse {{ 0% {{ transform: scale(1); }} 50% {{ transform: scale(1.02); }} 100% {{ transform: scale(1); }} }}
     </style>
+    """
     
-    <div class="layout-{layout_type}">
-        <header class="theme-header">
-            <h1>🎨 Tema WordPress 3D Print Store 
-                <span class="woocommerce-badge">WooCommerce</span>
-            </h1>
-            <p>Tema moderno, animado y super editable</p>
+    # HTML Structure
+    html = f"""
+    <div class="wp-theme-preview">
+        <header class="theme-header header-{header_style}">
+            <div class="logo">
+                <span style="font-size: 1.5em">🧊</span> 3D PRINT <span style="color: {accent_color}">PRO</span>
+            </div>
+            <nav class="nav-menu">
+                <a href="#">Tienda</a>
+                <a href="#">Filamentos</a>
+                <a href="#">Servicios 3D</a>
+                <a href="#">Contacto</a>
+                {'<a href="#" style="background:rgba(255,255,255,0.2); padding:2px 10px; border-radius:20px;">🛒 2</a>' if enable_woocommerce else ''}
+            </nav>
         </header>
         
-        <nav class="theme-nav">
-            <a href="#">Inicio</a>
-            <a href="#">Productos</a>
-            <a href="#">Galería</a>
-            <a href="#">Videos</a>
-            <a href="#">Contacto</a>
-        </nav>
+        <div class="hero">
+            <h2>Impresión 3D de Alta Precisión</h2>
+            <p style="margin-bottom: 2rem; color: #666;">Diseños personalizados, prototipos rápidos y arte en PLA/Resina.</p>
+            <button class="btn" style="width: auto; padding: 12px 30px; border-radius: 30px; background: {accent_color}">
+                Ver Catálogo
+            </button>
+        </div>
         
-        <div class="theme-content">
-            <div class="product-card">
-                <img src="https://via.placeholder.com/400x300/{primary_color[1:]}/ffffff?text=Impresi%C3%B3n+3D" alt="Producto 3D">
-                <div class="product-info">
-                    <h3 class="product-title">Figura Custom 3D</h3>
-                    <p>Impresión de alta calidad en PLA</p>
-                    <div class="product-price">$29.99</div>
-                </div>
+        <div class="products-grid">
+            <div class="product-card" style="animation-delay: 0.1s">
+                <img src="https://placehold.co/400x300/333/FFF?text=Estatua+PLA" class="product-img" alt="Product">
+                <h3>Figura Coleccionable</h3>
+                <div class="price-tag">$45.00</div>
+                <button class="btn">Añadir al Carrito</button>
             </div>
-            
-            <div class="product-card">
-                <img src="https://via.placeholder.com/400x300/{secondary_color[1:]}/ffffff?text=Prototipo" alt="Prototipo">
-                <div class="product-info">
-                    <h3 class="product-title">Prototipo Rápido</h3>
-                    <p>Ideal para pruebas de concepto</p>
-                    <div class="product-price">$49.99</div>
-                </div>
+            <div class="product-card" style="animation-delay: 0.2s">
+                <img src="https://placehold.co/400x300/666/FFF?text=Pieza+Mecánica" class="product-img" alt="Product">
+                <h3>Engranaje Nylon</h3>
+                <div class="price-tag">$12.50</div>
+                <button class="btn">Añadir al Carrito</button>
             </div>
-            
-            <div class="product-card">
-                <img src="https://via.placeholder.com/400x300/{accent_color[1:]}/ffffff?text=Pieza+Functional" alt="Pieza">
-                <div class="product-info">
-                    <h3 class="product-title">Pieza Functional</h3>
-                    <p>Resistente y duradera</p>
-                    <div class="product-price">$39.99</div>
-                </div>
+            <div class="product-card" style="animation-delay: 0.3s">
+                <img src="https://placehold.co/400x300/444/FFF?text=Jarrón+Voronoi" class="product-img" alt="Product">
+                <h3>Jarrón Voronoi</h3>
+                <div class="price-tag">$28.99</div>
+                <button class="btn">Añadir al Carrito</button>
             </div>
         </div>
         
-        <div class="gallery-grid">
-            <img src="https://via.placeholder.com/300/{primary_color[1:]}/ffffff?text=Gal1" alt="Gallery">
-            <img src="https://via.placeholder.com/300/{secondary_color[1:]}/ffffff?text=Gal2" alt="Gallery">
-            <img src="https://via.placeholder.com/300/{accent_color[1:]}/ffffff?text=Gal3" alt="Gallery">
-            <img src="https://via.placeholder.com/300/{primary_color[1:]}/ffffff?text=Gal4" alt="Gallery">
-        </div>
+        {'<div class="gallery">' + ''.join([f'<div class="gallery-item"><img src="https://placehold.co/200/eee/ccc?text=Print+{i+1}" style="width:100%;height:100%;object-fit:cover;"></div>' for i in range(gallery_columns)]) + '</div>' if gallery_columns > 0 else ''}
         
-        <div class="video-embed">
-            <iframe width="100%" height="100%" 
-                    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
-                    frameborder="0" allowfullscreen>
-            </iframe>
-        </div>
+        {f'<div style="padding: 2rem;"><h3 style="text-align:center; margin-bottom:1rem;">Proceso de Impresión</h3><div style="background:#000; height:200px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:white;">▶ Video Embed Placeholder</div></div>' if show_videos else ''}
         
-        <div class="contact-form">
-            <h2 style="color: {primary_color}; text-align: center; margin-bottom: 1.5rem;">Formulario de Contacto</h2>
-            <div class="form-field">
-                <label>Nombre:</label>
-                <input type="text" placeholder="Tu nombre">
-            </div>
-            <div class="form-field">
-                <label>Email:</label>
-                <input type="email" placeholder="tu@email.com">
-            </div>
-            <div class="form-field">
-                <label>Mensaje:</label>
-                <textarea rows="4" placeholder="Tu mensaje..."></textarea>
-            </div>
-            <button class="btn-primary" style="width: 100%;">Enviar Mensaje</button>
+        <div class="contact-section">
+            <h3 style="color: {primary_color}">Solicita tu Presupuesto</h3>
+            {'<input type="text" placeholder="Nombre" class="form-input">' if "name" in contact_form_fields else ''}
+            {'<input type="email" placeholder="Email" class="form-input">' if "email" in contact_form_fields else ''}
+            {'<input type="text" placeholder="Teléfono" class="form-input">' if "phone" in contact_form_fields else ''}
+            {'<textarea placeholder="Describe tu proyecto 3D..." class="form-input" rows="3"></textarea>' if "message" in contact_form_fields else ''}
+            <button class="btn">Enviar Solicitud</button>
         </div>
         
-        <footer class="theme-footer">
-            <h3>🚀 Tema WordPress 3D Print Pro</h3>
-            <p>© 2024 - Diseñado para impresión 3D y WooCommerce</p>
-            <p>Colores vibrantes | Animaciones modernas | Super editable</p>
+        <footer style="background: #222; color: white; padding: 2rem; text-align: center; margin-top: 2rem;">
+            <p>© 2024 3D Print Store. Theme generated by Anycoder.</p>
         </footer>
     </div>
     """
     
-    # Generate configuration JSON
-    config = {
-        "theme_name": "3D Print Store Pro",
-        "created_at": datetime.now().isoformat(),
+    # Configuration Object
+    config_data = {
+        "theme_name": "3D Print Store Theme",
+        "version": "1.0.0",
         "colors": {
             "primary": primary_color,
             "secondary": secondary_color,
@@ -335,104 +264,51 @@ def generate_theme_preview(primary_color, secondary_color, accent_color, backgro
             "background": background_color
         },
         "layout": {
-            "header_style": header_style,
-            "animation_type": animation_type,
-            "layout_type": layout_type,
-            "gallery_columns": gallery_columns
+            "header": header_style,
+            "animation": animation_type,
+            "font": layout_type
         },
-        "features": {
+        "modules": {
             "woocommerce": enable_woocommerce,
-            "video_section": show_videos,
-            "contact_form": len(contact_form_fields) > 0
-        },
-        "form_fields": contact_form_fields
+            "gallery_cols": gallery_columns,
+            "video_enabled": show_videos,
+            "contact_fields": contact_form_fields
+        }
     }
     
-    return css_preview, json.dumps(config, indent=2)
+    return css + html, config_data
 
-def export_theme(config_json):
-    """Export theme configuration as downloadable file"""
-    try:
-        config = json.loads(config_json)
-        filename = f"wp_theme_{config['theme_name'].replace(' ', '_').lower()}.json"
-        return filename, json.dumps(config, indent=2)
-    except:
-        return "theme_config.json", '{"error": "Invalid configuration"}'
+def generate_woo_php():
+    return """<?php
+// Add to your theme's functions.php
+function theme_add_woocommerce_support() {
+    add_theme_support('woocommerce');
+    add_theme_support('wc-product-gallery-zoom');
+    add_theme_support('wc-product-gallery-lightbox');
+    add_theme_support('wc-product-gallery-slider');
+}
+add_action('after_setup_theme', 'theme_add_woocommerce_support');
 
-def generate_woocommerce_code():
-    """Generate WooCommerce compatibility code snippet"""
-    code = '''
-    // WooCommerce Compatibility Functions
-    add_action('after_setup_theme', 'wp3d_print_woocommerce_support');
-    function wp3d_print_woocommerce_support() {
-        add_theme_support('woocommerce');
-        add_theme_support('wc-product-gallery-zoom');
-        add_theme_support('wc-product-gallery-lightbox');
-        add_theme_support('wc-product-gallery-slider');
-    }
-    
-    // Custom Product Loop
-    function wp3d_print_product_loop() {
-        $args = array(
-            'post_type' => 'product',
-            'posts_per_page' => 12,
-            'orderby' => 'date',
-            'order' => 'DESC'
-        );
-        
-        $products = new WP_Query($args);
-        
-        if($products->have_posts()):
-            echo '<div class="product-grid">';
-            while($products->have_posts()): $products->the_post();
-                global $product;
-                ?>
-                <div class="product-card">
-                    <div class="product-image">
-                        <?php echo woocommerce_get_product_thumbnail(); ?>
-                    </div>
-                    <div class="product-info">
-                        <h3 class="product-title"><?php the_title(); ?></h3>
-                        <p class="product-price"><?php echo $product->get_price_html(); ?></p>
-                        <a href="<?php the_permalink(); ?>" class="btn-primary">Ver Producto</a>
-                    </div>
-                </div>
-                <?php
-            endwhile;
-            echo '</div>';
-        endif;
-        wp_reset_postdata();
-    }
-    '''
-    return code.strip()
+// Custom 3D Print Badge
+add_action('woocommerce_before_shop_loop_item_title', 'add_3d_badge', 10);
+function add_3d_badge() {
+    echo '<span class="badge-3d">3D PRINTED</span>';
+}
+?>"""
 
-def generate_contact_form_html(fields):
-    """Generate contact form HTML based on selected fields"""
-    if not fields:
-        return "<!-- No contact form fields selected -->"
-    
-    html = '<div class="contact-form-wrapper">\n    <form id="wp3d-contact-form">\n'
-    
-    field_types = {
-        "name": '<input type="text" name="name" placeholder="Tu nombre" required>',
-        "email": '<input type="email" name="email" placeholder="tu@email.com" required>',
-        "phone": '<input type="tel" name="phone" placeholder="+34 123 456 789">',
-        "message": '<textarea name="message" rows="5" placeholder="Tu mensaje..." required></textarea>',
-        "subject": '<input type="text" name="subject" placeholder="Asunto">'
-    }
-    
-    for field in fields:
-        if field in field_types:
-            html += f'        <div class="form-group">\n            <label>{field.capitalize()}</label>\n            {field_types[field]}\n        </div>\n'
-    
-    html += '        <button type="submit" class="btn-submit">Enviar Mensaje</button>\n    </form>\n</div>'
-    return html
+def export_theme_config(config_data):
+    # For Gradio 6, we can write to a temp file and return the path
+    filename = "theme_config.json"
+    with open(filename, "w") as f:
+        json.dump(config_data, f, indent=4)
+    return filename
+
+# --- Gradio Application ---
 
-# Main Gradio 6 Application
 with gr.Blocks() as demo:
     gr.Markdown(
         """
-        # 🎨 WordPress 3D Print Store Theme Customizer
+        # 🎨 WordPress Theme Builder: 3D Print Store Edition
         <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="text-decoration: none;">
             <span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; 
                         border-radius: 20px; font-weight: 600; font-size: 0.9em; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
@@ -440,164 +316,116 @@ with gr.Blocks() as demo:
             </span>
         </a>
         
-        **Crea temas WordPress modernos, animados y super editables para tiendas de impresión 3D**
+        Diseña un tema **vibrante, moderno y optimizado** para vender productos impresos en 3D.
         """
     )
     
-    with gr.Tabs():
-        with gr.TabItem("🎨 Personalización de Colores"):
-            gr.Markdown("### Paleta de Colores - Header, Body y Footer")
-            with gr.Row():
-                primary_color = gr.ColorPicker(value="#FF6B6B", label="Color Primario (Header)")
-                secondary_color = gr.ColorPicker(value="#4ECDC4", label="Color Secundario (Body)")
-                accent_color = gr.ColorPicker(value="#FFE66D", label="Color Acento (Botones)")
-                background_color = gr.ColorPicker(value="#F7FFF7", label="Color de Fondo")
-        
-        with gr.TabItem("📐 Diseño y Animaciones"):
-            gr.Markdown("### Configuración de Diseño")
-            with gr.Row():
-                header_style = gr.Dropdown(
-                    ["gradient", "solid", "glassmorphism", "animated"],
-                    value="gradient",
-                    label="Estilo del Header"
-                )
-                animation_type = gr.Radio(
-                    ["fadeInUp", "slideInLeft", "bounceIn", "none"],
-                    value="fadeInUp",
-                    label="Tipo de Animación"
-                )
-                layout_type = gr.Radio(
-                    ["modern", "clean", "minimal"],
-                    value="modern",
-                    label="Tipo de Layout"
-                )
-            
-            with gr.Row():
-                gallery_columns = gr.Slider(2, 6, value=4, step=1, label="Columnas de Galería")
-                show_videos = gr.Checkbox(value=True, label="Mostrar Sección de Videos")
-        
-        with gr.TabItem("🛒 WooCommerce"):
-            gr.Markdown("### Configuración de WooCommerce")
-            enable_woocommerce = gr.Checkbox(value=True, label="Habilitar WooCommerce")
-            
-            with gr.Accordion("Código PHP para WooCommerce", open=False):
-                woocommerce_code = gr.Code(
-                    value=generate_woocommerce_code(),
-                    language="php",
-                    label="functions.php Snippet",
-                    lines=15
-                )
-        
-        with gr.TabItem("📧 Formulario de Contacto"):
-            gr.Markdown("### Campos del Formulario de Contacto")
-            contact_form_fields = gr.CheckboxGroup(
-                ["name", "email", "phone", "message", "subject"],
-                value=["name", "email", "message"],
-                label="Campos a incluir",
-                info="Selecciona los campos para tu formulario"
-            )
-            
-            with gr.Accordion("Vista Previa HTML del Formulario", open=False):
-                form_preview = gr.HTML()
-            
-            def update_form_preview(fields):
-                return generate_contact_form_html(fields)
-            
-            contact_form_fields.change(
-                update_form_preview,
-                inputs=contact_form_fields,
-                outputs=form_preview
-            )
-        
-        with gr.TabItem("📱 Vista Previa en Vivo"):
-            gr.Markdown("### Vista Previa Interactiva del Tema")
-            preview_btn = gr.Button("🔄 Actualizar Vista Previa", variant="primary")
-    
-    # Live Preview Section
-    gr.Markdown("### 🎯 Vista Previa del Tema")
     with gr.Row():
-        with gr.Column(scale=2):
-            theme_preview = gr.HTML(label="Vista Previa")
         with gr.Column(scale=1):
-            config_output = gr.JSON(label="Configuración del Tema")
-    
-    # Export Section
-    with gr.Row():
-        export_btn = gr.Button("💾 Exportar Configuración", variant="huggingface")
-        export_file = gr.File(label="Descargar Configuración")
-    
+            with gr.Tabs():
+                with gr.TabItem("🎨 Colores & Estilo"):
+                    gr.Markdown("### Paleta de Colores 'Llamativa'")
+                    primary_col = gr.ColorPicker(label="Primario (Marca)", value="#6366f1")
+                    secondary_col = gr.ColorPicker(label="Secundario (Gradientes)", value="#ec4899")
+                    accent_col = gr.ColorPicker(label="Acento (Botones/Precios)", value="#f43f5e")
+                    bg_col = gr.ColorPicker(label="Fondo (Cuerpo)", value="#f8fafc")
+                    
+                    gr.Markdown("### Estructura Visual")
+                    header_style = gr.Dropdown(
+                        choices=["gradient", "solid", "glass"], 
+                        value="gradient", 
+                        label="Estilo del Header"
+                    )
+                    layout_type = gr.Radio(
+                        choices=["modern", "clean"], 
+                        value="modern", 
+                        label="Tipografía y Layout"
+                    )
+                    
+                with gr.TabItem("⚡ Animaciones & Módulos"):
+                    animation_type = gr.Dropdown(
+                        choices=["fadeInUp", "slideInLeft", "bounceIn", "pulse"], 
+                        value="fadeInUp", 
+                        label="Animación de Entrada"
+                    )
+                    enable_woo = gr.Checkbox(label="Activar WooCommerce", value=True)
+                    show_videos = gr.Checkbox(label="Sección de Video (Proceso de Impresión)", value=True)
+                    gallery_cols = gr.Slider(minimum=2, maximum=6, step=1, value=4, label="Columnas Galería")
+                
+                with gr.TabItem("📧 Contacto"):
+                    contact_fields = gr.CheckboxGroup(
+                        choices=["name", "email", "phone", "message"],
+                        value=["name", "email", "message"],
+                        label="Campos del Formulario"
+                    )
+            
+            with gr.Accordion("💻 Código PHP (WooCommerce)", open=False):
+                gr.Code(value=generate_woo_php(), language="php", interactive=False)
+                
+            btn_generate = gr.Button("🔄 Actualizar Diseño", variant="primary")
+            btn_export = gr.Button("💾 Exportar Configuración JSON")
+            file_output = gr.File(label="Descargar Tema Config")
+
+        with gr.Column(scale=2):
+            gr.Markdown("### 👁️ Vista Previa en Vivo (HTML/CSS)")
+            preview_html = gr.HTML(label="Theme Preview")
+            json_output = gr.JSON(label="JSON Data", visible=False)
+
     # Event Listeners
-    def update_preview(pri, sec, acc, bg, header, anim, layout, woo, cols, vids, fields):
-        preview, config = generate_theme_preview(
-            pri, sec, acc, bg, header, anim, layout, woo, cols, vids, fields
-        )
-        return preview, config
+    inputs = [
+        primary_col, secondary_col, accent_col, bg_col,
+        header_style, animation_type, layout_type, enable_woo,
+        gallery_cols, show_videos, contact_fields
+    ]
     
-    # Update preview on button click
-    preview_btn.click(
-        update_preview,
-        inputs=[
-            primary_color, secondary_color, accent_color, background_color,
-            header_style, animation_type, layout_type, enable_woocommerce,
-            gallery_columns, show_videos, contact_form_fields
-        ],
-        outputs=[theme_preview, config_output],
-        api_visibility="public"
+    # Initial Load
+    demo.load(
+        fn=generate_theme_preview,
+        inputs=inputs,
+        outputs=[preview_html, json_output],
+        api_visibility="private"
     )
     
-    # Auto-update on color changes
-    color_inputs = [
-        primary_color, secondary_color, accent_color, background_color,
-        header_style, animation_type, layout_type, enable_woocommerce,
-        gallery_columns, show_videos, contact_form_fields
-    ]
-    
-    for input_comp in color_inputs:
-        input_comp.change(
-            update_preview,
-            inputs=color_inputs,
-            outputs=[theme_preview, config_output],
+    # Update on Change
+    for inp in inputs:
+        inp.change(
+            fn=generate_theme_preview,
+            inputs=inputs,
+            outputs=[preview_html, json_output],
             api_visibility="private"
         )
-    
-    # Export functionality
-    def export_config(config_json):
-        filename, content = export_theme(config_json)
-        return gr.File(value=(filename, content), visible=True)
-    
-    export_btn.click(
-        export_config,
-        inputs=config_output,
-        outputs=export_file,
+        
+    # Button Click
+    btn_generate.click(
+        fn=generate_theme_preview,
+        inputs=inputs,
+        outputs=[preview_html, json_output],
         api_visibility="public"
     )
     
-    # Initialize preview on load
-    demo.load(
-        update_preview,
-        inputs=color_inputs,
-        outputs=[theme_preview, config_output],
-        api_visibility="private"
+    # Export
+    btn_export.click(
+        fn=export_theme_config,
+        inputs=[json_output],
+        outputs=[file_output],
+        api_visibility="public"
     )
 
-# Gradio 6 - Launch with theme and footer links
+# Launch App
 demo.launch(
     theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="indigo",
+        primary_hue="indigo",
+        secondary_hue="pink",
         neutral_hue="slate",
-        text_size="lg",
-        spacing_size="lg",
-        radius_size="md"
+        font=gr.themes.GoogleFont("Inter")
     ).set(
         button_primary_background_fill="*primary_600",
         button_primary_background_fill_hover="*primary_700",
-        block_title_text_weight="600"
+        block_shadow="*shadow_drop_lg"
     ),
     footer_links=[
         {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"},
-        {"label": "WordPress Docs", "url": "https://wordpress.org/documentation/"},
-        {"label": "WooCommerce", "url": "https://woocommerce.com/"}
-    ],
-    show_error=True
-)
+        {"label": "WordPress.org", "url": "https://wordpress.org"},
+        {"label": "WooCommerce", "url": "https://woocommerce.com"}
+    ]
+)