Update app.py

app.py

@@ -117,78 +117,27 @@ class AnyCoder:
         """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",
-                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=[
+            (demo.get("image", 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
+    )
+
             
+            # Model info display
             model_info = gr.HTML(self.get_model_info_html(DEFAULT_MODEL))
         
-        # Web Search Toggle
-        with gr.Group(elem_classes=["control-group"]):
-            search_toggle = gr.Checkbox(
-                label="🔍 Web search",
-                value=False,
-                info="Enable real-time web search for enhanced results",
-                container=False
-            )
-        
-        # Media Generation Links
-        with gr.Group(elem_classes=["control-group"]):
-            gr.HTML('<div class="group-title">🎨 Media Generation</div>')
-            
-            with gr.Row():
-                gr.HTML('<div class="media-option-text">🖼️ Generate Images (text → image)</div>')
-                text_to_image_btn = gr.Button("Open", size="sm", variant="secondary", elem_classes=["media-link-btn"])
-            gr.HTML('<div class="media-info">Include generated images in your outputs using Qwen image model</div>')
-            
-            with gr.Row():
-                gr.HTML('<div class="media-option-text">🖼️ Image to Image (uses input image)</div>')
-                image_to_image_btn = gr.Button("Open", size="sm", variant="secondary", elem_classes=["media-link-btn"])
-            gr.HTML('<div class="media-info">Transform your uploaded image using Qwen image/edit</div>')
-            
-            with gr.Row():
-                gr.HTML('<div class="media-option-text">🎬 Image to Video (uses input image)</div>')
-                image_to_video_btn = gr.Button("Open", size="sm", variant="secondary", elem_classes=["media-link-btn"])
-            gr.HTML('<div class="media-info">Generate a short video from your uploaded image using Lightricks LTX-Video</div>')
-            
-            with gr.Row():
-                gr.HTML('<div class="media-option-text">🎬 Generate Video (text → video)</div>')
-                text_to_video_btn = gr.Button("Open", size="sm", variant="secondary", elem_classes=["media-link-btn"])
-            gr.HTML('<div class="media-info">Generate a short video directly from your prompt using WanAi/Wan2.2-TIZV-S8</div>')
-            
-            with gr.Row():
-                gr.HTML('<div class="media-option-text">🎵 Generate Music (text → music)</div>')
-                text_to_music_btn = gr.Button("Open", size="sm", variant="secondary", elem_classes=["media-link-btn"])
-            gr.HTML('<div class="media-info">Compose short music from your prompt using ElevenLabs Music</div>')
-        
-        # Model Information
-        with gr.Group(elem_classes=["control-group"]):
-            gr.HTML('<div class="group-title">Model</div>')
-            model_display = gr.HTML(
-                '<div class="model-name">Qwen3-Coder-4800-A535-Instruc</div>',
-                elem_classes=["model-display"]
-            )
-        
-        # Quick Start Examples
-        with gr.Group(elem_classes=["control-group"]):
-            gr.HTML('<div class="group-title">Quick Start</div>')
-            
-            quick_start_buttons = []
-            for demo in DEMO_LIST[:6]:
-                btn = gr.Button(
-                    demo["title"],
-                    variant="secondary",
-                    size="sm",
-                    elem_classes=["quick-start-btn"]
-                )
-                quick_start_buttons.append(btn)
-        
         # Project Configuration  
         with gr.Group(elem_classes=["control-group"]):
             gr.HTML('<div class="group-title">⚙️ Project Settings</div>')
@@ -210,12 +159,17 @@ class AnyCoder:
                 container=False
             )
             
-            advanced_mode = gr.Checkbox(
-                label="Advanced Mode", 
-                value=False,
-                info="Show advanced options",
-                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"]):
@@ -235,17 +189,39 @@ class AnyCoder:
             
             image_input = gr.Image(
                 label="Design Reference Image",
+                visible=False,
                 container=False
             )
         
-        # Advanced Controls (initially hidden)
+        # Media Generation Controls
         with gr.Group(elem_classes=["control-group"], visible=False) as advanced_controls:
-            gr.HTML('<div class="group-title">🔧 Advanced Options</div>')
+            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=[demo["title"] for demo in DEMO_LIST[:6]],  # text only, no NoneType
+                label="Example Projects",
+                show_label=False,
+                elem_classes=["example-gallery"],
+                columns=2,
+                rows=3,
+                height="auto",
                 container=False
             )
         
@@ -260,14 +236,13 @@ class AnyCoder:
             )
             
             with gr.Row():
-                import_btn = gr.Button("Import", variant="secondary", size="sm")
-                import_status = gr.HTML("", visible=False)
+                import_btn = gr.Button("Import", variant="secondary", scale=1)
+                import_status = gr.HTML("", visible=False)  # fixed, no invalid scale arg
         
         # Store sidebar components for event handling
         self.sidebar_components = {
             'model_dropdown': model_dropdown,
             'model_info': model_info,
-            'model_display': model_display,
             'language_dropdown': language_dropdown,
             'search_toggle': search_toggle,
             'advanced_mode': advanced_mode,
@@ -275,56 +250,33 @@ class AnyCoder:
             'website_url_input': website_url_input,
             'image_input': image_input,
             'advanced_controls': advanced_controls,
-            'text_to_image_btn': text_to_image_btn,
-            'image_to_image_btn': image_to_image_btn,
-            'image_to_video_btn': image_to_video_btn,
-            'text_to_video_btn': text_to_video_btn,
-            'text_to_music_btn': text_to_music_btn,
+            'enable_images': enable_images,
+            'enable_videos': enable_videos,
+            'enable_music': enable_music,
             'media_prompts': media_prompts,
-            'quick_start_buttons': quick_start_buttons,
+            'example_gallery': example_gallery,
             'import_url': import_url,
             'import_btn': import_btn,
             'import_status': import_status
         }
         
-        # Setup sidebar event handlers
-        self.setup_sidebar_events(session_state)
-    
-    def setup_sidebar_events(self, session_state):
-        """Setup sidebar-specific event handlers"""
-        
         # Show advanced controls when enabled
-        self.sidebar_components['advanced_mode'].change(
+        advanced_mode.change(
             lambda checked: gr.update(visible=checked),
-            inputs=[self.sidebar_components['advanced_mode']],
-            outputs=[self.sidebar_components['advanced_controls']]
-        )
-        
-        # Media generation buttons - redirect to Hugging Face Spaces
-        self.sidebar_components['text_to_image_btn'].click(
-            lambda: None,
-            js="() => window.open('https://huggingface.co/spaces/evalstate/flux1_schnell', '_blank')"
+            inputs=[advanced_mode],
+            outputs=[advanced_controls]
         )
         
-        self.sidebar_components['image_to_image_btn'].click(
-            lambda: None,
-            js="() => window.open('https://huggingface.co/spaces/abidlabs/EasyGhibli', '_blank')"
-        )
-        
-        self.sidebar_components['image_to_video_btn'].click(
-            lambda: None,
-            js="() => window.open('https://huggingface.co/spaces/multimodalart/wan2-1-fast', '_blank')"
-        )
-        
-        self.sidebar_components['text_to_video_btn'].click(
-            lambda: None,
-            js="() => window.open('https://huggingface.co/spaces/WanAi/Wan2.2-TIZV-S8', '_blank')"
-        )
-        
-        self.sidebar_components['text_to_music_btn'].click(
-            lambda: None,
-            js="() => window.open('https://huggingface.co/spaces/ElevenLabs/ElevenLabs-Music', '_blank')"
-        )
+        # 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]
+            )
+
+# rest of the class and main() remain unchanged
+
     
     def create_main_content(self, history, current_model):
         """Create the main content area"""
@@ -341,14 +293,14 @@ class AnyCoder:
             
             with gr.Row():
                 generate_btn = gr.Button(
-                    "Generate", 
+                    "🚀 Generate Application", 
                     variant="primary", 
                     scale=3,
                     size="lg",
                     elem_classes=["generate-btn"]
                 )
                 clear_btn = gr.Button(
-                    "Clear", 
+                    "🗑️ Clear", 
                     variant="secondary", 
                     scale=1,
                     size="lg"
@@ -358,7 +310,7 @@ class AnyCoder:
         with gr.Tabs(elem_classes=["output-tabs"]):
             
             # Preview Tab
-            with gr.Tab("Preview", elem_classes=["preview-tab"]):
+            with gr.Tab("🖥️ Live Preview", elem_classes=["preview-tab"]):
                 with gr.Group():
                     preview_controls = gr.HTML("""
                     <div class="preview-controls">
@@ -376,7 +328,7 @@ class AnyCoder:
                     )
             
             # Code Tab
-            with gr.Tab("Code", elem_classes=["code-tab"]):
+            with gr.Tab("💻 Source Code", elem_classes=["code-tab"]):
                 with gr.Row():
                     with gr.Column(scale=4):
                         code_output = gr.Code(
@@ -405,7 +357,7 @@ class AnyCoder:
                             )
             
             # Deployment Tab
-            with gr.Tab("Deploy", elem_classes=["deploy-tab"]):
+            with gr.Tab("🚀 Deploy", elem_classes=["deploy-tab"]):
                 with gr.Row():
                     with gr.Column(scale=2):
                         with gr.Group():
@@ -509,13 +461,12 @@ class AnyCoder:
             ]
         )
         
-        # Quick start button handlers
-        for i, btn in enumerate(self.sidebar_components['quick_start_buttons']):
-            if i < len(DEMO_LIST):
-                btn.click(
-                    lambda demo_idx=i: DEMO_LIST[demo_idx]['description'],
-                    outputs=[self.main_components['input_textbox']]
-                )
+        # 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):
@@ -559,6 +510,21 @@ class AnyCoder:
             # 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)
             
@@ -822,6 +788,15 @@ class AnyCoder:
             []  # 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 ''
@@ -938,7 +913,7 @@ class AnyCoder:
         }
         
         .control-group {
-            margin-bottom: 16px;
+            margin-bottom: 24px;
             background: white;
             padding: 16px;
             border-radius: 8px;
@@ -955,43 +930,6 @@ class AnyCoder:
             gap: 8px;
         }
         
-        .model-display {
-            background: #f3f4f6;
-            padding: 8px 12px;
-            border-radius: 6px;
-            border: 1px solid #d1d5db;
-        }
-        
-        .model-display .model-name {
-            font-family: 'Monaco', 'Consolas', monospace;
-            font-size: 0.85rem;
-            color: #374151;
-        }
-        
-        .quick-start-btn {
-            width: 100%;
-            margin-bottom: 4px;
-            text-align: left;
-            justify-content: flex-start;
-        }
-        
-        .media-option-text {
-            font-weight: 500;
-            color: #374151;
-            flex: 1;
-        }
-        
-        .media-link-btn {
-            min-width: 60px;
-        }
-        
-        .media-info {
-            font-size: 0.8rem;
-            color: #6b7280;
-            margin-bottom: 12px;
-            padding-left: 4px;
-        }
-        
         .input-group {
             background: white;
             padding: 24px;
@@ -1131,6 +1069,11 @@ class AnyCoder:
             color: #92400e;
         }
         
+        .example-gallery {
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        
         .preview-message {
             text-align: center;
             padding: 40px 20px;
@@ -1158,6 +1101,22 @@ class AnyCoder:
             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 {