Update app.py

app.py

@@ -1,3 +1,13 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+
+"""
+Gradio Interface Builder
+A tool for building and managing Gradio interfaces using AI-powered code generation
+"""
+
+import threading
+import time
 import gradio as gr
 import logging
 import json
@@ -5,16 +15,27 @@ import re
 import torch
 import tempfile
 import subprocess
+import ast
 from pathlib import Path
-from typing import Dict, List, Tuple, Optional, Any
-from dataclasses import dataclass
+from typing import Dict, List, Tuple, Optional, Any, Union
+from dataclasses import dataclass, field
 from enum import Enum
-from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
+from transformers import (
+    AutoTokenizer, 
+    AutoModelForCausalLM, 
+    pipeline,
+    AutoProcessor,
+    AutoModel
+)
+from sentence_transformers import SentenceTransformer
+import faiss
+import numpy as np
+from PIL import Image
 
 # Configure logging
 logging.basicConfig(
     level=logging.INFO,
-    format='%(asctime)s - %(levelname)s - %(message)s',
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
     handlers=[
         logging.StreamHandler(),
         logging.FileHandler('gradio_builder.log')
@@ -22,1349 +43,1094 @@ logging.basicConfig(
 )
 logger = logging.getLogger(__name__)
 
-# Constants and Default Configurations
-COMPONENT_CATEGORIES = {
-    "Basic": {
-        "Textbox": {
-            "description": "Text input component",
-            "properties": {
-                "label": "Text Input",
-                "placeholder": "",
-                "lines": 1,
-                "type": "text"
-            },
-            "code_snippet": 'gr.Textbox(label="{label}", placeholder="{placeholder}", lines={lines}, type="{type}")'
-        },
-        "Number": {
-            "description": "Numeric input component",
-            "properties": {
-                "label": "Number Input",
-                "value": 0,
-                "minimum": None,
-                "maximum": None
-            },
-            "code_snippet": 'gr.Number(label="{label}", value={value}, minimum={minimum}, maximum={maximum})'
-        },
-        "Button": {
-            "description": "Clickable button component",
-            "properties": {
-                "text": "Button",
-                "variant": "primary"
-            },
-            "code_snippet": 'gr.Button(value="{text}", variant="{variant}")'
-        }
-    },
-    "Media": {
-        "Image": {
-            "description": "Image display/upload component",
-            "properties": {
-                "label": "Image",
-                "shape": None,
-                "image_mode": "RGB",
-                "source": "upload",
-                "type": "numpy"
-            },
-            "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",
-                "source": "upload",
-                "type": "numpy"
-            },
-            "code_snippet": 'gr.Audio(label="{label}", source="{source}", type="{type}")'
-        },
-        "Video": {
-            "description": "Video player component",
-            "properties": {
-                "label": "Video",
-                "source": "upload"
-            },
-            "code_snippet": 'gr.Video(label="{label}", source="{source}")'
-        }
-    },
-    "Selection": {
-        "Dropdown": {
-            "description": "Dropdown selection component",
-            "properties": {
-                "label": "Dropdown",
-                "choices": [],
-                "multiselect": False
-            },
-            "code_snippet": 'gr.Dropdown(label="{label}", choices={choices}, multiselect={multiselect})'
-        },
-        "Radio": {
-            "description": "Radio button group component",
-            "properties": {
-                "label": "Radio Group",
-                "choices": [],
-                "type": "value"
-            },
-            "code_snippet": 'gr.Radio(label="{label}", choices={choices}, type="{type}")'
-        },
-        "Checkbox": {
-            "description": "Checkbox component",
-            "properties": {
-                "label": "Checkbox",
-                "value": False
-            },
-            "code_snippet": 'gr.Checkbox(label="{label}", value={value})'
-        }
-    }
-}
-
-TEMPLATE_CATEGORIES = {
-    "Basic": {
-        "Empty": {
-            "description": "Empty application template",
-            "components": [],
-            "layout": "vertical",
-            "css": "",
-            "dependencies": []
-        },
-        "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": []
-        }
-    },
-    "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;
-        }
-    """
-}
+# Constants
+DEFAULT_PORT = 7860
+MODEL_CACHE_DIR = Path("model_cache")
+TEMPLATE_DIR = Path("templates")
+TEMP_DIR = Path("temp")
 
-class ChatRole(Enum):
-    SYSTEM = "system"
-    USER = "user"
-    ASSISTANT = "assistant"
+# Ensure directories exist
+for directory in [MODEL_CACHE_DIR, TEMPLATE_DIR, TEMP_DIR]:
+    directory.mkdir(exist_ok=True)
 
 @dataclass
-class ChatMessage:
-    role: ChatRole
-    content: str
+class Template:
+    """Template data structure"""
+    code: str
+    description: str
+    components: List[str]
+    metadata: Dict[str, Any] = field(default_factory=dict)
+    version: str = "1.0"
+
+class ComponentType(Enum):
+    """Supported Gradio component types"""
+    IMAGE = "Image"
+    TEXTBOX = "Textbox"
+    BUTTON = "Button"
+    NUMBER = "Number"
+    MARKDOWN = "Markdown"
+    JSON = "JSON"
+    HTML = "HTML"
+    CODE = "Code"
+    DROPDOWN = "Dropdown"
+    SLIDER = "Slider"
+    CHECKBOX = "Checkbox"
+    RADIO = "Radio"
+    AUDIO = "Audio"
+    VIDEO = "Video"
+    FILE = "File"
+    DATAFRAME = "DataFrame"
+    LABEL = "Label"
+    PLOT = "Plot"
 
-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
+@dataclass
+class ComponentConfig:
+    """Configuration for Gradio components"""
+    type: ComponentType
+    label: str
+    properties: Dict[str, Any] = field(default_factory=dict)
+    events: List[str] = field(default_factory=list)
+    
+class BuilderError(Exception):
+    """Base exception for Gradio Builder errors"""
+    pass
 
-    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
+class ValidationError(BuilderError):
+    """Raised when validation fails"""
+    pass
 
-        except Exception as e:
-            error_msg = f"Error generating response: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            raise
+class GenerationError(BuilderError):
+    """Raised when code generation fails"""
+    pass
 
-    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
-        ])
+class ModelError(BuilderError):
+    """Raised when model operations fail"""
+    pass
+
+def setup_gpu_memory():
+    """Configure GPU memory usage"""
+    try:
+        if torch.cuda.is_available():
+            # Enable memory growth
+            torch.cuda.empty_cache()
+            # Set memory fraction
+            torch.cuda.set_per_process_memory_fraction(0.8)
+            logger.info("GPU memory configured successfully")
+        else:
+            logger.info("No GPU available, using CPU")
+    except Exception as e:
+        logger.warning(f"Error configuring GPU memory: {e}")
+
+def validate_code(code: str) -> Tuple[bool, str]:
+    """Validate Python code syntax"""
+    try:
+        ast.parse(code)
+        return True, "Code is valid"
+    except SyntaxError as e:
+        line_no = e.lineno
+        offset = e.offset
+        line = e.text
+        if line:
+            pointer = " " * (offset - 1) + "^"
+            error_detail = f"\nLine {line_no}:\n{line}\n{pointer}"
+        else:
+            error_detail = f" at line {line_no}"
+        return False, f"Syntax error: {str(e)}{error_detail}"
+    except Exception as e:
+        return False, f"Validation error: {str(e)}"
 
-    async def process_user_request(self, user_input: str) -> Dict[str, Any]:
-        """Process user request and return appropriate response"""
+class CodeFormatter:
+    """Handles code formatting and cleanup"""
+    
+    @staticmethod
+    def format_code(code: str) -> str:
+        """Format code using black"""
         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)
-            }
+            import black
+            return black.format_str(code, mode=black.FileMode())
+        except ImportError:
+            logger.warning("black not installed, returning unformatted code")
+            return code
+        except Exception as e:
+            logger.error(f"Error formatting code: {e}")
+            return code
+    
+    @staticmethod
+    def cleanup_code(code: str) -> str:
+        """Clean up generated code"""
+        # Remove any potential unsafe imports
+        unsafe_imports = ['os', 'subprocess', 'sys']
+        lines = code.split('\n')
+        cleaned_lines = []
+        
+        for line in lines:
+            skip = False
+            for unsafe in unsafe_imports:
+                if f"import {unsafe}" in line or f"from {unsafe}" in line:
+                    skip = True
+                    break
+            if not skip:
+                cleaned_lines.append(line)
+        
+        return '\n'.join(cleaned_lines)
 
-            # If code changes were generated, update the current app
-            if code_blocks:
-                self.update_current_app(code_blocks[0])
+def create_temp_module(code: str) -> str:
+    """Create a temporary module from code"""
+    try:
+        temp_file = TEMP_DIR / f"temp_module_{int(time.time())}.py"
+        with open(temp_file, "w", encoding="utf-8") as f:
+            f.write(code)
+        return str(temp_file)
+    except Exception as e:
+        raise BuilderError(f"Failed to create temporary module: {e}")
 
-            return result
+# Initialize GPU configuration
+setup_gpu_memory()
 
-        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)
+class ModelManager:
+    """Manages AI models and their configurations"""
+    
+    def __init__(self, cache_dir: Path = MODEL_CACHE_DIR):
+        self.cache_dir = cache_dir
+        self.cache_dir.mkdir(exist_ok=True)
+        self.loaded_models = {}
+        self.model_configs = {
+            "code_generator": {
+                "model_id": "bigcode/starcoder",
+                "tokenizer": AutoTokenizer,
+                "model": AutoModelForCausalLM,
+                "kwargs": {
+                    "torch_dtype": torch.float16,
+                    "device_map": "auto",
+                    "cache_dir": str(cache_dir)
+                }
+            },
+            "image_processor": {
+                "model_id": "Salesforce/blip-image-captioning-base",
+                "processor": AutoProcessor,
+                "model": AutoModel,
+                "kwargs": {
+                    "cache_dir": str(cache_dir)
+                }
             }
+        }
 
-    def update_current_app(self, code: str):
-        """Update the current app with new code"""
+    def load_model(self, model_type: str):
+        """Load a model by type"""
         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)
+            if model_type not in self.model_configs:
+                raise ModelError(f"Unknown model type: {model_type}")
 
-        except Exception as e:
-            error_msg = f"Error updating current app: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            raise
+            if model_type in self.loaded_models:
+                return self.loaded_models[model_type]
 
-class ComponentManager:
-    def __init__(self):
-        self.components: List[Dict] = []
-        self.error_log: List[str] = []
-
-    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}")
-
-            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
+            config = self.model_configs[model_type]
+            logger.info(f"Loading {model_type} model...")
 
-        except Exception as e:
-            error_msg = f"Error adding component: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return None
+            if model_type == "code_generator":
+                tokenizer = config["tokenizer"].from_pretrained(
+                    config["model_id"],
+                    **config["kwargs"]
+                )
+                model = config["model"].from_pretrained(
+                    config["model_id"],
+                    **config["kwargs"]
+                )
+                self.loaded_models[model_type] = (model, tokenizer)
 
-    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}")
+            elif model_type == "image_processor":
+                processor = config["processor"].from_pretrained(
+                    config["model_id"],
+                    **config["kwargs"]
+                )
+                model = config["model"].from_pretrained(
+                    config["model_id"],
+                    **config["kwargs"]
+                )
+                self.loaded_models[model_type] = (model, processor)
 
-            component = self.components[component_id]
-            component["properties"].update(properties)
-            return True
+            logger.info(f"{model_type} model loaded successfully")
+            return self.loaded_models[model_type]
 
         except Exception as e:
-            error_msg = f"Error updating component: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return False
+            raise ModelError(f"Error loading {model_type} model: {str(e)}")
 
-    def remove_component(self, component_id: int) -> bool:
-        """Remove a component by 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
+    def unload_model(self, model_type: str):
+        """Unload a model to free memory"""
+        if model_type in self.loaded_models:
+            del self.loaded_models[model_type]
+            torch.cuda.empty_cache()
+            logger.info(f"{model_type} model unloaded")
 
+class MultimodalRAG:
+    """Multimodal Retrieval-Augmented Generation system"""
+    
+    def __init__(self):
+        """Initialize the multimodal RAG system"""
+        try:
+            self.model_manager = ModelManager()
+            
+            # Load text encoder
+            self.text_encoder = SentenceTransformer('sentence-transformers/all-MiniLM-L6-v2')
+            
+            # Initialize vector store
+            self.vector_store = self._initialize_vector_store()
+            
+            # Load template database
+            self.template_embeddings = {}
+            self._initialize_template_embeddings()
+            
         except Exception as e:
-            error_msg = f"Error removing component: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return False
+            raise ModelError(f"Error initializing MultimodalRAG: {str(e)}")
 
-    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]
+    def _initialize_vector_store(self) -> faiss.IndexFlatL2:
+        """Initialize FAISS vector store"""
+        combined_dim = 768 + 384  # BLIP (768) + text (384)
+        return faiss.IndexFlatL2(combined_dim)
 
+    def _initialize_template_embeddings(self):
+        """Initialize template embeddings"""
+        try:
+            template_path = TEMPLATE_DIR / "template_embeddings.npz"
+            if template_path.exists():
+                data = np.load(template_path)
+                self.template_embeddings = {
+                    name: embedding for name, embedding in data.items()
+                }
         except Exception as e:
-            error_msg = f"Error getting component: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return None
+            logger.error(f"Error loading template embeddings: {e}")
 
-    def get_components_json(self) -> str:
-        """Get all components as JSON string"""
+    def save_template_embeddings(self):
+        """Save template embeddings to disk"""
         try:
-            return json.dumps(self.components, indent=2)
+            template_path = TEMPLATE_DIR / "template_embeddings.npz"
+            np.savez(
+                template_path,
+                **self.template_embeddings
+            )
         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 "[]"
+            logger.error(f"Error saving template embeddings: {e}")
 
-    def load_components_from_json(self, components_json: str) -> bool:
-        """Load components from JSON string"""
+    def encode_image(self, image: Image.Image) -> np.ndarray:
+        """Encode image using BLIP"""
         try:
-            if isinstance(components_json, str):
-                components = json.loads(components_json)
-            else:
-                components = components_json
-                
-            self.components = components
-            return True
-
+            model, processor = self.model_manager.load_model("image_processor")
+            
+            inputs = processor(images=image, return_tensors="pt")
+            with torch.no_grad():
+                image_features = model.get_image_features(**inputs)
+            
+            return image_features.detach().numpy()
+            
         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
+            raise ModelError(f"Error encoding image: {str(e)}")
 
-class TemplateManager:
-    def __init__(self):
-        self.templates = TEMPLATE_CATEGORIES
-        self.error_log: List[str] = []
-
-    def get_template(self, category: str, template_name: str) -> Optional[Dict]:
-        """Get a specific template by category and name"""
+    def encode_text(self, text: str) -> np.ndarray:
+        """Encode text using sentence-transformers"""
         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]
+            return self.text_encoder.encode(text)
         except Exception as e:
-            error_msg = f"Error getting template: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return None
+            raise ModelError(f"Error encoding text: {str(e)}")
 
-    def add_custom_template(self, category: str, template_name: str, template_data: Dict) -> bool:
-        """Add a new custom template"""
+    def generate_code(self, description: str, template_code: str) -> str:
+        """Generate code using StarCoder"""
         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] = {}
+            model, tokenizer = self.model_manager.load_model("code_generator")
             
-            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
+            prompt = f"""
+            # Task: Generate a Gradio interface based on the description
+            # Description: {description}
+            # Base template:
+            {template_code}
+            
+            # Generate a customized version of the template that implements the description.
+            # Only output the Python code, no explanations.
 
-    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_app_code(self, components: List[Dict], layout: str = "vertical", 
-                         theme: str = "Light", css: str = "") -> str:
-        """Generate complete Gradio application code"""
-        try:
-            code_parts = []
+            ```python
+            """
             
-            # Add imports
-            code_parts.append(self._generate_imports(components))
+            inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
             
-            # Add any required helper functions
-            code_parts.append(self._generate_helper_functions(components))
+            with torch.no_grad():
+                outputs = model.generate(
+                    inputs.input_ids,
+                    max_length=2048,
+                    temperature=0.2,
+                    top_p=0.95,
+                    do_sample=True,
+                    pad_token_id=tokenizer.eos_token_id
+                )
+            
+            generated_code = tokenizer.decode(outputs[0], skip_special_tokens=True)
             
-            # Generate the main app code
-            code_parts.append(self._generate_main_app_code(components, layout, theme, css))
+            # Clean and format the generated code
+            generated_code = self._clean_generated_code(generated_code)
+            return CodeFormatter.format_code(generated_code)
             
-            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_imports(self, components: List[Dict]) -> str:
-        """Generate necessary import statements"""
-        imports = ["import gradio as gr"]
-        
-        # 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 = []
+            raise GenerationError(f"Error generating code: {str(e)}")
+
+    def _clean_generated_code(self, code: str) -> str:
+        """Clean and format generated code"""
+        # Extract code between triple backticks if present
+        if "```python" in code:
+            code = code.split("```python")[1].split("```")[0]
+        elif "```" in code:
+            code = code.split("```")[1].split("```")[0]
         
-        # Add processing functions based on component types
-        processing_functions = set()
-        for component in components:
-            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(helper_functions + sorted(list(processing_functions)))
-
-    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 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)
+        code = code.strip()
+        return CodeFormatter.cleanup_code(code)
+
+    def find_similar_template(
+        self,
+        screenshot: Optional[Image.Image],
+        description: str
+    ) -> Tuple[str, Template]:
+        """Find most similar template based on image and description"""
+        try:
+            # Get embeddings
+            text_embedding = self.encode_text(description)
             
-            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 event handlers
-        if len(component_vars) > 1:
-            code_lines.extend(self._generate_event_handlers(component_vars))
-
-        # Add launch code
-        code_lines.extend([
-            "\n# Launch the application",
-            "if __name__ == \"__main__\":",
-            "    demo.launch()"
-        ])
-
-        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"    )"
+            if screenshot:
+                img_embedding = self.encode_image(screenshot)
+                query_embedding = np.concatenate([
+                    img_embedding.flatten(),
+                    text_embedding
+                ])
+            else:
+                # If no image, duplicate text embedding to match dimensions
+                query_embedding = np.concatenate([
+                    text_embedding,
+                    text_embedding
                 ])
-
-        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.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}")
+            # Search in vector store
+            D, I = self.vector_store.search(
+                np.array([query_embedding]),
+                k=1
+            )
+            
+            # Get template name from index
+            template_names = list(self.template_embeddings.keys())
+            template_name = template_names[I[0][0]]
+            
+            # Load template
+            template_path = TEMPLATE_DIR / f"{template_name}.json"
+            with open(template_path, 'r') as f:
+                template_data = json.load(f)
+                template = Template(**template_data)
+            
+            return template_name, template
             
-            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"""
+            raise ModelError(f"Error finding similar template: {str(e)}")
+
+    def generate_interface(
+        self,
+        screenshot: Optional[Image.Image],
+        description: str
+    ) -> str:
+        """Generate complete interface based on input"""
         try:
-            if theme not in DEFAULT_THEMES:
-                raise ValueError(f"Invalid theme: {theme}")
+            # Find similar template
+            template_name, template = self.find_similar_template(
+                screenshot,
+                description
+            )
+            
+            # Generate customized code
+            custom_code = self.generate_code(
+                description,
+                template.code
+            )
+            
+            return custom_code
             
-            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
+            raise GenerationError(f"Error generating interface: {str(e)}")
 
-    def generate_app_code(self) -> str:
-        """Generate the complete application code"""
+    def cleanup(self):
+        """Cleanup resources"""
         try:
-            return self.code_generator.generate_app_code(
-                self.current_app["components"],
-                self.current_app["layout"],
-                self.current_app["theme"],
-                self.current_app["css"]
-            )
+            # Save template embeddings
+            self.save_template_embeddings()
+            
+            # Unload models
+            self.model_manager.unload_model("code_generator")
+            self.model_manager.unload_model("image_processor")
+            
+            # Clear CUDA cache
+            torch.cuda.empty_cache()
+            
         except Exception as e:
-            error_msg = f"Error generating app code: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return ""
+            logger.error(f"Error during cleanup: {e}")
 
-    def preview_app(self) -> Optional[gr.Blocks]:
-        """Generate and preview the current application"""
+class TemplateManager:
+    """Manages Gradio interface templates"""
+    
+    def __init__(self, template_dir: Path = TEMPLATE_DIR):
+        self.template_dir = template_dir
+        self.template_dir.mkdir(exist_ok=True)
+        self.templates: Dict[str, Template] = {}
+        self.load_templates()
+
+    def load_templates(self):
+        """Load all templates from directory"""
         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)
+            # Load built-in templates
+            self.templates.update(self._get_builtin_templates())
             
-            if result.returncode != 0:
-                raise ValueError(f"Error executing code: {result.stderr}")
-
-            return True
+            # Load custom templates
+            for template_file in self.template_dir.glob("*.json"):
+                try:
+                    with open(template_file, 'r', encoding='utf-8') as f:
+                        template_data = json.load(f)
+                        name = template_file.stem
+                        self.templates[name] = Template(**template_data)
+                except Exception as e:
+                    logger.error(f"Error loading template {template_file}: {e}")
+                    
         except Exception as e:
-            error_msg = f"Error previewing app: {str(e)}"
-            logger.error(error_msg)
-            self.error_log.append(error_msg)
-            return None
+            logger.error(f"Error loading templates: {e}")
 
-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")
-                
-                with gr.Tabs() as tabs:
-                    # Component Builder Tab
-                    with gr.TabItem("🔧 Builder"):
-                        self._create_builder_tab()
+    def _get_builtin_templates(self) -> Dict[str, Template]:
+        """Get built-in templates"""
+        return {
+            "image_classifier": Template(
+                code="""
+                import gradio as gr
+                import numpy as np
+                from PIL import Image
+
+                def classify_image(image):
+                    if image is None:
+                        return {"error": 1.0}
+                    # Add classification logic here
+                    return {"class1": 0.8, "class2": 0.2}
+
+                with gr.Blocks(theme=gr.themes.Soft()) as demo:
+                    gr.Markdown("# Image Classifier")
+                    with gr.Row():
+                        with gr.Column():
+                            input_image = gr.Image(type="pil")
+                            classify_btn = gr.Button("Classify")
+                        with gr.Column():
+                            output_labels = gr.Label()
                     
-                    # Code Editor Tab
-                    with gr.TabItem("📝 Code"):
-                        self._create_code_tab()
+                    classify_btn.click(
+                        fn=classify_image,
+                        inputs=input_image,
+                        outputs=output_labels
+                    )
+
+                if __name__ == "__main__":
+                    demo.launch()
+                """,
+                description="Basic image classification interface",
+                components=["Image", "Button", "Label"],
+                metadata={"category": "computer_vision"}
+            ),
+            
+            "text_analyzer": Template(
+                code="""
+                import gradio as gr
+                import numpy as np
+
+                def analyze_text(text, options):
+                    if not text:
+                        return "Please enter some text"
                     
-                    # Preview Tab
-                    with gr.TabItem("👁️ Preview"):
-                        self._create_preview_tab()
+                    results = []
+                    if "word_count" in options:
+                        results.append(f"Word count: {len(text.split())}")
+                    if "char_count" in options:
+                        results.append(f"Character count: {len(text)}")
+                    if "sentiment" in options:
+                        # Add sentiment analysis logic here
+                        results.append("Sentiment: Neutral")
                     
-                    # AI Assistant Tab
-                    with gr.TabItem("🤖 AI Assistant"):
-                        self._create_ai_tab()
+                    return "\\n".join(results)
+
+                with gr.Blocks(theme=gr.themes.Soft()) as demo:
+                    gr.Markdown("# Text Analysis Tool")
+                    with gr.Row():
+                        with gr.Column():
+                            input_text = gr.Textbox(
+                                label="Input Text",
+                                placeholder="Enter text to analyze...",
+                                lines=5
+                            )
+                            options = gr.CheckboxGroup(
+                                choices=["word_count", "char_count", "sentiment"],
+                                label="Analysis Options",
+                                value=["word_count"]
+                            )
+                            analyze_btn = gr.Button("Analyze")
+                        with gr.Column():
+                            output_text = gr.Textbox(
+                                label="Analysis Results",
+                                lines=5
+                            )
                     
-                    # 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"
-                )
-                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")
-
-        # 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"
+                    analyze_btn.click(
+                        fn=analyze_text,
+                        inputs=[input_text, options],
+                        outputs=output_text
+                    )
+
+                if __name__ == "__main__":
+                    demo.launch()
+                """,
+                description="Text analysis interface with multiple options",
+                components=["Textbox", "CheckboxGroup", "Button"],
+                metadata={"category": "nlp"}
             )
-            load_template = gr.Button("Load Template", variant="primary")
+        }
 
-        # Event handlers
-        def update_component_choices(category):
-            return gr.Dropdown(choices=list(COMPONENT_CATEGORIES[category].keys()))
+    def save_template(self, name: str, template: Template) -> bool:
+        """Save new template"""
+        try:
+            template_path = self.template_dir / f"{name}.json"
+            template_dict = {
+                "code": template.code,
+                "description": template.description,
+                "components": template.components,
+                "metadata": template.metadata,
+                "version": template.version
+            }
+            
+            with open(template_path, 'w', encoding='utf-8') as f:
+                json.dump(template_dict, f, indent=4)
+            
+            self.templates[name] = template
+            return True
+            
+        except Exception as e:
+            logger.error(f"Error saving template {name}: {e}")
+            return False
 
-        category.change(
-            update_component_choices,
-            inputs=[category],
-            outputs=[component_type]
-        )
+    def get_template(self, name: str) -> Optional[Template]:
+        """Get template by name"""
+        return self.templates.get(name)
+
+    def list_templates(self, category: Optional[str] = None) -> List[Dict[str, Any]]:
+        """List all available templates with optional category filter"""
+        templates_list = []
+        for name, template in self.templates.items():
+            if category and template.metadata.get("category") != category:
+                continue
+            templates_list.append({
+                "name": name,
+                "description": template.description,
+                "components": template.components,
+                "category": template.metadata.get("category", "general")
+            })
+        return templates_list
+
+class InterfaceAnalyzer:
+    """Analyzes Gradio interfaces"""
+    
+    @staticmethod
+    def extract_components(code: str) -> List[ComponentConfig]:
+        """Extract components from code"""
+        components = []
+        try:
+            tree = ast.parse(code)
+            for node in ast.walk(tree):
+                if isinstance(node, ast.Call):
+                    if isinstance(node.func, ast.Attribute):
+                        if hasattr(node.func.value, 'id') and node.func.value.id == 'gr':
+                            component_type = node.func.attr
+                            if hasattr(ComponentType, component_type.upper()):
+                                # Extract component properties
+                                properties = {}
+                                label = None
+                                events = []
+                                
+                                # Get properties from keywords
+                                for keyword in node.keywords:
+                                    if keyword.arg == 'label':
+                                        try:
+                                            label = ast.literal_eval(keyword.value)
+                                        except:
+                                            label = None
+                                    else:
+                                        try:
+                                            properties[keyword.arg] = ast.literal_eval(keyword.value)
+                                        except:
+                                            properties[keyword.arg] = None
+                                
+                                # Look for event handlers
+                                parent = InterfaceAnalyzer._find_parent_assign(tree, node)
+                                if parent:
+                                    events = InterfaceAnalyzer._find_component_events(tree, parent)
+                                
+                                components.append(ComponentConfig(
+                                    type=ComponentType[component_type.upper()],
+                                    label=label or component_type,
+                                    properties=properties,
+                                    events=events
+                                ))
+                                
+        except Exception as e:
+            logger.error(f"Error extracting components: {e}")
+        
+        return components
+
+    @staticmethod
+    def _find_parent_assign(tree: ast.AST, node: ast.Call) -> Optional[ast.AST]:
+        """Find the assignment node for a component"""
+        for potential_parent in ast.walk(tree):
+            if isinstance(potential_parent, ast.Assign):
+                for child in ast.walk(potential_parent.value):
+                    if child == node:
+                        return potential_parent
+        return None
 
-        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
+    @staticmethod
+    def _find_component_events(tree: ast.AST, assign_node: ast.Assign) -> List[str]:
+        """Find events attached to a component"""
+        events = []
+        component_name = assign_node.targets[0].id
+        
+        for node in ast.walk(tree):
+            if isinstance(node, ast.Call):
+                if isinstance(node.func, ast.Attribute):
+                    if hasattr(node.func.value, 'id') and node.func.value.id == component_name:
+                        events.append(node.func.attr)
+        
+        return events
 
-        add_component.click(
-            add_new_component,
-            inputs=[category, component_type],
-            outputs=[component_list]
-        )
+    @staticmethod
+    def analyze_interface_structure(code: str) -> Dict[str, Any]:
+        """Analyze interface structure"""
+        try:
+            # Extract components
+            components = InterfaceAnalyzer.extract_components(code)
+            
+            # Analyze functions
+            functions = []
+            tree = ast.parse(code)
+            for node in ast.walk(tree):
+                if isinstance(node, ast.FunctionDef):
+                    functions.append({
+                        "name": node.name,
+                        "args": [arg.arg for arg in node.args.args],
+                        "returns": InterfaceAnalyzer._get_return_type(node)
+                    })
+            
+            # Analyze dependencies
+            dependencies = set()
+            for node in ast.walk(tree):
+                if isinstance(node, ast.Import):
+                    for name in node.names:
+                        dependencies.add(name.name)
+                elif isinstance(node, ast.ImportFrom):
+                    if node.module:
+                        dependencies.add(node.module)
+            
+            return {
+                "components": [
+                    {
+                        "type": comp.type.value,
+                        "label": comp.label,
+                        "properties": comp.properties,
+                        "events": comp.events
+                    }
+                    for comp in components
+                ],
+                "functions": functions,
+                "dependencies": list(dependencies)
+            }
+            
+        except Exception as e:
+            logger.error(f"Error analyzing interface: {e}")
+            return {}
+
+    @staticmethod
+    def _get_return_type(node: ast.FunctionDef) -> str:
+        """Get function return type if specified"""
+        if node.returns:
+            return ast.unparse(node.returns)
+        return "Any"
+
+class PreviewManager:
+    """Manages interface previews"""
+    
+    def __init__(self):
+        self.current_process: Optional[subprocess.Popen] = None
+        self.preview_port = DEFAULT_PORT
+        self._lock = threading.Lock()
 
-        def update_component_properties(props_json):
+    def start_preview(self, code: str) -> Tuple[bool, str]:
+        """Start preview in a separate process"""
+        with self._lock:
             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"
+                self.stop_preview()
+                
+                # Create temporary module
+                module_path = create_temp_module(code)
+                
+                # Start new process
+                self.current_process = subprocess.Popen(
+                    ['python', module_path],
+                    stdout=subprocess.PIPE,
+                    stderr=subprocess.PIPE
                 )
-                update_code = gr.Button("Update Code")
                 
-            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"
+                # Wait for server to start
+                time.sleep(2)
+                
+                # Check if process is still running
+                if self.current_process.poll() is not None:
+                    stdout, stderr = self.current_process.communicate()
+                    error_msg = stderr.decode('utf-8')
+                    raise RuntimeError(f"Preview failed to start: {error_msg}")
+                
+                return True, f"http://localhost:{self.preview_port}"
+                
             except Exception as e:
-                return None, f"❌ Error generating code: {str(e)}"
+                return False, 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():
+    def stop_preview(self):
+        """Stop current preview process"""
+        if self.current_process:
+            self.current_process.terminate()
+            try:
+                self.current_process.wait(timeout=5)
+            except subprocess.TimeoutExpired:
+                self.current_process.kill()
+            self.current_process = None
+
+    def cleanup(self):
+        """Cleanup resources"""
+        self.stop_preview()
+        # Clean up temporary files
+        for temp_file in TEMP_DIR.glob("*.py"):
             try:
-                success = self.app_builder.preview_app()
-                if success:
-                    return "✅ Preview generated successfully"
-                return "❌ Error generating preview"
+                temp_file.unlink()
             except Exception as e:
-                return f"❌ Error: {str(e)}"
+                logger.error(f"Error deleting temporary file {temp_file}: {e}")
 
-        preview_button.click(
-            generate_preview,
-            outputs=[preview_status]
-        )
-def create_gradio_interface():
-    """Create Gradio interface for the code executor"""
+class GradioInterface:
+    """Main Gradio interface builder class"""
     
-    def process_code(code: str, autonomy_level: int) -> Dict:
-        executor.set_autonomy_level(autonomy_level)
-        result = executor.execute_code(code)
-        return {
-            "Success": result["success"],
-            "Output": result["output"],
-            "Error": result["error"] or "None",
-            "Fixed Code": result["fixed_code"] or code,
-            "Iterations": result["iterations"]
-        }
+    def __init__(self):
+        """Initialize the Gradio interface builder"""
+        try:
+            self.rag_system = MultimodalRAG()
+            self.template_manager = TemplateManager()
+            self.preview_manager = PreviewManager()
+            self.current_code = ""
+            self.error_log = []
+            self.interface = self._create_interface()
+            
+        except Exception as e:
+            logger.error(f"Error initializing GradioInterface: {str(e)}")
+            raise
 
-    with gr.Blocks() as interface:
-        gr.Markdown("# 🤖 Autonomous Code Executor")
-        
-        with gr.Tab("Code Execution"):
-            code_input = gr.Code(
-                label="Code Input",
-                language="python",
-                lines=10,
-                placeholder="Enter your Python code here..."
-            )
+    def _create_interface(self) -> gr.Blocks:
+        """Create the main Gradio interface"""
+        with gr.Blocks(theme=gr.themes.Soft()) as interface:
+            gr.Markdown("# 🚀 Gradio Interface Builder")
             
-            autonomy_slider = gr.Slider(
-                minimum=0,
-                maximum=10,
-                step=1,
-                value=5,
-                label="Autonomy Level",
-                info="0: No fixes, 5: Balanced, 10: Fully autonomous"
+            with gr.Tabs():
+                # Design Tab
+                with gr.Tab("Design"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            # Input Section
+                            gr.Markdown("## 📝 Design Your Interface")
+                            description = gr.Textbox(
+                                label="Description",
+                                placeholder="Describe the interface you want to create...",
+                                lines=3
+                            )
+                            screenshot = gr.Image(
+                                label="Screenshot (optional)",
+                                type="pil"
+                            )
+                            
+                            with gr.Row():
+                                generate_btn = gr.Button("🎨 Generate Interface", variant="primary")
+                                clear_btn = gr.Button("🗑️ Clear")
+                            
+                            # Template Selection
+                            gr.Markdown("### 📚 Templates")
+                            template_dropdown = gr.Dropdown(
+                                choices=self._get_template_choices(),
+                                label="Base Template",
+                                interactive=True
+                            )
+                        
+                        with gr.Column(scale=3):
+                            # Code Editor
+                            code_editor = gr.Code(
+                                label="Generated Code",
+                                language="python",
+                                interactive=True
+                            )
+                            
+                            with gr.Row():
+                                validate_btn = gr.Button("✅ Validate")
+                                format_btn = gr.Button("📋 Format")
+                                save_template_btn = gr.Button("💾 Save as Template")
+                            
+                            validation_output = gr.Markdown()
+                
+                # Preview Tab
+                with gr.Tab("Preview"):
+                    with gr.Row():
+                        preview_btn = gr.Button("▶️ Start Preview", variant="primary")
+                        stop_preview_btn = gr.Button("⏹️ Stop Preview")
+                    
+                    preview_frame = gr.HTML(
+                        label="Preview",
+                        value="<p>Click 'Start Preview' to see your interface</p>"
+                    )
+                    preview_status = gr.Markdown()
+                
+                # Analysis Tab
+                with gr.Tab("Analysis"):
+                    analyze_btn = gr.Button("🔍 Analyze Interface")
+                    
+                    with gr.Row():
+                        with gr.Column():
+                            gr.Markdown("### 🧩 Components")
+                            components_json = gr.JSON(label="Detected Components")
+                        
+                        with gr.Column():
+                            gr.Markdown("### 🔄 Functions")
+                            functions_json = gr.JSON(label="Interface Functions")
+                    
+                    with gr.Row():
+                        with gr.Column():
+                            gr.Markdown("### 📦 Dependencies")
+                            dependencies_json = gr.JSON(label="Required Dependencies")
+                        
+                        with gr.Column():
+                            gr.Markdown("### 📄 Requirements")
+                            requirements_text = gr.Textbox(
+                                label="requirements.txt",
+                                lines=10
+                            )
+
+            # Event handlers
+            generate_btn.click(
+                fn=self._generate_interface,
+                inputs=[description, screenshot, template_dropdown],
+                outputs=[code_editor, validation_output]
             )
             
-            execute_btn = gr.Button("Execute Code", variant="primary")
-            
-            output_json = gr.JSON(label="Execution Result")
-            
-            execute_btn.click(
-                fn=process_code,
-                inputs=[code_input, autonomy_slider],
-                outputs=output_json
+            clear_btn.click(
+                fn=self._clear_interface,
+                outputs=[description, screenshot, code_editor, validation_output]
             )
             
-        with gr.Tab("Settings"):
-            gr.Markdown("""
-            ### Configuration
-            - Model: bigcode/starcoder
-            - Embedding Model: sentence-transformers/all-mpnet-base-v2
-            - Temperature: 0.1
-            - Max Length: 2048
-            """)
-            
-        with gr.Tab("Help"):
-            gr.Markdown("""
-            ### How to Use
-            1. Enter your Python code in the Code Input area
-            2. Adjust the Autonomy Level:
-               - 0: No automatic fixes
-               - 5: Balanced approach
-               - 10: Fully autonomous operation
-            3. Click "Execute Code" to run
-            
-            ### Features
-            - Automatic code analysis
-            - Error detection and fixing
-            - Code formatting
-            - Syntax validation
-            """)
-    
-    return interface
-
-def create_gradio_interface():
-    """Create Gradio interface for the code executor"""
-    
-    def process_code(code: str, autonomy_level: int) -> Dict:
-        executor.set_autonomy_level(autonomy_level)
-        result = executor.execute_code(code)
-        return {
-            "Success": result["success"],
-            "Output": result["output"],
-            "Error": result["error"] or "None",
-            "Fixed Code": result["fixed_code"] or code,
-            "Iterations": result["iterations"]
-        }
-
-    with gr.Blocks() as interface:
-        gr.Markdown("# 🤖 Autonomous Code Executor")
-        
-        with gr.Tab("Code Execution"):
-            # Corrected Code component initialization
-            code_input = gr.Code(
-                label="Code Input",
-                language="python",
-                lines=10,
-                value="# Enter your Python code here..."  # Using value instead of placeholder
+            validate_btn.click(
+                fn=self._validate_code,
+                inputs=[code_editor],
+                outputs=[validation_output]
             )
             
-            autonomy_slider = gr.Slider(
-                minimum=0,
-                maximum=10,
-                step=1,
-                value=5,
-                label="Autonomy Level",
-                info="0: No fixes, 5: Balanced, 10: Fully autonomous"
+            format_btn.click(
+                fn=self._format_code,
+                inputs=[code_editor],
+                outputs=[code_editor]
             )
             
-            execute_btn = gr.Button("Execute Code", variant="primary")
-            output_json = gr.JSON(label="Execution Result")
-            
-            # Add example inputs
-            gr.Examples(
-                examples=[
-                    ["def hello():\n    print('Hello, World!')", 5],
-                    ["for i in range(5):\n    print(i)", 5]
-                ],
-                inputs=[code_input, autonomy_slider],
-                outputs=output_json,
-                label="Example Code"
+            save_template_btn.click(
+                fn=self._save_as_template,
+                inputs=[code_editor, description],
+                outputs=[template_dropdown, validation_output]
             )
             
-            execute_btn.click(
-                fn=process_code,
-                inputs=[code_input, autonomy_slider],
-                outputs=output_json
+            preview_btn.click(
+                fn=self._start_preview,
+                inputs=[code_editor],
+                outputs=[preview_frame, preview_status]
             )
             
-        with gr.Tab("Settings"):
-            gr.Markdown("""
-            ### Configuration
-            - Model: bigcode/starcoder
-            - Embedding Model: sentence-transformers/all-mpnet-base-v2
-            - Temperature: 0.1
-            - Max Length: 2048
-            """)
+            stop_preview_btn.click(
+                fn=self._stop_preview,
+                outputs=[preview_frame, preview_status]
+            )
             
-        with gr.Tab("Help"):
-            gr.Markdown("""
-            ### How to Use
-            1. Enter your Python code in the Code Input area
-            2. Adjust the Autonomy Level:
-               - 0: No automatic fixes
-               - 5: Balanced approach
-               - 10: Fully autonomous operation
-            3. Click "Execute Code" to run
+            analyze_btn.click(
+                fn=self._analyze_interface,
+                inputs=[code_editor],
+                outputs=[
+                    components_json,
+                    functions_json,
+                    dependencies_json,
+                    requirements_text
+                ]
+            )
             
-            ### Features
-            - Automatic code analysis
-            - Error detection and fixing
-            - Code formatting
-            - Syntax validation
-            """)
-    
-    return interface
+            # Update template dropdown when templates change
+            template_dropdown.change(
+                fn=self._load_template,
+                inputs=[template_dropdown],
+                outputs=[code_editor]
+            )
 
-# Create Gradio interface
-interface = create_gradio_interface()
+        return interface
 
-if __name__ == "__main__":
-    # Run Flask and Gradio in separate threads
-    flask_thread = threading.Thread(target=run_flask, daemon=True)
-    gradio_thread = threading.Thread(target=run_gradio, daemon=True)
-    
-    flask_thread.start()
-    gradio_thread.start()
-    
-    # Keep the main thread alive
-    try:
-        while True:
-            time.sleep(1)
-    except KeyboardInterrupt:
-        print("Shutting down...")
-    class ChatState:
-        def __init__(self):
-            self.current_step = 0
-            self.command = None
-            self.context = {}
+    def _get_template_choices(self) -> List[str]:
+        """Get list of available templates"""
+        templates = self.template_manager.list_templates()
+        return [""] + [t["name"] for t in templates]
+
+    def _generate_interface(
+        self,
+        description: str,
+        screenshot: Optional[Image.Image],
+        template_name: str
+    ) -> Tuple[str, str]:
+        """Generate interface code"""
+        try:
+            if template_name:
+                template = self.template_manager.get_template(template_name)
+                if template:
+                    code = self.rag_system.generate_code(description, template.code)
+                else:
+                    raise ValueError(f"Template {template_name} not found")
+            else:
+                code = self.rag_system.generate_interface(screenshot, description)
             
-        def reset(self):
-            self.current_step = 0
-            self.command = None
-            self.context = {}
-
-    chat_state = ChatState()
-
-    def get_next_question(command, step, previous_answer=None):
-        """Generate next question based on command and current step"""
-        questions = {
-            "create": [
-                "Do you need user input components?",
-                "Do you need data processing functionality?",
-                "Would you like to add styling/themes?"
-            ],
-            "component": [
-                "Is this for user input?",
-                "Do you need media handling (image/audio/video)?",
-                "Should the component have real-time updates?"
-            ],
-            "layout": [
-                "Do you want a multi-tab layout?",
-                "Do you need responsive design?",
-                "Should components be arranged horizontally?"
-            ],
-            "style": [
-                "Do you want a dark theme?",
-                "Do you need custom CSS?",
-                "Should components have rounded corners?"
-            ],
-            "data": [
-                "Will you be handling file uploads?",
-                "Do you need data visualization?",
-                "Should data be stored persistently?"
-            ],
-            "api": [
-                "Do you need authentication for API?",
-                "Will you be handling JSON data?",
-                "Do you need error handling?"
-            ],
-            "auth": [
-                "Do you need user registration?",
-                "Should sessions be persistent?",
-                "Do you need role-based access?"
-            ],
-            "file": [
-                "Will you handle multiple file types?",
-                "Do you need file preprocessing?",
-                "Should files be stored locally?"
-            ],
-            "viz": [
-                "Do you need interactive plots?",
-                "Will you use real-time data?",
-                "Do you need multiple chart types?"
-            ],
-            "db": [
-                "Do you need real-time updates?",
-                "Will you use SQL database?",
-                "Do you need data caching?"
-            ]
-        }
-        
-        if step < len(questions[command]):
-            return questions[command][step]
-        return None
+            self.current_code = code
+            return code, "✅ Code generated successfully"
+            
+        except Exception as e:
+            error_msg = f"❌ Error generating interface: {str(e)}"
+            logger.error(error_msg)
+            return "", error_msg
 
-    def generate_code(command, context):
-        """Generate code based on collected context"""
-        base_templates = {
-            "create": """
-```python
-import gradio as gr
+    def _clear_interface(self) -> Tuple[str, None, str, str]:
+        """Clear all inputs and outputs"""
+        self.current_code = ""
+        return "", None, "", ""
 
-def process_input({input_params}):
-    {processing_logic}
-    return result
+    def _validate_code(self, code: str) -> str:
+        """Validate code syntax"""
+        is_valid, message = validate_code(code)
+        return f"{'✅' if is_valid else '❌'} {message}"
 
-with gr.Blocks({style_params}) as demo:
-    {components}
-    {layout}
-    {event_handlers}
+    def _format_code(self, code: str) -> str:
+        """Format code"""
+        try:
+            return CodeFormatter.format_code(code)
+        except Exception as e:
+            logger.error(f"Error formatting code: {e}")
+            return code
 
-demo.launch()
-```""",
-            "component": """
-```python
-{import_statements}
+    def _save_as_template(self, code: str, description: str) -> Tuple[List[str], str]:
+        """Save current code as template"""
+        try:
+            # Generate template name
+            base_name = "custom_template"
+            counter = 1
+            name = base_name
+            while self.template_manager.get_template(name):
+                name = f"{base_name}_{counter}"
+                counter += 1
+            
+            # Create template
+            template = Template(
+                code=code,
+                description=description,
+                components=InterfaceAnalyzer.extract_components(code),
+                metadata={"category": "custom"}
+            )
+            
+            # Save template
+            if self.template_manager.save_template(name, template):
+                return self._get_template_choices(), f"✅ Template saved as {name}"
+            else:
+                raise Exception("Failed to save template")
+            
+        except Exception as e:
+            error_msg = f"❌ Error saving template: {str(e)}"
+            logger.error(error_msg)
+            return self._get_template_choices(), error_msg
 
-{component_definition}
+    def _start_preview(self, code: str) -> Tuple[str, str]:
+        """Start interface preview"""
+        success, result = self.preview_manager.start_preview(code)
+        if success:
+            return f'<iframe src="{result}" width="100%" height="600px"></iframe>', "✅ Preview started"
+        else:
+            return "", f"❌ Preview failed: {result}"
 
-{event_handling}
-```""",
-            # Add other base templates for each command...
-        }
+    def _stop_preview(self) -> Tuple[str, str]:
+        """Stop interface preview"""
+        self.preview_manager.stop_preview()
+        return "<p>Preview stopped</p>", "✅ Preview stopped"
 
-        # Customize template based on context
-        if command == "create":
-            input_params = "user_input"
-            processing_logic = "result = user_input"
-            style_params = "theme=gr.themes.Default()" if not context.get("dark_theme") else "theme=gr.themes.Monochrome()"
-            components = "input_component = gr.Textbox(label='Input')\noutput_component = gr.Textbox(label='Output')"
-            layout = "gr.Button('Process')"
-            event_handlers = "input_component.change(process_input, inputs=input_component, outputs=output_component)"
-
-        return base_templates[command].format(
-            input_params=input_params,
-            processing_logic=processing_logic,
-            style_params=style_params,
-            components=components,
-            layout=layout,
-            event_handlers=event_handlers
-        )
+    def _load_template(self, template_name: str) -> str:
+        """Load selected template"""
+        if not template_name:
+            return ""
+        
+        template = self.template_manager.get_template(template_name)
+        if template:
+            return template.code
+        return ""
 
-    def process_chat(command, answer, history):
-        """Process chat interaction"""
+    def _analyze_interface(self, code: str) -> Tuple[Dict, Dict, Dict, str]:
+        """Analyze interface structure"""
         try:
-            if command and chat_state.command != command:
-                # New command started
-                chat_state.reset()
-                chat_state.command = command
-                question = get_next_question(command, 0)
-                return history + [[None, question]], True, question
-
-            if answer:
-                # Store answer and get next question
-                chat_state.context[f"step_{chat_state.current_step}"] = answer == "Yes"
-                chat_state.current_step += 1
-                
-                next_question = get_next_question(chat_state.command, chat_state.current_step)
-                
-                if next_question:
-                    # More questions to ask
-                    return history + [[answer, next_question]], True, next_question
-                else:
-                    # Generate final code
-                    code = generate_code(chat_state.command, chat_state.context)
-                    return history + [[answer, f"Here's your code:\n{code}"]], False, None
-
-            return history, True, None
-
+            analysis = InterfaceAnalyzer.analyze_interface_structure(code)
+            
+            # Generate requirements.txt
+            dependencies = analysis.get("dependencies", [])
+            requirements = CodeGenerator.generate_requirements(dependencies)
+            
+            return (
+                analysis.get("components", {}),
+                analysis.get("functions", {}),
+                {"dependencies": dependencies},
+                requirements
+            )
+            
         except Exception as e:
-            error_msg = f"Error: {str(e)}"
-            logger.error(error_msg)
-            return history + [[None, error_msg]], False, None
-
-    def reset_chat():
-        """Reset chat state and history"""
-        chat_state.reset()
-        return None, None, False, None
-
-    # Set up event handlers
-    send_btn.click(
-        process_chat,
-        inputs=[command_input, user_input, chat_history],
-        outputs=[chat_history, user_input, user_input]
-    )
-    
-    restart_btn.click(
-        reset_chat,
-        outputs=[chat_history, command_input, user_input, user_input]
-    )
-    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"]
-                )
+            logger.error(f"Error analyzing interface: {e}")
+            return {}, {}, {}, ""
 
-        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)}"
+    def launch(self, **kwargs):
+        """Launch the interface"""
+        try:
+            self.interface.launch(**kwargs)
+        finally:
+            self.cleanup()
 
-        update_settings.click(
-            update_app_settings,
-            inputs=[theme_dropdown, layout_dropdown, css_editor],
-            outputs=[gr.Markdown()]
-        )
+    def cleanup(self):
+        """Cleanup resources"""
+        try:
+            self.preview_manager.cleanup()
+            self.rag_system.cleanup()
+        except Exception as e:
+            logger.error(f"Error during cleanup: {e}")
 
 def main():
-    """Main execution function"""
+    """Main entry point"""
     try:
+        # Set up logging
+        logging.basicConfig(
+            level=logging.INFO,
+            format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+        )
+        
+        # Create and launch interface
         interface = GradioInterface()
-        demo = interface.create_interface()
-        demo.launch(
-            server_name="0.0.0.0",
-            server_port=7860,
+        interface.launch(
             share=True,
-            debug=True
+            debug=True,
+            server_name="0.0.0.0"
         )
+        
     except Exception as e:
-        logger.error(f"Application failed to start: {str(e)}")
+        logger.error(f"Application error: {e}")
         raise
 
 if __name__ == "__main__":