Create code_processing.py

code_processing.py

@@ -0,0 +1,907 @@
+"""
+Advanced UI components and interface management for the AnyCoder application.
+"""
+
+import os
+import gradio as gr
+import uuid
+import webbrowser
+import urllib.parse
+from typing import Dict, List, Optional, Tuple, Any, Union
+from pathlib import Path
+
+from config import (
+    THEME_CONFIGS, DEMO_LIST, AVAILABLE_MODELS, DEFAULT_MODEL, DEFAULT_MODEL_NAME,
+    get_saved_theme, save_theme_preference, get_gradio_language
+)
+from utils import extract_text_from_file, process_image_for_model
+from web_utils import check_hf_space_url, parse_repo_or_model_url
+from code_processing import (
+    parse_transformers_js_output, format_transformers_js_output,
+    parse_svelte_output, format_svelte_output,
+    parse_multipage_html_output, format_multipage_output, validate_and_autofix_files,
+    inline_multipage_into_single_preview
+)
+
+class AdvancedUIManager:
+    """Manages advanced UI components and interactions"""
+    
+    def __init__(self):
+        self.current_theme = get_saved_theme()
+        self.demo_categories = self._organize_demos_by_category()
+        self.model_categories = self._organize_models_by_category()
+    
+    def _organize_demos_by_category(self) -> Dict[str, List[Dict]]:
+        """Organize demo examples by category for better UI"""
+        categories = {}
+        for demo in DEMO_LIST:
+            category = demo.get('category', 'General')
+            if category not in categories:
+                categories[category] = []
+            categories[category].append(demo)
+        return categories
+    
+    def _organize_models_by_category(self) -> Dict[str, List[Dict]]:
+        """Organize models by category for advanced selection UI"""
+        categories = {}
+        for model in AVAILABLE_MODELS:
+            category = model.get('category', 'General')
+            if category not in categories:
+                categories[category] = []
+            categories[category].append(model)
+        return categories
+    
+    def create_advanced_model_selector(self) -> gr.Group:
+        """Create an advanced model selector with categories and features"""
+        with gr.Group() as model_group:
+            gr.Markdown("### 🤖 AI Model Selection", elem_classes=["model-header"])
+            
+            with gr.Accordion("Model Categories", open=False, elem_classes=["model-accordion"]):
+                model_tabs = gr.Tabs()
+                
+                with model_tabs:
+                    for category, models in self.model_categories.items():
+                        with gr.Tab(category, elem_classes=["model-tab"]):
+                            for model in models:
+                                vision_icon = "👁️" if model.get('supports_vision', False) else ""
+                                model_btn = gr.Button(
+                                    f"{vision_icon} {model['name']}",
+                                    variant="secondary",
+                                    elem_classes=["model-button"],
+                                    size="sm"
+                                )
+                                gr.Markdown(
+                                    f"*{model['description']}*",
+                                    elem_classes=["model-description"]
+                                )
+            
+            model_dropdown = gr.Dropdown(
+                choices=[model['name'] for model in AVAILABLE_MODELS],
+                value=DEFAULT_MODEL_NAME,
+                label="Selected Model",
+                elem_classes=["model-dropdown"],
+                container=True,
+                scale=2
+            )
+            
+            with gr.Row():
+                model_info_btn = gr.Button("ℹ️", size="sm", elem_classes=["info-button"])
+                model_refresh_btn = gr.Button("🔄", size="sm", elem_classes=["refresh-button"])
+        
+        return model_group, model_dropdown, model_info_btn, model_refresh_btn
+    
+    def create_advanced_demo_gallery(self) -> gr.Group:
+        """Create an advanced demo gallery with categories and search"""
+        with gr.Group() as demo_group:
+            gr.Markdown("### 🎯 Project Templates", elem_classes=["demo-header"])
+            
+            demo_search = gr.Textbox(
+                placeholder="Search templates...",
+                label="",
+                elem_classes=["demo-search"],
+                container=False
+            )
+            
+            demo_filter = gr.Dropdown(
+                choices=["All Categories"] + list(self.demo_categories.keys()),
+                value="All Categories",
+                label="Category Filter",
+                elem_classes=["demo-filter"]
+            )
+            
+            with gr.Group(elem_classes=["demo-gallery"]):
+                demo_cards = []
+                for category, demos in self.demo_categories.items():
+                    with gr.Group(visible=True, elem_classes=[f"demo-category-{category.lower().replace(' ', '-')}"]):
+                        gr.Markdown(f"#### {category}", elem_classes=["category-header"])
+                        
+                        with gr.Row():
+                            for demo in demos:
+                                complexity_color = {
+                                    "Beginner": "success",
+                                    "Intermediate": "secondary", 
+                                    "Advanced": "stop"
+                                }.get(demo.get('complexity', 'Intermediate'), 'secondary')
+                                
+                                demo_card = gr.Button(
+                                    f"**{demo['title']}**\n{demo['description'][:100]}...",
+                                    variant=complexity_color,
+                                    elem_classes=["demo-card"],
+                                    size="lg"
+                                )
+                                demo_cards.append((demo_card, demo))
+        
+        return demo_group, demo_cards, demo_search, demo_filter
+    
+    def create_advanced_media_controls(self) -> gr.Group:
+        """Create advanced media generation controls with smart layouts"""
+        with gr.Group() as media_group:
+            gr.Markdown("### 🎨 AI Media Generation", elem_classes=["media-header"])
+            
+            with gr.Accordion("Media Options", open=False, elem_classes=["media-accordion"]):
+                with gr.Tabs() as media_tabs:
+                    # Text to Image Tab
+                    with gr.Tab("🖼️ Text → Image", elem_classes=["media-tab"]):
+                        text_to_image_toggle = gr.Checkbox(
+                            label="Generate Images from Text",
+                            value=False,
+                            elem_classes=["media-toggle"]
+                        )
+                        text_to_image_prompt = gr.Textbox(
+                            label="Image Description",
+                            placeholder="A modern, minimalist dashboard with clean lines and soft colors",
+                            lines=2,
+                            visible=False,
+                            elem_classes=["media-prompt"]
+                        )
+                        
+                        with gr.Row(visible=False) as t2i_advanced:
+                            t2i_style = gr.Dropdown(
+                                choices=["Photorealistic", "Illustration", "Digital Art", "Sketch", "Abstract"],
+                                value="Digital Art",
+                                label="Style"
+                            )
+                            t2i_quality = gr.Slider(
+                                minimum=0.5,
+                                maximum=1.0,
+                                value=0.9,
+                                step=0.1,
+                                label="Quality"
+                            )
+                    
+                    # Image to Image Tab
+                    with gr.Tab("🎭 Image → Image", elem_classes=["media-tab"]):
+                        image_to_image_toggle = gr.Checkbox(
+                            label="Transform Uploaded Images",
+                            value=False,
+                            elem_classes=["media-toggle"]
+                        )
+                        generation_image_input = gr.Image(
+                            label="Source Image",
+                            visible=False,
+                            elem_classes=["media-image"]
+                        )
+                        image_to_image_prompt = gr.Textbox(
+                            label="Transformation Description",
+                            placeholder="Transform this into a futuristic version",
+                            lines=2,
+                            visible=False,
+                            elem_classes=["media-prompt"]
+                        )
+                    
+                    # Image to Video Tab  
+                    with gr.Tab("🎬 Image → Video", elem_classes=["media-tab"]):
+                        image_to_video_toggle = gr.Checkbox(
+                            label="Generate Video from Image",
+                            value=False,
+                            elem_classes=["media-toggle"]
+                        )
+                        image_to_video_prompt = gr.Textbox(
+                            label="Motion Description",
+                            placeholder="The person starts walking forward with a confident stride",
+                            lines=2,
+                            visible=False,
+                            elem_classes=["media-prompt"]
+                        )
+                    
+                    # Text to Video Tab
+                    with gr.Tab("📹 Text → Video", elem_classes=["media-tab"]):
+                        text_to_video_toggle = gr.Checkbox(
+                            label="Generate Video from Text",
+                            value=False,
+                            elem_classes=["media-toggle"]
+                        )
+                        text_to_video_prompt = gr.Textbox(
+                            label="Video Description",
+                            placeholder="A time-lapse of a city skyline transitioning from day to night",
+                            lines=2,
+                            visible=False,
+                            elem_classes=["media-prompt"]
+                        )
+                    
+                    # Text to Music Tab
+                    with gr.Tab("🎵 Text → Music", elem_classes=["media-tab"]):
+                        text_to_music_toggle = gr.Checkbox(
+                            label="Generate Background Music",
+                            value=False,
+                            elem_classes=["media-toggle"]
+                        )
+                        text_to_music_prompt = gr.Textbox(
+                            label="Music Description",
+                            placeholder="Upbeat electronic background music for a tech demo",
+                            lines=2,
+                            visible=False,
+                            elem_classes=["media-prompt"]
+                        )
+                        
+                        with gr.Row(visible=False) as music_controls:
+                            music_duration = gr.Slider(
+                                minimum=10,
+                                maximum=120,
+                                value=30,
+                                step=5,
+                                label="Duration (seconds)"
+                            )
+                            music_style = gr.Dropdown(
+                                choices=["Electronic", "Orchestral", "Ambient", "Upbeat", "Cinematic"],
+                                value="Electronic",
+                                label="Style"
+                            )
+        
+        # Create visibility toggle handlers
+        media_components = {
+            'text_to_image_toggle': text_to_image_toggle,
+            'text_to_image_prompt': text_to_image_prompt,
+            't2i_advanced': t2i_advanced,
+            'image_to_image_toggle': image_to_image_toggle,
+            'generation_image_input': generation_image_input,
+            'image_to_image_prompt': image_to_image_prompt,
+            'image_to_video_toggle': image_to_video_toggle,
+            'image_to_video_prompt': image_to_video_prompt,
+            'text_to_video_toggle': text_to_video_toggle,
+            'text_to_video_prompt': text_to_video_prompt,
+            'text_to_music_toggle': text_to_music_toggle,
+            'text_to_music_prompt': text_to_music_prompt,
+            'music_controls': music_controls,
+        }
+        
+        return media_group, media_components
+    
+    def create_advanced_code_editor(self) -> gr.Group:
+        """Create advanced code editor with multi-file support and intelligent features"""
+        with gr.Group() as editor_group:
+            gr.Markdown("### 💻 Generated Code", elem_classes=["editor-header"])
+            
+            with gr.Row():
+                with gr.Column(scale=3):
+                    # Main code editor
+                    code_output = gr.Code(
+                        language="html",
+                        lines=25,
+                        interactive=True,
+                        label="Generated Code",
+                        elem_classes=["main-editor"]
+                    )
+                    
+                    # Multi-file editors (initially hidden)
+                    with gr.Group(visible=False, elem_classes=["multi-file-group"]) as transformers_group:
+                        gr.Markdown("#### Transformers.js Files")
+                        with gr.Tabs():
+                            with gr.Tab("index.html"):
+                                tjs_html_code = gr.Code(language="html", lines=20, interactive=True)
+                            with gr.Tab("index.js"):
+                                tjs_js_code = gr.Code(language="javascript", lines=20, interactive=True)
+                            with gr.Tab("style.css"):
+                                tjs_css_code = gr.Code(language="css", lines=20, interactive=True)
+                    
+                    with gr.Group(visible=False, elem_classes=["multi-file-group"]) as svelte_group:
+                        gr.Markdown("#### Svelte Files")
+                        with gr.Tabs():
+                            with gr.Tab("App.svelte"):
+                                svelte_app_code = gr.Code(language="javascript", lines=20, interactive=True)
+                            with gr.Tab("app.css"):
+                                svelte_css_code = gr.Code(language="css", lines=20, interactive=True)
+                
+                with gr.Column(scale=1, elem_classes=["editor-sidebar"]):
+                    # Code actions
+                    with gr.Group(elem_classes=["code-actions"]):
+                        gr.Markdown("**Actions**")
+                        
+                        code_format_btn = gr.Button("🎨 Format Code", size="sm")
+                        code_download_btn = gr.Button("💾 Download", size="sm")
+                        code_share_btn = gr.Button("🔗 Share", size="sm")
+                        code_deploy_btn = gr.Button("🚀 Deploy", size="sm", variant="primary")
+                    
+                    # Code statistics
+                    with gr.Group(elem_classes=["code-stats"]):
+                        gr.Markdown("**Statistics**")
+                        code_stats = gr.JSON(
+                            value={"lines": 0, "characters": 0, "files": 1},
+                            label="",
+                            elem_classes=["stats-display"]
+                        )
+        
+        editor_components = {
+            'code_output': code_output,
+            'transformers_group': transformers_group,
+            'tjs_html_code': tjs_html_code,
+            'tjs_js_code': tjs_js_code,
+            'tjs_css_code': tjs_css_code,
+            'svelte_group': svelte_group,
+            'svelte_app_code': svelte_app_code,
+            'svelte_css_code': svelte_css_code,
+            'code_format_btn': code_format_btn,
+            'code_download_btn': code_download_btn,
+            'code_share_btn': code_share_btn,
+            'code_deploy_btn': code_deploy_btn,
+            'code_stats': code_stats
+        }
+        
+        return editor_group, editor_components
+    
+    def create_advanced_preview_panel(self) -> gr.Group:
+        """Create advanced preview panel with multiple view modes"""
+        with gr.Group() as preview_group:
+            gr.Markdown("### 👁️ Live Preview", elem_classes=["preview-header"])
+            
+            with gr.Row():
+                preview_mode = gr.Radio(
+                    choices=["Desktop", "Tablet", "Mobile"],
+                    value="Desktop",
+                    label="View Mode",
+                    elem_classes=["preview-mode"]
+                )
+                
+                preview_refresh_btn = gr.Button("🔄", size="sm", elem_classes=["preview-refresh"])
+                preview_fullscreen_btn = gr.Button("⛶", size="sm", elem_classes=["preview-fullscreen"])
+                preview_qr_btn = gr.Button("📱", size="sm", elem_classes=["preview-qr"])
+            
+            # Main preview area
+            sandbox = gr.HTML(
+                label="Live Preview",
+                elem_classes=["preview-sandbox"]
+            )
+            
+            # Preview status bar
+            with gr.Row(elem_classes=["preview-status"]):
+                preview_status = gr.Markdown("Ready", elem_classes=["status-text"])
+                preview_metrics = gr.JSON(
+                    value={"load_time": "0ms", "size": "0KB", "elements": 0},
+                    label="",
+                    elem_classes=["preview-metrics"]
+                )
+        
+        preview_components = {
+            'sandbox': sandbox,
+            'preview_mode': preview_mode,
+            'preview_refresh_btn': preview_refresh_btn,
+            'preview_fullscreen_btn': preview_fullscreen_btn,
+            'preview_qr_btn': preview_qr_btn,
+            'preview_status': preview_status,
+            'preview_metrics': preview_metrics
+        }
+        
+        return preview_group, preview_components
+    
+    def create_chat_interface(self) -> gr.Group:
+        """Create advanced chat-based interface for beta mode"""
+        with gr.Group() as chat_group:
+            gr.Markdown("### 💬 AI Assistant Chat", elem_classes=["chat-header"])
+            
+            # Main chat area
+            chatbot = gr.Chatbot(
+                type="messages",
+                show_label=False,
+                height=400,
+                layout="bubble",
+                bubble_full_width=False,
+                group_consecutive_messages=True,
+                elem_classes=["main-chatbot"],
+                avatar_images=("🧑‍💻", "🤖")
+            )
+            
+            # Chat input with advanced features
+            with gr.Row():
+                chat_input = gr.MultimodalTextbox(
+                    placeholder="Describe what you want to build... (supports text, images, and files)",
+                    submit_btn=True,
+                    stop_btn=False,
+                    show_label=False,
+                    sources=["upload", "microphone"],
+                    elem_classes=["chat-input"],
+                    scale=4
+                )
+                
+                chat_voice_btn = gr.Button("🎤", size="sm", elem_classes=["voice-button"])
+            
+            # Chat controls
+            with gr.Row():
+                chat_clear_btn = gr.ClearButton([chat_input, chatbot], size="sm")
+                chat_export_btn = gr.Button("📤 Export Chat", size="sm")
+                chat_settings_btn = gr.Button("⚙️", size="sm")
+            
+            # Quick actions
+            with gr.Row(elem_classes=["chat-quick-actions"]):
+                quick_actions = [
+                    ("🌐 Website", "Create a modern website"),
+                    ("📱 App", "Build a mobile app"),
+                    ("📊 Dashboard", "Design a data dashboard"),
+                    ("🎮 Game", "Create an interactive game")
+                ]
+                
+                quick_buttons = []
+                for icon_text, prompt in quick_actions:
+                    btn = gr.Button(icon_text, size="sm", elem_classes=["quick-action"])
+                    quick_buttons.append((btn, prompt))
+        
+        chat_components = {
+            'chatbot': chatbot,
+            'chat_input': chat_input,
+            'chat_voice_btn': chat_voice_btn,
+            'chat_clear_btn': chat_clear_btn,
+            'chat_export_btn': chat_export_btn,
+            'chat_settings_btn': chat_settings_btn,
+            'quick_buttons': quick_buttons
+        }
+        
+        return chat_group, chat_components
+    
+    def create_advanced_sidebar(self) -> gr.Column:
+        """Create advanced sidebar with intelligent organization"""
+        with gr.Column(elem_classes=["advanced-sidebar"]) as sidebar:
+            # Header with user info
+            with gr.Group(elem_classes=["sidebar-header"]):
+                login_button = gr.LoginButton(elem_classes=["login-btn"])
+                
+                with gr.Row():
+                    beta_toggle = gr.Checkbox(
+                        value=False,
+                        label="🧪 Beta Chat Mode",
+                        info="Try our new conversational interface",
+                        elem_classes=["beta-toggle"]
+                    )
+            
+            # Chat interface (hidden by default)
+            chat_group, chat_components = self.create_chat_interface()
+            chat_group.visible = False
+            
+            # Classic controls
+            with gr.Group(elem_classes=["classic-controls"]) as classic_group:
+                # Project input section
+                with gr.Group(elem_classes=["input-section"]):
+                    gr.Markdown("### 🎯 Project Description")
+                    input_textbox = gr.Textbox(
+                        label="What would you like to build?",
+                        placeholder="Describe your application in detail...",
+                        lines=3,
+                        elem_classes=["main-input"]
+                    )
+                
+                # Advanced model selector
+                model_group, model_dropdown, model_info_btn, model_refresh_btn = self.create_advanced_model_selector()
+                
+                # Language and framework selection
+                with gr.Group(elem_classes=["language-section"]):
+                    gr.Markdown("### ⚙️ Technology Stack")
+                    
+                    language_dropdown = gr.Dropdown(
+                        choices=[
+                            "HTML/CSS/JS", "React", "Vue", "Svelte", "Streamlit", 
+                            "Gradio", "Python", "Transformers.js", "Node.js", "FastAPI"
+                        ],
+                        value="HTML/CSS/JS",
+                        label="Framework",
+                        elem_classes=["language-dropdown"]
+                    )
+                    
+                    with gr.Row():
+                        responsive_toggle = gr.Checkbox(
+                            label="📱 Responsive Design", 
+                            value=True,
+                            elem_classes=["feature-toggle"]
+                        )
+                        dark_mode_toggle = gr.Checkbox(
+                            label="🌙 Dark Mode Support",
+                            value=False,
+                            elem_classes=["feature-toggle"] 
+                        )
+                
+                # File inputs section
+                with gr.Group(elem_classes=["file-section"]):
+                    gr.Markdown("### 📂 Input Sources")
+                    
+                    file_input = gr.File(
+                        label="Reference Files",
+                        file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".png"],
+                        elem_classes=["file-input"]
+                    )
+                    
+                    website_url_input = gr.Textbox(
+                        label="Website to Redesign",
+                        placeholder="https://example.com",
+                        elem_classes=["url-input"]
+                    )
+                    
+                    image_input = gr.Image(
+                        label="UI Design Reference",
+                        visible=False,
+                        elem_classes=["image-input"]
+                    )
+                
+                # Media generation controls
+                media_group, media_components = self.create_advanced_media_controls()
+                
+                # Advanced options
+                with gr.Accordion("🔧 Advanced Options", open=False, elem_classes=["advanced-options"]):
+                    search_toggle = gr.Checkbox(
+                        label="🌐 Enable Web Search",
+                        value=False,
+                        info="Use real-time web search for latest information"
+                    )
+                    
+                    optimization_level = gr.Slider(
+                        minimum=1,
+                        maximum=5,
+                        value=3,
+                        step=1,
+                        label="Code Optimization Level",
+                        info="Higher values produce more optimized code"
+                    )
+                    
+                    accessibility_toggle = gr.Checkbox(
+                        label="♿ Accessibility Focus",
+                        value=True,
+                        info="Prioritize accessibility best practices"
+                    )
+                
+                # Generation controls
+                with gr.Row(elem_classes=["generation-controls"]):
+                    generate_btn = gr.Button(
+                        "✨ Generate Code",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["generate-button"]
+                    )
+                    
+                    with gr.Column(scale=1):
+                        clear_btn = gr.Button("🗑️", size="sm", elem_classes=["clear-button"])
+                        stop_btn = gr.Button("⏹️", size="sm", elem_classes=["stop-button"])
+                
+                # Demo gallery
+                demo_group, demo_cards, demo_search, demo_filter = self.create_advanced_demo_gallery()
+                
+                # Project import section
+                with gr.Group(elem_classes=["import-section"]):
+                    gr.Markdown("### 📥 Import Project")
+                    
+                    import_url = gr.Textbox(
+                        label="Project URL",
+                        placeholder="GitHub, HuggingFace Space, or Model URL",
+                        elem_classes=["import-input"]
+                    )
+                    
+                    with gr.Row():
+                        import_btn = gr.Button("Import", size="sm")
+                        import_status = gr.Markdown("", visible=False)
+                
+                # Deployment section
+                with gr.Group(elem_classes=["deploy-section"], visible=False) as deploy_group:
+                    gr.Markdown("### 🚀 Deploy Application")
+                    
+                    space_name_input = gr.Textbox(
+                        label="App Name",
+                        placeholder="my-awesome-app",
+                        elem_classes=["space-name-input"]
+                    )
+                    
+                    sdk_dropdown = gr.Dropdown(
+                        choices=["Static HTML", "Gradio", "Streamlit", "Transformers.js", "Svelte"],
+                        value="Static HTML",
+                        label="Deployment Type",
+                        elem_classes=["sdk-dropdown"]
+                    )
+                    
+                    deploy_btn = gr.Button(
+                        "🚀 Deploy to HuggingFace",
+                        variant="primary",
+                        elem_classes=["deploy-button"]
+                    )
+                    
+                    deploy_status = gr.Markdown("", visible=False, elem_classes=["deploy-status"])
+        
+        # Collect all components for return
+        sidebar_components = {
+            'login_button': login_button,
+            'beta_toggle': beta_toggle,
+            'chat_group': chat_group,
+            'chat_components': chat_components,
+            'classic_group': classic_group,
+            'input_textbox': input_textbox,
+            'model_dropdown': model_dropdown,
+            'model_info_btn': model_info_btn,
+            'model_refresh_btn': model_refresh_btn,
+            'language_dropdown': language_dropdown,
+            'responsive_toggle': responsive_toggle,
+            'dark_mode_toggle': dark_mode_toggle,
+            'file_input': file_input,
+            'website_url_input': website_url_input,
+            'image_input': image_input,
+            'media_components': media_components,
+            'search_toggle': search_toggle,
+            'optimization_level': optimization_level,
+            'accessibility_toggle': accessibility_toggle,
+            'generate_btn': generate_btn,
+            'clear_btn': clear_btn,
+            'stop_btn': stop_btn,
+            'demo_cards': demo_cards,
+            'demo_search': demo_search,
+            'demo_filter': demo_filter,
+            'import_url': import_url,
+            'import_btn': import_btn,
+            'import_status': import_status,
+            'deploy_group': deploy_group,
+            'space_name_input': space_name_input,
+            'sdk_dropdown': sdk_dropdown,
+            'deploy_btn': deploy_btn,
+            'deploy_status': deploy_status
+        }
+        
+        return sidebar, sidebar_components
+
+class ThemeManager:
+    """Manages application themes and styling"""
+    
+    @staticmethod
+    def get_custom_css() -> str:
+        """Get custom CSS for advanced styling"""
+        return """
+        /* Advanced AnyCoder Styling */
+        
+        .advanced-sidebar {
+            background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
+            border-radius: 12px;
+            padding: 16px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        
+        .sidebar-header {
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            color: white;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+        
+        .main-input {
+            border-radius: 8px;
+            border: 2px solid #e5e7eb;
+            transition: border-color 0.2s ease;
+        }
+        
+        .main-input:focus {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        
+        .generate-button {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            transition: all 0.2s ease;
+        }
+        
+        .generate-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        }
+        
+        .demo-card {
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 12px;
+            transition: all 0.2s ease;
+            text-align: left;
+            min-height: 100px;
+        }
+        
+        .demo-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+            border-color: #3b82f6;
+        }
+        
+        .model-button {
+            background: white;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            margin: 4px 0;
+            transition: all 0.2s ease;
+        }
+        
+        .model-button:hover {
+            background: #f9fafb;
+            border-color: #3b82f6;
+        }
+        
+        .code-actions {
+            background: #f8fafc;
+            border-radius: 8px;
+            padding: 12px;
+            border: 1px solid #e5e7eb;
+        }
+        
+        .preview-sandbox {
+            border: 2px solid #e5e7eb;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        
+        .chat-input {
+            border-radius: 20px;
+            border: 2px solid #e5e7eb;
+        }
+        
+        .main-chatbot {
+            border: 1px solid #e5e7eb;
+            border-radius: 12px;
+            background: #fafafa;
+        }
+        
+        .media-toggle {
+            color: #374151;
+            font-weight: 500;
+        }
+        
+        .media-prompt {
+            border-radius: 6px;
+            border: 1px solid #d1d5db;
+        }
+        
+        .quick-action {
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            font-size: 12px;
+            transition: all 0.2s ease;
+        }
+        
+        .quick-action:hover {
+            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
+            transform: translateY(-1px);
+        }
+        
+        .feature-toggle {
+            font-size: 13px;
+            color: #6b7280;
+        }
+        
+        .stats-display {
+            font-size: 11px;
+            background: #f9fafb;
+            border-radius: 4px;
+            padding: 8px;
+        }
+        
+        .preview-metrics {
+            font-size: 10px;
+            color: #6b7280;
+        }
+        
+        .category-header {
+            color: #374151;
+            font-weight: 600;
+            margin: 8px 0;
+            padding-bottom: 4px;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        
+        .deploy-button {
+            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+            color: white;
+            font-weight: 600;
+        }
+        
+        .beta-toggle {
+            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-size: 12px;
+        }
+        """
+    
+    @staticmethod
+    def apply_theme_updates(theme_name: str) -> Dict[str, Any]:
+        """Apply theme and return UI updates"""
+        if theme_name in THEME_CONFIGS:
+            save_theme_preference(theme_name)
+            
+            restart_message = f"""
+            🎨 **Theme Applied:** {theme_name}
+            
+            **{THEME_CONFIGS[theme_name]['description']}**
+            
+            Your theme preference has been saved. Some advanced styling may require a restart to fully apply.
+            """
+            
+            return {
+                'theme_status': gr.update(value=restart_message, visible=True),
+                'current_theme': theme_name
+            }
+        
+        return {'theme_status': gr.update(visible=False), 'current_theme': theme_name}
+
+class DeploymentManager:
+    """Manages application deployment to various platforms"""
+    
+    @staticmethod
+    def create_deployment_options() -> Dict[str, Any]:
+        """Create deployment options for different platforms"""
+        platforms = {
+            'huggingface': {
+                'name': 'HuggingFace Spaces',
+                'icon': '🤗',
+                'description': 'Deploy to HuggingFace Spaces with automatic hosting',
+                'sdks': ['Static', 'Gradio', 'Streamlit', 'Docker']
+            },
+            'netlify': {
+                'name': 'Netlify',
+                'icon': '🌐',
+                'description': 'Deploy static sites with continuous deployment',
+                'sdks': ['Static']
+            },
+            'vercel': {
+                'name': 'Vercel',
+                'icon': '▲',
+                'description': 'Deploy with edge functions and optimized performance',
+                'sdks': ['Static', 'Next.js']
+            }
+        }
+        
+        return platforms
+    
+    @staticmethod
+    def prepare_deployment_files(code: str, language: str, framework: str) -> Dict[str, str]:
+        """Prepare files for deployment based on the framework"""
+        files = {}
+        
+        if language == "transformers.js":
+            # Parse and prepare transformers.js files
+            parsed_files = parse_transformers_js_output(code)
+            files.update(parsed_files)
+        
+        elif language == "svelte":
+            # Parse and prepare Svelte files
+            parsed_files = parse_svelte_output(code)
+            files.update(parsed_files)
+            
+        elif language == "html":
+            # Handle multi-page or single HTML
+            parsed_files = parse_multipage_html_output(code)
+            if parsed_files:
+                files.update(validate_and_autofix_files(parsed_files))
+            else:
+                files['index.html'] = code
+        
+        else:
+            # Single file deployment
+            extension_map = {
+                'python': '.py',
+                'javascript': '.js',
+                'typescript': '.ts',
+                'css': '.css'
+            }
+            
+            filename = f"app{extension_map.get(language, '.txt')}"
+            files[filename] = code
+        
+        return files
+
+# Global UI manager instance
+ui_manager = AdvancedUIManager()
+theme_manager = ThemeManager()
+deployment_manager = DeploymentManager()