Update app.py

app.py

@@ -1,1412 +1,601 @@
 import gradio as gr
-import torch
-import spaces
-import json
-import asyncio
-from typing import Dict, List, Optional, Tuple
-import aiohttp
-from PIL import Image
-import numpy as np
 import base64
 import io
-from datetime import datetime
+import json
 import os
-import requests
-from urllib.parse import quote
-from transformers import (
-    AutoProcessor, 
-    AutoModelForCausalLM,
-    AutoTokenizer,
-    pipeline
-)
 import re
+from typing import List, Dict, Tuple, Optional
 
-# API Configurations
-NEBIUS_API_ENDPOINT = os.getenv("NEBIUS_API_ENDPOINT", "https://api.nebius.ai/v1")
-NEBIUS_API_KEY = os.getenv("NEBIUS_API_KEY", "")
-UNSPLASH_ACCESS_KEY = os.getenv("UNSPLASH_ACCESS_KEY", "demo")
-
-# Model configurations - Different from reference app
-VISION_MODEL = "microsoft/Florence-2-large"  # Alternative to Qwen2.5-VL
-CODE_MODEL = "Phind/Phind-CodeLlama-34B-v2"  # Alternative to DeepSeek-V3
-
-class MCPWebsiteGenerator:
-    """MCP-Compatible Website Generator via Nebius AI"""
-    
-    def __init__(self):
-        self.device = "cuda" if torch.cuda.is_available() else "cpu"
-        self.mcp_client = None
-        self.session_id = None
-        self.tools = {
-            "analyze_image": self.analyze_image,
-            "generate_html_code": self.generate_html_code,
-            "create_codesandbox": self.create_codesandbox,
-            "screenshot_to_code": self.screenshot_to_code
-        }
-        self.init_mcp()
-        
-    def init_mcp(self):
-        """Initialize MCP client configuration"""
-        self.mcp_config = {
-            "protocol": "MCP",
-            "version": "1.0",
-            "capabilities": {
-                "tools": list(self.tools.keys()),
-                "streaming": True,
-                "context_window": 128000
-            },
-            "models": {
-                "vision": VISION_MODEL,
-                "code": CODE_MODEL
-            }
-        }
-    
-    async def connect_mcp(self):
-        """Establish MCP connection with Nebius AI"""
-        headers = {
-            "Authorization": f"Bearer {NEBIUS_API_KEY}",
-            "Content-Type": "application/json",
-            "X-MCP-Version": "1.0"
-        }
-        
-        async with aiohttp.ClientSession() as session:
-            payload = {
-                "protocol": "MCP",
-                "config": self.mcp_config,
-                "timestamp": datetime.utcnow().isoformat()
-            }
-            
-            async with session.post(
-                f"{NEBIUS_API_ENDPOINT}/mcp/connect",
-                headers=headers,
-                json=payload
-            ) as response:
-                if response.status == 200:
-                    data = await response.json()
-                    self.session_id = data.get("session_id")
-                    return True
-                return False
-    
-    def search_unsplash(self, query: str, count: int = 6) -> List[Dict]:
-        """Search Unsplash for free stock photos"""
-        if not query:
+import numpy as np
+from PIL import Image
+from lzstring import LZString
+from openai import OpenAI
+
+# Optional deps used at runtime if available
+try:
+    import requests
+except Exception:
+    requests = None
+
+try:
+    from sklearn.cluster import KMeans
+    _HAS_SKLEARN = True
+except Exception:
+    _HAS_SKLEARN = False
+
+# ------------------------------------------------------------------------------
+# Configuration
+# ------------------------------------------------------------------------------
+
+NEBIUS_BASE_URL = os.getenv("NEBIUS_BASE_URL", "https://api.studio.nebius.com/v1/")
+ENV_NEBIUS_API_KEY = os.getenv("NEBIUS_API_KEY", "")
+
+# Optional Unsplash integration
+UNSPLASH_ACCESS_KEY = os.getenv("UNSPLASH_ACCESS_KEY", "")
+UNSPLASH_API_URL = "https://api.unsplash.com/search/photos"
+
+# Models (keep identical to your original requirements)
+VISION_MODEL = "Qwen/Qwen2.5-VL-72B-Instruct"
+CODE_MODEL = "deepseek-ai/DeepSeek-V3-0324"
+
+# ------------------------------------------------------------------------------
+# Utilities
+# ------------------------------------------------------------------------------
+
+def ensure_api_key(user_key: str) -> str:
+    key = (user_key or "").strip() or (ENV_NEBIUS_API_KEY or "").strip()
+    return key
+
+def image_to_base64_png(image: Image.Image) -> str:
+    buf = io.BytesIO()
+    image.save(buf, format="PNG")
+    return base64.b64encode(buf.getvalue()).decode("utf-8")
+
+def hex_from_rgb(rgb: Tuple[int, int, int]) -> str:
+    r, g, b = [int(max(0, min(255, x))) for x in rgb]
+    return f"#{r:02x}{g:02x}{b:02x}"
+
+def extract_palette(image: Image.Image, n_colors: int = 8) -> List[str]:
+    try:
+        img = image.convert("RGB").resize((200, 200))
+        arr = np.array(img).reshape(-1, 3)
+
+        if _HAS_SKLEARN and arr.shape[0] >= n_colors:
+            k = KMeans(n_clusters=n_colors, random_state=42, n_init=10)
+            labels = k.fit_predict(arr)
+            centers = k.cluster_centers_.astype(int)
+            counts = np.bincount(labels)
+            order = np.argsort(counts)[::-1]
+            colors = [tuple(centers[i]) for i in order]
+        else:
+            uniq, counts = np.unique(arr, axis=0, return_counts=True)
+            order = np.argsort(counts)[::-1][:n_colors]
+            colors = [tuple(uniq[i]) for i in order]
+
+        return [hex_from_rgb(c) for c in colors][:n_colors]
+    except Exception:
+        return ["#4f46e5", "#6366f1", "#111827", "#f9fafb", "#e5e7eb", "#10b981", "#f59e0b", "#ef4444"]
+
+def fetch_unsplash_images(query: str, per_page: int = 8) -> List[Dict]:
+    if not query or not UNSPLASH_ACCESS_KEY or not requests:
+        return []
+    try:
+        resp = requests.get(
+            UNSPLASH_API_URL,
+            params={"query": query, "per_page": per_page, "orientation": "landscape"},
+            headers={"Authorization": f"Client-ID {UNSPLASH_ACCESS_KEY}"},
+            timeout=15,
+        )
+        if resp.status_code != 200:
             return []
-            
-        try:
-            headers = {"Authorization": f"Client-ID {UNSPLASH_ACCESS_KEY}"}
-            params = {
-                "query": query,
-                "per_page": count,
-                "orientation": "landscape"
-            }
-            
-            response = requests.get(
-                "https://api.unsplash.com/search/photos",
-                headers=headers,
-                params=params
+        data = resp.json()
+        images = []
+        for r in data.get("results", []):
+            images.append(
+                {
+                    "url": r["urls"]["regular"],
+                    "alt": r.get("alt_description") or "Unsplash Image",
+                    "author": r["user"]["name"],
+                    "author_url": r["user"]["links"]["html"],
+                }
             )
-            
-            if response.status_code == 200:
-                data = response.json()
-                images = []
-                for photo in data.get("results", []):
-                    images.append({
-                        "url": photo["urls"]["regular"],
-                        "thumb": photo["urls"]["thumb"],
-                        "author": photo["user"]["name"],
-                        "author_url": photo["user"]["links"]["html"],
-                        "download": photo["links"]["download"]
-                    })
-                return images
-            return []
-            
-        except Exception as e:
-            print(f"Unsplash search error: {e}")
-            return []
-    
-    def extract_design_system(self, image: Image.Image) -> Dict:
-        """Extract comprehensive design system from image"""
-        # Convert to array for analysis
-        img_array = np.array(image)
-        height, width = img_array.shape[:2]
-        
-        # Color extraction using K-means clustering
-        from sklearn.cluster import KMeans
-        
-        # Resize for faster processing
-        small_img = image.resize((150, 150))
-        pixels = np.array(small_img).reshape(-1, 3)
-        
-        # Extract dominant colors
-        n_colors = 8
-        kmeans = KMeans(n_clusters=n_colors, random_state=42, n_init=10)
-        kmeans.fit(pixels)
-        colors = kmeans.cluster_centers_.astype(int)
-        
-        # Convert to hex
-        hex_colors = ['#%02x%02x%02x' % tuple(color) for color in colors]
-        
-        # Analyze layout structure
-        layout_info = {
-            "dimensions": {"width": width, "height": height},
-            "aspect_ratio": round(width / height, 2),
-            "is_mobile": width < 768,
-            "is_tablet": 768 <= width < 1024,
-            "is_desktop": width >= 1024,
-            "has_header": self._detect_header(img_array),
-            "has_sidebar": self._detect_sidebar(img_array),
-            "has_footer": self._detect_footer(img_array),
-            "grid_columns": self._detect_columns(img_array),
-            "content_sections": self._detect_sections(img_array)
-        }
-        
-        return {
-            "colors": {
-                "primary": hex_colors[0],
-                "secondary": hex_colors[1], 
-                "accent": hex_colors[2],
-                "background": self._find_background_color(hex_colors),
-                "surface": hex_colors[4],
-                "text": self._find_text_color(hex_colors),
-                "muted": hex_colors[6],
-                "border": hex_colors[7]
-            },
-            "layout": layout_info,
-            "typography": self._analyze_typography(img_array),
-            "spacing": self._analyze_spacing(img_array)
-        }
-    
-    def _detect_header(self, img_array):
-        """Detect if image has a header section"""
-        height = img_array.shape[0]
-        top_section = img_array[:int(height * 0.15), :]
-        rest = img_array[int(height * 0.15):, :]
-        
-        # Compare color variance
-        top_variance = np.var(top_section)
-        rest_variance = np.var(rest)
-        
-        return abs(top_variance - rest_variance) > 1000
-    
-    def _detect_sidebar(self, img_array):
-        """Detect sidebar presence"""
-        width = img_array.shape[1]
-        if width < 800:
-            return False
-            
-        left_section = img_array[:, :int(width * 0.25)]
-        right_section = img_array[:, int(width * 0.75):]
-        center = img_array[:, int(width * 0.25):int(width * 0.75)]
-        
-        left_diff = np.mean(np.abs(left_section - center))
-        right_diff = np.mean(np.abs(right_section - center))
-        
-        return left_diff > 50 or right_diff > 50
-    
-    def _detect_footer(self, img_array):
-        """Detect footer section"""
-        height = img_array.shape[0]
-        bottom_section = img_array[int(height * 0.85):, :]
-        rest = img_array[:int(height * 0.85), :]
-        
-        bottom_variance = np.var(bottom_section)
-        rest_variance = np.var(rest)
-        
-        return abs(bottom_variance - rest_variance) > 1000
-    
-    def _detect_columns(self, img_array):
-        """Detect number of content columns"""
-        width = img_array.shape[1]
-        if width < 600:
-            return 1
-        elif width < 900:
-            return 2
-        elif width < 1200:
-            return 3
-        else:
-            return 4
-    
-    def _detect_sections(self, img_array):
-        """Detect content sections"""
-        height = img_array.shape[0]
-        sections = []
-        
-        # Divide into horizontal sections
-        section_height = height // 6
-        for i in range(6):
-            start = i * section_height
-            end = (i + 1) * section_height
-            section = img_array[start:end, :]
-            
-            # Analyze section characteristics
-            variance = np.var(section)
-            mean_color = np.mean(section)
-            
-            sections.append({
-                "index": i,
-                "variance": float(variance),
-                "dominant_tone": "light" if mean_color > 128 else "dark"
-            })
-        
-        return sections
-    
-    def _find_background_color(self, colors):
-        """Identify most likely background color"""
-        # Convert hex to RGB for analysis
-        rgb_colors = []
-        for color in colors:
-            r = int(color[1:3], 16)
-            g = int(color[3:5], 16)
-            b = int(color[5:7], 16)
-            rgb_colors.append((r, g, b))
-        
-        # Background is usually light or very dark
-        brightest = max(rgb_colors, key=lambda c: sum(c))
-        darkest = min(rgb_colors, key=lambda c: sum(c))
-        
-        # Return brightest if it's light enough, otherwise darkest
-        if sum(brightest) > 600:  # Light background
-            return colors[rgb_colors.index(brightest)]
-        else:
-            return colors[rgb_colors.index(darkest)]
-    
-    def _find_text_color(self, colors):
-        """Identify most likely text color"""
-        rgb_colors = []
-        for color in colors:
-            r = int(color[1:3], 16)
-            g = int(color[3:5], 16)
-            b = int(color[5:7], 16)
-            rgb_colors.append((r, g, b))
-        
-        # Text is usually dark on light bg or light on dark bg
-        darkest = min(rgb_colors, key=lambda c: sum(c))
-        
-        # Return darkest color for text
-        return colors[rgb_colors.index(darkest)]
-    
-    def _analyze_typography(self, img_array):
-        """Analyze typography characteristics"""
-        return {
-            "has_large_headings": True,
-            "has_body_text": True,
-            "estimated_font_scale": "16px",
-            "line_height": "1.6"
-        }
-    
-    def _analyze_spacing(self, img_array):
-        """Analyze spacing patterns"""
-        return {
-            "padding": "consistent",
-            "margins": "generous",
-            "component_gap": "24px"
-        }
-    
-    @spaces.GPU(duration=120)
-    async def analyze_image(self, image: Image.Image, additional_prompt: str = "") -> Dict:
-        """MCP Tool: Analyze website screenshot"""
-        if not self.session_id:
-            await self.connect_mcp()
-        
-        # Extract design system
-        design_system = self.extract_design_system(image)
-        
-        # Prepare image for AI analysis
-        img_base64 = self._image_to_base64(image)
-        
-        # MCP request for vision analysis
-        mcp_request = {
-            "session_id": self.session_id,
-            "tool": "analyze_image",
-            "parameters": {
-                "image": img_base64,
-                "design_system": design_system,
-                "prompt": f"""Analyze this website screenshot comprehensively:
-
-1. Visual Hierarchy:
-   - Header structure and navigation
-   - Hero/banner sections
-   - Content sections and their purposes
-   - Footer elements
-
-2. Design Patterns:
-   - Component types (cards, lists, grids, etc.)
-   - Interactive elements (buttons, forms, links)
-   - Media usage (images, videos, icons)
-
-3. Layout Analysis:
-   - Grid system and column structure
-   - Spacing and alignment patterns
-   - Responsive design indicators
-
-4. Content Structure:
-   - Text hierarchy (headings, paragraphs)
-   - Information organization
-   - Call-to-action placement
-
-5. Style Characteristics:
-   - Design style (modern, minimal, corporate, etc.)
-   - Color usage and contrast
-   - Typography choices
-   - Visual effects (shadows, borders, gradients)
-
-{additional_prompt}
-
-Provide detailed analysis for accurate replication.""",
-                "model": VISION_MODEL
-            }
-        }
-        
-        # Send to Nebius AI
-        headers = {
-            "Authorization": f"Bearer {NEBIUS_API_KEY}",
-            "Content-Type": "application/json"
-        }
-        
-        async with aiohttp.ClientSession() as session:
-            async with session.post(
-                f"{NEBIUS_API_ENDPOINT}/mcp/execute",
-                headers=headers,
-                json=mcp_request
-            ) as response:
-                if response.status == 200:
-                    result = await response.json()
-                    return {
-                        "analysis": result.get("output", ""),
-                        "design_system": design_system,
-                        "status": "success"
-                    }
-                else:
-                    # Fallback analysis
-                    return {
-                        "analysis": self._fallback_analysis(design_system),
-                        "design_system": design_system,
-                        "status": "fallback"
-                    }
-    
-    def _image_to_base64(self, image: Image.Image) -> str:
-        """Convert PIL image to base64"""
-        buffered = io.BytesIO()
-        image.save(buffered, format="PNG")
-        return base64.b64encode(buffered.getvalue()).decode()
-    
-    def _fallback_analysis(self, design_system):
-        """Fallback analysis when AI is unavailable"""
-        layout = design_system["layout"]
-        colors = design_system["colors"]
-        
-        return f"""Website Analysis (Fallback Mode):
-
-Layout Structure:
-- Dimensions: {layout['dimensions']['width']}x{layout['dimensions']['height']}px
-- Device Type: {'Mobile' if layout['is_mobile'] else 'Tablet' if layout['is_tablet'] else 'Desktop'}
-- Header: {'Detected' if layout['has_header'] else 'Not detected'}
-- Sidebar: {'Detected' if layout['has_sidebar'] else 'Not detected'}
-- Footer: {'Detected' if layout['has_footer'] else 'Not detected'}
-- Grid Columns: {layout['grid_columns']}
-
-Color Scheme:
-- Primary: {colors['primary']}
-- Secondary: {colors['secondary']}
-- Background: {colors['background']}
-- Text: {colors['text']}
-
-Ready for code generation."""
-    
-    @spaces.GPU(duration=120)
-    async def generate_html_code(self, analysis: Dict, include_unsplash: bool = False, image_query: str = "") -> str:
-        """MCP Tool: Generate HTML/CSS/JS code from analysis"""
-        if not self.session_id:
-            await self.connect_mcp()
-        
-        # Get Unsplash images if requested
-        unsplash_images = []
-        if include_unsplash and image_query:
-            unsplash_images = self.search_unsplash(image_query)
-        
-        design_system = analysis.get("design_system", {})
-        
-        # MCP request for code generation
-        mcp_request = {
-            "session_id": self.session_id,
-            "tool": "generate_html_code",
-            "parameters": {
-                "analysis": analysis.get("analysis", ""),
-                "design_system": design_system,
-                "unsplash_images": unsplash_images,
-                "prompt": f"""Generate a complete, production-ready HTML file based on the analysis.
+        return images
+    except Exception:
+        return []
 
+def inject_gallery_into_html(html_code: str, images: List[Dict]) -> str:
+    if not images:
+        return html_code
 
-Requirements:
-1. Single HTML file with all CSS and JavaScript embedded
-2. Use the exact color scheme from the design system
-3. Implement the detected layout structure
-4. Include all identified UI components
-5. Ensure responsive design with mobile-first approach
-6. Add smooth animations and transitions
-7. Include semantic HTML5 elements
-8. Implement accessibility features (ARIA labels, proper contrast)
-9. Add interactive JavaScript functionality
-10. {f'Include Unsplash images in appropriate sections' if unsplash_images else 'Use placeholder content for images'}
-
-Design System Colors:
-- Primary: {design_system.get('colors', {}).get('primary', '#4f46e5')}
-- Secondary: {design_system.get('colors', {}).get('secondary', '#6366f1')}
-- Background: {design_system.get('colors', {}).get('background', '#ffffff')}
-- Text: {design_system.get('colors', {}).get('text', '#1f2937')}
-
-Generate complete HTML with embedded CSS and JavaScript:""",
-                "model": CODE_MODEL,
-                "stream": True
-            }
-        }
-        
-        headers = {
-            "Authorization": f"Bearer {NEBIUS_API_KEY}",
-            "Content-Type": "application/json"
-        }
-        
-        generated_code = ""
-        
-        async with aiohttp.ClientSession() as session:
-            async with session.post(
-                f"{NEBIUS_API_ENDPOINT}/mcp/execute",
-                headers=headers,
-                json=mcp_request
-            ) as response:
-                if response.status == 200:
-                    async for line in response.content:
-                        if line:
-                            try:
-                                data = json.loads(line.decode('utf-8'))
-                                if data.get("type") == "content":
-                                    generated_code += data.get("content", "")
-                            except:
-                                continue
-                    
-                    if generated_code:
-                        return self._enhance_html(generated_code, design_system, unsplash_images)
-                
-                # Fallback to template
-                return self._create_template(design_system, unsplash_images)
-    
-    def _enhance_html(self, html_code, design_system, unsplash_images):
-        """Enhance generated HTML with additional features"""
-        # If HTML is incomplete or invalid, use template
-        if not self._validate_html(html_code):
-            return self._create_template(design_system, unsplash_images)
-        
-        # Add Unsplash images if not already included
-        if unsplash_images and "unsplash" not in html_code.lower():
-            html_code = self._inject_images(html_code, unsplash_images)
-        
+    gallery_cards = "\n".join(
+        [
+            f"""<div class="image-card">
+    <img src="{img['url']}" alt="{img['alt']}" loading="lazy"/>
+    <div class="image-credit">Photo by <a href="{img['author_url']}" target="_blank" rel="noopener noreferrer">{img['author']}</a> on Unsplash</div>
+</div>"""
+            for img in images
+        ]
+    )
+
+    gallery_section = f"""
+<section id="gallery" class="gallery-section" style="padding: 3rem 0; background: #f9fafb;">
+  <div class="container" style="max-width: 1100px; margin: 0 auto; padding: 0 1rem;">
+    <h2 style="font: 700 2rem/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin-bottom: 1rem; color: #111827;">
+      Gallery
+    </h2>
+    <p style="color:#6b7280; margin-bottom: 1.5rem;">Images provided by Unsplash</p>
+    <div class="gallery-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;">
+      {gallery_cards}
+    </div>
+  </div>
+</section>
+"""
+
+    # Try to inject before footer or before closing body
+    if "</footer>" in html_code:
+        return html_code.replace("</footer>", f"{gallery_section}\n</footer>")
+    if "</body>" in html_code:
+        return html_code.replace("</body>", f"{gallery_section}\n</body>")
+    return html_code + gallery_section
+
+def build_iframe_preview_html(html_code: str) -> str:
+    # Use srcdoc for safer live preview
+    # Escape only closing </script> to avoid breaking out if present
+    srcdoc = html_code.replace("</script>", "<\\/script>")
+    iframe = f"""
+<div style="border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;">
+  <iframe
+    sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"
+    style="width:100%; height:600px; border:0;"
+    srcdoc='{srcdoc}'
+  ></iframe>
+</div>
+"""
+    return iframe
+
+def sanitize_complete_html(html_code: str) -> str:
+    if not html_code:
         return html_code
-    
-    def _validate_html(self, html):
-        """Validate HTML structure"""
-        required_tags = ['<!DOCTYPE', '<html', '<head>', '<body>', '</html>']
-        return all(tag in html for tag in required_tags)
-    
-    def _inject_images(self, html, images):
-        """Inject Unsplash images into HTML"""
-        # This would intelligently inject images into appropriate sections
-        return html
-    
-    def _create_template(self, design_system, unsplash_images=None):
-        """Create comprehensive HTML template"""
-        colors = design_system.get('colors', {})
-        layout = design_system.get('layout', {})
-        
-        # Build image gallery if images available
-        image_section = ""
-        if unsplash_images:
-            image_cards = ""
-            for img in unsplash_images[:6]:
-                image_cards += f"""
-                <div class="image-card">
-                    <img src="{img['url']}" alt="Photo by {img['author']}" loading="lazy">
-                    <div class="image-overlay">
-                        <p class="image-author">Photo by <a href="{img['author_url']}" target="_blank" rel="noopener">{img['author']}</a></p>
-                    </div>
-                </div>"""
-            
-            image_section = f"""
-    <section class="gallery" id="gallery">
-        <div class="container">
-            <div class="section-header">
-                <h2 class="section-title">Visual Gallery</h2>
-                <p class="section-subtitle">Stunning imagery powered by Unsplash</p>
-            </div>
-            <div class="gallery-grid">
-                {image_cards}
-            </div>
-        </div>
-    </section>"""
-        
-        return f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AI-generated website using MCP protocol via Nebius AI">
-    <title>AI Generated Website - MCP Nebius</title>
-    <style>
-        /* CSS Reset */
-        *, *::before, *::after {{
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }}
-        
-        /* Custom Properties */
-        :root {{
-            --primary: {colors.get('primary', '#4f46e5')};
-            --secondary: {colors.get('secondary', '#6366f1')};
-            --accent: {colors.get('accent', '#818cf8')};
-            --background: {colors.get('background', '#ffffff')};
-            --surface: {colors.get('surface', '#f9fafb')};
-            --text: {colors.get('text', '#1f2937')};
-            --text-muted: {colors.get('muted', '#6b7280')};
-            --border: {colors.get('border', '#e5e7eb')};
-            
-            --spacing-xs: 0.25rem;
-            --spacing-sm: 0.5rem;
-            --spacing-md: 1rem;
-            --spacing-lg: 1.5rem;
-            --spacing-xl: 2rem;
-            --spacing-2xl: 3rem;
-            --spacing-3xl: 4rem;
-            
-            --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            --font-size-sm: 0.875rem;
-            --font-size-base: 1rem;
-            --font-size-lg: 1.125rem;
-            --font-size-xl: 1.25rem;
-            --font-size-2xl: 1.5rem;
-            --font-size-3xl: 2rem;
-            --font-size-4xl: 2.5rem;
-            --font-size-5xl: 3rem;
-            
-            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-            --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-            
-            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-        }}
-        
-        /* Base Styles */
-        html {{
-            scroll-behavior: smooth;
-            font-size: 16px;
-        }}
-        
-        body {{
-            font-family: var(--font-family);
-            font-size: var(--font-size-base);
-            line-height: 1.6;
-            color: var(--text);
-            background: var(--background);
-            min-height: 100vh;
-        }}
-        
-        /* Container */
-        .container {{
-            width: 100%;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 var(--spacing-md);
-        }}
-        
-        /* Header */
-        header {{
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: var(--surface);
-            backdrop-filter: blur(10px);
-            box-shadow: var(--shadow);
-            z-index: 1000;
-            transition: var(--transition);
-        }}
-        
-        nav {{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: var(--spacing-md) 0;
-        }}
-        
-        .logo {{
-            font-size: var(--font-size-xl);
-            font-weight: 700;
-            color: var(--primary);
-            text-decoration: none;
-        }}
-        
-        .nav-menu {{
-            display: flex;
-            list-style: none;
-            gap: var(--spacing-xl);
-        }}
-        
-        .nav-link {{
-            color: var(--text);
-            text-decoration: none;
-            font-weight: 500;
-            position: relative;
-            transition: var(--transition-fast);
-        }}
-        
-        .nav-link:hover {{
-            color: var(--primary);
-        }}
-        
-        .nav-link::after {{
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--primary);
-            transition: width 0.3s ease;
-        }}
-        
-        .nav-link:hover::after {{
-            width: 100%;
-        }}
-        
-        .menu-toggle {{
-            display: none;
-            flex-direction: column;
-            gap: 4px;
-            background: none;
-            border: none;
-            cursor: pointer;
-        }}
-        
-        .menu-toggle span {{
-            width: 24px;
-            height: 2px;
-            background: var(--text);
-            transition: var(--transition);
-        }}
-        
-        /* Hero Section */
-        .hero {{
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            text-align: center;
-            padding: var(--spacing-3xl) var(--spacing-md);
-        }}
-        
-        .hero-content {{
-            max-width: 800px;
-        }}
-        
-        .hero-title {{
-            font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
-            font-weight: 800;
-            margin-bottom: var(--spacing-lg);
-            animation: fadeInUp 0.8s ease;
-        }}
-        
-        .hero-subtitle {{
-            font-size: var(--font-size-xl);
-            margin-bottom: var(--spacing-2xl);
-            opacity: 0.95;
-            animation: fadeInUp 0.8s ease 0.2s both;
-        }}
-        
-        .hero-buttons {{
-            display: flex;
-            gap: var(--spacing-md);
-            justify-content: center;
-            flex-wrap: wrap;
-            animation: fadeInUp 0.8s ease 0.4s both;
-        }}
-        
-        /* Buttons */
-        .btn {{
-            display: inline-flex;
-            align-items: center;
-            padding: var(--spacing-md) var(--spacing-xl);
-            font-size: var(--font-size-base);
-            font-weight: 600;
-            text-decoration: none;
-            border-radius: 8px;
-            transition: var(--transition);
-            cursor: pointer;
-            border: none;
-        }}
-        
-        .btn-primary {{
-            background: white;
-            color: var(--primary);
-        }}
-        
-        .btn-primary:hover {{
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-lg);
-        }}
-        
-        .btn-secondary {{
-            background: transparent;
-            color: white;
-            border: 2px solid white;
-        }}
-        
-        .btn-secondary:hover {{
-            background: white;
-            color: var(--primary);
-        }}
-        
-        /* Features Section */
-        .features {{
-            padding: var(--spacing-3xl) 0;
-            background: var(--surface);
-        }}
-        
-        .section-header {{
-            text-align: center;
-            margin-bottom: var(--spacing-3xl);
-        }}
-        
-        .section-title {{
-            font-size: var(--font-size-4xl);
-            font-weight: 700;
-            color: var(--text);
-            margin-bottom: var(--spacing-md);
-        }}
-        
-        .section-subtitle {{
-            font-size: var(--font-size-lg);
-            color: var(--text-muted);
-            max-width: 600px;
-            margin: 0 auto;
-        }}
-        
-        .features-grid {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: var(--spacing-xl);
-        }}
-        
-        .feature-card {{
-            background: var(--background);
-            padding: var(--spacing-2xl);
-            border-radius: 12px;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-        }}
-        
-        .feature-card:hover {{
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-xl);
-        }}
-        
-        .feature-icon {{
-            width: 48px;
-            height: 48px;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            border-radius: 8px;
-            margin-bottom: var(--spacing-lg);
-        }}
-        
-        .feature-title {{
-            font-size: var(--font-size-xl);
-            font-weight: 600;
-            margin-bottom: var(--spacing-md);
-        }}
-        
-        .feature-description {{
-            color: var(--text-muted);
-            line-height: 1.7;
-        }}
-        
-        /* Gallery Section */
-        .gallery {{
-            padding: var(--spacing-3xl) 0;
-            background: var(--background);
-        }}
-        
-        .gallery-grid {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: var(--spacing-lg);
-        }}
-        
-        .image-card {{
-            position: relative;
-            overflow: hidden;
-            border-radius: 12px;
-            box-shadow: var(--shadow-md);
-            transition: var(--transition);
-            cursor: pointer;
-            height: 250px;
-        }}
-        
-        .image-card:hover {{
-            transform: scale(1.02);
-            box-shadow: var(--shadow-xl);
-        }}
-        
-        .image-card img {{
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: var(--transition);
-        }}
-        
-        .image-card:hover img {{
-            transform: scale(1.1);
-        }}
-        
-        .image-overlay {{
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
-            color: white;
-            padding: var(--spacing-lg);
-            transform: translateY(100%);
-            transition: var(--transition);
-        }}
-        
-        .image-card:hover .image-overlay {{
-            transform: translateY(0);
-        }}
-        
-        .image-author {{
-            font-size: var(--font-size-sm);
-        }}
-        
-        .image-author a {{
-            color: white;
-            text-decoration: underline;
-        }}
-        
-        /* CTA Section */
-        .cta {{
-            padding: var(--spacing-3xl) 0;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            text-align: center;
-        }}
-        
-        .cta-title {{
-            font-size: var(--font-size-3xl);
-            margin-bottom: var(--spacing-lg);
-        }}
-        
-        .cta-description {{
-            font-size: var(--font-size-lg);
-            margin-bottom: var(--spacing-2xl);
-            opacity: 0.95;
-        }}
-        
-        /* Footer */
-        footer {{
-            background: var(--text);
-            color: white;
-            padding: var(--spacing-3xl) 0 var(--spacing-xl);
-        }}
-        
-        .footer-content {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: var(--spacing-2xl);
-            margin-bottom: var(--spacing-2xl);
-        }}
-        
-        .footer-section h3 {{
-            margin-bottom: var(--spacing-md);
-        }}
-        
-        .footer-links {{
-            list-style: none;
-        }}
-        
-        .footer-links li {{
-            margin-bottom: var(--spacing-sm);
-        }}
-        
-        .footer-links a {{
-            color: rgba(255, 255, 255, 0.8);
-            text-decoration: none;
-            transition: var(--transition-fast);
-        }}
-        
-        .footer-links a:hover {{
-            color: white;
-        }}
-        
-        .footer-bottom {{
-            text-align: center;
-            padding-top: var(--spacing-xl);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.8);
-        }}
-        
-        /* Animations */
-        @keyframes fadeInUp {{
-            from {{
-                opacity: 0;
-                transform: translateY(30px);
-            }}
-            to {{
-                opacity: 1;
-                transform: translateY(0);
-            }}
-        }}
-        
-        .animate-on-scroll {{
-            opacity: 0;
-            transform: translateY(30px);
-            transition: all 0.6s ease;
-        }}
-        
-        .animate-on-scroll.visible {{
-            opacity: 1;
-            transform: translateY(0);
-        }}
-        
-        /* Responsive Design */
-        @media (max-width: 768px) {{
-            .nav-menu {{
-                position: fixed;
-                top: 60px;
-                left: -100%;
-                width: 100%;
-                height: calc(100vh - 60px);
-                background: var(--surface);
-                flex-direction: column;
-                align-items: center;
-                padding-top: var(--spacing-3xl);
-                transition: left 0.3s ease;
-            }}
-            
-            .nav-menu.active {{
-                left: 0;
-            }}
-            
-            .menu-toggle {{
-                display: flex;
-            }}
-            
-            .hero-buttons {{
-                flex-direction: column;
-                align-items: center;
-            }}
-            
-            .features-grid,
-            .gallery-grid {{
-                grid-template-columns: 1fr;
-            }}
-        }}
-    </style>
-</head>
-<body>
-    <header>
-        <nav class="container">
-            <a href="#" class="logo">MCP Nebius</a>
-            <ul class="nav-menu" id="navMenu">
-                <li><a href="#home" class="nav-link">Home</a></li>
-                <li><a href="#features" class="nav-link">Features</a></li>
-                {f'<li><a href="#gallery" class="nav-link">Gallery</a></li>' if unsplash_images else ''}
-                <li><a href="#about" class="nav-link">About</a></li>
-                <li><a href="#contact" class="nav-link">Contact</a></li>
-            </ul>
-            <button class="menu-toggle" id="menuToggle">
-                <span></span>
-                <span></span>
-                <span></span>
-            </button>
-        </nav>
-    </header>
-
-    <section class="hero" id="home">
-        <div class="hero-content">
-            <h1 class="hero-title">AI-Powered Web Generation</h1>
-            <p class="hero-subtitle">Transform screenshots into functional websites using advanced AI models via MCP protocol</p>
-            <div class="hero-buttons">
-                <a href="#features" class="btn btn-primary">Explore Features</a>
-                <a href="#contact" class="btn btn-secondary">Get Started</a>
-            </div>
-        </div>
-    </section>
-
-    <section class="features" id="features">
-        <div class="container">
-            <div class="section-header">
-                <h2 class="section-title animate-on-scroll">Core Features</h2>
-                <p class="section-subtitle animate-on-scroll">Advanced capabilities powered by MCP and Nebius AI</p>
-            </div>
-            <div class="features-grid">
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon"></div>
-                    <h3 class="feature-title">Vision Analysis</h3>
-                    <p class="feature-description">Advanced image understanding with Florence-2 for accurate website analysis</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon"></div>
-                    <h3 class="feature-title">Code Generation</h3>
-                    <p class="feature-description">Professional HTML/CSS/JS generation using Phind-CodeLlama model</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon"></div>
-                    <h3 class="feature-title">MCP Protocol</h3>
-                    <p class="feature-description">Seamless integration with Model Context Protocol for enhanced capabilities</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon"></div>
-                    <h3 class="feature-title">Unsplash Integration</h3>
-                    <p class="feature-description">Access to millions of free, high-quality stock photos</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon"></div>
-                    <h3 class="feature-title">Design System</h3>
-                    <p class="feature-description">Automatic color extraction and layout analysis from screenshots</p>
-                </div>
-                <div class="feature-card animate-on-scroll">
-                    <div class="feature-icon"></div>
-                    <h3 class="feature-title">CodeSandbox Deploy</h3>
-                    <p class="feature-description">One-click deployment to live sandbox environment</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    {image_section}
-
-    <section class="cta">
-        <div class="container">
-            <h2 class="cta-title animate-on-scroll">Ready to Transform Your Screenshots?</h2>
-            <p class="cta-description animate-on-scroll">Start generating professional websites from images today</p>
-            <a href="#" class="btn btn-primary animate-on-scroll">Get Started Now</a>
-        </div>
-    </section>
-
-    <footer>
-        <div class="container">
-            <div class="footer-content">
-                <div class="footer-section">
-                    <h3>MCP Nebius Generator</h3>
-                    <p>Advanced AI-powered website generation using Model Context Protocol</p>
-                </div>
-                <div class="footer-section">
-                    <h3>Tools</h3>
-                    <ul class="footer-links">
-                        <li><a href="#">Image Analyzer</a></li>
-                        <li><a href="#">Code Generator</a></li>
-                        <li><a href="#">CodeSandbox Deploy</a></li>
-                        <li><a href="#">API Documentation</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h3>Resources</h3>
-                    <ul class="footer-links">
-                        <li><a href="#">Documentation</a></li>
-                        <li><a href="#">Tutorials</a></li>
-                        <li><a href="#">Examples</a></li>
-                        <li><a href="#">Support</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h3>Connect</h3>
-                    <ul class="footer-links">
-                        <li><a href="#">GitHub</a></li>
-                        <li><a href="#">Twitter</a></li>
-                        <li><a href="#">Discord</a></li>
-                        <li><a href="#">Blog</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="footer-bottom">
-                <p>2025 MCP Website Generator by samsnata. Powered by Nebius AI.</p>
-            </div>
-        </div>
-    </footer>
-
-    <script>
-        // Mobile menu toggle
-        const menuToggle = document.getElementById('menuToggle');
-        const navMenu = document.getElementById('navMenu');
-        
-        menuToggle.addEventListener('click', () => {{
-            navMenu.classList.toggle('active');
-        }});
-        
-        // Close menu on link click
-        document.querySelectorAll('.nav-link').forEach(link => {{
-            link.addEventListener('click', () => {{
-                navMenu.classList.remove('active');
-            }});
-        }});
-        
-        // Smooth scrolling
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {{
-            anchor.addEventListener('click', function (e) {{
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {{
-                    target.scrollIntoView({{
-                        behavior: 'smooth',
-                        block: 'start'
-                    }});
-                }}
-            }});
-        }});
-        
-        // Intersection Observer for animations
-        const observerOptions = {{
-            threshold: 0.1,
-            rootMargin: '0px 0px -50px 0px'
-        }};
-        
-        const observer = new IntersectionObserver((entries) => {{
-            entries.forEach(entry => {{
-                if (entry.isIntersecting) {{
-                    entry.target.classList.add('visible');
-                }}
-            }});
-        }}, observerOptions);
-        
-        document.querySelectorAll('.animate-on-scroll').forEach(el => {{
-            observer.observe(el);
-        }});
-        
-        // Header scroll effect
-        const header = document.querySelector('header');
-        window.addEventListener('scroll', () => {{
-            if (window.scrollY > 100) {{
-                header.style.background = 'rgba(255, 255, 255, 0.95)';
-                header.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1)';
-            }} else {{
-                header.style.background = 'var(--surface)';
-                header.style.boxShadow = 'var(--shadow)';
-            }}
-        }});
-    </script>
-</body>
-</html>"""
-    
-    async def create_codesandbox(self, html_code: str) -> str:
-        """MCP Tool: Deploy HTML to CodeSandbox"""
-        try:
-            import urllib.parse
-            
-            files = {
-                "index.html": {
-                    "content": html_code,
-                    "isBinary": False
+    # Strip backticks code fences if the model wrapped the output
+    if html_code.strip().startswith("```"):
+        # Try remove first fence
+        html_code = re.sub(r"^```[a-zA-Z]*\s*", "", html_code.strip())
+        # Remove trailing fence
+        html_code = re.sub(r"\s*```$", "", html_code.strip())
+    # Ensure full doc
+    if "<!DOCTYPE html" in html_code and "</html>" in html_code:
+        start = html_code.lower().find("<!doctype")
+        end = html_code.lower().rfind("</html>") + len("</html>")
+        return html_code[start:end]
+    return html_code
+
+# ------------------------------------------------------------------------------
+# Core tools (MCP-style)
+# ------------------------------------------------------------------------------
+
+def analyze_image(image: Image.Image, nebius_api_key: str = "", extra_instructions: str = "", include_palette: bool = True) -> str:
+    if image is None:
+        return "Error: No image provided"
+
+    api_key = ensure_api_key(nebius_api_key)
+    if not api_key:
+        return "Error: Nebius API key not provided"
+
+    palette = extract_palette(image) if include_palette else []
+    palette_text = ""
+    if palette:
+        palette_text = "Detected primary color palette: " + ", ".join(palette[:8]) + "\n"
+
+    try:
+        client = OpenAI(base_url=NEBIUS_BASE_URL, api_key=api_key)
+
+        img_b64 = image_to_base64_png(image)
+
+        prompt = f"""
+Analyze this web page screenshot and produce a concise but thorough description that will guide HTML/CSS/JS generation.
+
+Describe:
+- Overall layout (header, navigation, hero, sections, footer), number of columns, spacing
+- Key components (cards, buttons, forms, tables, icons, media)
+- Visual style (minimal, corporate, playful, dark, etc.), typography hierarchy
+- Color usage and contrasts
+
+{palette_text}
+Additional instructions for the analysis, if any:
+{extra_instructions}
+"""
+
+        resp = client.chat.completions.create(
+            model=VISION_MODEL,
+            messages=[
+                {
+                    "role": "user",
+                    "content": [
+                        {"type": "text", "text": prompt.strip()},
+                        {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img_b64}" }},
+                    ],
                 }
-            }
-            
-            parameters = {
-                "files": files,
-                "template": "static"
-            }
-            
-            json_str = json.dumps(parameters)
-            encoded = urllib.parse.quote(json_str)
-            
-            return f"https://codesandbox.io/api/v1/sandboxes/define?parameters={encoded}"
-            
-        except Exception as e:
-            return f"Error creating CodeSandbox URL: {str(e)}"
-    
-    async def screenshot_to_code(self, image: Image.Image, include_unsplash: bool = False, image_query: str = "", additional_prompt: str = "") -> Tuple[str, str, str]:
-        """MCP Tool: Complete pipeline from screenshot to code"""
-        try:
-            # Step 1: Analyze image
-            analysis = await self.analyze_image(image, additional_prompt)
-            
-            # Step 2: Generate HTML code
-            html_code = await self.generate_html_code(analysis, include_unsplash, image_query)
-            
-            # Step 3: Create CodeSandbox URL
-            sandbox_url = await self.create_codesandbox(html_code)
-            
-            return analysis.get("analysis", ""), html_code, sandbox_url
-            
-        except Exception as e:
-            return f"Error: {str(e)}", "", ""
-
-
-# Gradio Interface
-def create_interface():
-    generator = MCPWebsiteGenerator()
-    
-    with gr.Blocks(
-        theme=gr.themes.Base(
-            primary_hue=gr.themes.colors.indigo,
-            secondary_hue=gr.themes.colors.purple,
-            neutral_hue=gr.themes.colors.gray,
-            font=gr.themes.GoogleFont("Inter")
-        ),
-        css="""
-        .gradio-container {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-        }
-        .tool-badge {
-            background: linear-gradient(135deg, #4f46e5, #6366f1);
-            color: white;
-            padding: 4px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: 600;
-            display: inline-block;
-            margin: 2px;
-        }
-        .feature-item {
-            background: #f9fafb;
-            border-left: 3px solid #4f46e5;
-            padding: 8px 12px;
-            margin: 8px 0;
-            border-radius: 4px;
-        }
-        """
-    ) as app:
-        gr.Markdown("""
-        # AI Website Generator (MCP Compatible - Nebius)
-        Transform website screenshots into functional HTML code using Nebius AI.
-        
-        **Features:**
-        - Image analysis with Florence-2-large
-        - HTML/CSS/JS code generation with Phind-CodeLlama-34B
-        - Direct CodeSandbox deployment
-        - MCP (Model Context Protocol) compatible
-        
-        **Tools Available:**
-        `analyze_image` `generate_html_code` `create_codesandbox` `screenshot_to_code`
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                image_input = gr.Image(
-                    type="pil",
-                    label="Upload Website Screenshot"
-                )
-                
-                with gr.Accordion("Advanced Options", open=False):
-                    include_unsplash = gr.Checkbox(
-                        label="Include Unsplash Images",
-                        value=False
-                    )
-                    
-                    image_query = gr.Textbox(
-                        label="Unsplash Search Query",
-                        placeholder="e.g., modern office, nature, technology",
-                        visible=False
-                    )
-                    
-                    additional_prompt = gr.Textbox(
-                        label="Additional Instructions",
-                        placeholder="e.g., Make it more colorful, add animations, focus on accessibility",
-                        lines=3
-                    )
-                    
-                    include_unsplash.change(
-                        lambda x: gr.update(visible=x),
-                        inputs=[include_unsplash],
-                        outputs=[image_query]
-                    )
-                
-                generate_btn = gr.Button(
-                    "Generate Website",
-                    variant="primary",
-                    size="lg"
-                )
-                
-                gr.Markdown("""
-                ### MCP Tools
-                
-                <div class="feature-item">
-                <span class="tool-badge">analyze_image</span>
-                Analyzes website screenshots using Florence-2 vision model
-                </div>
-                
-                <div class="feature-item">
-                <span class="tool-badge">generate_html_code</span>
-                Generates HTML/CSS/JS using Phind-CodeLlama model
-                </div>
-                
-                <div class="feature-item">
-                <span class="tool-badge">create_codesandbox</span>
-                Deploys generated code to CodeSandbox
-                </div>
-                
-                <div class="feature-item">
-                <span class="tool-badge">screenshot_to_code</span>
-                Complete pipeline from image to deployed website
-                </div>
-                """)
-                
-            with gr.Column(scale=2):
-                analysis_output = gr.Textbox(
-                    label="Analysis Results",
-                    lines=10,
-                    max_lines=15
-                )
-                
-                code_output = gr.Code(
-                    label="Generated HTML/CSS/JS",
-                    language="html",
-                    lines=20
-                )
-                
-                with gr.Row():
-                    sandbox_url = gr.Textbox(
-                        label="CodeSandbox URL",
-                        interactive=False
-                    )
-                    
-                    deploy_btn = gr.Button(
-                        "Open in CodeSandbox",
-                        variant="secondary"
-                    )
-        
-        # Event handlers
-        async def process_image(image, include_unsplash, image_query, additional_prompt):
-            if image is None:
-                return "Please upload an image first.", "", ""
-            
-            try:
-                analysis, code, url = await generator.screenshot_to_code(
-                    image, 
-                    include_unsplash, 
-                    image_query, 
-                    additional_prompt
-                )
-                return analysis, code, url
-            except Exception as e:
-                return f"Error: {str(e)}", "", ""
-        
-        generate_btn.click(
-            process_image,
-            inputs=[image_input, include_unsplash, image_query, additional_prompt],
-            outputs=[analysis_output, code_output, sandbox_url]
+            ],
+            max_tokens=1000,
+            temperature=0.5,
         )
-        
-        deploy_btn.click(
-            lambda url: gr.update(value=f"window.open('{url}', '_blank')") if url else None,
-            inputs=[sandbox_url],
-            outputs=[]
+
+        return (resp.choices[0].message.content or "").strip()
+
+    except Exception as e:
+        return f"Error analyzing image: {str(e)}"
+
+def generate_html_code(
+    description: str,
+    nebius_api_key: str = "",
+    temperature: float = 0.6,
+    max_tokens: int = 7000,
+) -> str:
+    if not description or description.startswith("Error"):
+        return "Error: Invalid or missing description"
+
+    api_key = ensure_api_key(nebius_api_key)
+    if not api_key:
+        return "Error: Nebius API key not provided"
+
+    prompt = f"""
+Generate a complete, responsive, production-ready single HTML file based on the analysis below.
+
+Analysis:
+{description}
+
+Requirements:
+- Use semantic HTML5 and modern, accessible patterns
+- Include an internal <style> block with modern CSS (no external frameworks)
+- Include a <script> block for basic interactivity (mobile menu, smooth scroll, simple form validation)
+- Use CSS custom properties for colors and spacing
+- Mobile-first, responsive layout using Flexbox and CSS Grid
+- Add smooth hover and entrance animations
+- Include Open Graph and meta tags
+- Do not include any external fonts or CDNs
+- Return only the full HTML document starting with <!DOCTYPE html> and ending with </html>
+"""
+
+    try:
+        client = OpenAI(base_url=NEBIUS_BASE_URL, api_key=api_key)
+
+        resp = client.chat.completions.create(
+            model=CODE_MODEL,
+            messages=[{"role": "user", "content": prompt.strip()}],
+            max_tokens=max_tokens,
+            temperature=temperature,
         )
-        
-    return app
+        code = (resp.choices[0].message.content or "").strip()
+        return sanitize_complete_html(code)
+    except Exception as e:
+        return f"Error generating HTML code: {str(e)}"
+
+def create_codesandbox(html_code: str) -> str:
+    if not html_code or html_code.startswith("Error"):
+        return "Error: No valid HTML code provided"
+
+    try:
+        files = {
+            "index.html": {"content": html_code, "isBinary": False},
+            "package.json": {
+                "content": json.dumps(
+                    {
+                        "name": "ai-generated-website",
+                        "version": "1.0.0",
+                        "description": "Website generated from image analysis",
+                        "main": "index.html",
+                        "scripts": {"start": "serve .", "build": "echo 'no build'"},
+                        "devDependencies": {"serve": "^14.0.0"},
+                    },
+                    indent=2,
+                ),
+                "isBinary": False,
+            },
+        }
+
+        params = {"files": files, "template": "static"}
+
+        # Prefer compressed GET URL for Spaces without outbound POST
+        json_str = json.dumps(params, separators=(",", ":"))
+        compressed = LZString().compressToBase64(json_str)
+        compressed = compressed.replace("+", "-").replace("/", "_").rstrip("=")
+        url_get = f"https://codesandbox.io/api/v1/sandboxes/define?parameters={compressed}"
+
+        if not requests:
+            return url_get
+
+        try:
+            r = requests.post(
+                "https://codesandbox.io/api/v1/sandboxes/define",
+                json=params,
+                timeout=10,
+            )
+            if r.status_code == 200:
+                data = r.json()
+                sid = data.get("sandbox_id")
+                if sid:
+                    return f"https://codesandbox.io/s/{sid}"
+        except Exception:
+            pass
+
+        return url_get
+    except Exception as e:
+        return f"Error creating CodeSandbox: {str(e)}"
+
+def screenshot_to_code(
+    image: Image.Image,
+    nebius_api_key: str = "",
+    extra_instructions: str = "",
+    include_palette: bool = True,
+    include_unsplash: bool = False,
+    unsplash_query: str = "",
+    temperature: float = 0.6,
+    max_tokens: int = 7000,
+) -> Tuple[str, str]:
+    description = analyze_image(image, nebius_api_key, extra_instructions, include_palette)
+    if not description or description.startswith("Error"):
+        return description, "Error: Cannot generate code due to image analysis failure"
+
+    html_code = generate_html_code(description, nebius_api_key, temperature, max_tokens)
+    if include_unsplash and not html_code.startswith("Error"):
+        images = fetch_unsplash_images(unsplash_query or "website")
+        if images:
+            html_code = inject_gallery_into_html(html_code, images)
+
+    return description, html_code
+
+# ------------------------------------------------------------------------------
+# Gradio UI (redesigned, no emojis)
+# ------------------------------------------------------------------------------
+
+CUSTOM_CSS = """
+:root {
+  --brand: #1f4fff;
+  --brand-2: #7c3aed;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --bg: #f8fafc;
+  --card: #ffffff;
+  --border: #e2e8f0;
+}
+.gradio-container {
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+.header {
+  padding: 24px 16px 8px 16px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(180deg, #fff, #fff0);
+}
+.header h1 {
+  margin: 0;
+  font-weight: 800;
+  font-size: 28px;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--brand), var(--brand-2));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.header p {
+  margin: 6px 0 0 0;
+  color: var(--muted);
+}
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+}
+.section-title {
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: var(--ink);
+}
+.tool-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, var(--brand), var(--brand-2));
+  color: white;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 12px;
+  margin-right: 6px;
+}
+.footer-note {
+  margin-top: 24px;
+  color: var(--muted);
+  font-size: 13px;
+}
+"""
+
+with gr.Blocks(theme=gr.themes.Base(), title="AI Website Generator - Nebius MCP", css=CUSTOM_CSS) as app:
+    gr.HTML("""
+<div class="header">
+  <h1>AI Website Generator (MCP Compatible - Nebius)</h1>
+  <p>Transform website screenshots into functional HTML using Qwen2.5-VL analysis and DeepSeek-V3 generation.</p>
+</div>
+""")
+
+    with gr.Tabs():
+        with gr.Tab("Generate"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("#### Inputs", elem_classes=["section-title"])
+                    with gr.Group(elem_classes=["card"]):
+                        nebius_key = gr.Textbox(
+                            label="Nebius API Key",
+                            type="password",
+                            placeholder="Enter your Nebius API key or set NEBIUS_API_KEY in environment",
+                            value="" if ENV_NEBIUS_API_KEY else "",
+                        )
+                        extra_instructions = gr.Textbox(
+                            label="Additional Instructions (optional)",
+                            placeholder="e.g., prefer minimal style, rounded corners, larger headings, add subtle animations",
+                            lines=3,
+                        )
+                        with gr.Row():
+                            include_palette = gr.Checkbox(value=True, label="Include detected color palette in analysis")
+                            include_unsplash = gr.Checkbox(value=False, label="Add Unsplash gallery to output")
+                        unsplash_query = gr.Textbox(
+                            label="Unsplash search query",
+                            placeholder="e.g., office, nature, technology",
+                            visible=False,
+                        )
+
+                        def _toggle_unsplash(show):
+                            return gr.update(visible=bool(show))
+
+                        include_unsplash.change(_toggle_unsplash, inputs=[include_unsplash], outputs=[unsplash_query])
+
+                        with gr.Accordion("Generation Parameters", open=False):
+                            temperature = gr.Slider(0.0, 1.2, value=0.6, step=0.05, label="Temperature")
+                            max_tokens = gr.Slider(1000, 8000, value=7000, step=100, label="Max tokens")
+                    with gr.Group(elem_classes=["card"]):
+                        image_input = gr.Image(type="pil", label="Upload website screenshot", sources=["upload", "clipboard"])
+                        generate_btn = gr.Button("Generate", variant="primary")
+
+                with gr.Column(scale=2):
+                    gr.Markdown("#### Results", elem_classes=["section-title"])
+                    with gr.Group(elem_classes=["card"]):
+                        description_output = gr.Textbox(label="Image Analysis", lines=10, interactive=False)
+                    with gr.Group(elem_classes=["card"]):
+                        html_output = gr.Code(label="Generated HTML", language="html", lines=20)
+                        with gr.Row():
+                            copy_btn = gr.Button("Copy Code")
+                            download_btn = gr.Button("Download HTML")
+                    with gr.Group(elem_classes=["card"]):
+                        gr.Markdown("Live Preview (sandboxed)")
+                        preview_html = gr.HTML()
+
+            def on_generate(image, key, inst, inc_pal, inc_uns, u_query, temp, max_tok):
+                if image is None:
+                    return "Please upload an image first.", "", "", ""
+                desc, html_code = screenshot_to_code(
+                    image=image,
+                    nebius_api_key=key,
+                    extra_instructions=inst,
+                    include_palette=inc_pal,
+                    include_unsplash=inc_uns,
+                    unsplash_query=u_query,
+                    temperature=float(temp),
+                    max_tokens=int(max_tok),
+                )
+                preview = build_iframe_preview_html(html_code) if html_code and not html_code.startswith("Error") else ""
+                return desc, html_code, preview, "Code copied to clipboard is only possible in the browser. Select the code block and press Ctrl+C or Cmd+C."
+
+            generate_btn.click(
+                on_generate,
+                inputs=[image_input, nebius_key, extra_instructions, include_palette, include_unsplash, unsplash_query, temperature, max_tokens],
+                outputs=[description_output, html_output, preview_html, gr.Textbox(visible=False)],
+            )
+
+            def on_copy(_code):
+                # Gradio cannot copy to clipboard directly; provide a helpful message.
+                return gr.update(value="Select the code and copy with Ctrl+C or Cmd+C")
+
+            copy_btn.click(on_copy, inputs=[html_output], outputs=[html_output])
+
+            def on_download(code: str):
+                if not code or code.startswith("Error"):
+                    return None
+                import tempfile, time, pathlib
+                tmpdir = tempfile.mkdtemp(prefix="site_")
+                path = pathlib.Path(tmpdir) / "index.html"
+                path.write_text(code, encoding="utf-8")
+                return str(path)
+
+            download_file = gr.File(label="Download", visible=False)
+            download_btn.click(on_download, inputs=[html_output], outputs=[download_file])
+
+        with gr.Tab("Preview & Deploy"):
+            with gr.Row():
+                with gr.Column(scale=2):
+                    gr.Markdown("#### Live Preview", elem_classes=["section-title"])
+                    preview_html_2 = gr.HTML(elem_classes=["card"])
+                with gr.Column(scale=1):
+                    gr.Markdown("#### Deployment", elem_classes=["section-title"])
+                    with gr.Group(elem_classes=["card"]):
+                        deploy_btn = gr.Button("Create CodeSandbox")
+                        sandbox_url = gr.Textbox(label="CodeSandbox URL", interactive=False)
+                        open_link_html = gr.HTML()
+
+            def sync_preview(code: str):
+                return build_iframe_preview_html(code) if code and not code.startswith("Error") else ""
+
+            html_output.change(sync_preview, inputs=[html_output], outputs=[preview_html_2])
+
+            def on_deploy(code: str):
+                url = create_codesandbox(code)
+                if url.startswith("Error"):
+                    return url, ""
+                link = f'<a href="{url}" target="_blank" rel="noopener noreferrer">Open CodeSandbox</a>'
+                return url, link
+
+            deploy_btn.click(on_deploy, inputs=[html_output], outputs=[sandbox_url, open_link_html])
+
+        with gr.Tab("Tools"):
+            gr.Markdown("#### Available Tools", elem_classes=["section-title"])
+            gr.HTML("""
+<div class="card">
+  <span class="tool-badge">analyze_image</span>
+  <span class="tool-badge">generate_html_code</span>
+  <span class="tool-badge">create_codesandbox</span>
+  <span class="tool-badge">screenshot_to_code</span>
+  <div class="footer-note">Use the panels below to run tools individually.</div>
+</div>
+""")
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("Image Analysis", elem_classes=["section-title"])
+                    with gr.Group(elem_classes=["card"]):
+                        img_tool = gr.Image(type="pil", label="Image")
+                        key_tool = gr.Textbox(label="Nebius API Key", type="password")
+                        inst_tool = gr.Textbox(label="Additional Instructions", lines=3)
+                        include_palette_tool = gr.Checkbox(value=True, label="Include color palette")
+                        analyze_btn = gr.Button("Run analyze_image")
+                        analysis_result = gr.Textbox(label="Result", lines=10)
+                    def run_analyze(img, k, ins, inc_pal):
+                        return analyze_image(img, k, ins, inc_pal)
+                    analyze_btn.click(run_analyze, inputs=[img_tool, key_tool, inst_tool, include_palette_tool], outputs=[analysis_result])
+
+                with gr.Column():
+                    gr.Markdown("Code Generation", elem_classes=["section-title"])
+                    with gr.Group(elem_classes=["card"]):
+                        desc_input = gr.Textbox(label="Description", lines=6)
+                        key_tool2 = gr.Textbox(label="Nebius API Key", type="password")
+                        temp_tool = gr.Slider(0.0, 1.2, value=0.6, step=0.05, label="Temperature")
+                        tokens_tool = gr.Slider(1000, 8000, value=7000, step=100, label="Max tokens")
+                        code_btn = gr.Button("Run generate_html_code")
+                        code_result = gr.Code(label="Generated Code", language="html", lines=20)
+                    def run_generate(desc, k, t, mx):
+                        return generate_html_code(desc, k, float(t), int(mx))
+                    code_btn.click(run_generate, inputs=[desc_input, key_tool2, temp_tool, tokens_tool], outputs=[code_result])
+
+            gr.Markdown("Deployment", elem_classes=["section-title"])
+            with gr.Group(elem_classes=["card"]):
+                cs_input = gr.Code(label="HTML to deploy", language="html", lines=12)
+                cs_btn = gr.Button("Run create_codesandbox")
+                cs_url = gr.Textbox(label="CodeSandbox URL", interactive=False)
+                cs_open = gr.HTML()
+                def run_cs(code):
+                    url = create_codesandbox(code)
+                    link = f'<a href="{url}" target="_blank" rel="noopener noreferrer">Open CodeSandbox</a>' if not url.startswith("Error") else ""
+                    return url, link
+                cs_btn.click(run_cs, inputs=[cs_input], outputs=[cs_url, cs_open])
+
+        with gr.Tab("About"):
+            gr.Markdown("""
+### Overview
+This app converts website screenshots into functional HTML using:
+- Image analysis: Qwen2.5-VL-72B-Instruct
+- Code generation: DeepSeek-V3-0324
+- MCP-compatible tool design
+- Optional Unsplash gallery injection
+
+### Notes
+- Do not hardcode secrets. Set NEBIUS_API_KEY and UNSPLASH_ACCESS_KEY in your environment or Space secrets.
+- Live preview uses a sandboxed iframe via srcdoc for safety.
+""")
 
-# Launch the app
+    # Launch with MCP server compatibility if desired
 if __name__ == "__main__":
-    app = create_interface()
-    app.launch()
+    # Note: mcp_server flag requires compatible runtime; set to True if you use MCP.
+    app.launch(mcp_server=True, share=False)