Create app.py

app.py

@@ -0,0 +1,335 @@
+import gradio as gr
+import requests
+import json
+import re
+from typing import Dict, List, Tuple
+import os
+
+class UIDesignAgent:
+    def __init__(self, api_key: str):
+        self.api_key = api_key
+        self.base_url = "https://openrouter.ai/api/v1/chat/completions"
+        self.design_system = {}
+        self.color_palette = {}
+        self.typography = {}
+        
+    def extract_design_system(self, prompt: str) -> Dict:
+        """Extract and maintain consistent design system across pages"""
+        
+        system_prompt = """You are an expert UI/UX designer. Extract and define a consistent design system including:
+        1. Color Palette (primary, secondary, accent, neutral colors)
+        2. Typography (font families, sizes, weights)
+        3. Spacing system
+        4. Component styles
+        
+        Return as JSON format."""
+        
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+        
+        data = {
+            "model": "google/gemini-pro",
+            "messages": [
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": f"Create a design system for: {prompt}"}
+            ]
+        }
+        
+        try:
+            response = requests.post(self.base_url, headers=headers, json=data)
+            result = response.json()
+            design_system_text = result['choices'][0]['message']['content']
+            
+            # Extract JSON from response
+            json_match = re.search(r'\{.*\}', design_system_text, re.DOTALL)
+            if json_match:
+                self.design_system = json.loads(json_match.group())
+            
+            return self.design_system
+        except Exception as e:
+            print(f"Error extracting design system: {e}")
+            return self.get_default_design_system()
+    
+    def get_default_design_system(self) -> Dict:
+        """Return default design system"""
+        return {
+            "colors": {
+                "primary": "#2563eb",
+                "secondary": "#7c3aed",
+                "accent": "#06b6d4",
+                "background": "#ffffff",
+                "surface": "#f8fafc",
+                "text": "#1e293b",
+                "textLight": "#64748b"
+            },
+            "typography": {
+                "fontFamily": "'Inter', -apple-system, sans-serif",
+                "h1": "48px",
+                "h2": "36px",
+                "h3": "24px",
+                "body": "16px",
+                "small": "14px"
+            },
+            "spacing": {
+                "xs": "4px",
+                "sm": "8px",
+                "md": "16px",
+                "lg": "24px",
+                "xl": "32px"
+            }
+        }
+    
+    def generate_page_html(self, page_description: str, page_number: int) -> str:
+        """Generate HTML for a specific page using consistent design system"""
+        
+        design_context = f"""
+        Use this exact design system for consistency:
+        Colors: {json.dumps(self.design_system.get('colors', {}))}
+        Typography: {json.dumps(self.design_system.get('typography', {}))}
+        Spacing: {json.dumps(self.design_system.get('spacing', {}))}
+        """
+        
+        system_prompt = f"""You are an expert UI developer. Create a complete HTML page with inline CSS.
+        {design_context}
+        
+        Rules:
+        1. Use ONLY the provided color values
+        2. Use ONLY the provided typography settings
+        3. Create responsive, modern design
+        4. Include all CSS inline
+        5. Make it interactive with hover effects
+        6. Ensure consistency with the design system"""
+        
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+        
+        data = {
+            "model": "google/gemini-pro",
+            "messages": [
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": f"Create page {page_number}: {page_description}. Return ONLY the HTML code."}
+            ]
+        }
+        
+        try:
+            response = requests.post(self.base_url, headers=headers, json=data)
+            result = response.json()
+            html_content = result['choices'][0]['message']['content']
+            
+            # Extract HTML from code blocks if present
+            html_match = re.search(r'```html\n(.*?)\n```', html_content, re.DOTALL)
+            if html_match:
+                html_content = html_match.group(1)
+            
+            # Inject design system CSS
+            html_content = self.inject_design_system_css(html_content)
+            
+            return html_content
+        except Exception as e:
+            return f"<div style='color: red;'>Error generating page: {str(e)}</div>"
+    
+    def inject_design_system_css(self, html: str) -> str:
+        """Inject consistent CSS variables into HTML"""
+        
+        css_variables = f"""
+        <style>
+            :root {{
+                --primary: {self.design_system.get('colors', {}).get('primary', '#2563eb')};
+                --secondary: {self.design_system.get('colors', {}).get('secondary', '#7c3aed')};
+                --accent: {self.design_system.get('colors', {}).get('accent', '#06b6d4')};
+                --background: {self.design_system.get('colors', {}).get('background', '#ffffff')};
+                --surface: {self.design_system.get('colors', {}).get('surface', '#f8fafc')};
+                --text: {self.design_system.get('colors', {}).get('text', '#1e293b')};
+                --text-light: {self.design_system.get('colors', {}).get('textLight', '#64748b')};
+                --font-family: {self.design_system.get('typography', {}).get('fontFamily', 'Inter, sans-serif')};
+            }}
+            
+            * {{
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }}
+            
+            body {{
+                font-family: var(--font-family);
+                background-color: var(--background);
+                color: var(--text);
+                line-height: 1.6;
+            }}
+            
+            .primary-btn {{
+                background-color: var(--primary);
+                color: white;
+                padding: 12px 24px;
+                border: none;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }}
+            
+            .primary-btn:hover {{
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+            }}
+        </style>
+        """
+        
+        # Insert CSS after <head> tag or at the beginning
+        if '<head>' in html:
+            html = html.replace('<head>', f'<head>{css_variables}')
+        else:
+            html = css_variables + html
+            
+        return html
+    
+    def generate_multi_page_design(self, prompt: str) -> Tuple[List[str], Dict]:
+        """Generate multiple pages with consistent design"""
+        
+        # First, extract pages from prompt
+        pages = self.extract_pages_from_prompt(prompt)
+        
+        # Extract and set design system
+        self.design_system = self.extract_design_system(prompt)
+        
+        # Generate HTML for each page
+        generated_pages = []
+        for i, page_desc in enumerate(pages, 1):
+            html = self.generate_page_html(page_desc, i)
+            generated_pages.append(html)
+        
+        return generated_pages, self.design_system
+    
+    def extract_pages_from_prompt(self, prompt: str) -> List[str]:
+        """Extract individual page descriptions from prompt"""
+        
+        system_prompt = """Extract individual page descriptions from the user's request.
+        Return as a JSON array of page descriptions."""
+        
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+        
+        data = {
+            "model": "google/gemini-pro",
+            "messages": [
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": prompt}
+            ]
+        }
+        
+        try:
+            response = requests.post(self.base_url, headers=headers, json=data)
+            result = response.json()
+            pages_text = result['choices'][0]['message']['content']
+            
+            # Extract JSON array
+            json_match = re.search(r'\[.*\]', pages_text, re.DOTALL)
+            if json_match:
+                pages = json.loads(json_match.group())
+                return pages
+            else:
+                # Default to single page if extraction fails
+                return [prompt]
+        except Exception as e:
+            print(f"Error extracting pages: {e}")
+            return [prompt]
+
+# Gradio Interface
+def create_ui_design(prompt: str, api_key: str):
+    """Main function to create UI designs"""
+    
+    if not api_key:
+        return ["<div style='color: red;'>Please provide OpenRouter API key</div>"], "No design system"
+    
+    agent = UIDesignAgent(api_key)
+    pages, design_system = agent.generate_multi_page_design(prompt)
+    
+    # Format design system for display
+    design_system_display = json.dumps(design_system, indent=2)
+    
+    # Ensure we have at least 3 pages for the interface
+    while len(pages) < 3:
+        pages.append("<div style='padding: 20px;'>Page placeholder</div>")
+    
+    return pages[0], pages[1] if len(pages) > 1 else "", pages[2] if len(pages) > 2 else "", design_system_display
+
+# Create Gradio interface
+with gr.Blocks(title="AI UI Designer - Stitch Clone", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("""
+    # 🎨 AI UI Designer (Stitch-like)
+    ### Generate consistent multi-page website designs with AI
+    
+    This tool ensures consistent colors, typography, and styling across all generated pages.
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            api_key_input = gr.Textbox(
+                label="OpenRouter API Key",
+                placeholder="Enter your OpenRouter API key",
+                type="password"
+            )
+            
+            prompt_input = gr.Textbox(
+                label="Design Prompt",
+                placeholder="Describe your multi-page website (e.g., 'Create a 3-page website for a tech startup with: 1) Landing page with hero section, 2) About page with team section, 3) Contact page with form')",
+                lines=5
+            )
+            
+            generate_btn = gr.Button("🚀 Generate Design", variant="primary")
+            
+            design_system_output = gr.Code(
+                label="Design System",
+                language="json",
+                lines=10
+            )
+        
+        with gr.Column(scale=2):
+            with gr.Tabs():
+                with gr.TabItem("Page 1"):
+                    page1_output = gr.HTML(label="Page 1 Preview")
+                
+                with gr.TabItem("Page 2"):
+                    page2_output = gr.HTML(label="Page 2 Preview")
+                
+                with gr.TabItem("Page 3"):
+                    page3_output = gr.HTML(label="Page 3 Preview")
+    
+    gr.Markdown("""
+    ### Features:
+    - ✅ Consistent color scheme across all pages
+    - ✅ Unified typography and spacing
+    - ✅ Responsive design
+    - ✅ Modern UI components
+    - ✅ Design system extraction
+    
+    ### How to use:
+    1. Get your API key from [OpenRouter](https://openrouter.ai/)
+    2. Describe your multi-page website
+    3. Click Generate Design
+    4. View consistent designs across all pages
+    """)
+    
+    generate_btn.click(
+        fn=create_ui_design,
+        inputs=[prompt_input, api_key_input],
+        outputs=[page1_output, page2_output, page3_output, design_system_output]
+    )
+    
+    # Example prompts
+    gr.Examples(
+        examples=[
+            ["Create a 3-page SaaS website: 1) Landing page with pricing cards, 2) Features page with grid layout, 3) Contact page with form"],
+            ["Design a portfolio website: 1) Home with hero section, 2) Projects gallery page, 3) About me page with skills"],
+            ["Build an e-commerce site: 1) Homepage with product grid, 2) Product detail page, 3) Shopping cart page"],
+        ],
+        inputs=prompt_input
+    )
+
+if __name__ == "__main__":
+    demo.launch()