Update app.py

app.py

@@ -1,136 +1,42 @@
 import gradio as gr
-import subprocess
-import random
+import logging
 import json
-import os
+import re
+import torch
 import tempfile
+import subprocess
 from pathlib import Path
-from datetime import datetime
-import logging
-from typing import Dict, List, Any, Optional
-import yaml
+from typing import Dict, List, Tuple, Optional, Any
+from dataclasses import dataclass
+from enum import Enum
+from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
 
 # Configure logging
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s',
+    handlers=[
+        logging.StreamHandler(),
+        logging.FileHandler('gradio_builder.log')
+    ]
+)
 logger = logging.getLogger(__name__)
 
-# Template Categories and Configurations
-TEMPLATE_CATEGORIES = {
-    "Chat Applications": {
-        "Basic Chat": {
-            "components": [
-                {"type": "Chatbot", "label": "Chat History"},
-                {"type": "Textbox", "label": "User Input", "placeholder": "Type your message..."},
-                {"type": "Button", "label": "Send", "variant": "primary"},
-                {"type": "Radio", "label": "Model", "choices": ["GPT-3.5", "GPT-4", "Claude", "Custom"]},
-                {"type": "Slider", "label": "Temperature", "minimum": 0, "maximum": 1, "step": 0.1},
-                {"type": "Checkbox", "label": "Stream Output"},
-            ],
-            "layout": "vertical",
-            "css": """
-                .chat-container { max-width: 800px; margin: auto; }
-                .message { padding: 10px; margin: 5px; border-radius: 5px; }
-                .user { background: #e3f2fd; }
-                .bot { background: #f5f5f5; }
-            """
-        },
-        "Advanced Chat": {
-            "components": [
-                {"type": "Chatbot", "label": "Chat History"},
-                {"type": "Textbox", "label": "User Input", "placeholder": "Type your message..."},
-                {"type": "Button", "label": "Send", "variant": "primary"},
-                {"type": "Dropdown", "label": "Model", "choices": ["GPT-3.5", "GPT-4", "Claude", "Custom"]},
-                {"type": "Slider", "label": "Temperature", "minimum": 0, "maximum": 1, "step": 0.1},
-                {"type": "Slider", "label": "Max Length", "minimum": 100, "maximum": 2000, "step": 100},
-                {"type": "Checkbox", "label": "Stream Output"},
-                {"type": "File", "label": "Upload Context", "file_types": [".txt", ".pdf"]},
-                {"type": "Dropdown", "label": "Language", "choices": ["English", "Spanish", "French", "German"]},
-                {"type": "Radio", "label": "Mode", "choices": ["Chat", "Completion", "QA"]},
-            ],
-            "layout": "vertical",
-            "dependencies": ["openai", "transformers", "langchain"]
-        }
-    },
-    "Audio Generation": {
-        "Music Generator": {
-            "components": [
-                {"type": "Audio", "label": "Generated Audio", "source": "microphone"},
-                {"type": "Textbox", "label": "Prompt", "placeholder": "Describe the music..."},
-                {"type": "Dropdown", "label": "Style", "choices": ["Classical", "Jazz", "Rock", "Electronic"]},
-                {"type": "Slider", "label": "Duration (seconds)", "minimum": 5, "maximum": 60},
-                {"type": "Button", "label": "Generate", "variant": "primary"},
-                {"type": "File", "label": "Download", "file_types": [".mp3", ".wav"]},
-            ],
-            "layout": "vertical",
-            "dependencies": ["audiocraft", "torchaudio"]
-        }
-    },
-    "Image Processing": {
-        "Image Generator": {
-            "components": [
-                {"type": "Image", "label": "Generated Image"},
-                {"type": "Textbox", "label": "Prompt", "placeholder": "Describe the image..."},
-                {"type": "Dropdown", "label": "Model", "choices": ["Stable Diffusion", "DALL-E", "Midjourney"]},
-                {"type": "Slider", "label": "Steps", "minimum": 20, "maximum": 100},
-                {"type": "Button", "label": "Generate", "variant": "primary"},
-            ],
-            "layout": "vertical",
-            "dependencies": ["diffusers", "torch"]
-        },
-        "Image Editor": {
-            "components": [
-                {"type": "Image", "label": "Input Image", "source": "upload"},
-                {"type": "Image", "label": "Output Image"},
-                {"type": "Dropdown", "label": "Effect", "choices": ["Blur", "Sharpen", "Style Transfer"]},
-                {"type": "Slider", "label": "Intensity", "minimum": 0, "maximum": 1, "step": 0.1},
-                {"type": "Button", "label": "Apply", "variant": "primary"},
-            ],
-            "layout": "horizontal",
-            "dependencies": ["pillow", "opencv-python"]
-        }
-    },
-    "3D Processing": {
-        "3D Model Viewer": {
-            "components": [
-                {"type": "Model3D", "label": "3D Model"},
-                {"type": "File", "label": "Upload Model", "file_types": [".obj", ".glb", ".gltf"]},
-                {"type": "Checkbox", "label": "Show Wireframe"},
-                {"type": "ColorPicker", "label": "Background Color"},
-                {"type": "Slider", "label": "Camera Distance", "minimum": 1, "maximum": 10},
-            ],
-            "layout": "vertical",
-            "dependencies": ["pygltflib", "trimesh"]
-        }
-    },
-    "Data Analysis": {
-        "Data Explorer": {
-            "components": [
-                {"type": "File", "label": "Upload Dataset", "file_types": [".csv", ".xlsx"]},
-                {"type": "Dataframe", "label": "Data Preview"},
-                {"type": "Dropdown", "label": "Chart Type", "choices": ["Line", "Bar", "Scatter", "Histogram"]},
-                {"type": "Dropdown", "label": "X Axis"},
-                {"type": "Dropdown", "label": "Y Axis"},
-                {"type": "Plot", "label": "Visualization"},
-            ],
-            "layout": "vertical",
-            "dependencies": ["pandas", "plotly"]
-        }
-    }
-}
-
-# Enhanced Component Registry with Categories
+# Constants and Default Configurations
 COMPONENT_CATEGORIES = {
-    "Basic Input": {
+    "Basic": {
         "Textbox": {
+            "description": "Text input component",
             "properties": {
                 "label": "Text Input",
-                "placeholder": "Enter text...",
+                "placeholder": "",
                 "lines": 1,
                 "type": "text"
             },
-            "code_snippet": 'gr.Textbox(label="{label}", placeholder="{placeholder}", lines={lines})'
+            "code_snippet": 'gr.Textbox(label="{label}", placeholder="{placeholder}", lines={lines}, type="{type}")'
         },
         "Number": {
+            "description": "Numeric input component",
             "properties": {
                 "label": "Number Input",
                 "value": 0,
@@ -139,390 +45,1053 @@ COMPONENT_CATEGORIES = {
             },
             "code_snippet": 'gr.Number(label="{label}", value={value}, minimum={minimum}, maximum={maximum})'
         },
-        "Slider": {
+        "Button": {
+            "description": "Clickable button component",
             "properties": {
-                "label": "Slider",
-                "minimum": 0,
-                "maximum": 100,
-                "step": 1,
-                "value": 50
+                "text": "Button",
+                "variant": "primary"
             },
-            "code_snippet": 'gr.Slider(label="{label}", minimum={minimum}, maximum={maximum}, step={step}, value={value})'
+            "code_snippet": 'gr.Button(value="{text}", variant="{variant}")'
         }
     },
-    "Media Input": {
+    "Media": {
         "Image": {
+            "description": "Image display/upload component",
             "properties": {
-                "label": "Image Input",
+                "label": "Image",
+                "shape": None,
+                "image_mode": "RGB",
                 "source": "upload",
-                "tool": "select",
-                "type": "filepath"
+                "type": "numpy"
             },
-            "code_snippet": 'gr.Image(label="{label}", source="{source}", tool="{tool}", type="{type}")'
+            "code_snippet": 'gr.Image(label="{label}", shape={shape}, image_mode="{image_mode}", source="{source}", type="{type}")'
         },
         "Audio": {
+            "description": "Audio player/recorder component",
             "properties": {
-                "label": "Audio Input",
+                "label": "Audio",
                 "source": "upload",
-                "type": "filepath"
+                "type": "numpy"
             },
             "code_snippet": 'gr.Audio(label="{label}", source="{source}", type="{type}")'
         },
         "Video": {
+            "description": "Video player component",
             "properties": {
-                "label": "Video Input",
-                "source": "upload",
-                "format": "mp4"
+                "label": "Video",
+                "source": "upload"
             },
-            "code_snippet": 'gr.Video(label="{label}", source="{source}", format="{format}")'
+            "code_snippet": 'gr.Video(label="{label}", source="{source}")'
         }
     },
-    "Control Elements": {
-        "Button": {
-            "properties": {
-                "label": "Click Me",
-                "variant": "primary",
-                "size": "sm"
-            },
-            "code_snippet": 'gr.Button(value="{label}", variant="{variant}", size="{size}")'
-        },
-        "Checkbox": {
+    "Selection": {
+        "Dropdown": {
+            "description": "Dropdown selection component",
             "properties": {
-                "label": "Check this",
-                "value": False
+                "label": "Dropdown",
+                "choices": [],
+                "multiselect": False
             },
-            "code_snippet": 'gr.Checkbox(label="{label}", value={value})'
+            "code_snippet": 'gr.Dropdown(label="{label}", choices={choices}, multiselect={multiselect})'
         },
         "Radio": {
+            "description": "Radio button group component",
             "properties": {
-                "label": "Select One",
-                "choices": ["Option 1", "Option 2", "Option 3"],
-                "value": "Option 1"
+                "label": "Radio Group",
+                "choices": [],
+                "type": "value"
             },
-            "code_snippet": 'gr.Radio(label="{label}", choices={choices}, value="{value}")'
-        }
-    },
-    "Advanced Input": {
-        "JSON": {
-            "properties": {
-                "label": "JSON Input",
-                "value": "{}"
-            },
-            "code_snippet": 'gr.JSON(label="{label}", value={value})'
+            "code_snippet": 'gr.Radio(label="{label}", choices={choices}, type="{type}")'
         },
-        "File": {
+        "Checkbox": {
+            "description": "Checkbox component",
             "properties": {
-                "label": "File Upload",
-                "file_types": [".txt", ".pdf", ".csv"],
-                "multiple": False
+                "label": "Checkbox",
+                "value": False
             },
-            "code_snippet": 'gr.File(label="{label}", file_types={file_types}, multiple={multiple})'
+            "code_snippet": 'gr.Checkbox(label="{label}", value={value})'
+        }
+    }
+}
+
+TEMPLATE_CATEGORIES = {
+    "Basic": {
+        "Empty": {
+            "description": "Empty application template",
+            "components": [],
+            "layout": "vertical",
+            "css": "",
+            "dependencies": []
         },
-        "Dataframe": {
-            "properties": {
-                "label": "Data Table",
-                "headers": ["Column 1", "Column 2"],
-                "interactive": True
-            },
-            "code_snippet": 'gr.Dataframe(label="{label}", headers={headers}, interactive={interactive})'
+        "Text Input/Output": {
+            "description": "Simple text input/output template",
+            "components": [
+                {
+                    "type": "Textbox",
+                    "properties": {
+                        "label": "Input",
+                        "lines": 3
+                    }
+                },
+                {
+                    "type": "Button",
+                    "properties": {
+                        "text": "Process",
+                        "variant": "primary"
+                    }
+                },
+                {
+                    "type": "Textbox",
+                    "properties": {
+                        "label": "Output",
+                        "lines": 3
+                    }
+                }
+            ],
+            "layout": "vertical",
+            "css": "",
+            "dependencies": []
         }
     },
-    "Output Display": {
-        "Label": {
-            "properties": {
-                "label": "Output Label",
-                "value": "Result will appear here..."
-            },
-            "code_snippet": 'gr.Label(label="{label}", value="{value}")'
-        },
-        "Plot": {
-            "properties": {
-                "label": "Plot Output",
-                "type": "line"
-            },
-            "code_snippet": 'gr.Plot(label="{label}")'
-        },
-        "HTML": {
-            "properties": {
-                "label": "HTML Output",
-                "value": "<div>HTML content here</div>"
-            },
-            "code_snippet": 'gr.HTML(label="{label}", value="""{value}""")'
+    "Media": {
+        "Image Processing": {
+            "description": "Image processing template",
+            "components": [
+                {
+                    "type": "Image",
+                    "properties": {
+                        "label": "Input Image",
+                        "source": "upload"
+                    }
+                },
+                {
+                    "type": "Button",
+                    "properties": {
+                        "text": "Process",
+                        "variant": "primary"
+                    }
+                },
+                {
+                    "type": "Image",
+                    "properties": {
+                        "label": "Output Image",
+                        "source": "upload"
+                    }
+                }
+            ],
+            "layout": "vertical",
+            "css": "",
+            "dependencies": ["PIL"]
         }
     }
 }
+
+DEFAULT_THEMES = {
+    "Light": """
+        /* Light theme CSS */
+        .gradio-container {
+            font-family: 'Arial', sans-serif;
+            background-color: #ffffff;
+        }
+        .gradio-button {
+            background-color: #2196F3;
+            color: white;
+        }
+    """,
+    "Dark": """
+        /* Dark theme CSS */
+        .gradio-container {
+            font-family: 'Arial', sans-serif;
+            background-color: #2c2c2c;
+            color: #ffffff;
+        }
+        .gradio-button {
+            background-color: #bb86fc;
+            color: black;
+        }
+    """
+}
+
+class ChatRole(Enum):
+    SYSTEM = "system"
+    USER = "user"
+    ASSISTANT = "assistant"
+
+@dataclass
+class ChatMessage:
+    role: ChatRole
+    content: str
+
+class GradioAIBuilder:
+    def __init__(self, model_name: str = "HuggingFaceH4/starchat-beta"):
+        """Initialize the AI Builder with HuggingFace model"""
+        try:
+            self.tokenizer = AutoTokenizer.from_pretrained(model_name)
+            self.model = AutoModelForCausalLM.from_pretrained(
+                model_name,
+                torch_dtype=torch.float16,
+                device_map="auto",
+                trust_remote_code=True
+            )
+            self.chat_pipeline = pipeline(
+                "text-generation",
+                model=self.model,
+                tokenizer=self.tokenizer,
+                max_length=2048,
+                do_sample=True,
+                temperature=0.7,
+                top_p=0.95,
+                pad_token_id=self.tokenizer.eos_token_id
+            )
+            
+            self.chat_history: List[ChatMessage] = []
+            self.current_app: Dict = {}
+            self.error_log: List[str] = []
+            
+            # Initialize system prompt
+            self.initialize_system_prompt()
+            
+        except Exception as e:
+            logger.error(f"Error initializing AI Builder: {str(e)}")
+            raise
+
+    def initialize_system_prompt(self):
+        """Set up the system prompt for the AI"""
+        system_prompt = """You are an expert Gradio application builder. Your role is to:
+        1. Understand user requirements and convert them into Gradio components
+        2. Generate and modify Python code for Gradio applications
+        3. Help users customize their applications through natural language instructions
+        4. Provide clear explanations of changes and suggestions for improvements
+
+        When generating code:
+        1. Use proper Python and Gradio syntax
+        2. Include necessary imports
+        3. Structure the code clearly
+        4. Add comments for clarity
+        5. Handle errors appropriately
+
+        When responding to modifications:
+        1. Explain what changes will be made
+        2. Show the modified code
+        3. Highlight any potential issues
+        4. Suggest improvements if applicable
+
+        Available Components:
+        {components}
+
+        Available Templates:
+        {templates}
+
+        Response Format:
+        1. Brief explanation of understanding
+        2. Proposed solution
+        3. Code block:
+        ```python
+        # Code here
+        ```
+        4. Additional explanations or suggestions
+        """
+
+        # Format prompt with available components and templates
+        components_str = self._format_components_for_prompt()
+        templates_str = self._format_templates_for_prompt()
+
+        self.system_prompt = system_prompt.format(
+            components=components_str,
+            templates=templates_str
+        )
+        self.chat_history.append(ChatMessage(ChatRole.SYSTEM, self.system_prompt))
+
+    def _format_components_for_prompt(self) -> str:
+        """Format component information for the system prompt"""
+        components_info = []
+        for category, components in COMPONENT_CATEGORIES.items():
+            category_info = [f"\n{category}:"]
+            for name, info in components.items():
+                props = ", ".join(info["properties"].keys())
+                category_info.append(f"  - {name}: {info['description']} (Properties: {props})")
+            components_info.extend(category_info)
+        return "\n".join(components_info)
+
+    def _format_templates_for_prompt(self) -> str:
+        """Format template information for the system prompt"""
+        templates_info = []
+        for category, templates in TEMPLATE_CATEGORIES.items():
+            category_info = [f"\n{category}:"]
+            for name, info in templates.items():
+                category_info.append(f"  - {name}: {info['description']}")
+            templates_info.extend(category_info)
+        return "\n".join(templates_info)
+
+    async def generate_response(self, user_input: str) -> str:
+        """Generate AI response using HuggingFace model"""
+        try:
+            # Format conversation history
+            conversation = self._format_conversation_history()
+            conversation += f"\nuser: {user_input}\nassistant:"
+
+            # Generate response
+            response = self.chat_pipeline(
+                conversation,
+                max_new_tokens=1024,
+                do_sample=True,
+                temperature=0.7,
+                top_p=0.95
+            )[0]['generated_text']
+
+            # Extract assistant's response
+            response = response.split("assistant:")[-1].strip()
+            
+            # Update chat history
+            self.chat_history.append(ChatMessage(ChatRole.USER, user_input))
+            self.chat_history.append(ChatMessage(ChatRole.ASSISTANT, response))
+            
+            return response
+
+        except Exception as e:
+            error_msg = f"Error generating response: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            raise
+
+    def _format_conversation_history(self) -> str:
+        """Format the conversation history for the model"""
+        return "\n".join([
+            f"{msg.role.value}: {msg.content}"
+            for msg in self.chat_history
+        ])
+
+    async def process_user_request(self, user_input: str) -> Dict[str, Any]:
+        """Process user request and return appropriate response"""
+        try:
+            response = await self.generate_response(user_input)
+            
+            # Extract code if present
+            code_blocks = re.findall(r"```python\n(.*?)```", response, re.DOTALL)
+            
+            result = {
+                "response": response,
+                "code_changes": code_blocks[0] if code_blocks else None,
+                "status": "success",
+                "preview_available": bool(code_blocks)
+            }
+
+            # If code changes were generated, update the current app
+            if code_blocks:
+                self.update_current_app(code_blocks[0])
+
+            return result
+
+        except Exception as e:
+            error_msg = f"Error processing request: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return {
+                "response": error_msg,
+                "status": "error",
+                "error": str(e)
+            }
+
+    def update_current_app(self, code: str):
+        """Update the current app with new code"""
+        try:
+            # Parse the code to extract components and layout
+            components = self.extract_components_from_code(code)
+            if components:
+                self.current_app["components"] = components
+
+            # Update layout if present
+            layout_match = re.search(r"with gr\.(Row|Column|Tabs)\(\):", code)
+            if layout_match:
+                layout_type = layout_match.group(1).lower()
+                self.current_app["layout"] = layout_type
+
+            # Extract CSS if present
+            css_match = re.search(r'css = """(.*?)"""', code, re.DOTALL)
+            if css_match:
+                self.current_app["css"] = css_match.group(1)
+
+        except Exception as e:
+            error_msg = f"Error updating current app: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            raise
+
 class ComponentManager:
     def __init__(self):
-        self.categories = COMPONENT_CATEGORIES
-        self.templates = TEMPLATE_CATEGORIES
-        self.active_components = []
-        self.dependencies = set()
+        self.components: List[Dict] = []
+        self.error_log: List[str] = []
 
-    def get_component_info(self, category: str, component_type: str) -> Dict:
-        """Get component information from registry"""
-        return self.categories[category][component_type]
+    def add_component(self, category: str, component_type: str, properties: Dict = None) -> Optional[Dict]:
+        """Add a new component with specified properties"""
+        try:
+            if category not in COMPONENT_CATEGORIES or component_type not in COMPONENT_CATEGORIES[category]:
+                raise ValueError(f"Invalid component type: {category}/{component_type}")
 
-    def add_component(self, category: str, component_type: str, properties: Dict = None) -> Dict:
-        """Add a component with specified properties"""
-        component_info = self.get_component_info(category, component_type)
-        component_id = f"{component_type}_{len(self.active_components)}"
-        
-        new_component = {
-            "id": component_id,
-            "type": component_type,
-            "category": category,
-            "properties": properties or component_info["properties"].copy(),
-            "code_snippet": component_info["code_snippet"]
-        }
-        
-        self.active_components.append(new_component)
-        return new_component
+            component_info = COMPONENT_CATEGORIES[category][component_type].copy()
+            if properties:
+                component_info["properties"].update(properties)
+
+            component = {
+                "id": len(self.components),
+                "category": category,
+                "type": component_type,
+                "properties": component_info["properties"]
+            }
+            
+            self.components.append(component)
+            return component
+
+        except Exception as e:
+            error_msg = f"Error adding component: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return None
+
+    def update_component(self, component_id: int, properties: Dict) -> bool:
+        """Update properties of an existing component"""
+        try:
+            if not 0 <= component_id < len(self.components):
+                raise ValueError(f"Invalid component ID: {component_id}")
+
+            component = self.components[component_id]
+            component["properties"].update(properties)
+            return True
+
+        except Exception as e:
+            error_msg = f"Error updating component: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
 
-    def remove_component(self, component_id: str):
+    def remove_component(self, component_id: int) -> bool:
         """Remove a component by ID"""
-        self.active_components = [c for c in self.active_components if c["id"] != component_id]
+        try:
+            if not 0 <= component_id < len(self.components):
+                raise ValueError(f"Invalid component ID: {component_id}")
+
+            self.components.pop(component_id)
+            # Update remaining component IDs
+            for i, component in enumerate(self.components):
+                component["id"] = i
+            return True
+
+        except Exception as e:
+            error_msg = f"Error removing component: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
+
+    def get_component(self, component_id: int) -> Optional[Dict]:
+        """Get component by ID"""
+        try:
+            if not 0 <= component_id < len(self.components):
+                raise ValueError(f"Invalid component ID: {component_id}")
+            return self.components[component_id]
+
+        except Exception as e:
+            error_msg = f"Error getting component: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return None
+
+    def get_components_json(self) -> str:
+        """Get all components as JSON string"""
+        try:
+            return json.dumps(self.components, indent=2)
+        except Exception as e:
+            error_msg = f"Error converting components to JSON: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return "[]"
 
-    def update_component(self, component_id: str, properties: Dict):
-        """Update component properties"""
-        for component in self.active_components:
-            if component["id"] == component_id:
-                component["properties"].update(properties)
-                break
+    def load_components_from_json(self, components_json: str) -> bool:
+        """Load components from JSON string"""
+        try:
+            if isinstance(components_json, str):
+                components = json.loads(components_json)
+            else:
+                components = components_json
+                
+            self.components = components
+            return True
+
+        except Exception as e:
+            error_msg = f"Error loading components from JSON: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
 
 class TemplateManager:
     def __init__(self):
         self.templates = TEMPLATE_CATEGORIES
-        self.component_manager = ComponentManager()
+        self.error_log: List[str] = []
 
-    def load_template(self, category: str, template_name: str) -> Dict:
-        """Load a template configuration"""
-        template = self.templates[category][template_name]
-        self.component_manager.active_components = []
-        self.component_manager.dependencies = set(template.get("dependencies", []))
-
-        # Add components from template
-        for component_config in template["components"]:
-            component_type = component_config.pop("type")
-            # Find category for component type
-            for cat, components in COMPONENT_CATEGORIES.items():
-                if component_type in components:
-                    self.component_manager.add_component(cat, component_type, component_config)
-                    break
-
-        return {
-            "layout": template.get("layout", "vertical"),
-            "css": template.get("css", ""),
-            "dependencies": list(self.component_manager.dependencies)
-        }
+    def get_template(self, category: str, template_name: str) -> Optional[Dict]:
+        """Get a specific template by category and name"""
+        try:
+            if category not in self.templates or template_name not in self.templates[category]:
+                raise ValueError(f"Invalid template: {category}/{template_name}")
+            return self.templates[category][template_name]
+        except Exception as e:
+            error_msg = f"Error getting template: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return None
+
+    def add_custom_template(self, category: str, template_name: str, template_data: Dict) -> bool:
+        """Add a new custom template"""
+        try:
+            if not all(key in template_data for key in ["description", "components", "layout", "css", "dependencies"]):
+                raise ValueError("Invalid template data structure")
+
+            if category not in self.templates:
+                self.templates[category] = {}
+            
+            self.templates[category][template_name] = template_data
+            return True
+        except Exception as e:
+            error_msg = f"Error adding custom template: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
+
+    def get_template_list(self) -> List[Dict]:
+        """Get list of all available templates"""
+        template_list = []
+        for category, templates in self.templates.items():
+            for name, data in templates.items():
+                template_list.append({
+                    "category": category,
+                    "name": name,
+                    "description": data["description"]
+                })
+        return template_list
 
 class CodeGenerator:
     def __init__(self, template_manager: TemplateManager):
         self.template_manager = template_manager
+        self.error_log: List[str] = []
 
-    def generate_imports(self) -> str:
-        """Generate import statements"""
-        imports = [
-            "import gradio as gr",
-            "import os",
-            "import logging",
-            "from pathlib import Path",
-        ]
-        
-        # Add template-specific imports
-        if self.template_manager.component_manager.dependencies:
-            imports.extend([f"import {dep}" for dep in self.template_manager.component_manager.dependencies])
+    def generate_app_code(self, components: List[Dict], layout: str = "vertical", 
+                         theme: str = "Light", css: str = "") -> str:
+        """Generate complete Gradio application code"""
+        try:
+            code_parts = []
+            
+            # Add imports
+            code_parts.append(self._generate_imports(components))
+            
+            # Add any required helper functions
+            code_parts.append(self._generate_helper_functions(components))
             
-        return "\n".join(imports) + "\n\n"
+            # Generate the main app code
+            code_parts.append(self._generate_main_app_code(components, layout, theme, css))
+            
+            return "\n\n".join(code_parts)
+        except Exception as e:
+            error_msg = f"Error generating app code: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return ""
 
-    def generate_component_code(self, component: Dict) -> str:
-        """Generate code for a single component"""
-        try:
-            return component["code_snippet"].format(**component["properties"])
-        except KeyError as e:
-            logger.error(f"Missing property {e} for component {component['id']}")
-            return f"# Error generating code for {component['id']}"
-
-    def generate_layout_code(self, layout: str, components: List[Dict]) -> str:
-        """Generate layout code"""
-        indent = "    "
-        code = []
+    def _generate_imports(self, components: List[Dict]) -> str:
+        """Generate necessary import statements"""
+        imports = ["import gradio as gr"]
         
-        if layout == "horizontal":
-            code.append("with gr.Row():")
-            indent = "        "
-        elif layout == "vertical":
-            code.append("with gr.Column():")
-            indent = "        "
+        # Add additional imports based on components
+        additional_imports = set()
+        for component in components:
+            if component["type"] == "Image":
+                additional_imports.add("from PIL import Image")
+            elif component["type"] in ["Audio", "Video"]:
+                additional_imports.add("import numpy as np")
 
+        return "\n".join(imports + sorted(list(additional_imports)))
+
+    def _generate_helper_functions(self, components: List[Dict]) -> str:
+        """Generate helper functions needed by components"""
+        helper_functions = []
+        
+        # Add processing functions based on component types
+        processing_functions = set()
         for component in components:
-            code.append(f"{indent}{self.generate_component_code(component)}")
+            if component["type"] == "Image":
+                processing_functions.add("""
+def process_image(image):
+    \"\"\"Process the input image\"\"\"
+    # Add your image processing logic here
+    return image
+""")
+            elif component["type"] == "Audio":
+                processing_functions.add("""
+def process_audio(audio):
+    \"\"\"Process the input audio\"\"\"
+    # Add your audio processing logic here
+    return audio
+""")
 
-        return "\n".join(code)
+        return "\n".join(helper_functions + sorted(list(processing_functions)))
 
-    def generate_full_code(self, app_name: str, template_config: Dict) -> str:
-        """Generate complete application code"""
-        code_parts = [
-            self.generate_imports(),
-            "# Configure logging",
-            'logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s")',
-            'logger = logging.getLogger(__name__)\n',
+    def _generate_main_app_code(self, components: List[Dict], layout: str,
+                              theme: str, css: str) -> str:
+        """Generate the main application code"""
+        code_lines = [
+            "# Create Gradio interface",
+            "with gr.Blocks(theme=gr.themes.Default(), css=css) as demo:",
+            "    gr.Markdown(\"# Gradio Application\")\n"
         ]
 
-        # Add CSS if present
-        if template_config.get("css"):
-            code_parts.extend([
-                "# Custom CSS",
-                f'custom_css = """{template_config["css"]}"""',
-                ""
-            ])
-
-        # Start app definition
-        code_parts.extend([
-            f"def create_{app_name}():",
-            "    with gr.Blocks(css=custom_css) as app:",
-            f'        gr.Markdown("# {app_name}")\n'
-        ])
+        # Add CSS
+        if css:
+            code_lines.insert(0, f'css = """{css}"""\n')
+        
+        # Generate layout
+        if layout == "horizontal":
+            code_lines.append("    with gr.Row():")
+            indent = "        "
+        else:
+            code_lines.append("    with gr.Column():")
+            indent = "        "
+
+        # Add components
+        component_vars = []
+        for i, component in enumerate(components):
+            var_name = f"{component['type'].lower()}_{i}"
+            component_vars.append(var_name)
+            
+            props = ", ".join([f"{k}={repr(v)}" for k, v in component["properties"].items()])
+            code_lines.append(f"{indent}{var_name} = gr.{component['type']}({props})")
 
-        # Add layout code
-        code_parts.append(self.generate_layout_code(
-            template_config["layout"],
-            self.template_manager.component_manager.active_components
-        ))
+        # Add event handlers
+        if len(component_vars) > 1:
+            code_lines.extend(self._generate_event_handlers(component_vars))
 
         # Add launch code
-        code_parts.extend([
-            "\n    return app",
-            "\nif __name__ == '__main__':",
-            f"    app = create_{app_name}()",
-            "    app.launch(debug=True)"
+        code_lines.extend([
+            "\n# Launch the application",
+            "if __name__ == \"__main__\":",
+            "    demo.launch()"
         ])
 
-        return "\n".join(code_parts)
+        return "\n".join(code_lines)
+
+    def _generate_event_handlers(self, component_vars: List[str]) -> List[str]:
+        """Generate event handlers for components"""
+        handlers = []
+        
+        # Look for input/output pairs
+        for i in range(len(component_vars) - 1):
+            if "button" in component_vars[i]:
+                handlers.extend([
+                    f"\n    def process_{i}({component_vars[i-1]}):",
+                    f"        # Add your processing logic here",
+                    f"        return {component_vars[i-1]}",
+                    f"\n    {component_vars[i]}.click(",
+                    f"        fn=process_{i},",
+                    f"        inputs=[{component_vars[i-1]}],",
+                    f"        outputs=[{component_vars[i+1]}]",
+                    f"    )"
+                ])
+
+        return handlers
 
 class AppBuilder:
     def __init__(self):
+        """Initialize the AppBuilder with necessary managers"""
+        self.component_manager = ComponentManager()
         self.template_manager = TemplateManager()
         self.code_generator = CodeGenerator(self.template_manager)
-        self.current_app_name = ""
-        self.current_template = None
-
-    def create_interface(self):
-        with gr.Blocks(theme=gr.themes.Default()) as interface:
-            gr.Markdown("# 🚀 Advanced Gradio App Builder")
-
-            with gr.Tabs():
-                # Template Selection Tab
-                with gr.TabItem("📋 Templates"):
-                    with gr.Row():
-                        template_category = gr.Dropdown(
-                            choices=list(TEMPLATE_CATEGORIES.keys()),
-                            label="Category"
-                        )
-                        template_name = gr.Dropdown(
-                            label="Template"
-                        )
-                    
-                    app_name = gr.Textbox(label="Application Name")
-                    load_template_btn = gr.Button("Load Template", variant="primary")
-                    template_info = gr.JSON(label="Template Information")
-
-                # Component Editor Tab
-                with gr.TabItem("🔧 Components"):
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            component_category = gr.Dropdown(
-                                choices=list(COMPONENT_CATEGORIES.keys()),
-                                label="Component Category"
-                            )
-                            component_type = gr.Dropdown(
-                                label="Component Type"
-                            )
-                            add_component_btn = gr.Button("Add Component")
-                        
-                        with gr.Column(scale=2):
-                            component_list = gr.JSON(label="Active Components")
-                            component_properties = gr.JSON(label="Component Properties")
-
-                # Code Preview Tab
-                with gr.TabItem("💻 Code"):
-                    generate_code_btn = gr.Button("Generate Code")
-                    code_output = gr.Code(language="python")
-
-                # Preview Tab
-                with gr.TabItem("👁️ Preview"):
-                    preview_btn = gr.Button("Update Preview")
-                    preview_area = gr.HTML()
-
-            # Event handlers
-            def update_template_choices(category):
-                return gr.Dropdown(choices=list(TEMPLATE_CATEGORIES[category].keys()))
-
-            def update_component_choices(category):
-                return gr.Dropdown(choices=list(COMPONENT_CATEGORIES[category].keys()))
-
-            def load_template(category, template_name, app_name):
-                if not app_name:
-                    return "Please enter an application name", None
-                
-                self.current_app_name = app_name
-                template_config = self.template_manager.load_template(category, template_name)
-                self.current_template = template_config
-                return "Template loaded successfully", template_config
-
-            def add_component(category, component_type):
-                if not self.current_template:
-                    return "Please load a template first", None
+        self.ai_builder = None  # Will be initialized later if needed
+        self.current_app = {
+            "components": [],
+            "layout": "vertical",
+            "theme": "Light",
+            "css": DEFAULT_THEMES["Light"]
+        }
+        self.error_log: List[str] = []
+
+    def create_app_from_template(self, category: str, template_name: str) -> bool:
+        """Create a new app from a template"""
+        try:
+            template = self.template_manager.get_template(category, template_name)
+            if not template:
+                raise ValueError(f"Template not found: {category}/{template_name}")
+
+            self.current_app = {
+                "components": template["components"],
+                "layout": template["layout"],
+                "theme": "Light",
+                "css": template.get("css", DEFAULT_THEMES["Light"])
+            }
+            
+            self.component_manager.load_components_from_json(template["components"])
+            return True
+        except Exception as e:
+            error_msg = f"Error creating app from template: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
+
+    def update_app_layout(self, layout: str) -> bool:
+        """Update the application layout"""
+        try:
+            if layout not in ["vertical", "horizontal", "tabs"]:
+                raise ValueError(f"Invalid layout: {layout}")
+            
+            self.current_app["layout"] = layout
+            return True
+        except Exception as e:
+            error_msg = f"Error updating layout: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
+
+    def update_app_theme(self, theme: str) -> bool:
+        """Update the application theme"""
+        try:
+            if theme not in DEFAULT_THEMES:
+                raise ValueError(f"Invalid theme: {theme}")
+            
+            self.current_app["theme"] = theme
+            self.current_app["css"] = DEFAULT_THEMES[theme]
+            return True
+        except Exception as e:
+            error_msg = f"Error updating theme: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return False
+
+    def generate_app_code(self) -> str:
+        """Generate the complete application code"""
+        try:
+            return self.code_generator.generate_app_code(
+                self.current_app["components"],
+                self.current_app["layout"],
+                self.current_app["theme"],
+                self.current_app["css"]
+            )
+        except Exception as e:
+            error_msg = f"Error generating app code: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return ""
+
+    def preview_app(self) -> Optional[gr.Blocks]:
+        """Generate and preview the current application"""
+        try:
+            code = self.generate_app_code()
+            if not code:
+                raise ValueError("No code generated")
+
+            # Create temporary file
+            with tempfile.NamedTemporaryFile(mode='w', suffix='.py', delete=False) as f:
+                f.write(code)
+                temp_file = f.name
+
+            # Execute the code in a separate process
+            result = subprocess.run(['python', temp_file], capture_output=True, text=True)
+            
+            if result.returncode != 0:
+                raise ValueError(f"Error executing code: {result.stderr}")
+
+            return True
+        except Exception as e:
+            error_msg = f"Error previewing app: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            return None
+
+class GradioInterface:
+    def __init__(self):
+        """Initialize the Gradio interface"""
+        self.app_builder = AppBuilder()
+        self.current_tab = "builder"
+        self.error_log: List[str] = []
+
+    def create_interface(self) -> gr.Blocks:
+        """Create the main Gradio interface"""
+        try:
+            with gr.Blocks(theme=gr.themes.Default()) as interface:
+                gr.Markdown("# 🚀 Advanced Gradio App Builder")
                 
-                new_component = self.template_manager.component_manager.add_component(
-                    category, component_type
+                with gr.Tabs() as tabs:
+                    # Component Builder Tab
+                    with gr.TabItem("🔧 Builder"):
+                        self._create_builder_tab()
+                    
+                    # Code Editor Tab
+                    with gr.TabItem("📝 Code"):
+                        self._create_code_tab()
+                    
+                    # Preview Tab
+                    with gr.TabItem("👁️ Preview"):
+                        self._create_preview_tab()
+                    
+                    # AI Assistant Tab
+                    with gr.TabItem("🤖 AI Assistant"):
+                        self._create_ai_tab()
+                    
+                    # Settings Tab
+                    with gr.TabItem("⚙️ Settings"):
+                        self._create_settings_tab()
+
+                return interface
+
+        except Exception as e:
+            error_msg = f"Error creating interface: {str(e)}"
+            logger.error(error_msg)
+            self.error_log.append(error_msg)
+            raise
+
+    def _create_builder_tab(self):
+        """Create the component builder tab"""
+        with gr.Row():
+            # Left Column - Component Selection
+            with gr.Column(scale=1):
+                gr.Markdown("### 📦 Components")
+                category = gr.Dropdown(
+                    choices=list(COMPONENT_CATEGORIES.keys()),
+                    label="Category",
+                    value="Basic"
                 )
-                return (
-                    "Component added successfully",
-                    self.template_manager.component_manager.active_components
+                component_type = gr.Dropdown(
+                    choices=list(COMPONENT_CATEGORIES["Basic"].keys()),
+                    label="Component Type"
                 )
+                add_component = gr.Button("Add Component", variant="primary")
+
+            # Middle Column - Component Properties
+            with gr.Column(scale=2):
+                gr.Markdown("### ⚙️ Properties")
+                properties_json = gr.JSON(label="Component Properties")
+                update_properties = gr.Button("Update Properties")
+
+            # Right Column - Component List
+            with gr.Column(scale=1):
+                gr.Markdown("### 📋 Current Components")
+                component_list = gr.JSON(label="Components")
+                remove_component = gr.Button("Remove Selected", variant="stop")
 
-            def generate_code():
-                if not self.current_template or not self.current_app_name:
-                    return "Please load a template first"
+        # Template Selection
+        with gr.Row():
+            gr.Markdown("### 📑 Templates")
+            template_category = gr.Dropdown(
+                choices=list(TEMPLATE_CATEGORIES.keys()),
+                label="Template Category"
+            )
+            template_name = gr.Dropdown(
+                choices=list(TEMPLATE_CATEGORIES["Basic"].keys()),
+                label="Template"
+            )
+            load_template = gr.Button("Load Template", variant="primary")
+
+        # Event handlers
+        def update_component_choices(category):
+            return gr.Dropdown(choices=list(COMPONENT_CATEGORIES[category].keys()))
+
+        category.change(
+            update_component_choices,
+            inputs=[category],
+            outputs=[component_type]
+        )
+
+        def add_new_component(category, comp_type):
+            success = self.app_builder.component_manager.add_component(category, comp_type)
+            components = self.app_builder.component_manager.get_components_json()
+            return components
+
+        add_component.click(
+            add_new_component,
+            inputs=[category, component_type],
+            outputs=[component_list]
+        )
+
+        def update_component_properties(props_json):
+            try:
+                props = json.loads(props_json)
+                success = self.app_builder.component_manager.update_component(
+                    props["id"], props["properties"]
+                )
+                return self.app_builder.component_manager.get_components_json()
+            except Exception as e:
+                logger.error(f"Error updating properties: {str(e)}")
+                return None
+
+        update_properties.click(
+            update_component_properties,
+            inputs=[properties_json],
+            outputs=[component_list]
+        )
+
+    def _create_code_tab(self):
+        """Create the code editor tab"""
+        with gr.Row():
+            with gr.Column():
+                code_editor = gr.Code(
+                    label="Application Code",
+                    language="python",
+                    value="# Your Gradio app code will appear here"
+                )
+                update_code = gr.Button("Update Code")
                 
-                return self.code_generator.generate_full_code(
-                    self.current_app_name,
-                    self.current_template
+            with gr.Column():
+                code_output = gr.Markdown("Code validation output will appear here")
+
+        def update_app_code():
+            try:
+                code = self.app_builder.generate_app_code()
+                return code, "✅ Code generated successfully"
+            except Exception as e:
+                return None, f"❌ Error generating code: {str(e)}"
+
+        update_code.click(
+            update_app_code,
+            outputs=[code_editor, code_output]
+        )
+
+    def _create_preview_tab(self):
+        """Create the preview tab"""
+        with gr.Row():
+            preview_button = gr.Button("Generate Preview", variant="primary")
+            preview_status = gr.Markdown("Click button to generate preview")
+
+        with gr.Row():
+            preview_frame = gr.HTML(label="App Preview")
+
+        def generate_preview():
+            try:
+                success = self.app_builder.preview_app()
+                if success:
+                    return "✅ Preview generated successfully"
+                return "❌ Error generating preview"
+            except Exception as e:
+                return f"❌ Error: {str(e)}"
+
+        preview_button.click(
+            generate_preview,
+            outputs=[preview_status]
+        )
+
+    def _create_ai_tab(self):
+        """Create the AI assistant tab"""
+        with gr.Row():
+            with gr.Column(scale=2):
+                chat_history = gr.Chatbot(label="Chat History")
+                user_input = gr.Textbox(
+                    label="Your Instructions",
+                    placeholder="Describe what you want to build or modify...",
+                    lines=3
                 )
+                with gr.Row():
+                    send_btn = gr.Button("Send", variant="primary")
+                    clear_btn = gr.Button("Clear Chat")
+            
+            with gr.Column(scale=1):
+                suggestions = gr.JSON(label="Suggested Components")
+                preview_btn = gr.Button("Update Preview")
+                preview_frame = gr.HTML(label="Live Preview")
 
-            # Connect events
-            template_category.change(
-                update_template_choices,
-                inputs=[template_category],
-                outputs=[template_name]
-            )
+        chat_error = gr.Markdown(visible=False)
+
+        async def process_chat(message, history):
+            if not self.app_builder.ai_builder:
+                self.app_builder.ai_builder = GradioAIBuilder()
             
-            component_category.change(
-                update_component_choices,
-                inputs=[component_category],
-                outputs=[component_type]
-            )
+            try:
+                result = await self.app_builder.ai_builder.process_user_request(message)
+                
+                if result["status"] == "error":
+                    return (
+                        history + [[message, "Error: " + result["response"]]],
+                        [],
+                        gr.Markdown(f"⚠️ {result['error']}", visible=True)
+                    )
+                
+                new_history = history + [[message, result["response"]]]
+                
+                return new_history, [], gr.Markdown(visible=False)
+            
+            except Exception as e:
+                error_msg = f"Error processing chat: {str(e)}"
+                logger.error(error_msg)
+                return (
+                    history + [[message, "An error occurred"]],
+                    [],
+                    gr.Markdown(f"⚠️ {error_msg}", visible=True)
+                )
 
-            load_template_btn.click(
-                load_template,
-                inputs=[template_category, template_name, app_name],
-                outputs=[template_info, component_list]
-            )
+        def clear_chat_history():
+            if self.app_builder.ai_builder:
+                self.app_builder.ai_builder.chat_history = []
+            return [], [], gr.Markdown(visible=False)
 
-            add_component_btn.click(
-                add_component,
-                inputs=[component_category, component_type],
-                outputs=[component_list, component_properties]
-            )
+        send_btn.click(
+            process_chat,
+            inputs=[user_input, chat_history],
+            outputs=[chat_history, suggestions, chat_error]
+        )
+        
+        clear_btn.click(
+            clear_chat_history,
+            outputs=[chat_history, suggestions, chat_error]
+        )
 
-            generate_code_btn.click(
-                generate_code,
-                outputs=[code_output]
-            )
+    def _create_settings_tab(self):
+        """Create the settings tab"""
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown("### 🎨 Appearance")
+                theme_dropdown = gr.Dropdown(
+                    choices=list(DEFAULT_THEMES.keys()),
+                    label="Theme",
+                    value="Light"
+                )
+                layout_dropdown = gr.Dropdown(
+                    choices=["vertical", "horizontal", "tabs"],
+                    label="Layout",
+                    value="vertical"
+                )
+                
+            with gr.Column():
+                gr.Markdown("### 📝 Custom CSS")
+                css_editor = gr.Code(
+                    label="Custom CSS",
+                    language="css",
+                    value=DEFAULT_THEMES["Light"]
+                )
+
+        update_settings = gr.Button("Apply Settings", variant="primary")
+
+        def update_app_settings(theme, layout, css):
+            try:
+                self.app_builder.update_app_theme(theme)
+                self.app_builder.update_app_layout(layout)
+                self.app_builder.current_app["css"] = css
+                return "✅ Settings updated successfully"
+            except Exception as e:
+                return f"❌ Error updating settings: {str(e)}"
+
+        update_settings.click(
+            update_app_settings,
+            inputs=[theme_dropdown, layout_dropdown, css_editor],
+            outputs=[gr.Markdown()]
+        )
 
-        return interface
+def main():
+    """Main execution function"""
+    try:
+        interface = GradioInterface()
+        demo = interface.create_interface()
+        demo.launch(
+            server_name="0.0.0.0",
+            server_port=7860,
+            share=True,
+            debug=True
+        )
+    except Exception as e:
+        logger.error(f"Application failed to start: {str(e)}")
+        raise
 
 if __name__ == "__main__":
-    builder = AppBuilder()
-    interface = builder.create_interface()
-    interface.launch(server_port=7860, share=True, debug=True)
+    main()