Rename app.py to app..py

app..py

@@ -0,0 +1,1166 @@
+"""
+Main AnyCoder application with advanced professional UI.
+"""
+
+import os
+import uuid
+import base64
+import tempfile
+from typing import Dict, List, Optional, Tuple, Union
+
+import gradio as gr
+
+# Import all our modules
+from config import (
+    AVAILABLE_MODELS, DEFAULT_MODEL, THEME_CONFIGS, DEMO_LIST,
+    HTML_SYSTEM_PROMPT, get_saved_theme, save_theme_preference, get_gradio_language
+)
+from utils import (
+    get_inference_client, remove_code_block, extract_text_from_file,
+    create_multimodal_message, apply_search_replace_changes,
+    cleanup_all_temp_media, reap_old_media, process_image_for_model
+)
+from web_utils import extract_website_content, enhance_query_with_search
+from media_generation import (
+    generate_image_with_qwen, generate_image_to_image, generate_video_from_image,
+    generate_video_from_text, generate_music_from_text
+)
+from code_processing import (
+    is_streamlit_code, is_gradio_code, extract_html_document,
+    parse_transformers_js_output, format_transformers_js_output, build_transformers_inline_html,
+    parse_svelte_output, format_svelte_output,
+    parse_multipage_html_output, format_multipage_output,
+    validate_and_autofix_files, inline_multipage_into_single_preview,
+    apply_generated_media_to_html
+)
+
+# Initialize theme
+current_theme_name = get_saved_theme()
+current_theme = THEME_CONFIGS[current_theme_name]["theme"]
+
+class AnyCoder:
+    """Main AnyCoder application class"""
+    
+    def __init__(self):
+        self.setup_cleanup()
+    
+    def setup_cleanup(self):
+        """Setup cleanup handlers"""
+        cleanup_all_temp_media()
+        reap_old_media()
+    
+    def create_advanced_ui(self):
+        """Create the advanced professional UI"""
+        
+        with gr.Blocks(
+            title="AnyCoder - Professional AI Development Suite",
+            theme=current_theme,
+            css=self.get_custom_css(),
+            head=self.get_head_html()
+        ) as app:
+            # State management
+            history = gr.State([])
+            setting = gr.State({"system": HTML_SYSTEM_PROMPT})
+            current_model = gr.State(DEFAULT_MODEL)
+            session_state = gr.State({})
+            
+            # Header
+            with gr.Row(elem_classes=["header-row"]):
+                with gr.Column(scale=3):
+                    gr.HTML("""
+                    <div class="app-header">
+                        <div class="header-content">
+                            <div class="logo-section">
+                                <div class="logo">⚡</div>
+                                <div class="app-title">
+                                    <h1>AnyCoder</h1>
+                                    <p>Professional AI Development Suite</p>
+                                </div>
+                            </div>
+                            <div class="status-indicators">
+                                <div class="status-item">
+                                    <span class="status-dot active"></span>
+                                    <span>AI Models Ready</span>
+                                </div>
+                                <div class="status-item">
+                                    <span class="status-dot active"></span>
+                                    <span>Web Search Available</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    """)
+                
+                with gr.Column(scale=1, min_width=200):
+                    with gr.Row():
+                        login_button = gr.LoginButton(scale=1, size="sm")
+                        theme_selector = gr.Dropdown(
+                            choices=list(THEME_CONFIGS.keys()),
+                            value=current_theme_name,
+                            label="Theme",
+                            scale=1,
+                            container=False
+                        )
+            
+            # Main interface
+            with gr.Row():
+                # Left sidebar - Controls
+                with gr.Column(scale=1, elem_classes=["sidebar"]):
+                    self.create_sidebar(current_model, session_state)
+                
+                # Main content area
+                with gr.Column(scale=3, elem_classes=["main-content"]):
+                    self.create_main_content(history, current_model)
+            
+            # Connect all the event handlers
+            self.setup_event_handlers(app, history, setting, current_model, session_state)
+        
+        return app
+    
+    def create_sidebar(self, current_model, session_state):
+        """Create the professional sidebar"""
+        
+        # Model Selection
+        with gr.Group(elem_classes=["control-group"]):
+            gr.HTML('<div class="group-title">🤖 AI Model</div>')
+            
+            model_dropdown = gr.Dropdown(
+                choices=[f"{model['name']} ({model['category']})" for model in AVAILABLE_MODELS],
+                value=f"{DEFAULT_MODEL['name']} ({DEFAULT_MODEL['category']})",
+                label="Select Model",
+                info="Choose your AI model based on task requirements",
+                container=False
+            )
+            
+            # Model info display
+            model_info = gr.HTML(self.get_model_info_html(DEFAULT_MODEL))
+        
+        # Project Configuration  
+        with gr.Group(elem_classes=["control-group"]):
+            gr.HTML('<div class="group-title">⚙️ Project Settings</div>')
+            
+            language_dropdown = gr.Dropdown(
+                choices=[
+                    ("Static HTML", "html"),
+                    ("Streamlit App", "streamlit"), 
+                    ("Gradio App", "gradio"),
+                    ("Transformers.js", "transformers.js"),
+                    ("Svelte App", "svelte"),
+                    ("Python Script", "python"),
+                    ("JavaScript", "javascript"),
+                    ("CSS Styles", "css"),
+                    ("Other", "other")
+                ],
+                value="html",
+                label="Project Type",
+                container=False
+            )
+            
+            with gr.Row():
+                search_toggle = gr.Checkbox(
+                    label="Web Search",
+                    value=False,
+                    info="Enable real-time web search"
+                )
+                advanced_mode = gr.Checkbox(
+                    label="Advanced Mode", 
+                    value=False,
+                    info="Show advanced options"
+                )
+        
+        # Input Sources
+        with gr.Group(elem_classes=["control-group"]):
+            gr.HTML('<div class="group-title">📁 Input Sources</div>')
+            
+            file_input = gr.File(
+                label="Upload Reference File",
+                file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".jpeg", ".png"],
+                container=False
+            )
+            
+            website_url_input = gr.Textbox(
+                label="Website URL (for redesign)",
+                placeholder="https://example.com",
+                container=False
+            )
+            
+            image_input = gr.Image(
+                label="Design Reference Image",
+                visible=False,
+                container=False
+            )
+        
+        # Media Generation Controls
+        with gr.Group(elem_classes=["control-group"], visible=False) as advanced_controls:
+            gr.HTML('<div class="group-title">🎨 Media Generation</div>')
+            
+            with gr.Row():
+                enable_images = gr.Checkbox(label="Images", value=False, scale=1)
+                enable_videos = gr.Checkbox(label="Videos", value=False, scale=1)
+                enable_music = gr.Checkbox(label="Music", value=False, scale=1)
+            
+            media_prompts = gr.Textbox(
+                label="Media Generation Prompts",
+                placeholder="Describe media to generate...",
+                lines=2,
+                visible=False,
+                container=False
+            )
+        
+        # Quick Examples
+        with gr.Group(elem_classes=["control-group"]):
+            gr.HTML('<div class="group-title">🚀 Quick Start</div>')
+            
+            example_gallery = gr.Gallery(
+                value=[(None, demo["title"]) for demo in DEMO_LIST[:6]],
+                label="Example Projects",
+                show_label=False,
+                elem_classes=["example-gallery"],
+                columns=2,
+                rows=3,
+                height="auto",
+                container=False
+            )
+        
+        # Project Import
+        with gr.Group(elem_classes=["control-group"]):
+            gr.HTML('<div class="group-title">📥 Import Project</div>')
+            
+            import_url = gr.Textbox(
+                label="GitHub/HuggingFace URL",
+                placeholder="https://github.com/user/repo or https://huggingface.co/spaces/user/space",
+                container=False
+            )
+            
+            with gr.Row():
+                import_btn = gr.Button("Import", variant="secondary", scale=1)
+                import_status = gr.HTML("", visible=False, scale=2)
+        
+        # Store sidebar components for event handling
+        self.sidebar_components = {
+            'model_dropdown': model_dropdown,
+            'model_info': model_info,
+            'language_dropdown': language_dropdown,
+            'search_toggle': search_toggle,
+            'advanced_mode': advanced_mode,
+            'file_input': file_input,
+            'website_url_input': website_url_input,
+            'image_input': image_input,
+            'advanced_controls': advanced_controls,
+            'enable_images': enable_images,
+            'enable_videos': enable_videos,
+            'enable_music': enable_music,
+            'media_prompts': media_prompts,
+            'example_gallery': example_gallery,
+            'import_url': import_url,
+            'import_btn': import_btn,
+            'import_status': import_status
+        }
+        
+        # Show advanced controls when enabled
+        advanced_mode.change(
+            lambda checked: gr.update(visible=checked),
+            inputs=[advanced_mode],
+            outputs=[advanced_controls]
+        )
+        
+        # Show media prompts when any media generation is enabled
+        for checkbox in [enable_images, enable_videos, enable_music]:
+            checkbox.change(
+                lambda *args: gr.update(visible=any(args)),
+                inputs=[enable_images, enable_videos, enable_music],
+                outputs=[media_prompts]
+            )
+    
+    def create_main_content(self, history, current_model):
+        """Create the main content area"""
+        
+        # Input area
+        with gr.Group(elem_classes=["input-group"]):
+            input_textbox = gr.Textbox(
+                label="What would you like to build?",
+                placeholder="Describe your application in detail... (e.g., 'Create a modern dashboard with charts and user management')",
+                lines=4,
+                container=False,
+                elem_classes=["main-input"]
+            )
+            
+            with gr.Row():
+                generate_btn = gr.Button(
+                    "🚀 Generate Application", 
+                    variant="primary", 
+                    scale=3,
+                    size="lg",
+                    elem_classes=["generate-btn"]
+                )
+                clear_btn = gr.Button(
+                    "🗑️ Clear", 
+                    variant="secondary", 
+                    scale=1,
+                    size="lg"
+                )
+        
+        # Output area with professional tabs
+        with gr.Tabs(elem_classes=["output-tabs"]):
+            
+            # Preview Tab
+            with gr.Tab("🖥️ Live Preview", elem_classes=["preview-tab"]):
+                with gr.Group():
+                    preview_controls = gr.HTML("""
+                    <div class="preview-controls">
+                        <div class="preview-info">
+                            <span class="info-item">📱 Responsive Design</span>
+                            <span class="info-item">⚡ Real-time Updates</span>
+                            <span class="info-item">🔒 Sandboxed Environment</span>
+                        </div>
+                    </div>
+                    """)
+                    
+                    sandbox = gr.HTML(
+                        label="Application Preview",
+                        elem_classes=["preview-container"]
+                    )
+            
+            # Code Tab
+            with gr.Tab("💻 Source Code", elem_classes=["code-tab"]):
+                with gr.Row():
+                    with gr.Column(scale=4):
+                        code_output = gr.Code(
+                            language="html",
+                            lines=30,
+                            interactive=True,
+                            label="Generated Code",
+                            elem_classes=["code-editor"]
+                        )
+                    
+                    with gr.Column(scale=1, elem_classes=["code-sidebar"]):
+                        # Code actions
+                        with gr.Group():
+                            gr.HTML('<div class="group-title">🔧 Code Actions</div>')
+                            
+                            copy_btn = gr.Button("📋 Copy Code", size="sm")
+                            download_btn = gr.Button("💾 Download", size="sm")
+                            format_btn = gr.Button("✨ Format", size="sm")
+                        
+                        # Code stats
+                        with gr.Group():
+                            gr.HTML('<div class="group-title">📊 Code Stats</div>')
+                            code_stats = gr.HTML(
+                                '<div class="code-stats">Ready to generate...</div>',
+                                elem_classes=["code-stats"]
+                            )
+            
+            # Deployment Tab
+            with gr.Tab("🚀 Deploy", elem_classes=["deploy-tab"]):
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        with gr.Group():
+                            gr.HTML('<div class="group-title">🌐 Deployment Options</div>')
+                            
+                            deploy_platform = gr.Dropdown(
+                                choices=[
+                                    ("Hugging Face Spaces", "hf_spaces"),
+                                    ("Vercel", "vercel"),
+                                    ("Netlify", "netlify"),
+                                    ("GitHub Pages", "github_pages")
+                                ],
+                                value="hf_spaces",
+                                label="Platform",
+                                container=False
+                            )
+                            
+                            app_name = gr.Textbox(
+                                label="Application Name",
+                                placeholder="my-awesome-app",
+                                container=False
+                            )
+                            
+                            deploy_btn = gr.Button(
+                                "🚀 Deploy Now",
+                                variant="primary",
+                                size="lg"
+                            )
+                    
+                    with gr.Column(scale=1):
+                        deployment_status = gr.HTML(
+                            '<div class="deployment-status">Ready to deploy</div>',
+                            elem_classes=["deployment-status"]
+                        )
+        
+        # Generation status
+        generation_status = gr.HTML(
+            visible=False,
+            elem_classes=["generation-status"]
+        )
+        
+        # Store main content components
+        self.main_components = {
+            'input_textbox': input_textbox,
+            'generate_btn': generate_btn,
+            'clear_btn': clear_btn,
+            'sandbox': sandbox,
+            'code_output': code_output,
+            'code_stats': code_stats,
+            'copy_btn': copy_btn,
+            'download_btn': download_btn,
+            'format_btn': format_btn,
+            'deploy_platform': deploy_platform,
+            'app_name': app_name,
+            'deploy_btn': deploy_btn,
+            'deployment_status': deployment_status,
+            'generation_status': generation_status
+        }
+    
+    def setup_event_handlers(self, app, history, setting, current_model, session_state):
+        """Setup all event handlers for the application"""
+        
+        # Generation handler
+        self.main_components['generate_btn'].click(
+            self.handle_generation,
+            inputs=[
+                self.main_components['input_textbox'],
+                self.sidebar_components['file_input'],
+                self.sidebar_components['website_url_input'],
+                self.sidebar_components['image_input'],
+                self.sidebar_components['language_dropdown'],
+                self.sidebar_components['search_toggle'],
+                current_model,
+                history,
+                session_state
+            ],
+            outputs=[
+                self.main_components['code_output'],
+                self.main_components['sandbox'],
+                self.main_components['code_stats'],
+                history
+            ]
+        )
+        
+        # Model selection handler
+        self.sidebar_components['model_dropdown'].change(
+            self.handle_model_change,
+            inputs=[self.sidebar_components['model_dropdown']],
+            outputs=[current_model, self.sidebar_components['model_info']]
+        )
+        
+        # Clear handler
+        self.main_components['clear_btn'].click(
+            self.handle_clear,
+            outputs=[
+                self.main_components['input_textbox'],
+                self.main_components['code_output'],
+                self.main_components['sandbox'],
+                self.main_components['code_stats'],
+                history
+            ]
+        )
+        
+        # Example selection handler
+        self.sidebar_components['example_gallery'].select(
+            self.handle_example_select,
+            inputs=[self.sidebar_components['example_gallery']],
+            outputs=[self.main_components['input_textbox']]
+        )
+    
+    def handle_generation(self, prompt, file, website_url, image, language, 
+                         enable_search, current_model_state, history_state, session_state):
+        """Handle code generation with advanced features"""
+        
+        if not prompt.strip():
+            return (
+                gr.update(), 
+                "<div class='error-message'>Please enter a description of what you'd like to build.</div>",
+                "<div class='code-stats error'>No input provided</div>",
+                history_state
+            )
+        
+        try:
+            # Setup session
+            session_id = session_state.get('session_id', str(uuid.uuid4()))
+            session_state['session_id'] = session_id
+            
+            # Enhance prompt with file content
+            enhanced_prompt = prompt
+            if file:
+                file_content = extract_text_from_file(file.name)
+                if file_content:
+                    enhanced_prompt = f"{prompt}\n\n[Reference file content]\n{file_content[:5000]}"
+            
+            # Enhance with website content
+            if website_url and website_url.strip():
+                website_content = extract_website_content(website_url.strip())
+                if website_content and not website_content.startswith("Error"):
+                    enhanced_prompt = f"{enhanced_prompt}\n\n[Website content to redesign]\n{website_content[:8000]}"
+            
+            # Enhance with web search if enabled
+            if enable_search:
+                enhanced_prompt = enhance_query_with_search(enhanced_prompt, True)
+            
+            # Generate code using selected model
+            generated_code = self.generate_code_with_model(
+                enhanced_prompt, current_model_state, language, image
+            )
+            
+            # Process the generated code
+            processed_code = remove_code_block(generated_code)
+            
+            # Apply media generation if enabled
+            if any([
+                session_state.get('enable_images', False),
+                session_state.get('enable_videos', False), 
+                session_state.get('enable_music', False)
+            ]):
+                processed_code = apply_generated_media_to_html(
+                    processed_code,
+                    prompt,
+                    enable_text_to_image=session_state.get('enable_images', False),
+                    enable_text_to_video=session_state.get('enable_videos', False),
+                    enable_text_to_music=session_state.get('enable_music', False),
+                    session_id=session_id
+                )
+            
+            # Generate preview
+            preview_html = self.generate_preview(processed_code, language)
+            
+            # Update code stats
+            stats_html = self.generate_code_stats(processed_code, language)
+            
+            # Update history
+            history_state.append([prompt, processed_code])
+            
+            return (
+                gr.update(value=processed_code, language=get_gradio_language(language)),
+                preview_html,
+                stats_html,
+                history_state
+            )
+            
+        except Exception as e:
+            error_html = f"<div class='error-message'>Generation Error: {str(e)}</div>"
+            return (
+                gr.update(value=f"// Error: {str(e)}"),
+                error_html,
+                "<div class='code-stats error'>Generation failed</div>",
+                history_state
+            )
+    
+    def generate_code_with_model(self, prompt, model_state, language, image):
+        """Generate code using the selected model"""
+        
+        try:
+            client = get_inference_client(model_state['id'], "auto")
+            
+            # Select appropriate system prompt based on language
+            system_prompts = {
+                'html': HTML_SYSTEM_PROMPT,
+                'streamlit': "You are an expert Streamlit developer. Create modern, interactive Streamlit applications with clean code and professional UI.",
+                'gradio': "You are an expert Gradio developer. Create modern, interactive Gradio applications with clean interfaces and robust functionality.",
+                'transformers.js': "You are an expert in Transformers.js. Create modern web applications using Transformers.js for AI/ML functionality.",
+                'svelte': "You are an expert Svelte developer. Create modern, reactive Svelte applications with TypeScript and clean architecture."
+            }
+            
+            system_prompt = system_prompts.get(language, HTML_SYSTEM_PROMPT)
+            
+            # Prepare messages
+            messages = [
+                {"role": "system", "content": system_prompt}
+            ]
+            
+            if image:
+                messages.append(create_multimodal_message(prompt, image))
+            else:
+                messages.append({"role": "user", "content": prompt})
+            
+            # Generate with streaming for better UX
+            if hasattr(client, 'chat') and hasattr(client.chat, 'completions'):
+                completion = client.chat.completions.create(
+                    model=model_state['id'],
+                    messages=messages,
+                    max_tokens=16384,
+                    temperature=0.7,
+                    stream=False  # For simplicity in this demo
+                )
+                
+                return completion.choices[0].message.content
+            else:
+                # Fallback for different client types
+                return "Generated code would appear here..."
+                
+        except Exception as e:
+            raise Exception(f"Model generation failed: {str(e)}")
+    
+    def generate_preview(self, code, language):
+        """Generate HTML preview for the code"""
+        
+        try:
+            if language == "html":
+                # Handle multi-page HTML
+                files = parse_multipage_html_output(code)
+                if files and files.get('index.html'):
+                    files = validate_and_autofix_files(files)
+                    preview_code = inline_multipage_into_single_preview(files)
+                else:
+                    preview_code = extract_html_document(code)
+                
+                return self.send_to_sandbox(preview_code)
+            
+            elif language == "transformers.js":
+                files = parse_transformers_js_output(code)
+                if files['index.html'] and files['index.js'] and files['style.css']:
+                    merged_html = build_transformers_inline_html(files)
+                    return self.send_to_sandbox(merged_html)
+                else:
+                    return "<div class='preview-message'>⏳ Generating Transformers.js application...</div>"
+            
+            elif language == "streamlit":
+                if is_streamlit_code(code):
+                    return self.send_streamlit_to_stlite(code)
+                else:
+                    return "<div class='preview-message'>Add <code>import streamlit as st</code> to enable preview</div>"
+            
+            elif language == "gradio":
+                if is_gradio_code(code):
+                    return self.send_gradio_to_lite(code)
+                else:
+                    return "<div class='preview-message'>Add <code>import gradio as gr</code> to enable preview</div>"
+            
+            else:
+                return f"<div class='preview-message'>💻 {language.upper()} code generated successfully. Preview not available for this language.</div>"
+                
+        except Exception as e:
+            return f"<div class='error-message'>Preview Error: {str(e)}</div>"
+    
+    def send_to_sandbox(self, html_code):
+        """Send HTML to sandboxed iframe"""
+        if not html_code.strip():
+            return "<div class='preview-message'>No content to preview</div>"
+        
+        try:
+            encoded_html = base64.b64encode(html_code.encode('utf-8')).decode('utf-8')
+            data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
+            iframe = f'''
+            <iframe 
+                src="{data_uri}" 
+                width="100%" 
+                height="800px" 
+                sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals" 
+                style="border: 1px solid #e5e7eb; border-radius: 8px; background: white;"
+                allow="display-capture">
+            </iframe>
+            '''
+            return iframe
+        except Exception as e:
+            return f"<div class='error-message'>Sandbox Error: {str(e)}</div>"
+    
+    def send_streamlit_to_stlite(self, code):
+        """Send Streamlit code to stlite preview"""
+        html_doc = f"""
+        <!doctype html>
+        <html>
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+            <title>Streamlit Preview</title>
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.86.0/build/stlite.css" />
+            <script type="module" src="https://cdn.jsdelivr.net/npm/@stlite/browser@0.86.0/build/stlite.js"></script>
+          </head>
+          <body>
+            <streamlit-app>{code}</streamlit-app>
+          </body>
+        </html>
+        """
+        return self.send_to_sandbox(html_doc)
+    
+    def send_gradio_to_lite(self, code):
+        """Send Gradio code to gradio-lite preview"""
+        html_doc = f"""
+        <!doctype html>
+        <html>
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+            <title>Gradio Preview</title>
+            <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
+          </head>
+          <body>
+            <gradio-lite>{code}</gradio-lite>
+          </body>
+        </html>
+        """
+        return self.send_to_sandbox(html_doc)
+    
+    def generate_code_stats(self, code, language):
+        """Generate code statistics"""
+        if not code:
+            return "<div class='code-stats'>No code generated</div>"
+        
+        try:
+            lines = len(code.split('\n'))
+            chars = len(code)
+            words = len(code.split())
+            
+            # Language-specific analysis
+            if language == "html":
+                tags = len([m for m in code.split('<') if m.strip()])
+                stats_content = f"""
+                <div class='stats-grid'>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{lines}</span>
+                        <span class='stat-label'>Lines</span>
+                    </div>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{tags}</span>
+                        <span class='stat-label'>HTML Tags</span>
+                    </div>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{chars}</span>
+                        <span class='stat-label'>Characters</span>
+                    </div>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{round(chars/1024, 1)}KB</span>
+                        <span class='stat-label'>Size</span>
+                    </div>
+                </div>
+                """
+            else:
+                stats_content = f"""
+                <div class='stats-grid'>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{lines}</span>
+                        <span class='stat-label'>Lines</span>
+                    </div>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{words}</span>
+                        <span class='stat-label'>Words</span>
+                    </div>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{chars}</span>
+                        <span class='stat-label'>Characters</span>
+                    </div>
+                    <div class='stat-item'>
+                        <span class='stat-number'>{language.upper()}</span>
+                        <span class='stat-label'>Language</span>
+                    </div>
+                </div>
+                """
+            
+            return f"<div class='code-stats'>{stats_content}</div>"
+            
+        except Exception:
+            return "<div class='code-stats'>Unable to analyze code</div>"
+    
+    def handle_model_change(self, model_selection):
+        """Handle model selection change"""
+        try:
+            # Extract model name from selection
+            model_name = model_selection.split(" (")[0]
+            
+            # Find the model
+            selected_model = None
+            for model in AVAILABLE_MODELS:
+                if model['name'] == model_name:
+                    selected_model = model
+                    break
+            
+            if selected_model:
+                model_info_html = self.get_model_info_html(selected_model)
+                return selected_model, model_info_html
+            
+            return DEFAULT_MODEL, self.get_model_info_html(DEFAULT_MODEL)
+            
+        except Exception:
+            return DEFAULT_MODEL, self.get_model_info_html(DEFAULT_MODEL)
+    
+    def handle_clear(self):
+        """Handle clear button"""
+        return (
+            gr.update(value=""),  # input_textbox
+            gr.update(value="", language="html"),  # code_output
+            "<div class='preview-message'>Ready to generate your next application</div>",  # sandbox
+            "<div class='code-stats'>Ready to generate...</div>",  # code_stats
+            []  # history
+        )
+    
+    def handle_example_select(self, evt: gr.SelectData):
+        """Handle example selection from gallery"""
+        try:
+            if evt.index is not None and evt.index < len(DEMO_LIST):
+                return DEMO_LIST[evt.index]['description']
+            return ""
+        except Exception:
+            return ""
+    
+    def get_model_info_html(self, model):
+        """Generate HTML for model information"""
+        vision_badge = '<span class="feature-badge vision">👁️ Vision</span>' if model.get('supports_vision') else ''
+        category_color = {
+            'General': '#3b82f6',
+            'Code Specialist': '#10b981', 
+            'Vision-Language': '#f59e0b',
+            'Premium': '#8b5cf6'
+        }.get(model.get('category', 'General'), '#6b7280')
+        
+        return f"""
+        <div class="model-info">
+            <div class="model-header">
+                <div class="model-name">{model['name']}</div>
+                <span class="category-badge" style="background-color: {category_color}">
+                    {model.get('category', 'General')}
+                </span>
+            </div>
+            <div class="model-description">{model.get('description', '')}</div>
+            <div class="model-features">
+                {vision_badge}
+                <span class="feature-badge">🚀 Latest</span>
+            </div>
+        </div>
+        """
+    
+    def get_custom_css(self):
+        """Get custom CSS for the application"""
+        return """
+        /* Modern Professional Styling */
+        .gradio-container {
+            max-width: none !important;
+            padding: 0 !important;
+        }
+        
+        .app-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 0 0 16px 16px;
+            margin-bottom: 20px;
+        }
+        
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        
+        .logo-section {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .logo {
+            font-size: 2.5rem;
+            font-weight: bold;
+        }
+        
+        .app-title h1 {
+            font-size: 2rem;
+            margin: 0;
+            font-weight: 700;
+        }
+        
+        .app-title p {
+            margin: 5px 0 0 0;
+            opacity: 0.9;
+            font-size: 1rem;
+        }
+        
+        .status-indicators {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        
+        .status-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.9rem;
+        }
+        
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #10b981;
+        }
+        
+        .status-dot.active {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        .sidebar {
+            background: #f8fafc;
+            padding: 20px;
+            border-radius: 12px;
+            border: 1px solid #e2e8f0;
+            height: fit-content;
+        }
+        
+        .main-content {
+            padding-left: 20px;
+        }
+        
+        .control-group {
+            margin-bottom: 24px;
+            background: white;
+            padding: 16px;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        
+        .group-title {
+            font-weight: 600;
+            font-size: 0.95rem;
+            color: #374151;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .input-group {
+            background: white;
+            padding: 24px;
+            border-radius: 12px;
+            border: 1px solid #e2e8f0;
+            margin-bottom: 20px;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+        }
+        
+        .main-input textarea {
+            font-size: 16px !important;
+            line-height: 1.5 !important;
+        }
+        
+        .generate-btn {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+            border: none !important;
+            font-weight: 600 !important;
+            font-size: 1.1rem !important;
+            padding: 16px 32px !important;
+        }
+        
+        .generate-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3) !important;
+        }
+        
+        .output-tabs .tab-nav {
+            background: #f8fafc;
+            border-radius: 8px 8px 0 0;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        
+        .preview-container iframe {
+            border-radius: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        
+        .code-editor {
+            border-radius: 8px;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .code-sidebar {
+            padding-left: 16px;
+        }
+        
+        .code-sidebar .control-group {
+            margin-bottom: 16px;
+            padding: 12px;
+        }
+        
+        .code-stats {
+            background: white;
+            padding: 16px;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+        
+        .stat-item {
+            text-align: center;
+            padding: 8px;
+            background: #f8fafc;
+            border-radius: 6px;
+        }
+        
+        .stat-number {
+            display: block;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: #1f2937;
+        }
+        
+        .stat-label {
+            font-size: 0.75rem;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        
+        .model-info {
+            background: white;
+            padding: 12px;
+            border-radius: 6px;
+            border: 1px solid #e5e7eb;
+            margin-top: 8px;
+        }
+        
+        .model-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        
+        .model-name {
+            font-weight: 600;
+            color: #1f2937;
+        }
+        
+        .category-badge {
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: white;
+        }
+        
+        .model-description {
+            font-size: 0.85rem;
+            color: #6b7280;
+            margin-bottom: 8px;
+        }
+        
+        .model-features {
+            display: flex;
+            gap: 4px;
+        }
+        
+        .feature-badge {
+            padding: 2px 6px;
+            border-radius: 8px;
+            font-size: 0.7rem;
+            font-weight: 500;
+            background: #f3f4f6;
+            color: #374151;
+        }
+        
+        .feature-badge.vision {
+            background: #fef3c7;
+            color: #92400e;
+        }
+        
+        .example-gallery {
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        
+        .preview-message {
+            text-align: center;
+            padding: 40px 20px;
+            color: #6b7280;
+            background: #f9fafb;
+            border-radius: 8px;
+            border: 2px dashed #d1d5db;
+        }
+        
+        .error-message {
+            text-align: center;
+            padding: 20px;
+            color: #dc2626;
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            border-radius: 8px;
+        }
+        
+        .deployment-status {
+            background: white;
+            padding: 16px;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+            text-align: center;
+            color: #6b7280;
+        }
+        
+        /* Dark mode adjustments */
+        .dark .sidebar {
+            background: #1f2937;
+            border-color: #374151;
+        }
+        
+        .dark .control-group {
+            background: #111827;
+            border-color: #374151;
+        }
+        
+        .dark .input-group {
+            background: #111827;
+            border-color: #374151;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .header-content {
+                flex-direction: column;
+                gap: 20px;
+                text-align: center;
+            }
+            
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .main-content {
+                padding-left: 0;
+                margin-top: 20px;
+            }
+        }
+        """
+    
+    def get_head_html(self):
+        """Get additional head HTML"""
+        return """
+        <meta name="description" content="AnyCoder - Professional AI Development Suite for creating modern applications">
+        <meta name="keywords" content="AI, code generation, web development, automation">
+        <meta name="author" content="AnyCoder">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+        <style>
+            body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+        </style>
+        """
+
+def main():
+    """Main application entry point"""
+    print("🚀 Starting AnyCoder Professional AI Development Suite...")
+    
+    # Initialize the application
+    app_instance = AnyCoder()
+    demo = app_instance.create_advanced_ui()
+    
+    # Launch with optimal settings
+    demo.queue(api_open=False, default_concurrency_limit=20).launch(
+        show_api=False,
+        share=False,
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True,
+        quiet=False
+    )
+
+if __name__ == "__main__":
+    main()

app.py

@@ -1,848 +0,0 @@
-"""
-Main AnyCoder application with advanced professional UI.
-"""
-
-import os
-import uuid
-import time
-from typing import Dict, List, Optional, Tuple, Any
-import gradio as gr
-
-# Import all modules
-from config import (
-    AVAILABLE_MODELS, DEFAULT_MODEL, THEME_CONFIGS, DEMO_LIST, 
-    get_gradio_language, get_saved_theme, save_theme_preference
-)
-from utils import (
-    get_inference_client, remove_code_block, extract_text_from_file, 
-    create_multimodal_message, apply_search_replace_changes,
-    cleanup_all_temp_media, cleanup_session_media, reap_old_media
-)
-from media_generation import (
-    generate_image_with_qwen, generate_image_to_image, generate_video_from_image,
-    generate_video_from_text, generate_music_from_text
-)
-from web_utils import extract_website_content, enhance_query_with_search, tavily_client
-from code_processing import (
-    is_streamlit_code, is_gradio_code, 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, apply_generated_media_to_html,
-    extract_html_document, apply_search_replace_changes as apply_transformers_js_search_replace_changes
-)
-from sandbox import (
-    send_to_sandbox, send_to_sandbox_with_refresh, send_streamlit_to_stlite,
-    send_gradio_to_lite, send_transformers_to_sandbox, generate_preview
-)
-from deployment import (
-    deploy_to_user_space, deploy_to_spaces, deploy_to_spaces_static,
-    load_project_from_url, extract_import_statements
-)
-
-# Global state
-History = List[Tuple[str, str]]
-Messages = List[Dict[str, str]]
-
-def history_to_messages(history: History, system: str) -> Messages:
-    """Convert history to messages format"""
-    messages = [{'role': 'system', 'content': system}]
-    for h in history:
-        user_content = h[0]
-        if isinstance(user_content, list):
-            text_content = ""
-            for item in user_content:
-                if isinstance(item, dict) and item.get("type") == "text":
-                    text_content += item.get("text", "")
-            user_content = text_content if text_content else str(user_content)
-        
-        messages.append({'role': 'user', 'content': user_content})
-        messages.append({'role': 'assistant', 'content': h[1]})
-    return messages
-
-def history_to_chatbot_messages(history: History) -> List[Dict[str, str]]:
-    """Convert history tuples to chatbot message format"""
-    messages = []
-    for user_msg, assistant_msg in history:
-        if isinstance(user_msg, list):
-            text_content = ""
-            for item in user_msg:
-                if isinstance(item, dict) and item.get("type") == "text":
-                    text_content += item.get("text", "")
-            user_msg = text_content if text_content else str(user_msg)
-        
-        messages.append({"role": "user", "content": user_msg})
-        messages.append({"role": "assistant", "content": assistant_msg})
-    return messages
-
-def clear_history():
-    """Clear all history and reset UI"""
-    return [], [], None, ""
-
-def update_image_input_visibility(model):
-    """Update image input visibility based on selected model"""
-    is_vision_model = model.get("supports_vision", False)
-    return gr.update(visible=is_vision_model)
-
-def generation_code(query: Optional[str], vlm_image: Optional[gr.Image], gen_image: Optional[gr.Image], 
-                   file: Optional[str], website_url: Optional[str], _setting: Dict[str, str], 
-                   _history: Optional[History], _current_model: Dict, enable_search: bool = False, 
-                   language: str = "html", provider: str = "auto", enable_image_generation: bool = False, 
-                   enable_image_to_image: bool = False, image_to_image_prompt: Optional[str] = None, 
-                   text_to_image_prompt: Optional[str] = None, enable_image_to_video: bool = False, 
-                   image_to_video_prompt: Optional[str] = None, enable_text_to_video: bool = False, 
-                   text_to_video_prompt: Optional[str] = None, enable_text_to_music: bool = False, 
-                   text_to_music_prompt: Optional[str] = None):
-    """Main code generation function"""
-    
-    if query is None:
-        query = ''
-    if _history is None:
-        _history = []
-    
-    # Ensure proper history format
-    if not isinstance(_history, list):
-        _history = []
-    _history = [h for h in _history if isinstance(h, list) and len(h) == 2]
-
-    # Create/lookup session ID for temp file tracking
-    if _setting is not None and isinstance(_setting, dict):
-        session_id = _setting.get("__session_id__")
-        if not session_id:
-            session_id = str(uuid.uuid4())
-            _setting["__session_id__"] = session_id
-    else:
-        session_id = str(uuid.uuid4())
-
-    # Cleanup old files
-    try:
-        cleanup_session_media(session_id)
-        reap_old_media()
-    except Exception:
-        pass
-
-    # Check for existing content (modification request)
-    has_existing_content = False
-    last_assistant_msg = ""
-    if _history and len(_history[-1]) > 1:
-        last_assistant_msg = _history[-1][1]
-        if any(indicator in last_assistant_msg for indicator in [
-            '<!DOCTYPE html>', '<html', 'import gradio', 'import streamlit',
-            'def ', '=== index.html ===', '=== index.js ===', '=== style.css ==='
-        ]):
-            has_existing_content = True
-
-    # Handle modification requests with search/replace
-    if has_existing_content and query.strip():
-        try:
-            client = get_inference_client(_current_model['id'], provider)
-            
-            system_prompt = f"""You are a code editor assistant. Generate EXACT search/replace blocks using these markers:
-{from config import SEARCH_START, DIVIDER, REPLACE_END}
-
-CRITICAL REQUIREMENTS:
-1. Use EXACTLY these markers: {SEARCH_START}, {DIVIDER}, {REPLACE_END}
-2. The SEARCH block must match existing code EXACTLY (whitespace, indentation, line breaks)
-3. Generate multiple blocks if needed for different changes
-4. Include enough context to make search blocks unique
-5. Do NOT include explanations outside the blocks"""
-
-            user_prompt = f"""Existing code:
-{last_assistant_msg}
-
-Modification instructions:
-{query}
-
-Generate the exact search/replace blocks needed."""
-
-            messages = [
-                {"role": "system", "content": system_prompt},
-                {"role": "user", "content": user_prompt}
-            ]
-            
-            # Generate search/replace instructions
-            if hasattr(client, 'chat'):
-                if hasattr(client.chat, 'completions'):
-                    response = client.chat.completions.create(
-                        model=_current_model['id'],
-                        messages=messages,
-                        max_tokens=4000,
-                        temperature=0.1
-                    )
-                    changes_text = response.choices[0].message.content
-                else:
-                    response = client.chat.complete(
-                        model=_current_model['id'],
-                        messages=messages,
-                        max_tokens=4000,
-                        temperature=0.1
-                    )
-                    changes_text = response.choices[0].message.content
-            else:
-                completion = client.chat.completions.create(
-                    model=_current_model['id'],
-                    messages=messages,
-                    max_tokens=4000,
-                    temperature=0.1
-                )
-                changes_text = completion.choices[0].message.content
-            
-            # Apply changes
-            if language == "transformers.js" and ('=== index.html ===' in last_assistant_msg):
-                modified_content = apply_transformers_js_search_replace_changes(last_assistant_msg, changes_text)
-            else:
-                modified_content = apply_search_replace_changes(last_assistant_msg, changes_text)
-            
-            # If changes were applied, return modified content
-            if modified_content != last_assistant_msg:
-                _history.append([query, modified_content])
-                
-                # Generate preview
-                preview_val = generate_preview(modified_content, language)
-                
-                yield {
-                    code_output: modified_content,
-                    history: _history,
-                    sandbox: preview_val,
-                    history_output: history_to_chatbot_messages(_history),
-                }
-                return
-                
-        except Exception as e:
-            print(f"Search/replace failed, falling back to normal generation: {e}")
-
-    # Choose appropriate system prompt
-    from config import HTML_SYSTEM_PROMPT, TRANSFORMERS_JS_SYSTEM_PROMPT, SVELTE_SYSTEM_PROMPT, GENERIC_SYSTEM_PROMPT
-    
-    if language == "html":
-        system_prompt = HTML_SYSTEM_PROMPT
-    elif language == "transformers.js":
-        system_prompt = TRANSFORMERS_JS_SYSTEM_PROMPT
-    elif language == "svelte":
-        system_prompt = SVELTE_SYSTEM_PROMPT
-    else:
-        system_prompt = GENERIC_SYSTEM_PROMPT.format(language=language)
-
-    messages = history_to_messages(_history, system_prompt)
-
-    # Process file input
-    file_text = ""
-    if file:
-        file_text = extract_text_from_file(file)
-        if file_text:
-            file_text = file_text[:5000]
-            query = f"{query}\n\n[Reference file content]\n{file_text}"
-
-    # Process website URL
-    if website_url and website_url.strip():
-        website_text = extract_website_content(website_url.strip())
-        if website_text and not website_text.startswith("Error"):
-            website_text = website_text[:8000]
-            query = f"{query}\n\n[Website content to redesign]\n{website_text}"
-
-    # Enhance with web search if enabled
-    enhanced_query = enhance_query_with_search(query, enable_search)
-
-    # Add message
-    if vlm_image is not None:
-        messages.append(create_multimodal_message(enhanced_query, vlm_image))
-    else:
-        messages.append({'role': 'user', 'content': enhanced_query})
-
-    # Generate code using the appropriate client
-    try:
-        client = get_inference_client(_current_model["id"], provider)
-        
-        # Stream generation
-        if hasattr(client, 'chat') and hasattr(client.chat, 'completions'):
-            completion = client.chat.completions.create(
-                model=_current_model["id"],
-                messages=messages,
-                stream=True,
-                max_tokens=16384
-            )
-        else:
-            # Handle other client types
-            completion = client.chat.completions.create(
-                model=_current_model["id"],
-                messages=messages,
-                stream=True,
-                max_tokens=16384
-            )
-        
-        content = ""
-        for chunk in completion:
-            chunk_content = None
-            if hasattr(chunk, "choices") and chunk.choices:
-                if hasattr(chunk.choices[0], "delta") and hasattr(chunk.choices[0].delta, "content"):
-                    chunk_content = chunk.choices[0].delta.content
-            
-            if chunk_content:
-                content += chunk_content
-                
-                # Generate live preview
-                clean_code = remove_code_block(content)
-                preview_val = generate_preview(clean_code, language)
-                
-                yield {
-                    code_output: gr.update(value=clean_code, language=get_gradio_language(language)),
-                    history_output: history_to_chatbot_messages(_history),
-                    sandbox: preview_val,
-                }
-        
-        # Final processing
-        final_content = remove_code_block(content)
-        
-        # Apply media generation
-        final_content = apply_generated_media_to_html(
-            final_content,
-            query,
-            enable_text_to_image=enable_image_generation,
-            enable_image_to_image=enable_image_to_image,
-            input_image_data=gen_image,
-            image_to_image_prompt=image_to_image_prompt,
-            text_to_image_prompt=text_to_image_prompt,
-            enable_image_to_video=enable_image_to_video,
-            image_to_video_prompt=image_to_video_prompt,
-            session_id=session_id,
-            enable_text_to_video=enable_text_to_video,
-            text_to_video_prompt=text_to_video_prompt,
-            enable_text_to_music=enable_text_to_music,
-            text_to_music_prompt=text_to_music_prompt,
-        )
-        
-        _history.append([query, final_content])
-        
-        # Generate final preview
-        preview_val = generate_preview(final_content, language)
-        
-        yield {
-            code_output: final_content,
-            history: _history,
-            sandbox: preview_val,
-            history_output: history_to_chatbot_messages(_history),
-        }
-        
-    except Exception as e:
-        error_message = f"Error: {str(e)}"
-        yield {
-            code_output: error_message,
-            history_output: history_to_chatbot_messages(_history),
-        }
-
-def create_advanced_ui():
-    """Create the advanced professional UI"""
-    
-    # Load saved theme
-    current_theme_name = get_saved_theme()
-    current_theme = THEME_CONFIGS[current_theme_name]["theme"]
-    
-    # Custom CSS for professional styling
-    custom_css = """
-    /* Professional styling */
-    .gradio-container {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
-    }
-    
-    /* Advanced sidebar styling */
-    .advanced-sidebar {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 16px;
-        padding: 24px;
-        margin-bottom: 16px;
-    }
-    
-    .advanced-sidebar h3 {
-        color: white;
-        font-weight: 600;
-        margin-bottom: 16px;
-        font-size: 18px;
-    }
-    
-    /* Model cards */
-    .model-card {
-        background: rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(10px);
-        border-radius: 12px;
-        padding: 16px;
-        margin-bottom: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    
-    .model-card.selected {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: rgba(255, 255, 255, 0.4);
-    }
-    
-    /* Demo cards */
-    .demo-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        gap: 16px;
-        margin: 20px 0;
-    }
-    
-    .demo-card {
-        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        border-radius: 12px;
-        padding: 20px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        border: 2px solid transparent;
-    }
-    
-    .demo-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-        border-color: #667eea;
-    }
-    
-    .demo-card h4 {
-        color: #2d3748;
-        font-weight: 600;
-        margin-bottom: 8px;
-    }
-    
-    .demo-card p {
-        color: #4a5568;
-        font-size: 14px;
-        line-height: 1.5;
-    }
-    
-    .demo-category {
-        display: inline-block;
-        background: #667eea;
-        color: white;
-        padding: 4px 8px;
-        border-radius: 12px;
-        font-size: 12px;
-        font-weight: 500;
-        margin-bottom: 8px;
-    }
-    
-    /* Feature toggles */
-    .feature-toggle {
-        background: rgba(103, 126, 234, 0.1);
-        border: 1px solid rgba(103, 126, 234, 0.3);
-        border-radius: 8px;
-        padding: 12px;
-        margin-bottom: 8px;
-    }
-    
-    /* Status indicators */
-    .status-indicator {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        color: #4a5568;
-    }
-    
-    .status-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: #48bb78;
-    }
-    
-    .status-dot.warning {
-        background: #ed8936;
-    }
-    
-    .status-dot.error {
-        background: #f56565;
-    }
-    
-    /* Code editor enhancements */
-    .code-editor-wrapper {
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-    
-    /* Preview enhancements */
-    .preview-container {
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        background: white;
-    }
-    
-    /* Deployment section */
-    .deployment-section {
-        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
-        border-radius: 12px;
-        padding: 20px;
-        margin-top: 16px;
-    }
-    
-    .deployment-section h4 {
-        color: #2d3748;
-        font-weight: 600;
-        margin-bottom: 12px;
-    }
-    """
-    
-    # Create the main interface
-    with gr.Blocks(
-        title="AnyCoder - Advanced AI Code Generator",
-        theme=current_theme,
-        css=custom_css
-    ) as demo:
-        
-        # State management
-        history = gr.State([])
-        setting = gr.State({"system": from config import HTML_SYSTEM_PROMPT})
-        current_model = gr.State(DEFAULT_MODEL)
-        
-        # Header
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div style='text-align: center; padding: 20px 0;'>
-                    <h1 style='font-size: 2.5em; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px;'>
-                        AnyCoder Pro
-                    </h1>
-                    <p style='font-size: 1.1em; color: #4a5568; margin: 0;'>
-                        Professional AI-Powered Code Generation Platform
-                    </p>
-                </div>
-                """)
-        
-        # Main layout
-        with gr.Row():
-            # Advanced Sidebar
-            with gr.Column(scale=1, elem_classes=["advanced-sidebar"]) as sidebar:
-                # Login section
-                login_button = gr.LoginButton()
-                
-                # Model selection with categories
-                with gr.Accordion("🤖 Model Selection", open=True):
-                    # Group models by category
-                    model_categories = {}
-                    for model in AVAILABLE_MODELS:
-                        category = model.get("category", "General")
-                        if category not in model_categories:
-                            model_categories[category] = []
-                        model_categories[category].append(model)
-                    
-                    model_dropdown = gr.Dropdown(
-                        choices=[model['name'] for model in AVAILABLE_MODELS],
-                        value=DEFAULT_MODEL['name'],
-                        label="Select Model",
-                        info="Choose the AI model for code generation"
-                    )
-                    
-                    # Model info display
-                    model_info = gr.Markdown(DEFAULT_MODEL['description'])
-                
-                # Project management
-                with gr.Accordion("📁 Project Management", open=False):
-                    gr.Markdown("**Import Existing Project**")
-                    load_project_url = gr.Textbox(
-                        label="Project URL",
-                        placeholder="https://huggingface.co/spaces/user/space",
-                        info="Import from HF Spaces, GitHub, or HF Models"
-                    )
-                    load_project_btn = gr.Button("Import Project", variant="secondary")
-                    load_project_status = gr.Markdown(visible=False)
-                
-                # Code generation settings
-                with gr.Accordion("⚙️ Generation Settings", open=True):
-                    language_dropdown = gr.Dropdown(
-                        choices=["html", "streamlit", "gradio", "python", "transformers.js", "svelte"],
-                        value="html",
-                        label="Framework/Language",
-                        info="Select the target framework"
-                    )
-                    
-                    enable_search = gr.Checkbox(
-                        label="🔍 Web Search Enhancement",
-                        value=False,
-                        info="Use real-time web search for up-to-date information"
-                    )
-                    
-                    if tavily_client:
-                        search_status = gr.HTML("""
-                        <div class="status-indicator">
-                            <div class="status-dot"></div>
-                            <span>Web search available</span>
-                        </div>
-                        """)
-                    else:
-                        search_status = gr.HTML("""
-                        <div class="status-indicator">
-                            <div class="status-dot error"></div>
-                            <span>Web search unavailable</span>
-                        </div>
-                        """)
-                
-                # Media generation features
-                with gr.Accordion("🎨 AI Media Generation", open=False):
-                    enable_image_generation = gr.Checkbox(
-                        label="Generate Images (Text → Image)",
-                        value=False,
-                        info="Auto-generate images using Qwen-Image"
-                    )
-                    
-                    text_to_image_prompt = gr.Textbox(
-                        label="Image Generation Prompt",
-                        placeholder="Describe the image to generate...",
-                        lines=2,
-                        visible=False
-                    )
-                    
-                    enable_image_to_image = gr.Checkbox(
-                        label="Transform Images (Image → Image)",
-                        value=False,
-                        info="Transform uploaded images using AI"
-                    )
-                    
-                    image_to_image_prompt = gr.Textbox(
-                        label="Image Transformation Prompt",
-                        placeholder="Describe how to transform the image...",
-                        lines=2,
-                        visible=False
-                    )
-                    
-                    enable_image_to_video = gr.Checkbox(
-                        label="Generate Videos (Image → Video)",
-                        value=False,
-                        info="Create videos from uploaded images"
-                    )
-                    
-                    enable_text_to_video = gr.Checkbox(
-                        label="Generate Videos (Text → Video)",
-                        value=False,
-                        info="Create videos from text descriptions"
-                    )
-                    
-                    enable_text_to_music = gr.Checkbox(
-                        label="Generate Music (Text → Music)",
-                        value=False,
-                        info="Compose music from text descriptions"
-                    )
-                
-                # Input section
-                with gr.Accordion("📝 Input & Files", open=True):
-                    user_input = gr.Textbox(
-                        label="What would you like to build?",
-                        placeholder="Describe your application in detail...",
-                        lines=4,
-                        info="Be specific about features, design, and functionality"
-                    )
-                    
-                    website_url_input = gr.Textbox(
-                        label="Website URL (for redesign)",
-                        placeholder="https://example.com",
-                        info="URL of website to redesign"
-                    )
-                    
-                    file_input = gr.File(
-                        label="Reference Files",
-                        file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".png"],
-                        info="Upload reference documents or images"
-                    )
-                    
-                    vlm_image = gr.Image(
-                        label="Design Reference Image",
-                        visible=False,
-                        info="Upload UI mockup or design reference"
-                    )
-                    
-                    generation_image = gr.Image(
-                        label="Image for Generation",
-                        visible=False,
-                        info="Upload image for AI processing"
-                    )
-                
-                # Action buttons
-                with gr.Row():
-                    generate_btn = gr.Button("🚀 Generate", variant="primary", scale=2)
-                    clear_btn = gr.Button("🗑️ Clear", variant="secondary", scale=1)
-            
-            # Main content area
-            with gr.Column(scale=3):
-                # Quick start section
-                with gr.Row():
-                    gr.HTML("""
-                    <div style='background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; padding: 20px; margin-bottom: 20px;'>
-                        <h3 style='color: white; margin: 0 0 16px 0; font-weight: 600;'>Quick Start Examples</h3>
-                        <div class='demo-grid'>
-                    """)
-                
-                # Demo cards
-                demo_cards = []
-                for i, demo in enumerate(DEMO_LIST[:6]):  # Show first 6 demos
-                    demo_card = gr.Button(
-                        f"""
-                        <div class='demo-card'>
-                            <div class='demo-category'>{demo.get('category', 'General')}</div>
-                            <h4>{demo['title']}</h4>
-                            <p>{demo['description']}</p>
-                        </div>
-                        """,
-                        variant="secondary",
-                        elem_classes=["demo-card-btn"]
-                    )
-                    demo_cards.append(demo_card)
-                
-                gr.HTML("</div></div>")
-                
-                # Main tabs
-                with gr.Tabs() as main_tabs:
-                    # Preview tab
-                    with gr.Tab("🖥️ Live Preview"):
-                        sandbox = gr.HTML(
-                            label="Live Preview",
-                            elem_classes=["preview-container"]
-                        )
-                    
-                    # Code editor tab
-                    with gr.Tab("📝 Code Editor"):
-                        with gr.Row():
-                            with gr.Column():
-                                code_output = gr.Code(
-                                    language="html",
-                                    lines=30,
-                                    interactive=True,
-                                    label="Generated Code",
-                                    elem_classes=["code-editor-wrapper"]
-                                )
-                        
-                        # Multi-file editors (hidden by default)
-                        with gr.Group(visible=False) as transformers_group:
-                            with gr.Tabs():
-                                with gr.Tab("index.html"):
-                                    tjs_html_code = gr.Code(language="html", lines=25, interactive=True)
-                                with gr.Tab("index.js"):
-                                    tjs_js_code = gr.Code(language="javascript", lines=25, interactive=True)
-                                with gr.Tab("style.css"):
-                                    tjs_css_code = gr.Code(language="css", lines=25, interactive=True)
-                
-                # Deployment section
-                with gr.Group(elem_classes=["deployment-section"], visible=False) as deployment_section:
-                    gr.Markdown("### 🚀 Deploy Your Application")
-                    
-                    with gr.Row():
-                        space_name_input = gr.Textbox(
-                            label="App Name",
-                            placeholder="my-awesome-app",
-                            scale=2
-                        )
-                        
-                        sdk_dropdown = gr.Dropdown(
-                            choices=["Static (HTML)", "Gradio (Python)", "Streamlit (Python)", "Transformers.js", "Svelte"],
-                            value="Static (HTML)",
-                            label="App Type",
-                            scale=1
-                        )
-                    
-                    with gr.Row():
-                        deploy_btn = gr.Button("🚀 Deploy to Spaces", variant="primary", scale=2)
-                        deploy_status = gr.Markdown("", scale=3)
-        
-        # Hidden components for state management
-        history_output = gr.Chatbot(visible=False, type="messages")
-        
-        # Event handlers
-        def on_model_change(model_name):
-            for m in AVAILABLE_MODELS:
-                if m['name'] == model_name:
-                    return m, gr.update(value=m['description']), update_image_input_visibility(m)
-            return AVAILABLE_MODELS[0], gr.update(value=AVAILABLE_MODELS[0]['description']), gr.update(visible=False)
-        
-        def on_demo_click(demo_index):
-            if 0 <= demo_index < len(DEMO_LIST):
-                return DEMO_LIST[demo_index]['description']
-            return ""
-        
-        def toggle_media_prompts(image_gen, img2img, img2vid, txt2vid, txt2music):
-            return [
-                gr.update(visible=image_gen),  # text_to_image_prompt
-                gr.update(visible=img2img),    # image_to_image_prompt  
-                gr.update(visible=img2img or img2vid),  # generation_image
-            ]
-        
-        def show_deployment_section():
-            return gr.update(visible=True)
-        
-        def handle_import_project(url):
-            if not url.strip():
-                return gr.update(value="Please enter a URL.", visible=True), "", ""
-            
-            status, code = load_project_from_url(url)
-            return gr.update(value=status, visible=True), code, gr.update(value="", visible=False)
-        
-        # Wire up events
-        model_dropdown.change(
-            on_model_change,
-            inputs=[model_dropdown],
-            outputs=[current_model, model_info, vlm_image]
-        )
-        
-        # Demo card clicks
-        for i, card in enumerate(demo_cards):
-            card.click(
-                lambda idx=i: on_demo_click(idx),
-                outputs=[user_input]
-            )
-        
-        # Media generation toggles
-        for toggle in [enable_image_generation, enable_image_to_image, enable_image_to_video]:
-            toggle.change(
-                toggle_media_prompts,
-                inputs=[enable_image_generation, enable_image_to_image, enable_image_to_video, enable_text_to_video, enable_text_to_music],
-                outputs=[text_to_image_prompt, image_to_image_prompt, generation_image]
-            )
-        
-        # Main generation
-        generate_btn.click(
-            generation_code,
-            inputs=[
-                user_input, vlm_image, generation_image, file_input, website_url_input,
-                setting, history, current_model, enable_search, language_dropdown, 
-                gr.State("auto"), enable_image_generation, enable_image_to_image,
-                image_to_image_prompt, text_to_image_prompt, enable_image_to_video,
-                gr.State(None), enable_text_to_video, gr.State(None), enable_text_to_music, gr.State(None)
-            ],
-            outputs=[code_output, history, sandbox, history_output]
-        ).then(
-            show_deployment_section,
-            outputs=[deployment_section]
-        )
-        
-        # Project import
-        load_project_btn.click(
-            handle_import_project,
-            inputs=[load_project_url],
-            outputs=[load_project_status, code_output, load_project_url]
-        )
-        
-        # Clear functionality
-        clear_btn.click(
-            clear_history,
-            outputs=[history, history_output, file_input, website_url_input]
-        )
-        
-        # Deployment
-        deploy_btn.click(
-            deploy_to_user_space,
-            inputs=[code_output, space_name_input, sdk_dropdown],
-            outputs=[deploy_status]
-        )
-    
-    return demo
-
-# Main application entry point
-if __name__ == "__main__":
-    # Clean up any orphaned temporary files
-    cleanup_all_temp_media()
-    
-    # Create and launch the application
-    demo = create_advanced_ui()
-    demo.queue(api_open=False, default_concurrency_limit=20).launch(
-        show_api=False,
-        server_name="0.0.0.0",
-        server_port=7860,
-        ssr_mode=True
-    )