Update app.py

app.py

@@ -4,7 +4,7 @@ import json
 import os
 import re
 import tempfile
-from typing import Tuple, Optional
+from typing import Tuple, Optional, Dict, List
 
 import gradio as gr
 import httpx
@@ -16,31 +16,84 @@ from lzstring import LZString
 # =========================
 NEBIUS_BASE_URL = "https://api.studio.nebius.com/v1/"
 
-# Add more selectable models (you can also type your own in the dropdowns)
+# Vision models that work well with Nebius
 DEFAULT_VISION_MODEL = "Qwen/Qwen2.5-VL-72B-Instruct"
 VISION_MODELS = [
     DEFAULT_VISION_MODEL,
     "Qwen/Qwen2.5-VL-7B-Instruct",
     "Qwen/Qwen2-VL-72B-Instruct",
+    "Qwen/Qwen2-VL-7B-Instruct",
 ]
 
-DEFAULT_CODE_MODEL = "deepseek-ai/DeepSeek-V3-0324"
+# Code generation models with best performance on Nebius
+DEFAULT_CODE_MODEL = "deepseek-ai/DeepSeek-V3"
 CODE_MODELS = [
     DEFAULT_CODE_MODEL,
     "Qwen/Qwen2.5-Coder-32B-Instruct",
-    "Meta-Llama-3.1-70B-Instruct",
-    "Mistral-7B-Instruct",
+    "Qwen/QwQ-32B-Preview",
+    "Qwen/Qwen2.5-72B-Instruct",
+    "Qwen/Qwen2.5-7B-Instruct",
+    "deepseek-ai/DeepSeek-R1-Distill-Qwen-32B",
+    "deepseek-ai/DeepSeek-R1-Distill-Qwen-7B",
+    "meta-llama/Meta-Llama-3.1-405B-Instruct",
+    "meta-llama/Meta-Llama-3.1-70B-Instruct",
+    "meta-llama/Meta-Llama-3.1-8B-Instruct",
+    "meta-llama/Llama-3.2-90B-Vision-Instruct",
+    "meta-llama/Llama-3.2-11B-Vision-Instruct",
+    "mistralai/Mixtral-8x22B-Instruct-v0.1",
+    "mistralai/Mixtral-8x7B-Instruct-v0.1",
+    "mistralai/Mistral-7B-Instruct-v0.3",
+    "mistralai/Mistral-Nemo-Instruct-2407",
+    "mistralai/Pixtral-12B-2409",
+    "nvidia/Llama-3.1-Nemotron-70B-Instruct-HF",
 ]
 
-# Timeouts and simple retries for stability
-HTTP_TIMEOUTS = httpx.Timeout(connect=10.0, read=120.0, write=30.0, pool=60.0)
-HTTP_RETRIES = 2
-
-# Keep the same default key you provided
+# Model capabilities mapping (for better selection)
+MODEL_CAPABILITIES = {
+    "vision": [
+        "Qwen/Qwen2.5-VL-72B-Instruct",
+        "Qwen/Qwen2.5-VL-7B-Instruct",
+        "Qwen/Qwen2-VL-72B-Instruct",
+        "Qwen/Qwen2-VL-7B-Instruct",
+        "meta-llama/Llama-3.2-90B-Vision-Instruct",
+        "meta-llama/Llama-3.2-11B-Vision-Instruct",
+        "mistralai/Pixtral-12B-2409",
+    ],
+    "code": [
+        "deepseek-ai/DeepSeek-V3",
+        "Qwen/Qwen2.5-Coder-32B-Instruct",
+        "Qwen/QwQ-32B-Preview",
+        "deepseek-ai/DeepSeek-R1-Distill-Qwen-32B",
+        "deepseek-ai/DeepSeek-R1-Distill-Qwen-7B",
+    ],
+    "general": [
+        "Qwen/Qwen2.5-72B-Instruct",
+        "meta-llama/Meta-Llama-3.1-405B-Instruct",
+        "meta-llama/Meta-Llama-3.1-70B-Instruct",
+        "nvidia/Llama-3.1-Nemotron-70B-Instruct-HF",
+        "mistralai/Mixtral-8x22B-Instruct-v0.1",
+    ]
+}
+
+# Performance recommendations
+MODEL_RECOMMENDATIONS = {
+    "fast": ["Qwen/Qwen2.5-7B-Instruct", "mistralai/Mistral-7B-Instruct-v0.3", "deepseek-ai/DeepSeek-R1-Distill-Qwen-7B"],
+    "balanced": ["Qwen/Qwen2.5-Coder-32B-Instruct", "meta-llama/Meta-Llama-3.1-70B-Instruct", "Qwen/QwQ-32B-Preview"],
+    "quality": ["deepseek-ai/DeepSeek-V3", "meta-llama/Meta-Llama-3.1-405B-Instruct", "Qwen/Qwen2.5-72B-Instruct"],
+}
+
+# Timeouts and retries
+HTTP_TIMEOUTS = httpx.Timeout(connect=15.0, read=180.0, write=30.0, pool=60.0)
+HTTP_RETRIES = 3
+
+# Default API key
 DEFAULT_NEBIUS_API_KEY = (
     "eyJhbGciOiJIUzI1NiIsImtpZCI6IlV6SXJWd1h0dnprLVRvdzlLZWstc0M1akptWXBvX1VaVkxUZlpnMDRlOFUiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiJnb29nbGUtb2F1dGgyfDEwNTA1MTQzMDg2MDMwMzIxNDEwMiIsInNjb3BlIjoib3BlbmlkIG9mZmxpbmVfYWNjZXNzIiwiaXNzIjoiYXBpX2tleV9pc3N1ZXIiLCJhdWQiOlsiaHR0cHM6Ly9uZWJpdXMtaW5mZXJlbmNlLmV1LmF1dGgwLmNvbS9hcGkvdjIvIl0sImV4cCI6MTkwNjU5ODA0NCwidXVpZCI6ImNkOGFiMWZlLTIxN2QtNDJlMy04OWUwLWM1YTg4MjcwMGVhNyIsIm5hbWUiOiJodW5nZ2luZyIsImV4cGlyZXNfYXQiOiIyMDMwLTA2LTAyVDAyOjM0OjA0KzAwMDAifQ.MA52QuIiNruK7_lX688RXAEI2TkcCOjcf_02XrpnhI8"
 )
 
+# Cache for available models
+_available_models_cache = None
+_cache_timestamp = 0
 
 # =========================
 # Helpers
@@ -55,17 +108,86 @@ def get_api_key(user_key: str = "") -> str:
     return (user_key or "").strip() or os.getenv("NEBIUS_API_KEY", "").strip() or DEFAULT_NEBIUS_API_KEY
 
 
+def get_available_models(api_key: str) -> Dict[str, List[str]]:
+    """
+    Fetch available models from Nebius API and categorize them.
+    Returns a dict with 'vision' and 'code' keys.
+    """
+    global _available_models_cache, _cache_timestamp
+    import time
+    
+    # Cache for 5 minutes
+    if _available_models_cache and (time.time() - _cache_timestamp) < 300:
+        return _available_models_cache
+    
+    try:
+        url = f"{NEBIUS_BASE_URL}models"
+        headers = {"Authorization": f"Bearer {api_key}"}
+        
+        with httpx.Client(timeout=httpx.Timeout(10.0)) as client:
+            resp = client.get(url, headers=headers)
+            if resp.status_code == 200:
+                data = resp.json()
+                models = data.get("data", [])
+                
+                vision_models = []
+                code_models = []
+                
+                for model in models:
+                    model_id = model.get("id", "")
+                    # Categorize based on known patterns
+                    if any(v in model_id.lower() for v in ["vision", "vl", "pixtral", "llama-3.2-90b", "llama-3.2-11b"]):
+                        vision_models.append(model_id)
+                    if any(c in model_id.lower() for c in ["coder", "deepseek", "instruct", "llama", "mistral", "mixtral", "qwen"]):
+                        code_models.append(model_id)
+                
+                _available_models_cache = {
+                    "vision": vision_models or VISION_MODELS,
+                    "code": code_models or CODE_MODELS
+                }
+                _cache_timestamp = time.time()
+                return _available_models_cache
+    except Exception:
+        pass
+    
+    # Return defaults if API call fails
+    return {"vision": VISION_MODELS, "code": CODE_MODELS}
+
+
+def validate_model_availability(model: str, api_key: str, model_type: str = "general") -> bool:
+    """
+    Check if a model is available by making a test request.
+    """
+    try:
+        test_message = "Hi" if model_type != "vision" else [{"type": "text", "text": "Hi"}]
+        url = f"{NEBIUS_BASE_URL}chat/completions"
+        payload = {
+            "model": model,
+            "messages": [{"role": "user", "content": test_message}],
+            "max_tokens": 10,
+            "temperature": 0.1,
+        }
+        headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+        
+        with httpx.Client(timeout=httpx.Timeout(5.0)) as client:
+            resp = client.post(url, headers=headers, json=payload)
+            return resp.status_code == 200
+    except Exception:
+        return False
+
+
 def call_chat_completions(
     model: str,
     messages: list,
     api_key: str,
     max_tokens: int = 2000,
     temperature: float = 0.7,
+    retry_with_fallback: bool = True,
 ) -> str:
     """
     Calls the Nebius OpenAI-compatible chat completions endpoint via HTTP.
     Returns the assistant message content string.
-    Includes retries and increased read timeout to mitigate timeouts.
+    Includes retries and fallback models for better reliability.
     """
     if not api_key:
         raise ValueError("Nebius API key is required.")
@@ -79,19 +201,59 @@ def call_chat_completions(
     }
     headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
 
-    transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
-    with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
-        resp = client.post(url, headers=headers, json=payload)
-        resp.raise_for_status()
-        data = resp.json()
-
-    choices = data.get("choices", [])
-    if not choices:
-        raise RuntimeError("No choices returned from the API.")
-    content = choices[0].get("message", {}).get("content", "")
-    if not content:
-        raise RuntimeError("Empty content returned from the API.")
-    return content
+    # Try with the requested model first
+    last_error = None
+    for attempt in range(HTTP_RETRIES):
+        try:
+            transport = httpx.HTTPTransport(retries=1)
+            with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
+                resp = client.post(url, headers=headers, json=payload)
+                
+                if resp.status_code == 404 or resp.status_code == 400:
+                    # Model not found or bad request
+                    if retry_with_fallback and attempt == 0:
+                        # Try a fallback model
+                        fallback_models = {
+                            "vision": ["Qwen/Qwen2.5-VL-7B-Instruct"],
+                            "code": ["Qwen/Qwen2.5-7B-Instruct", "mistralai/Mistral-7B-Instruct-v0.3"],
+                        }
+                        
+                        # Detect model type and use appropriate fallback
+                        model_type = "vision" if any(v in model.lower() for v in ["vision", "vl", "pixtral"]) else "code"
+                        for fallback in fallback_models.get(model_type, []):
+                            payload["model"] = fallback
+                            try:
+                                resp = client.post(url, headers=headers, json=payload)
+                                if resp.status_code == 200:
+                                    break
+                            except Exception:
+                                continue
+                
+                resp.raise_for_status()
+                data = resp.json()
+                
+                choices = data.get("choices", [])
+                if not choices:
+                    raise RuntimeError("No choices returned from the API.")
+                content = choices[0].get("message", {}).get("content", "")
+                if not content:
+                    raise RuntimeError("Empty content returned from the API.")
+                return content
+                
+        except (httpx.ReadTimeout, httpx.TimeoutException) as e:
+            last_error = e
+            # Reduce token count for retry
+            payload["max_tokens"] = max(500, int(payload["max_tokens"] * 0.7))
+            continue
+        except Exception as e:
+            last_error = e
+            if attempt < HTTP_RETRIES - 1:
+                continue
+            break
+    
+    if last_error:
+        raise last_error
+    raise RuntimeError(f"Failed to get response from model {model}")
 
 
 def _strip_fenced_code(text: str) -> str:
@@ -187,16 +349,22 @@ def analyze_image(
         return "Error: Nebius API key not provided."
 
     try:
+        # Resize image if too large to avoid timeouts
+        max_dimension = 1024
+        if image.width > max_dimension or image.height > max_dimension:
+            image.thumbnail((max_dimension, max_dimension), Image.Resampling.LANCZOS)
+        
         # Encode image to base64
         buffered = io.BytesIO()
-        image.save(buffered, format="PNG")
+        image.save(buffered, format="PNG", optimize=True)
         img_b64 = base64.b64encode(buffered.getvalue()).decode("utf-8")
 
         prompt = (
             "Analyze this image and provide a concise description. "
             "Describe the main elements, colors, layout, and UI components. "
             "Identify what type of website or application this resembles. "
-            "Focus on structural and visual elements that would be important for recreating the design."
+            "Focus on structural and visual elements that would be important for recreating the design. "
+            "Be specific about layout patterns, component types, and styling details."
         )
 
         messages = [
@@ -209,16 +377,21 @@ def analyze_image(
             }
         ]
 
+        # Use vision model
         content = call_chat_completions(
             model=vision_model,
             messages=messages,
             api_key=api_key,
-            max_tokens=1000,
+            max_tokens=1500,
             temperature=0.7,
+            retry_with_fallback=True,
         )
         return content
     except Exception as e:
-        return f"Error analyzing image: {str(e)}"
+        error_msg = str(e)
+        if "404" in error_msg or "not found" in error_msg.lower():
+            return f"Error: Model '{vision_model}' not available. Try using one of the recommended vision models: {', '.join(VISION_MODELS[:3])}"
+        return f"Error analyzing image: {error_msg}"
 
 
 def generate_html_code(
@@ -246,13 +419,17 @@ Generate a complete, responsive webpage based on this description:
 Requirements:
 - Use modern HTML5, CSS3, and vanilla JavaScript only
 - Include TailwindCSS via CDN for styling
-- Make it responsive and visually appealing
-- Use placeholder images from https://unsplash.com/ if needed
+- Make it fully responsive (mobile, tablet, desktop)
+- Use high-quality placeholder images from https://picsum.photos/ or https://unsplash.com/
 - Include proper semantic HTML structure
-- Add interactive elements where appropriate
-- Ensure the design matches the described layout and style
+- Add smooth animations and transitions
+- Include interactive elements where appropriate
+- Use modern design patterns and best practices
+- Ensure the design matches the described layout and style exactly
+- Add proper meta tags and accessibility features
 
 Return only the complete HTML code starting with <!DOCTYPE html> and ending with </html>.
+Include all CSS and JavaScript inline within the HTML.
 """.strip()
 
     try:
@@ -263,36 +440,26 @@ Return only the complete HTML code starting with <!DOCTYPE html> and ending with
             api_key=api_key,
             max_tokens=code_max_tokens,
             temperature=code_temperature,
+            retry_with_fallback=True,
         )
         html_code = _strip_fenced_code(content)
 
+        # Ensure we have valid HTML
         if "<!DOCTYPE html>" in html_code and "</html>" in html_code:
             start = html_code.find("<!DOCTYPE html>")
             end = html_code.rfind("</html>") + len("</html>")
             return html_code[start:end]
+        elif "<html" in html_code and "</html>" in html_code:
+            # Add DOCTYPE if missing
+            return f"<!DOCTYPE html>\n{html_code}"
         return html_code
-    except (httpx.ReadTimeout, httpx.TimeoutException):
-        # Retry once with a reduced token budget to improve latency
-        try:
-            reduced_tokens = max(1000, int(code_max_tokens * 0.6))
-            messages = [{"role": "user", "content": prompt}]
-            content = call_chat_completions(
-                model=code_model,
-                messages=messages,
-                api_key=api_key,
-                max_tokens=reduced_tokens,
-                temperature=code_temperature,
-            )
-            html_code = _strip_fenced_code(content)
-            if "<!DOCTYPE html>" in html_code and "</html>" in html_code:
-                start = html_code.find("<!DOCTYPE html>")
-                end = html_code.rfind("</html>") + len("</html>")
-                return html_code[start:end]
-            return html_code
-        except Exception as e2:
-            return f"Error generating HTML code after retry: {str(e2)}. Tips: lower Max tokens, pick a smaller/faster model, or try again."
     except Exception as e:
-        return f"Error generating HTML code: {str(e)}"
+        error_msg = str(e)
+        if "404" in error_msg or "not found" in error_msg.lower():
+            return f"Error: Model '{code_model}' not available. Try using one of the recommended code models: {', '.join(CODE_MODELS[:3])}"
+        if "timeout" in error_msg.lower():
+            return f"Error: Request timed out. Try reducing max tokens or using a faster model like: {', '.join(MODEL_RECOMMENDATIONS['fast'])}"
+        return f"Error generating HTML code: {error_msg}"
 
 
 def create_codesandbox(html_code: str) -> str:
@@ -333,7 +500,7 @@ def create_codesandbox(html_code: str) -> str:
 
         parameters = {"files": files, "template": "static"}
 
-        # Fallback GET URL with compressed parameters (also add file query to open index.html)
+        # Fallback GET URL with compressed parameters
         json_str = json.dumps(parameters, separators=(",", ":"))
         lz = LZString()
         compressed = lz.compressToBase64(json_str)
@@ -343,10 +510,10 @@ def create_codesandbox(html_code: str) -> str:
         prefill_css = f"{prefill_base}?parameters={compressed}&file=/style.css" if "style.css" in files else ""
         prefill_js = f"{prefill_base}?parameters={compressed}&file=/script.js" if "script.js" in files else ""
 
-        # Try POST API to get a sandbox_id so we can link directly to the editor
+        # Try POST API to get a sandbox_id
         url = "https://codesandbox.io/api/v1/sandboxes/define"
-        transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
-        with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
+        transport = httpx.HTTPTransport(retries=2)
+        with httpx.Client(timeout=httpx.Timeout(15.0), transport=transport) as client:
             resp = client.post(url, json=parameters)
             if resp.status_code == 200:
                 data = resp.json()
@@ -355,21 +522,25 @@ def create_codesandbox(html_code: str) -> str:
                     editor_base = f"https://codesandbox.io/p/sandbox/{sandbox_id}"
                     preview_base = f"https://codesandbox.io/s/{sandbox_id}"
                     lines = [
-                        f"- Open index.html in editor: {editor_base}?file=/index.html",
+                        f"✅ **Successfully deployed to CodeSandbox!**\n",
+                        f"- 📝 Open index.html in editor: [{editor_base}?file=/index.html]({editor_base}?file=/index.html)",
                     ]
                     if "style.css" in files:
-                        lines.append(f"- Open style.css in editor: {editor_base}?file=/style.css")
+                        lines.append(f"- 🎨 Open style.css in editor: [{editor_base}?file=/style.css]({editor_base}?file=/style.css)")
                     if "script.js" in files:
-                        lines.append(f"- Open script.js in editor: {editor_base}?file=/script.js")
-                    lines.append(f"- Live preview: {preview_base}")
+                        lines.append(f"- ⚡ Open script.js in editor: [{editor_base}?file=/script.js]({editor_base}?file=/script.js)")
+                    lines.append(f"- 👁️ Live preview: [{preview_base}]({preview_base})")
                     return "\n".join(lines)
 
         # Fallback to prefill URLs if POST fails
-        lines = [f"- Open index.html in editor: {prefill_index}"]
+        lines = [
+            "📦 **CodeSandbox Links (click to deploy):**\n",
+            f"- Open index.html: [{prefill_index}]({prefill_index})"
+        ]
         if prefill_css:
-            lines.append(f"- Open style.css in editor: {prefill_css}")
+            lines.append(f"- Open style.css: [{prefill_css}]({prefill_css})")
         if prefill_js:
-            lines.append(f"- Open script.js in editor: {prefill_js}")
+            lines.append(f"- Open script.js: [{prefill_js}]({prefill_js})")
         return "\n".join(lines)
 
     except Exception as e:
@@ -383,14 +554,19 @@ def screenshot_to_code(
     code_model: str = DEFAULT_CODE_MODEL,
     code_max_tokens: int = 4000,
     code_temperature: float = 0.7,
+    progress=gr.Progress(track_tqdm=True),
 ) -> Tuple[str, str]:
     """
     Complete pipeline: analyze image and generate corresponding HTML code.
     Returns (description, html_code).
     """
+    progress(0, desc="Starting image analysis...")
     description = analyze_image(image, nebius_api_key, vision_model)
+    
     if description.startswith("Error"):
         return description, "Error: Cannot generate code due to image analysis failure."
+    
+    progress(0.5, desc="Generating HTML code...")
     html_code = generate_html_code(
         description,
         nebius_api_key,
@@ -398,6 +574,8 @@ def screenshot_to_code(
         code_max_tokens=code_max_tokens,
         code_temperature=code_temperature,
     )
+    
+    progress(1.0, desc="Complete!")
     return description, html_code
 
 
@@ -416,142 +594,206 @@ def export_html_to_file(html_code: str) -> Optional[str]:
         return None
 
 
+def get_model_recommendations(performance_tier: str) -> Tuple[str, str]:
+    """
+    Get recommended models based on performance tier.
+    Returns (vision_model, code_model)
+    """
+    tier_map = {
+        "Fast (7B models)": ("Qwen/Qwen2.5-VL-7B-Instruct", "deepseek-ai/DeepSeek-R1-Distill-Qwen-7B"),
+        "Balanced (32B-70B)": ("Qwen/Qwen2.5-VL-72B-Instruct", "Qwen/Qwen2.5-Coder-32B-Instruct"),
+        "Quality (Large models)": ("Qwen/Qwen2.5-VL-72B-Instruct", "deepseek-ai/DeepSeek-V3"),
+    }
+    return tier_map.get(performance_tier, (DEFAULT_VISION_MODEL, DEFAULT_CODE_MODEL))
+
+
 # =========================
-# Gradio UI (Brizy-inspired palette, no emojis)
+# Gradio UI
 # =========================
-BRIZY_PRIMARY = "#6C5CE7"     # Indigo-like
-BRIZY_SECONDARY = "#00C2FF"   # Cyan accent
-BRIZY_BG = "#F7F9FC"          # Light background
-BRIZY_SURFACE = "#FFFFFF"     # Surface
-BRIZY_TEXT = "#1F2937"        # Dark text
-BRIZY_MUTED = "#6B7280"       # Muted text
-BRIZY_BORDER = "#E5E7EB"      # Soft border
+BRIZY_PRIMARY = "#6C5CE7"
+BRIZY_SECONDARY = "#00C2FF"
+BRIZY_BG = "#F7F9FC"
+BRIZY_SURFACE = "#FFFFFF"
+BRIZY_TEXT = "#1F2937"
+BRIZY_MUTED = "#6B7280"
+BRIZY_BORDER = "#E5E7EB"
 BRIZY_GRADIENT = f"linear-gradient(135deg, {BRIZY_PRIMARY} 0%, {BRIZY_SECONDARY} 100%)"
 
+custom_css = f"""
+    :root {{
+        --app-primary: {BRIZY_PRIMARY};
+        --app-secondary: {BRIZY_SECONDARY};
+        --app-bg: {BRIZY_BG};
+        --app-surface: {BRIZY_SURFACE};
+        --app-text: {BRIZY_TEXT};
+        --app-muted: {BRIZY_MUTED};
+        --app-border: {BRIZY_BORDER};
+    }}
+
+    body {{
+        background: var(--app-bg);
+        color: var(--app-text);
+    }}
+
+    .section {{
+        border: 1px solid var(--app-border);
+        padding: 16px;
+        border-radius: 12px;
+        background: var(--app-surface);
+        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+        margin: 10px 0;
+    }}
+
+    .muted {{
+        color: var(--app-muted);
+        font-size: 0.92em;
+    }}
+
+    .footer {{
+        text-align: center;
+        color: var(--app-muted);
+        padding: 8px 0;
+    }}
+
+    .title h1 {{
+        background: {BRIZY_GRADIENT};
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        font-weight: 800;
+        letter-spacing: -0.02em;
+    }}
+
+    .primary-btn button {{
+        background: {BRIZY_GRADIENT} !important;
+        color: #fff !important;
+        border: none !important;
+        font-weight: 600 !important;
+        padding: 12px 24px !important;
+        font-size: 16px !important;
+    }}
+    .primary-btn button:hover {{
+        filter: brightness(0.95);
+        transform: translateY(-1px);
+        transition: all 0.2s;
+    }}
+
+    .secondary-btn button {{
+        background: var(--app-surface) !important;
+        color: var(--app-text) !important;
+        border: 1px solid var(--app-border) !important;
+        font-weight: 500 !important;
+    }}
+    .secondary-btn button:hover {{
+        border-color: {BRIZY_PRIMARY} !important;
+        color: {BRIZY_PRIMARY} !important;
+    }}
+
+    /* Inputs focus */
+    input:focus, textarea:focus, select:focus {{
+        outline-color: {BRIZY_PRIMARY} !important;
+        border-color: {BRIZY_PRIMARY} !important;
+        box-shadow: 0 0 0 3px rgba(108,92,231,0.15) !important;
+    }}
+
+    /* Code block accents */
+    .gr-code .cm-editor, .gr-code textarea {{
+        border-radius: 10px !important;
+        border: 1px solid var(--app-border) !important;
+    }}
+
+    /* Tabs accent */
+    .gradio-container .tabs .tab-nav button[aria-selected="true"] {{
+        color: {BRIZY_PRIMARY} !important;
+        border-bottom: 2px solid {BRIZY_PRIMARY} !important;
+    }}
+    
+    /* Model recommendation badge */
+    .model-badge {{
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 8px;
+    }}
+    .badge-fast {{
+        background-color: #10B981;
+        color: white;
+    }}
+    .badge-balanced {{
+        background-color: #3B82F6;
+        color: white;
+    }}
+    .badge-quality {{
+        background-color: #8B5CF6;
+        color: white;
+    }}
+"""
+
 with gr.Blocks(
     theme=gr.themes.Soft(),
     title="AI Website Generator (Nebius)",
-    css=f"""
-        :root {{
-            --app-primary: {BRIZY_PRIMARY};
-            --app-secondary: {BRIZY_SECONDARY};
-            --app-bg: {BRIZY_BG};
-            --app-surface: {BRIZY_SURFACE};
-            --app-text: {BRIZY_TEXT};
-            --app-muted: {BRIZY_MUTED};
-            --app-border: {BRIZY_BORDER};
-        }}
-
-        body {{
-            background: var(--app-bg);
-            color: var(--app-text);
-        }}
-
-        .section {{
-            border: 1px solid var(--app-border);
-            padding: 16px;
-            border-radius: 12px;
-            background: var(--app-surface);
-            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
-            margin: 10px 0;
-        }}
-
-        .muted {{
-            color: var(--app-muted);
-            font-size: 0.92em;
-        }}
-
-        .footer {{
-            text-align: center;
-            color: var(--app-muted);
-            padding: 8px 0;
-        }}
-
-        .title h1 {{
-            background: {BRIZY_GRADIENT};
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-            font-weight: 800;
-            letter-spacing: -0.02em;
-        }}
-
-        .primary-btn button {{
-            background: {BRIZY_GRADIENT} !important;
-            color: #fff !important;
-            border: none !important;
-        }}
-        .primary-btn button:hover {{
-            filter: brightness(0.98);
-        }}
-
-        .secondary-btn button {{
-            background: var(--app-surface) !important;
-            color: var(--app-text) !important;
-            border: 1px solid var(--app-border) !important;
-        }}
-        .secondary-btn button:hover {{
-            border-color: {BRIZY_PRIMARY} !important;
-            color: {BRIZY_PRIMARY} !important;
-        }}
-
-        /* Inputs focus */
-        input:focus, textarea:focus, select:focus {{
-            outline-color: {BRIZY_PRIMARY} !important;
-            border-color: {BRIZY_PRIMARY} !important;
-            box-shadow: 0 0 0 3px rgba(108,92,231,0.15) !important;
-        }}
-
-        /* Code block accents */
-        .gr-code .cm-editor, .gr-code textarea {{
-            border-radius: 10px !important;
-            border: 1px solid var(--app-border) !important;
-        }}
-
-        /* Tabs accent */
-        .gradio-container .tabs .tab-nav button[aria-selected="true"] {{
-            color: {BRIZY_PRIMARY} !important;
-            border-bottom: 2px solid {BRIZY_PRIMARY} !important;
-        }}
-    """,
+    css=custom_css,
 ) as app:
     gr.Markdown(
         """
-# AI Website Generator (Nebius)
-Turn website screenshots into functional HTML using Nebius-compatible models.
-
-- Image analysis (choose a vision model)
-- Code generation (choose a code-capable model)
-- One-click CodeSandbox deployment
-- Editor links open index.html and style.css directly
-- Your key is used at runtime only
+# 🚀 AI Website Generator (Nebius)
+Turn website screenshots into functional HTML using state-of-the-art Nebius-compatible models.
+
+### ✨ Features:
+- **Vision Models**: Qwen VL series, Llama 3.2 Vision, Pixtral for image analysis
+- **Code Models**: DeepSeek V3, Qwen Coder, Llama 3.1, Mixtral for code generation
+- **Smart Fallbacks**: Automatic model switching if primary model is unavailable
+- **One-click Deployment**: Direct CodeSandbox integration
+- **Performance Tiers**: Choose between speed and quality
         """,
         elem_classes=["title"],
     )
 
-    with gr.Accordion("API & Models", open=True):
-        gr.Markdown("Provide your Nebius API key or use the default configured in this app.", elem_classes=["muted"])
-        nebius_key = gr.Textbox(
-            label="Nebius API Key",
-            type="password",
-            placeholder="Paste your Nebius API key, or leave as-is to use the default key.",
-            value=DEFAULT_NEBIUS_API_KEY,
+    with gr.Accordion("⚙️ API & Model Configuration", open=True):
+        gr.Markdown(
+            """
+            Configure your Nebius API key and select models. The app includes a default key for testing.
+            
+            **💡 Model Recommendations:**
+            - **Fast**: 7B models for quick prototyping
+            - **Balanced**: 32B-70B models for good quality/speed ratio
+            - **Quality**: Large models for best results
+            """,
+            elem_classes=["muted"]
         )
+        
+        with gr.Row():
+            nebius_key = gr.Textbox(
+                label="Nebius API Key",
+                type="password",
+                placeholder="Paste your Nebius API key, or use the default",
+                value=DEFAULT_NEBIUS_API_KEY,
+            )
+            performance_tier = gr.Radio(
+                label="Performance Tier",
+                choices=["Fast (7B models)", "Balanced (32B-70B)", "Quality (Large models)"],
+                value="Balanced (32B-70B)",
+                info="Automatically selects optimal models for your needs"
+            )
+        
         with gr.Row():
             vision_model_dd = gr.Dropdown(
-                label="Vision Model",
+                label="Vision Model (for image analysis)",
                 choices=VISION_MODELS,
                 value=DEFAULT_VISION_MODEL,
                 allow_custom_value=True,
-                info="You can also type a custom model name supported by your Nebius endpoint.",
+                info="Select or type a custom vision-capable model",
             )
             code_model_dd = gr.Dropdown(
                 label="Code Generation Model",
                 choices=CODE_MODELS,
                 value=DEFAULT_CODE_MODEL,
                 allow_custom_value=True,
-                info="You can also type a custom model name supported by your Nebius endpoint.",
+                info="Select or type a custom code generation model",
             )
+        
         with gr.Row():
             code_max_tokens = gr.Slider(
                 label="Max tokens (code generation)",
@@ -559,7 +801,7 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                 maximum=8000,
                 step=100,
                 value=4000,
-                info="Lower this if you see timeouts; higher values may take longer.",
+                info="⚠️ Lower this if you experience timeouts",
             )
             code_temperature = gr.Slider(
                 label="Temperature",
@@ -567,37 +809,65 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                 maximum=1.5,
                 step=0.1,
                 value=0.7,
-                info="Higher is more creative; lower is more deterministic.",
+                info="Higher = more creative, Lower = more consistent",
             )
+        
+        # Auto-select models based on performance tier
+        def update_models_from_tier(tier):
+            vision, code = get_model_recommendations(tier)
+            return vision, code
+        
+        performance_tier.change(
+            fn=update_models_from_tier,
+            inputs=[performance_tier],
+            outputs=[vision_model_dd, code_model_dd]
+        )
 
-    with gr.Tab("Quick Generate"):
+    with gr.Tab("🎯 Quick Generate"):
         with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("### Step 1: Upload Screenshot", elem_classes=["section"])
+                gr.Markdown("### 📸 Step 1: Upload Screenshot", elem_classes=["section"])
                 image_input = gr.Image(
                     type="pil",
                     label="Website Screenshot",
                     sources=["upload", "clipboard"],
-                    height=280,
+                    height=300,
+                )
+                
+                gr.Markdown(
+                    """
+                    **Tips for best results:**
+                    - Use clear, high-quality screenshots
+                    - Include full page layouts
+                    - Avoid complex animations in source
+                    """,
+                    elem_classes=["muted"]
                 )
-                generate_btn = gr.Button("Generate Website", elem_classes=["primary-btn"])
+                
+                generate_btn = gr.Button("🚀 Generate Website", elem_classes=["primary-btn"], size="lg")
 
             with gr.Column(scale=2):
-                gr.Markdown("### Step 2: Review Results", elem_classes=["section"])
-                description_output = gr.Textbox(
-                    label="Image Analysis",
-                    lines=6,
-                    interactive=False,
-                )
-                html_output = gr.Code(
-                    label="Generated HTML (copy or download)",
-                    language="html",
-                    lines=18,
-                )
+                gr.Markdown("### 📝 Step 2: Review Results", elem_classes=["section"])
+                
+                with gr.Tabs():
+                    with gr.TabItem("Analysis"):
+                        description_output = gr.Textbox(
+                            label="Image Analysis Result",
+                            lines=8,
+                            interactive=False,
+                        )
+                    
+                    with gr.TabItem("Generated Code"):
+                        html_output = gr.Code(
+                            label="Generated HTML (copy or download)",
+                            language="html",
+                            lines=20,
+                        )
 
                 with gr.Row():
-                    codesandbox_btn = gr.Button("Deploy to CodeSandbox", elem_classes=["secondary-btn"])
-                    download_btn = gr.Button("Download index.html", elem_classes=["secondary-btn"])
+                    codesandbox_btn = gr.Button("☁️ Deploy to CodeSandbox", elem_classes=["secondary-btn"])
+                    download_btn = gr.Button("💾 Download HTML", elem_classes=["secondary-btn"])
+                    copy_btn = gr.Button("📋 Copy Code", elem_classes=["secondary-btn"])
 
                 codesandbox_links = gr.Markdown(value="")
                 download_file = gr.File(
@@ -606,21 +876,59 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
                     visible=False,
                 )
 
-    with gr.Tab("Individual Tools"):
+    with gr.Tab("🛠️ Individual Tools"):
         with gr.Row():
             with gr.Column():
-                gr.Markdown("### Image Analysis Tool", elem_classes=["section"])
-                img_tool = gr.Image(type="pil", label="Image")
+                gr.Markdown("### 🔍 Image Analysis Tool", elem_classes=["section"])
+                img_tool = gr.Image(type="pil", label="Upload Image")
                 analyze_btn = gr.Button("Analyze Image", elem_classes=["secondary-btn"])
-                analysis_result = gr.Textbox(label="Analysis Result", lines=6)
+                analysis_result = gr.Textbox(label="Analysis Result", lines=8)
 
             with gr.Column():
-                gr.Markdown("### Code Generation Tool", elem_classes=["section"])
-                desc_input = gr.Textbox(label="Description", lines=4, placeholder="Describe the page you want...")
+                gr.Markdown("### 💻 Code Generation Tool", elem_classes=["section"])
+                desc_input = gr.Textbox(
+                    label="Website Description",
+                    lines=6,
+                    placeholder="Describe the website you want to create...\n\nExample: A modern landing page with a hero section, navigation bar, features grid, and contact form..."
+                )
                 code_btn = gr.Button("Generate Code", elem_classes=["secondary-btn"])
-                code_result = gr.Code(label="Generated Code", language="html")
+                code_result = gr.Code(label="Generated Code", language="html", lines=12)
+
+    with gr.Tab("📚 Model Information"):
+        gr.Markdown(
+            """
+            ## Available Models on Nebius
+            
+            ### 👁️ Vision Models (Image Analysis)
+            - **Qwen/Qwen2.5-VL-72B-Instruct** - Best quality, latest Qwen vision model
+            - **Qwen/Qwen2.5-VL-7B-Instruct** - Fast, efficient vision model
+            - **meta-llama/Llama-3.2-90B-Vision-Instruct** - Meta's powerful vision model
+            - **mistralai/Pixtral-12B-2409** - Mistral's vision model
+            
+            ### 💻 Code Generation Models
+            - **deepseek-ai/DeepSeek-V3** - State-of-the-art code generation
+            - **Qwen/Qwen2.5-Coder-32B-Instruct** - Specialized for coding tasks
+            - **Qwen/QwQ-32B-Preview** - Advanced reasoning capabilities
+            - **meta-llama/Meta-Llama-3.1-405B-Instruct** - Largest Llama model
+            - **mistralai/Mixtral-8x22B-Instruct-v0.1** - MOE architecture for efficiency
+            
+            ### 🎯 Performance Guidelines
+            - **Timeouts?** → Reduce max tokens or use smaller models
+            - **Quality issues?** → Use larger models or increase temperature
+            - **Model not found?** → The app will automatically try fallback models
+            """,
+            elem_classes=["section"]
+        )
 
-    gr.Markdown("Made with Gradio • Nebius API compatible", elem_classes=["footer"])
+    gr.Markdown(
+        """
+        ---
+        Made with ❤️ using Gradio • Powered by Nebius AI Studio
+        
+        [GitHub](https://github.com) | [Documentation](https://nebius.com/docs) | [API Reference](https://nebius.com/api)
+        """,
+        elem_classes=["footer"]
+    )
 
     # Event bindings
     generate_btn.click(
@@ -630,11 +938,9 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
     )
 
     def _deploy_to_codesandbox(html_code: str) -> str:
-        url_block = create_codesandbox(html_code)
-        if url_block.startswith("Error"):
-            return f"**{url_block}**"
-        lines = ["### CodeSandbox Links", "", url_block]
-        return "\n".join(lines)
+        if not html_code or html_code.startswith("Error"):
+            return "⚠️ **No valid code to deploy.** Generate code first."
+        return create_codesandbox(html_code)
 
     codesandbox_btn.click(
         fn=_deploy_to_codesandbox,
@@ -651,6 +957,18 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
         inputs=[html_output],
         outputs=[download_file],
     )
+    
+    def _copy_to_clipboard(html_code: str) -> str:
+        if not html_code or html_code.startswith("Error"):
+            return "⚠️ No valid code to copy"
+        # Note: Actual clipboard copying happens client-side
+        return "✅ Code copied to clipboard!"
+    
+    copy_btn.click(
+        fn=_copy_to_clipboard,
+        inputs=[html_output],
+        outputs=[codesandbox_links],
+    )
 
     analyze_btn.click(
         fn=lambda img, key, vmod: analyze_image(img, key, vmod),
@@ -667,4 +985,4 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
     )
 
 if __name__ == "__main__":
-    app.launch(share=False)
+    app.launch(share=False, show_error=True)