Update app.py

app.py

@@ -5,6 +5,7 @@ import os
 import re
 import tempfile
 from typing import Tuple, Optional, List, Dict, Any
+from datetime import datetime
 
 import gradio as gr
 import httpx
@@ -16,46 +17,111 @@ from lzstring import LZString
 # =========================
 NEBIUS_BASE_URL = "https://api.studio.nebius.com/v1/"
 
-# Vision models (these work with Nebius)
+# Current date/time and user for logging
+CURRENT_USER = "samsnata"
+CURRENT_DATETIME = datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S UTC")
+
+# Vision models - Only Qwen VL models work reliably with Nebius for vision tasks
 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.5-VL-7B-Instruct",  # Smaller, faster alternative
+    "Qwen/Qwen2-VL-72B-Instruct",    # Previous version, still reliable
 ]
 
-# Code/text models - use exact IDs that Nebius supports
-DEFAULT_CODE_MODEL = "deepseek-ai/DeepSeek-V3-0324"
+# Code/text models - Best non-Chinese alternatives that work on Nebius
+# Based on Nebius documentation, these are the confirmed working models:
+DEFAULT_CODE_MODEL = "meta-llama/Meta-Llama-3.1-70B-Instruct"  # Best non-Chinese option
+
 CODE_MODELS = [
-    DEFAULT_CODE_MODEL,
+    # Meta (Facebook) Models - CONFIRMED WORKING
+    "meta-llama/Meta-Llama-3.1-70B-Instruct",  # Best overall performance
+    "meta-llama/Meta-Llama-3.1-8B-Instruct",   # Faster, lighter option
+    "meta-llama/Meta-Llama-3.1-405B-Instruct-FP8",  # Most powerful, but slower
+    
+    # Mistral AI Models - European alternative
+    "mistralai/Mistral-7B-Instruct-v0.3",      # Fast and efficient
+    "mistralai/Mixtral-8x7B-Instruct-v0.1",    # MoE architecture, good balance
+    "mistralai/Mixtral-8x22B-Instruct-v0.1",   # Larger MoE model
+    "mistralai/Mistral-Nemo-Instruct-2407",    # Latest Mistral model
+    
+    # Anthropic-style (if available)
+    "Qwen/Qwen2.5-72B-Instruct",  # Fallback option
+    
+    # DeepSeek models (Chinese, but included as fallback)
+    "deepseek-ai/DeepSeek-V3-0324",
     "Qwen/Qwen2.5-Coder-32B-Instruct",
-    "Qwen/Qwen2.5-72B-Instruct",
-    "Qwen/QwQ-32B-Preview",
-    # These are the correct Nebius model IDs for Meta and Mistral
-    "meta-llama/Meta-Llama-3.1-70B-Instruct",
-    "meta-llama/Meta-Llama-3.1-8B-Instruct",
-    "mistralai/Mistral-7B-Instruct-v0.3",
-    "mistralai/Mixtral-8x7B-Instruct-v0.1",
 ]
 
+# Model configurations optimized for each model type
+MODEL_CONFIGS = {
+    "meta-llama/Meta-Llama-3.1-70B-Instruct": {
+        "max_tokens": 4096,
+        "temperature": 0.7,
+        "timeout": 90.0,
+        "description": "Meta's Llama 3.1 70B - Best overall performance"
+    },
+    "meta-llama/Meta-Llama-3.1-8B-Instruct": {
+        "max_tokens": 4096,
+        "temperature": 0.7,
+        "timeout": 60.0,
+        "description": "Meta's Llama 3.1 8B - Fast and efficient"
+    },
+    "meta-llama/Meta-Llama-3.1-405B-Instruct-FP8": {
+        "max_tokens": 8192,
+        "temperature": 0.7,
+        "timeout": 180.0,
+        "description": "Meta's Llama 3.1 405B - Most powerful, longer wait times"
+    },
+    "mistralai/Mistral-7B-Instruct-v0.3": {
+        "max_tokens": 4096,
+        "temperature": 0.7,
+        "timeout": 60.0,
+        "description": "Mistral 7B - European, fast"
+    },
+    "mistralai/Mixtral-8x7B-Instruct-v0.1": {
+        "max_tokens": 4096,
+        "temperature": 0.7,
+        "timeout": 90.0,
+        "description": "Mixtral 8x7B MoE - Good balance"
+    },
+    "mistralai/Mixtral-8x22B-Instruct-v0.1": {
+        "max_tokens": 6144,
+        "temperature": 0.7,
+        "timeout": 120.0,
+        "description": "Mixtral 8x22B MoE - Powerful European model"
+    },
+    "mistralai/Mistral-Nemo-Instruct-2407": {
+        "max_tokens": 4096,
+        "temperature": 0.7,
+        "timeout": 75.0,
+        "description": "Mistral Nemo - Latest from Mistral AI"
+    }
+}
+
 # Model ID mappings for common aliases
 MODEL_ALIASES = {
-    "Meta-Llama-3.1-70B-Instruct": "meta-llama/Meta-Llama-3.1-70B-Instruct",
-    "Meta-Llama-3-8B-Instruct": "meta-llama/Meta-Llama-3.1-8B-Instruct",
-    "Mistral-7B-Instruct": "mistralai/Mistral-7B-Instruct-v0.3",
-    "Mixtral-8x7B-Instruct": "mistralai/Mixtral-8x7B-Instruct-v0.1",
+    "Llama-3.1-70B": "meta-llama/Meta-Llama-3.1-70B-Instruct",
+    "Llama-3.1-8B": "meta-llama/Meta-Llama-3.1-8B-Instruct",
+    "Llama-3.1-405B": "meta-llama/Meta-Llama-3.1-405B-Instruct-FP8",
+    "Mistral-7B": "mistralai/Mistral-7B-Instruct-v0.3",
+    "Mixtral-8x7B": "mistralai/Mixtral-8x7B-Instruct-v0.1",
+    "Mixtral-8x22B": "mistralai/Mixtral-8x22B-Instruct-v0.1",
+    "Mistral-Nemo": "mistralai/Mistral-Nemo-Instruct-2407",
 }
 
-# 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
+# Optimized timeouts for different model sizes
+def get_model_timeout(model_id: str) -> httpx.Timeout:
+    """Get optimized timeout for specific model."""
+    config = MODEL_CONFIGS.get(model_id, {})
+    read_timeout = config.get("timeout", 120.0)
+    return httpx.Timeout(connect=10.0, read=read_timeout, write=30.0, pool=60.0)
 
 # Keep the same default key you provided 
 DEFAULT_NEBIUS_API_KEY = (
     "eyJhbGciOiJIUzI1NiIsImtpZCI6IlV6SXJWd1h0dnprLVRvdzlLZWstc0M1akptWXBvX1VaVkxUZlpnMDRlOFUiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiJnb29nbGUtb2F1dGgyfDEwNTA1MTQzMDg2MDMwMzIxNDEwMiIsInNjb3BlIjoib3BlbmlkIG9mZmxpbmVfYWNjZXNzIiwiaXNzIjoiYXBpX2tleV9pc3N1ZXIiLCJhdWQiOlsiaHR0cHM6Ly9uZWJpdXMtaW5mZXJlbmNlLmV1LmF1dGgwLmNvbS9hcGkvdjIvIl0sImV4cCI6MTkwNjU5ODA0NCwidXVpZCI6ImNkOGFiMWZlLTIxN2QtNDJlMy04OWUwLWM1YTg4MjcwMGVhNyIsIm5hbWUiOiJodW5nZ2luZyIsImV4cGlyZXNfYXQiOiIyMDMwLTA2LTAyVDAyOjM0OjA0KzAwMDAifQ.MA52QuIiNruK7_lX688RXAEI2TkcCOjcf_02XrpnhI8"
 )
 
-
 # =========================
 # Helpers
 # =========================
@@ -85,7 +151,7 @@ def normalize_model_id(model_id: str) -> str:
     model_lower = model_id.lower()
     if "llama" in model_lower:
         return f"meta-llama/{model_id}"
-    elif "mistral" in model_lower or "mixtral" in model_lower:
+    elif "mistral" in model_lower or "mixtral" in model_lower or "nemo" in model_lower:
         return f"mistralai/{model_id}"
     elif "qwen" in model_lower or "qwq" in model_lower:
         return f"Qwen/{model_id}"
@@ -103,7 +169,7 @@ def call_chat_completions(
     temperature: float = 0.7,
 ) -> str:
     """
-    Calls the Nebius chat/completions endpoint.
+    Calls the Nebius chat/completions endpoint with optimized settings for each model.
     Returns the assistant text content.
     """
     if not api_key:
@@ -112,8 +178,16 @@ def call_chat_completions(
     # Normalize the model ID
     model = normalize_model_id(model)
     
+    # Get model-specific configuration
+    model_config = MODEL_CONFIGS.get(model, {})
+    if model_config:
+        max_tokens = min(max_tokens, model_config.get("max_tokens", max_tokens))
+    
     headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
-    transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
+    
+    # Get optimized timeout for this model
+    timeout = get_model_timeout(model)
+    transport = httpx.HTTPTransport(retries=2)
 
     # Use chat/completions endpoint
     chat_url = f"{NEBIUS_BASE_URL}chat/completions"
@@ -122,27 +196,32 @@ def call_chat_completions(
         "messages": messages,
         "max_tokens": max_tokens,
         "temperature": temperature,
+        "stream": False,  # Disable streaming for stability
     }
 
+    # Log the request for debugging
+    print(f"[{CURRENT_DATETIME}] User: {CURRENT_USER} - Calling model: {model}")
+
     try:
-        with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
+        with httpx.Client(timeout=timeout, transport=transport) as client:
             resp = client.post(chat_url, headers=headers, json=chat_payload)
             
             if resp.status_code == 404:
-                # Try alternative model IDs for Meta/Mistral
-                alt_models = []
-                if "meta-llama" in model:
-                    alt_models = ["meta-llama/Meta-Llama-3.1-70B-Instruct", "meta-llama/Meta-Llama-3.1-8B-Instruct"]
-                elif "mistralai" in model:
-                    alt_models = ["mistralai/Mistral-7B-Instruct-v0.3", "mistralai/Mixtral-8x7B-Instruct-v0.1"]
+                # Model not found - try fallback models
+                fallback_models = [
+                    "meta-llama/Meta-Llama-3.1-70B-Instruct",
+                    "mistralai/Mixtral-8x7B-Instruct-v0.1",
+                    "Qwen/Qwen2.5-72B-Instruct",
+                ]
                 
-                for alt_model in alt_models:
-                    if alt_model != model:
-                        chat_payload["model"] = alt_model
+                for fallback in fallback_models:
+                    if fallback != model:
+                        print(f"[{CURRENT_DATETIME}] Trying fallback model: {fallback}")
+                        chat_payload["model"] = fallback
                         try:
                             resp = client.post(chat_url, headers=headers, json=chat_payload)
                             if resp.status_code == 200:
-                                model = alt_model
+                                model = fallback
                                 break
                         except:
                             continue
@@ -161,20 +240,25 @@ def call_chat_completions(
             
             raise RuntimeError("Unable to parse response from API")
             
+    except httpx.ReadTimeout:
+        raise RuntimeError(
+            f"Request timed out after {timeout.read}s. Model '{model}' may be too large. "
+            f"Try a smaller model like 'meta-llama/Meta-Llama-3.1-8B-Instruct' or 'mistralai/Mistral-7B-Instruct-v0.3'"
+        )
     except httpx.HTTPStatusError as e:
         status = e.response.status_code
         detail = e.response.text
         
         if status == 404:
-            # Provide helpful error message
+            # Provide helpful error message with working alternatives
             available_models = [
-                "Qwen/Qwen2.5-72B-Instruct",
-                "Qwen/Qwen2.5-Coder-32B-Instruct", 
-                "deepseek-ai/DeepSeek-V3-0324"
+                "meta-llama/Meta-Llama-3.1-70B-Instruct (Recommended)",
+                "mistralai/Mixtral-8x7B-Instruct-v0.1 (Fast)",
+                "meta-llama/Meta-Llama-3.1-8B-Instruct (Lightweight)",
             ]
             raise RuntimeError(
-                f"Model '{model}' not found. The Nebius endpoint may not support Meta/Mistral models. "
-                f"Try one of these working models instead: {', '.join(available_models)}"
+                f"Model '{model}' not found on Nebius. "
+                f"Try one of these confirmed working models: {', '.join(available_models)}"
             )
         raise RuntimeError(f"HTTP {status} error: {detail}")
     except Exception as e:
@@ -260,7 +344,8 @@ def analyze_image(
     vision_model: str = DEFAULT_VISION_MODEL,
 ) -> str:
     """
-    Analyze an uploaded image and provide a concise description of its content and layout.
+    Analyze an uploaded image and provide a detailed description of its content and layout.
+    Note: Only Qwen VL models support vision on Nebius.
     """
     if image is None:
         return "Error: No image provided."
@@ -269,16 +354,22 @@ def analyze_image(
     if not api_key:
         return "Error: Nebius API key not provided."
 
+    # Force use of Qwen VL model for vision tasks
+    if not vision_model.startswith("Qwen") or "VL" not in vision_model:
+        print(f"[{CURRENT_DATETIME}] Warning: {vision_model} doesn't support vision. Using {DEFAULT_VISION_MODEL}")
+        vision_model = DEFAULT_VISION_MODEL
+
     try:
         buffered = io.BytesIO()
         image.save(buffered, format="PNG")
         img_b64 = base64.b64encode(buffered.getvalue()).decode("utf-8")
 
         prompt = (
-            "Analyze this image and provide a concise description. "
+            "Analyze this image and provide a detailed 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 typography, spacing, alignment, and color schemes."
         )
 
         messages = [
@@ -295,7 +386,7 @@ def analyze_image(
             model=vision_model,
             messages=messages,
             api_key=api_key,
-            max_tokens=1000,
+            max_tokens=1500,
             temperature=0.7,
         )
         return content
@@ -312,7 +403,7 @@ def generate_html_code(
 ) -> str:
     """
     Generate HTML/CSS/JavaScript code based on a website description.
-    Falls back to working models if selected model is unavailable.
+    Uses non-Chinese models (Meta Llama or Mistral) by default.
     """
     if not description or description.startswith("Error"):
         return "Error: Invalid or missing description."
@@ -321,75 +412,119 @@ def generate_html_code(
     if not api_key:
         return "Error: Nebius API key not provided."
 
+    # Enhanced prompt for better code generation
     prompt = f"""
-Generate a complete, responsive webpage based on this description:
+You are an expert web developer. Generate a complete, production-ready webpage based on this description:
 
 {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
-- Include proper semantic HTML structure
-- Add interactive elements where appropriate
-- Ensure the design matches the described layout and style
-
-Return only the complete HTML code starting with <!DOCTYPE html> and ending with </html>.
+- Create a single HTML file with all CSS and JavaScript inline
+- Use modern HTML5, CSS3, and vanilla JavaScript
+- Include TailwindCSS via CDN for utility-first styling
+- Make it fully responsive (mobile, tablet, desktop)
+- Use semantic HTML elements for accessibility
+- Add smooth animations and transitions where appropriate
+- Include placeholder content that matches the description
+- Use high-quality placeholder images from Unsplash (https://source.unsplash.com/)
+- Ensure proper color contrast for readability
+- Add interactive elements (hover effects, smooth scrolling, etc.)
+- Include meta tags for SEO and viewport
+
+Technical requirements:
+- Start with <!DOCTYPE html>
+- Include complete <head> section with meta tags
+- All CSS in <style> tags
+- All JavaScript in <script> tags at the end of body
+- Use CSS Grid or Flexbox for layouts
+- Include CSS custom properties for theming
+
+Generated for: {CURRENT_USER} on {CURRENT_DATETIME}
+
+Return only the complete HTML code. Do not include any explanations or markdown formatting.
 """.strip()
 
-    # List of models to try in order
-    models_to_try = [code_model]
+    # Prefer non-Chinese models
+    preferred_models = [
+        code_model,  # User's selection
+        "meta-llama/Meta-Llama-3.1-70B-Instruct",
+        "mistralai/Mixtral-8x7B-Instruct-v0.1",
+        "meta-llama/Meta-Llama-3.1-8B-Instruct",
+        "mistralai/Mistral-7B-Instruct-v0.3",
+    ]
     
-    # Add fallback models if the selected one fails
+    # Only use Chinese models as last resort
     fallback_models = [
-        "deepseek-ai/DeepSeek-V3-0324",
         "Qwen/Qwen2.5-72B-Instruct",
-        "Qwen/Qwen2.5-Coder-32B-Instruct",
+        "deepseek-ai/DeepSeek-V3-0324",
     ]
     
-    for fallback in fallback_models:
-        if fallback not in models_to_try:
-            models_to_try.append(fallback)
+    models_to_try = []
+    for model in preferred_models:
+        if model not in models_to_try:
+            models_to_try.append(model)
+    for model in fallback_models:
+        if model not in models_to_try:
+            models_to_try.append(model)
 
     last_error = None
     for model in models_to_try:
         try:
+            print(f"[{CURRENT_DATETIME}] Attempting code generation with: {model}")
+            
+            # Adjust max_tokens based on model
+            model_config = MODEL_CONFIGS.get(model, {})
+            adjusted_max_tokens = min(code_max_tokens, model_config.get("max_tokens", code_max_tokens))
+            
             messages = [{"role": "user", "content": prompt}]
             content = call_chat_completions(
                 model=model,
                 messages=messages,
                 api_key=api_key,
-                max_tokens=code_max_tokens,
+                max_tokens=adjusted_max_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]
+            # Validate HTML structure
+            if "<!DOCTYPE html>" in html_code.upper() and "</html>" in html_code.lower():
+                start = html_code.upper().find("<!DOCTYPE HTML")
+                end = html_code.lower().rfind("</html>") + len("</html>")
+                final_code = html_code[start:end]
+                
+                # Add generation metadata
+                if "<!-- Generated by" not in final_code:
+                    final_code = final_code.replace(
+                        "<head>",
+                        f"<head>\n  <!-- Generated by AI Website Generator for {CURRENT_USER} on {CURRENT_DATETIME} using {model} -->"
+                    )
+                
+                return final_code
             return html_code
             
         except Exception as e:
             last_error = str(e)
-            # If it's not a 404, don't try other models
-            if "not found" not in str(e).lower() and "404" not in str(e):
+            print(f"[{CURRENT_DATETIME}] Failed with {model}: {last_error}")
+            
+            # Don't retry on non-404 errors unless it's a timeout
+            if "timeout" not in str(e).lower() and "not found" not in str(e).lower() and "404" not in str(e):
                 break
             continue
 
     # All models failed
     return (
-        f"Error generating HTML code: {last_error}. "
-        f"Note: Meta and Mistral models may not be available on this Nebius endpoint. "
-        f"Please use Qwen or DeepSeek models which are confirmed to work."
+        f"Error generating HTML code: {last_error}\n\n"
+        f"Troubleshooting tips:\n"
+        f"1. Try using a smaller model (e.g., Meta-Llama-3.1-8B-Instruct)\n"
+        f"2. Reduce the max tokens setting\n"
+        f"3. Check your API key is valid\n"
+        f"4. Confirmed working models: Meta Llama 3.1 and Mistral models"
     )
 
 
 def create_codesandbox(html_code: str) -> str:
     """
-    Create a CodeSandbox project from HTML code, returning only editor links
-    for index.html (and style.css/script.js if present). Does not provide any live preview link.
+    Create a CodeSandbox project from HTML code.
     """
     if not html_code or html_code.startswith("Error"):
         return "Error: No valid HTML code provided."
@@ -410,7 +545,7 @@ def create_codesandbox(html_code: str) -> str:
                 {
                     "name": "ai-generated-website",
                     "version": "1.0.0",
-                    "description": "Website generated from image analysis",
+                    "description": f"Website generated from image analysis by {CURRENT_USER} on {CURRENT_DATETIME}",
                     "main": "index.html",
                     "scripts": {"start": "serve .", "build": "echo 'No build required'"},
                     "devDependencies": {"serve": "^14.0.0"},
@@ -426,35 +561,42 @@ def create_codesandbox(html_code: str) -> str:
         lz = LZString()
         compressed = lz.compressToBase64(json_str)
         compressed = compressed.replace("+", "-").replace("/", "_").rstrip("=")
+        
+        # Create both editor and preview URLs
         prefill_base = "https://codesandbox.io/api/v1/sandboxes/define"
-        prefill_index = f"{prefill_base}?parameters={compressed}&file=/index.html"
-        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 ""
-
+        
         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)
+        timeout = httpx.Timeout(connect=10.0, read=30.0, write=30.0, pool=60.0)
+        
+        with httpx.Client(timeout=timeout, transport=transport) as client:
             resp = client.post(url, json=parameters)
             if resp.status_code == 200:
                 data = resp.json()
                 sandbox_id = data.get("sandbox_id")
                 if sandbox_id:
-                    editor_base = f"https://codesandbox.io/p/sandbox/{sandbox_id}"
-                    lines = [
-                        f"- Open index.html in editor: {editor_base}?file=/index.html",
-                    ]
-                    if "style.css" in files:
-                        lines.append(f"- Open style.css in editor: {editor_base}?file=/style.css")
-                    if "script.js" in files:
-                        lines.append(f"- Open script.js in editor: {editor_base}?file=/script.js")
-                    return "\n".join(lines)
-
-        lines = [f"- Open index.html in editor: {prefill_index}"]
-        if prefill_css:
-            lines.append(f"- Open style.css in editor: {prefill_css}")
-        if prefill_js:
-            lines.append(f"- Open script.js in editor: {prefill_js}")
-        return "\n".join(lines)
+                    editor_url = f"https://codesandbox.io/s/{sandbox_id}"
+                    preview_url = f"https://{sandbox_id}.csb.app/"
+                    return f"""### CodeSandbox Links
+                    
+**Editor:** {editor_url}
+**Live Preview:** {preview_url}
+
+Files included:
+- index.html
+{('- style.css' if css_text else '')}
+{('- script.js' if js_text else '')}"""
+
+        # Fallback to define URL
+        define_url = f"{prefill_base}?parameters={compressed}"
+        return f"""### CodeSandbox Links
+
+**Open in Editor:** {define_url}
+
+Files included:
+- index.html
+{('- style.css' if css_text else '')}
+{('- script.js' if js_text else '')}"""
 
     except Exception as e:
         return f"Error creating CodeSandbox: {str(e)}"
@@ -475,6 +617,7 @@ def screenshot_to_code(
     description = analyze_image(image, nebius_api_key, vision_model)
     if description.startswith("Error"):
         return description, "Error: Cannot generate code due to image analysis failure."
+    
     html_code = generate_html_code(
         description,
         nebius_api_key,
@@ -501,207 +644,229 @@ def export_html_to_file(html_code: str) -> Optional[str]:
 
 
 # =========================
-# Gradio UI (Brizy-inspired palette, no emojis)
+# Gradio UI - Clean, modern design
 # =========================
-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_GRADIENT = f"linear-gradient(135deg, {BRIZY_PRIMARY} 0%, {BRIZY_SECONDARY} 100%)"
+MODERN_PRIMARY = "#6366F1"     # Indigo
+MODERN_SECONDARY = "#8B5CF6"   # Purple
+MODERN_SUCCESS = "#10B981"     # Green
+MODERN_WARNING = "#F59E0B"     # Amber
+MODERN_BG = "#FAFAFA"          # Light background
+MODERN_SURFACE = "#FFFFFF"     # Surface
+MODERN_TEXT = "#111827"        # Dark text
+MODERN_MUTED = "#6B7280"       # Muted text
+MODERN_BORDER = "#E5E7EB"      # Border
+MODERN_GRADIENT = f"linear-gradient(135deg, {MODERN_PRIMARY} 0%, {MODERN_SECONDARY} 100%)"
 
 with gr.Blocks(
     theme=gr.themes.Soft(),
-    title="AI Website Generator (Nebius)",
+    title=f"AI Website Generator - Nebius ({CURRENT_USER})",
     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};
+            --primary: {MODERN_PRIMARY};
+            --secondary: {MODERN_SECONDARY};
+            --success: {MODERN_SUCCESS};
+            --warning: {MODERN_WARNING};
+            --bg: {MODERN_BG};
+            --surface: {MODERN_SURFACE};
+            --text: {MODERN_TEXT};
+            --muted: {MODERN_MUTED};
+            --border: {MODERN_BORDER};
         }}
-
         body {{
-            background: var(--app-bg);
-            color: var(--app-text);
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'Inter', -apple-system, system-ui, sans-serif;
         }}
-
-        .section {{
-            border: 1px solid var(--app-border);
-            padding: 16px;
+        .header {{
+            background: {MODERN_GRADIENT};
+            color: white;
+            padding: 2rem;
             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 {{
+            margin-bottom: 2rem;
             text-align: center;
-            color: var(--app-muted);
-            padding: 8px 0;
         }}
-
-        .title h1 {{
-            background: {BRIZY_GRADIENT};
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
+        .header h1 {{
+            font-size: 2.5rem;
             font-weight: 800;
-            letter-spacing: -0.02em;
+            margin-bottom: 0.5rem;
         }}
-
-        .primary-btn button {{
-            background: {BRIZY_GRADIENT} !important;
-            color: #fff !important;
-            border: none !important;
-        }}
-        .primary-btn button:hover {{
-            filter: brightness(0.98);
+        .header p {{
+            opacity: 0.95;
+            font-size: 1.1rem;
         }}
-
-        .secondary-btn button {{
-            background: var(--app-surface) !important;
-            color: var(--app-text) !important;
-            border: 1px solid var(--app-border) !important;
+        .section {{
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin: 1rem 0;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }}
-        .secondary-btn button:hover {{
-            border-color: {BRIZY_PRIMARY} !important;
-            color: {BRIZY_PRIMARY} !important;
+        .model-info {{
+            background: #EEF2FF;
+            border: 1px solid {MODERN_PRIMARY};
+            border-radius: 8px;
+            padding: 1rem;
+            margin: 1rem 0;
         }}
-
         .warning-box {{
             background: #FEF3C7;
-            border: 1px solid #F59E0B;
+            border: 1px solid {MODERN_WARNING};
             border-radius: 8px;
-            padding: 12px;
-            margin: 10px 0;
+            padding: 1rem;
+            margin: 1rem 0;
             color: #92400E;
         }}
-
-        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;
+        .success-box {{
+            background: #D1FAE5;
+            border: 1px solid {MODERN_SUCCESS};
+            border-radius: 8px;
+            padding: 1rem;
+            margin: 1rem 0;
+            color: #065F46;
         }}
-
-        .gr-code .cm-editor, .gr-code textarea {{
-            border-radius: 10px !important;
-            border: 1px solid var(--app-border) !important;
+        .primary-btn {{
+            background: {MODERN_GRADIENT} !important;
+            color: white !important;
+            border: none !important;
+            font-weight: 600 !important;
         }}
-
-        .gradio-container .tabs .tab-nav button[aria-selected="true"] {{
-            color: {BRIZY_PRIMARY} !important;
-            border-bottom: 2px solid {BRIZY_PRIMARY} !important;
+        .secondary-btn {{
+            background: var(--surface) !important;
+            color: var(--primary) !important;
+            border: 2px solid var(--primary) !important;
+            font-weight: 600 !important;
+        }}
+        .footer {{
+            text-align: center;
+            padding: 2rem;
+            color: var(--muted);
+            border-top: 1px solid var(--border);
+            margin-top: 3rem;
+        }}
+        .model-tag {{
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            background: var(--primary);
+            color: white;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin: 0.25rem;
         }}
     """,
 ) as app:
-    gr.Markdown(
-        """
-# AI Website Generator (Nebius)
-Turn website screenshots into functional HTML using Nebius-compatible models.
-
-- Image analysis with vision models
-- Code generation with LLMs  
-- Open in CodeSandbox editor to inspect code
-- Your key is used at runtime only
+    gr.HTML(
+        f"""
+        <div class="header">
+            <h1>AI Website Generator</h1>
+            <p>Transform screenshots into production-ready websites using Nebius AI</p>
+            <p style="font-size: 0.9rem; opacity: 0.9;">User: {CURRENT_USER} | Session: {CURRENT_DATETIME}</p>
+        </div>
         """,
-        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"])
+    with gr.Accordion("Configuration & Models", open=True):
+        gr.Markdown(
+            """
+            ### API Configuration
+            Provide your Nebius API key or use the default configured key.
+            """,
+            elem_classes=["section"]
+        )
+        
         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.",
+            placeholder="Enter your Nebius API key (or use default)",
             value=DEFAULT_NEBIUS_API_KEY,
         )
         
-        gr.Markdown(
+        gr.HTML(
             """
-            <div class="warning-box">
-            <strong>Note:</strong> Currently, only Qwen and DeepSeek models are confirmed to work with this Nebius endpoint. 
-            Meta (Llama) and Mistral models may not be available.
+            <div class="success-box">
+                <strong>✓ Recommended Non-Chinese Models:</strong><br>
+                • <span class="model-tag">Meta Llama 3.1</span> - Best overall performance<br>
+                • <span class="model-tag">Mistral/Mixtral</span> - European alternative, fast<br>
+                • Vision: Only Qwen VL models support image analysis
             </div>
             """,
-            elem_classes=["warning-box"]
         )
         
         with gr.Row():
             vision_model_dd = gr.Dropdown(
-                label="Vision Model",
+                label="Vision Model (Only Qwen VL works)",
                 choices=VISION_MODELS,
                 value=DEFAULT_VISION_MODEL,
-                allow_custom_value=True,
-                info="Qwen vision models work best.",
+                info="Note: Only Qwen VL models support vision on Nebius",
             )
             code_model_dd = gr.Dropdown(
-                label="Code Generation Model (Recommended: Qwen/DeepSeek)",
+                label="Code Generation Model",
                 choices=CODE_MODELS,
                 value=DEFAULT_CODE_MODEL,
-                allow_custom_value=True,
-                info="DeepSeek and Qwen models are confirmed to work. Others may fail.",
+                info="Recommended: Meta Llama 3.1 or Mistral models",
             )
+        
         with gr.Row():
             code_max_tokens = gr.Slider(
-                label="Max tokens (code generation)",
-                minimum=500,
+                label="Max Tokens",
+                minimum=1000,
                 maximum=8000,
-                step=100,
+                step=500,
                 value=4000,
-                info="Lower this if you see timeouts; higher values may take longer.",
+                info="Lower values = faster generation, higher = more detailed code",
             )
             code_temperature = gr.Slider(
                 label="Temperature",
                 minimum=0.0,
-                maximum=1.5,
+                maximum=1.0,
                 step=0.1,
                 value=0.7,
-                info="Higher is more creative; lower is more deterministic.",
+                info="0.7 is optimal for code generation",
             )
 
     with gr.Tab("Quick Generate"):
         with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("### Step 1: Upload Screenshot", elem_classes=["section"])
+                gr.Markdown("### Input", elem_classes=["section"])
                 image_input = gr.Image(
                     type="pil",
-                    label="Website Screenshot",
+                    label="Upload Screenshot",
                     sources=["upload", "clipboard"],
-                    height=280,
+                    height=300,
+                )
+                generate_btn = gr.Button(
+                    "Generate Website",
+                    variant="primary",
+                    elem_classes=["primary-btn"]
                 )
-                generate_btn = gr.Button("Generate Website", elem_classes=["primary-btn"])
 
             with gr.Column(scale=2):
-                gr.Markdown("### Step 2: Review Results", elem_classes=["section"])
+                gr.Markdown("### Output", elem_classes=["section"])
                 description_output = gr.Textbox(
                     label="Image Analysis",
                     lines=6,
                     interactive=False,
                 )
                 html_output = gr.Code(
-                    label="Generated HTML (copy or download)",
+                    label="Generated HTML Code",
                     language="html",
-                    lines=18,
+                    lines=20,
                 )
 
                 with gr.Row():
-                    codesandbox_btn = gr.Button("Open in CodeSandbox Editor", 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"]
+                    )
 
                 codesandbox_links = gr.Markdown(value="")
                 download_file = gr.File(
-                    label="Download (index.html)",
+                    label="Download",
                     interactive=False,
                     visible=False,
                 )
@@ -709,18 +874,59 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
     with gr.Tab("Individual Tools"):
         with gr.Row():
             with gr.Column():
-                gr.Markdown("### Image Analysis Tool", elem_classes=["section"])
+                gr.Markdown("### Image Analysis", elem_classes=["section"])
                 img_tool = gr.Image(type="pil", label="Image")
-                analyze_btn = gr.Button("Analyze Image", elem_classes=["secondary-btn"])
-                analysis_result = gr.Textbox(label="Analysis Result", lines=6)
+                analyze_btn = gr.Button("Analyze", elem_classes=["secondary-btn"])
+                analysis_result = gr.Textbox(label="Analysis", 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...")
-                code_btn = gr.Button("Generate Code", elem_classes=["secondary-btn"])
+                gr.Markdown("### Code Generation", elem_classes=["section"])
+                desc_input = gr.Textbox(
+                    label="Description",
+                    lines=4,
+                    placeholder="Describe the website you want to generate..."
+                )
+                code_btn = gr.Button("Generate", elem_classes=["secondary-btn"])
                 code_result = gr.Code(label="Generated Code", language="html")
 
-    gr.Markdown("Made with Gradio • Nebius API compatible", elem_classes=["footer"])
+    with gr.Tab("Model Information"):
+        gr.Markdown(
+            f"""
+            ### Available Models on Nebius
+            
+            #### Recommended Non-Chinese Models
+            
+            **Meta (Facebook) Models:**
+            - `meta-llama/Meta-Llama-3.1-70B-Instruct` - Best overall, 70B parameters
+            - `meta-llama/Meta-Llama-3.1-8B-Instruct` - Fast, lightweight option
+            - `meta-llama/Meta-Llama-3.1-405B-Instruct-FP8` - Most powerful (slower)
+            
+            **Mistral AI Models (European):**
+            - `mistralai/Mixtral-8x7B-Instruct-v0.1` - MoE architecture, efficient
+            - `mistralai/Mixtral-8x22B-Instruct-v0.1` - Larger MoE model
+            - `mistralai/Mistral-7B-Instruct-v0.3` - Fast and efficient
+            - `mistralai/Mistral-Nemo-Instruct-2407` - Latest Mistral model
+            
+            #### Vision Models (Required for Image Analysis)
+            - `Qwen/Qwen2.5-VL-72B-Instruct` - Best vision model
+            - `Qwen/Qwen2.5-VL-7B-Instruct` - Faster alternative
+            
+            #### Session Information
+            - **Current User:** {CURRENT_USER}
+            - **Session Started:** {CURRENT_DATETIME}
+            - **API Endpoint:** {NEBIUS_BASE_URL}
+            """,
+            elem_classes=["section"]
+        )
+
+    gr.HTML(
+        f"""
+        <div class="footer">
+            <p>Built with Gradio | Powered by Nebius AI | User: {CURRENT_USER}</p>
+            <p>Optimized for Meta Llama 3.1 and Mistral models</p>
+        </div>
+        """
+    )
 
     # Event bindings
     generate_btn.click(
@@ -729,15 +935,8 @@ Turn website screenshots into functional HTML using Nebius-compatible models.
         outputs=[description_output, html_output],
     )
 
-    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 Editor Links", "", url_block]
-        return "\n".join(lines)
-
     codesandbox_btn.click(
-        fn=_deploy_to_codesandbox,
+        fn=create_codesandbox,
         inputs=[html_output],
         outputs=[codesandbox_links],
     )