Update app.py

app.py

@@ -117,27 +117,89 @@ class AnyCoder:
         """Create the professional sidebar"""
         
         # Model Selection
-        # 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
-    )
-
+        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
+            )
             
             # 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="Include generated images in your outputs using Qwen image model",
+                container=False
+            )
+        
+        # Media Generation Controls
+        with gr.Group(elem_classes=["control-group"]):
+            gr.HTML('<div class="group-title">🎨 Media Generation</div>')
+            
+            enable_images = gr.Checkbox(
+                label="🖼️ Generate Images (text → image)",
+                value=False,
+                info="Include generated images in your outputs using Qwen image model",
+                container=False
+            )
+            
+            enable_image_to_image = gr.Checkbox(
+                label="🖼️ Image to Image (uses input image)",
+                value=False,
+                info="Transform your uploaded image using Qwen image/edit",
+                container=False
+            )
+            
+            enable_image_to_video = gr.Checkbox(
+                label="🎬 Image to Video (uses input image)",
+                value=False,
+                info="Generate a short video from your uploaded image using Lightricks LTX-Video",
+                container=False
+            )
+            
+            enable_text_to_video = gr.Checkbox(
+                label="🎬 Generate Video (text → video)",
+                value=False,
+                info="Generate a short video directly from your prompt using WanAi/Wan2.2-TIZV-S8",
+                container=False
+            )
+            
+            enable_music = gr.Checkbox(
+                label="🎵 Generate Music (text → music)",
+                value=False,
+                info="Compose short music from your prompt using ElevenLabs Music",
+                container=False
+            )
+        
+        # Model Information
+        with gr.Group(elem_classes=["control-group"]):
+            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>')
+            
+            # Create buttons for each demo instead of gallery
+            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>')
@@ -159,17 +221,12 @@ with gr.Group(elem_classes=["control-group"]):
                 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"
-                )
+            advanced_mode = gr.Checkbox(
+                label="Advanced Mode", 
+                value=False,
+                info="Show advanced options",
+                container=False
+            )
         
         # Input Sources
         with gr.Group(elem_classes=["control-group"]):
@@ -189,39 +246,17 @@ with gr.Group(elem_classes=["control-group"]):
             
             image_input = gr.Image(
                 label="Design Reference Image",
-                visible=False,
                 container=False
             )
         
-        # Media Generation Controls
+        # Advanced Controls (initially hidden)
         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)
+            gr.HTML('<div class="group-title">🔧 Advanced Options</div>')
             
             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
             )
         
@@ -236,13 +271,14 @@ with gr.Group(elem_classes=["control-group"]):
             )
             
             with gr.Row():
-                import_btn = gr.Button("Import", variant="secondary", scale=1)
-                import_status = gr.HTML("", visible=False)  # fixed, no invalid scale arg
+                import_btn = gr.Button("Import", variant="secondary", size="sm")
+                import_status = gr.HTML("", visible=False)
         
         # 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,
@@ -251,32 +287,64 @@ with gr.Group(elem_classes=["control-group"]):
             'image_input': image_input,
             'advanced_controls': advanced_controls,
             'enable_images': enable_images,
-            'enable_videos': enable_videos,
+            'enable_image_to_image': enable_image_to_image,
+            'enable_image_to_video': enable_image_to_video,
+            'enable_text_to_video': enable_text_to_video,
             'enable_music': enable_music,
             'media_prompts': media_prompts,
-            'example_gallery': example_gallery,
+            'quick_start_buttons': quick_start_buttons,
             '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
-        advanced_mode.change(
+        self.sidebar_components['advanced_mode'].change(
             lambda checked: gr.update(visible=checked),
-            inputs=[advanced_mode],
-            outputs=[advanced_controls]
+            inputs=[self.sidebar_components['advanced_mode']],
+            outputs=[self.sidebar_components['advanced_controls']]
         )
         
         # Show media prompts when any media generation is enabled
-        for checkbox in [enable_images, enable_videos, enable_music]:
+        media_checkboxes = [
+            self.sidebar_components['enable_images'],
+            self.sidebar_components['enable_image_to_image'],
+            self.sidebar_components['enable_image_to_video'],
+            self.sidebar_components['enable_text_to_video'],
+            self.sidebar_components['enable_music']
+        ]
+        
+        for checkbox in media_checkboxes:
             checkbox.change(
                 lambda *args: gr.update(visible=any(args)),
-                inputs=[enable_images, enable_videos, enable_music],
-                outputs=[media_prompts]
+                inputs=media_checkboxes,
+                outputs=[self.sidebar_components['media_prompts']]
+            )
+        
+        # Update session state when media options change
+        for i, checkbox in enumerate(media_checkboxes):
+            checkbox.change(
+                self.update_media_settings,
+                inputs=[checkbox],
+                outputs=[session_state]
             )
-
-# rest of the class and main() remain unchanged
-
+    
+    def update_media_settings(self, *checkbox_values):
+        """Update media generation settings in session state"""
+        settings = {
+            'enable_images': checkbox_values[0] if len(checkbox_values) > 0 else False,
+            'enable_image_to_image': checkbox_values[1] if len(checkbox_values) > 1 else False,
+            'enable_image_to_video': checkbox_values[2] if len(checkbox_values) > 2 else False,
+            'enable_text_to_video': checkbox_values[3] if len(checkbox_values) > 3 else False,
+            'enable_music': checkbox_values[4] if len(checkbox_values) > 4 else False
+        }
+        return settings
     
     def create_main_content(self, history, current_model):
         """Create the main content area"""
@@ -461,12 +529,13 @@ with gr.Group(elem_classes=["control-group"]):
             ]
         )
         
-        # 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']]
-        )
+        # 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']]
+                )
     
     def handle_generation(self, prompt, file, website_url, image, language, 
                          enable_search, current_model_state, history_state, session_state):
@@ -513,14 +582,18 @@ with gr.Group(elem_classes=["control-group"]):
             # Apply media generation if enabled
             if any([
                 session_state.get('enable_images', False),
-                session_state.get('enable_videos', False), 
+                session_state.get('enable_image_to_image', False),
+                session_state.get('enable_image_to_video', False),
+                session_state.get('enable_text_to_video', 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_image_to_image=session_state.get('enable_image_to_image', False),
+                    enable_image_to_video=session_state.get('enable_image_to_video', False),
+                    enable_text_to_video=session_state.get('enable_text_to_video', False),
                     enable_text_to_music=session_state.get('enable_music', False),
                     session_id=session_id
                 )
@@ -788,15 +861,6 @@ with gr.Group(elem_classes=["control-group"]):
             []  # 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 ''
@@ -913,7 +977,7 @@ with gr.Group(elem_classes=["control-group"]):
         }
         
         .control-group {
-            margin-bottom: 24px;
+            margin-bottom: 16px;
             background: white;
             padding: 16px;
             border-radius: 8px;
@@ -930,6 +994,26 @@ with gr.Group(elem_classes=["control-group"]):
             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;
+        }
+        
         .input-group {
             background: white;
             padding: 24px;
@@ -1069,11 +1153,6 @@ with gr.Group(elem_classes=["control-group"]):
             color: #92400e;
         }
         
-        .example-gallery {
-            border-radius: 8px;
-            border: 1px solid #e5e7eb;
-        }
-        
         .preview-message {
             text-align: center;
             padding: 40px 20px;
@@ -1101,22 +1180,6 @@ with gr.Group(elem_classes=["control-group"]):
             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 {