Update app.py

app.py

@@ -2,8 +2,9 @@ import base64
 import io
 import json
 import os
+import re
 import tempfile
-from typing import Tuple, Optional
+from typing import Tuple, Optional, List, Dict, Any
 
 import gradio as gr
 import httpx
@@ -14,14 +15,28 @@ from lzstring import LZString
 # Configuration
 # =========================
 NEBIUS_BASE_URL = "https://api.studio.nebius.com/v1/"
+
+# Add more selectable models (you can also type your own in the dropdowns)
 DEFAULT_VISION_MODEL = "Qwen/Qwen2.5-VL-72B-Instruct"
-DEFAULT_CODE_MODEL = "deepseek-ai/DeepSeek-V3-0324"
+VISION_MODELS = [
+    DEFAULT_VISION_MODEL,
+    "Qwen/Qwen2.5-VL-7B-Instruct",
+    "Qwen/Qwen2-VL-72B-Instruct",
+]
 
-# More forgiving timeouts and built-in retries to reduce "read operation timed out"
+DEFAULT_CODE_MODEL = "deepseek-ai/DeepSeek-V3-0324"
+CODE_MODELS = [
+    DEFAULT_CODE_MODEL,
+    "Qwen/Qwen2.5-Coder-32B-Instruct",
+    "Meta-Llama-3.1-70B-Instruct",
+    "Mistral-7B-Instruct",
+]
+
+# 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  # extra attempts on transient failures
+HTTP_RETRIES = 2
 
-# Use the same default key you provided
+# Keep the same default key you provided
 DEFAULT_NEBIUS_API_KEY = (
     "eyJhbGciOiJIUzI1NiIsImtpZCI6IlV6SXJWd1h0dnprLVRvdzlLZWstc0M1akptWXBvX1VaVkxUZlpnMDRlOFUiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiJnb29nbGUtb2F1dGgyfDEwNTA1MTQzMDg2MDMwMzIxNDEwMiIsInNjb3BlIjoib3BlbmlkIG9mZmxpbmVfYWNjZXNzIiwiaXNzIjoiYXBpX2tleV9pc3N1ZXIiLCJhdWQiOlsiaHR0cHM6Ly9uZWJpdXMtaW5mZXJlbmNlLmV1LmF1dGgwLmNvbS9hcGkvdjIvIl0sImV4cCI6MTkwNjU5ODA0NCwidXVpZCI6ImNkOGFiMWZlLTIxN2QtNDJlMy04OWUwLWM1YTg4MjcwMGVhNyIsIm5hbWUiOiJodW5nZ2luZyIsImV4cGlyZXNfYXQiOiIyMDMwLTA2LTAyVDAyOjM0OjA0KzAwMDAifQ.MA52QuIiNruK7_lX688RXAEI2TkcCOjcf_02XrpnhI8"
 )
@@ -40,6 +55,90 @@ 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 _convert_messages_to_responses_input(messages: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    """
+    Convert OpenAI Chat-style messages to the Responses API input format.
+    Supports multimodal parts: text and image_url (data URL or remote).
+    """
+    converted = []
+    for m in messages:
+        role = m.get("role", "user")
+        content = m.get("content", "")
+
+        parts: List[Dict[str, Any]] = []
+        if isinstance(content, list):
+            for part in content:
+                ptype = part.get("type")
+                if ptype == "text":
+                    parts.append({"type": "input_text", "text": part.get("text", "")})
+                elif ptype == "image_url":
+                    image_obj = part.get("image_url", {})
+                    url = image_obj if isinstance(image_obj, str) else image_obj.get("url", "")
+                    parts.append({"type": "input_image", "image_url": url})
+        elif isinstance(content, str):
+            parts.append({"type": "input_text", "text": content})
+        else:
+            # Fallback: stringify unknown structures
+            parts.append({"type": "input_text", "text": json.dumps(content)})
+
+        converted.append({"role": role, "content": parts})
+    return converted
+
+
+def _parse_possible_response_payload(data: Dict[str, Any]) -> str:
+    """
+    Try to extract text from either chat/completions or responses-style payloads.
+    """
+    # chat/completions format
+    choices = data.get("choices")
+    if isinstance(choices, list) and choices:
+        msg = choices[0].get("message", {})
+        if isinstance(msg, dict):
+            content = msg.get("content")
+            if isinstance(content, str) and content.strip():
+                return content
+
+    # responses format - common variants
+    # 1) top-level output_text
+    if "output_text" in data and isinstance(data["output_text"], str) and data["output_text"].strip():
+        return data["output_text"]
+
+    # 2) nested under response
+    resp = data.get("response", {})
+    if isinstance(resp, dict):
+        if "output_text" in resp and isinstance(resp["output_text"], str) and resp["output_text"].strip():
+            return resp["output_text"]
+        # walk response.output[0].content[0].text
+        out = resp.get("output")
+        if isinstance(out, list) and out:
+            cont = out[0].get("content")
+            if isinstance(cont, list) and cont:
+                if isinstance(cont[0], dict):
+                    text = cont[0].get("text")
+                    if isinstance(text, str) and text.strip():
+                        return text
+
+    # 3) sometimes top-level output array
+    out_top = data.get("output")
+    if isinstance(out_top, list) and out_top:
+        cont = out_top[0].get("content")
+        if isinstance(cont, list) and cont:
+            text = cont[0].get("text")
+            if isinstance(text, str) and text.strip():
+                return text
+
+    # 4) fallback: first string found in 'content'
+    content = data.get("content")
+    if isinstance(content, list) and content:
+        maybe = content[0]
+        if isinstance(maybe, dict):
+            text = maybe.get("text")
+            if isinstance(text, str) and text.strip():
+                return text
+
+    raise RuntimeError("Unable to parse text from model response.")
+
+
 def call_chat_completions(
     model: str,
     messages: list,
@@ -48,37 +147,137 @@ def call_chat_completions(
     temperature: float = 0.7,
 ) -> 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.
+    Tries OpenAI-compatible chat/completions first.
+    If it receives 404/405 (route not found or method mismatch), it falls back to the Responses API.
+    Returns the assistant text content.
     """
     if not api_key:
         raise ValueError("Nebius API key is required.")
 
-    url = f"{NEBIUS_BASE_URL}chat/completions"
-    payload = {
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+    transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
+
+    # Attempt 1: chat/completions
+    chat_url = f"{NEBIUS_BASE_URL}chat/completions"
+    chat_payload = {
         "model": model,
         "messages": messages,
         "max_tokens": max_tokens,
         "temperature": temperature,
     }
-    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
 
-    # HTTPX transport with retries
-    transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
+    try:
+        with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
+            resp = client.post(chat_url, headers=headers, json=chat_payload)
+            resp.raise_for_status()
+            data = resp.json()
+            return _parse_possible_response_payload(data)
+    except httpx.HTTPStatusError as e:
+        status = e.response.status_code
+        # Only fall back to Responses when the route is not found or method not allowed
+        if status not in (404, 405):
+            # Provide clearer error for common 404 model issues too
+            if status == 404:
+                detail = e.response.text
+                raise RuntimeError(
+                    f"404 Not Found from chat/completions. The endpoint or model may be unavailable. Details: {detail}"
+                ) from e
+            raise
+    except Exception:
+        # Fall through to responses attempt
+        pass
+
+    # Attempt 2: responses API
+    responses_url = f"{NEBIUS_BASE_URL}responses"
+    responses_input = _convert_messages_to_responses_input(messages)
+    responses_payload = {
+        "model": model,
+        "input": responses_input,
+        # Some providers expect max_output_tokens; include both for compatibility
+        "max_tokens": max_tokens,
+        "max_output_tokens": max_tokens,
+        "temperature": temperature,
+    }
 
     with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
-        resp = client.post(url, headers=headers, json=payload)
+        resp = client.post(responses_url, headers=headers, json=responses_payload)
         resp.raise_for_status()
         data = resp.json()
+        return _parse_possible_response_payload(data)
+
+
+def _strip_fenced_code(text: str) -> str:
+    """
+    Removes ```html ... ``` fences from a content block if present.
+    """
+    s = text.strip()
+    if s.startswith("```html"):
+        s = s.split("```html", 1)[1].strip()
+    if s.endswith("```"):
+        s = s.rsplit("```", 1)[0].strip()
+    return s
 
-    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
+
+def _split_assets(html_code: str) -> Tuple[str, str, str]:
+    """
+    Split inline <style> and <script> (without src) from the HTML into separate CSS and JS strings.
+    Return tuple: (updated_html, css_text, js_text)
+    """
+    if not html_code:
+        return html_code, "", ""
+
+    html = html_code
+
+    # Collect and remove style blocks
+    css_blocks = re.findall(r"<style[^>]*>(.*?)</style>", html, flags=re.IGNORECASE | re.DOTALL)
+    css_text = "\n\n".join(block.strip() for block in css_blocks if block.strip())
+    html = re.sub(r"<style[^>]*>.*?</style>", "", html, flags=re.IGNORECASE | re.DOTALL)
+
+    # Collect and remove inline scripts (no src)
+    js_blocks = []
+
+    def _script_repl(m):
+        attrs = m.group("attrs") or ""
+        code = m.group("code") or ""
+        if "src=" in attrs.lower():
+            return m.group(0)  # keep external scripts
+        if code.strip():
+            js_blocks.append(code.strip())
+        return ""  # remove inline script
+
+    html = re.sub(
+        r"<script(?P<attrs>[^>]*)>(?P<code>.*?)</script>",
+        _script_repl,
+        html,
+        flags=re.IGNORECASE | re.DOTALL,
+    )
+    js_text = "\n\n".join(js_blocks)
+
+    # If CSS collected, ensure link tag is added
+    if css_text:
+        if re.search(r"</head>", html, flags=re.IGNORECASE):
+            html = re.sub(
+                r"</head>",
+                '  <link rel="stylesheet" href="style.css">\n</head>',
+                html,
+                flags=re.IGNORECASE,
+            )
+        else:
+            html = f"<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\"/>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n{html}"
+
+    # If JS collected, ensure script tag before </body> or at end
+    if js_text:
+        if re.search(r"</body>", html, flags=re.IGNORECASE):
+            html = re.sub(
+                r"</body>",
+                '  <script src="script.js"></script>\n</body>',
+                html,
+                flags=re.IGNORECASE,
+            )
+        else:
+            html = html.rstrip() + '\n  <script src="script.js"></script>\n'
+
+    return html, css_text, js_text
 
 
 # =========================
@@ -134,18 +333,6 @@ def analyze_image(
         return f"Error analyzing image: {str(e)}"
 
 
-def _strip_fenced_code(text: str) -> str:
-    """
-    Removes ```html ... ``` fences from a content block if present.
-    """
-    s = text.strip()
-    if s.startswith("```html"):
-        s = s.split("```html", 1)[1].strip()
-    if s.endswith("```"):
-        s = s.rsplit("```", 1)[0].strip()
-    return s
-
-
 def generate_html_code(
     description: str,
     nebius_api_key: str = "",
@@ -155,7 +342,6 @@ def generate_html_code(
 ) -> str:
     """
     Generate HTML/CSS/JavaScript code based on a website description.
-    Adds timeout-aware retry with a reduced token budget on second attempt.
     """
     if not description or description.startswith("Error"):
         return "Error: Invalid or missing description."
@@ -217,47 +403,67 @@ Return only the complete HTML code starting with <!DOCTYPE html> and ending with
             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 httpx.HTTPStatusError as e:
+        status = e.response.status_code
+        detail = e.response.text
+        if status == 404:
+            return (
+                f"Error generating HTML code: 404 Not Found. This may indicate the endpoint or selected model is not available. "
+                f"Try a different model from the dropdown or ensure your Nebius endpoint supports chat/completions or responses. Details: {detail}"
+            )
+        return f"Error generating HTML code: HTTP {status}. Details: {detail}"
     except Exception as e:
         return f"Error generating HTML code: {str(e)}"
 
 
 def create_codesandbox(html_code: str) -> str:
     """
-    Create a CodeSandbox project from HTML code.
-    Returns the sandbox URL, or a prefilled URL if API POST fails.
+    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.
     """
     if not html_code or html_code.startswith("Error"):
         return "Error: No valid HTML code provided."
 
     try:
+        updated_html, css_text, js_text = _split_assets(html_code)
+
         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 required'"},
-                        "devDependencies": {"serve": "^14.0.0"},
-                    },
-                    indent=2,
-                ),
-                "isBinary": False,
-            },
+            "index.html": {"content": updated_html, "isBinary": False},
+        }
+        if css_text:
+            files["style.css"] = {"content": css_text, "isBinary": False}
+        if js_text:
+            files["script.js"] = {"content": js_text, "isBinary": False}
+
+        # package.json is optional for static template
+        files["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 required'"},
+                    "devDependencies": {"serve": "^14.0.0"},
+                },
+                indent=2,
+            ),
+            "isBinary": False,
         }
 
         parameters = {"files": files, "template": "static"}
 
-        # Build fallback GET URL with compressed parameters
+        # Prefill GET URL with compressed parameters for editor file view
         json_str = json.dumps(parameters, separators=(",", ":"))
         lz = LZString()
         compressed = lz.compressToBase64(json_str)
         compressed = compressed.replace("+", "-").replace("/", "_").rstrip("=")
-        prefill_url = f"https://codesandbox.io/api/v1/sandboxes/define?parameters={compressed}"
+        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 ""
 
-        # Try POST API to get a sandbox_id
+        # Try POST API to get a sandbox_id and return only editor links (no preview)
         url = "https://codesandbox.io/api/v1/sandboxes/define"
         transport = httpx.HTTPTransport(retries=HTTP_RETRIES)
         with httpx.Client(timeout=HTTP_TIMEOUTS, transport=transport) as client:
@@ -266,10 +472,24 @@ def create_codesandbox(html_code: str) -> str:
                 data = resp.json()
                 sandbox_id = data.get("sandbox_id")
                 if sandbox_id:
-                    return f"https://codesandbox.io/s/{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)
+
+        # Fallback to prefill URLs if POST fails
+        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)
 
-        # Fallback to prefill URL
-        return prefill_url
     except Exception as e:
         return f"Error creating CodeSandbox: {str(e)}"
 
@@ -315,27 +535,115 @@ def export_html_to_file(html_code: str) -> Optional[str]:
 
 
 # =========================
-# Gradio UI (English-only, user-friendly)
+# Gradio UI (Brizy-inspired palette, no emojis)
 # =========================
+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%)"
+
 with gr.Blocks(
     theme=gr.themes.Soft(),
     title="AI Website Generator (Nebius)",
-    css="""
-        .section { border: 1px solid #e5e7eb; padding: 16px; border-radius: 10px; margin: 10px 0; }
-        .muted { color: #6b7280; font-size: 0.9em; }
-        .footer { text-align:center; color:#9ca3af; padding: 8px 0; }
+    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;
+        }}
     """,
 ) as app:
     gr.Markdown(
         """
-# 🚀 AI Website Generator (Nebius)
-Turn website screenshots into functional HTML using Nebius models.
-
-- 📸 Image analysis (default: Qwen2.5-VL-72B-Instruct)
-- 💻 Code generation (default: DeepSeek-V3-0324)
-- 🌐 One-click CodeSandbox deployment
-- 🔒 Your key is used at runtime only
-        """
+# 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)
+- Open in CodeSandbox editor to inspect code only
+- Your key is used at runtime only
+        """,
+        elem_classes=["title"],
     )
 
     with gr.Accordion("API & Models", open=True):
@@ -349,15 +657,17 @@ Turn website screenshots into functional HTML using Nebius models.
         with gr.Row():
             vision_model_dd = gr.Dropdown(
                 label="Vision Model",
-                choices=[DEFAULT_VISION_MODEL],
+                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.",
             )
             code_model_dd = gr.Dropdown(
                 label="Code Generation Model",
-                choices=[DEFAULT_CODE_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.",
             )
         with gr.Row():
             code_max_tokens = gr.Slider(
@@ -377,7 +687,7 @@ Turn website screenshots into functional HTML using Nebius models.
                 info="Higher is more creative; lower is more deterministic.",
             )
 
-    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"])
@@ -387,7 +697,7 @@ Turn website screenshots into functional HTML using Nebius models.
                     sources=["upload", "clipboard"],
                     height=280,
                 )
-                generate_btn = gr.Button("🎨 Generate Website", variant="primary")
+                generate_btn = gr.Button("Generate Website", elem_classes=["primary-btn"])
 
             with gr.Column(scale=2):
                 gr.Markdown("### Step 2: Review Results", elem_classes=["section"])
@@ -403,28 +713,29 @@ Turn website screenshots into functional HTML using Nebius models.
                 )
 
                 with gr.Row():
-                    codesandbox_btn = gr.Button("🚀 Deploy to CodeSandbox")
-                    download_btn = gr.Button("💾 Download index.html")
+                    # Editor-only links; no live preview link provided
+                    codesandbox_btn = gr.Button("Open in CodeSandbox Editor", elem_classes=["secondary-btn"])
+                    download_btn = gr.Button("Download index.html", elem_classes=["secondary-btn"])
 
-                codesandbox_link = gr.Markdown(value="")
+                codesandbox_links = gr.Markdown(value="")
                 download_file = gr.File(
                     label="Download (index.html)",
                     interactive=False,
                     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")
-                analyze_btn = gr.Button("Analyze Image")
+                analyze_btn = gr.Button("Analyze Image", elem_classes=["secondary-btn"])
                 analysis_result = gr.Textbox(label="Analysis Result", lines=6)
 
             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")
+                code_btn = gr.Button("Generate Code", elem_classes=["secondary-btn"])
                 code_result = gr.Code(label="Generated Code", language="html")
 
     gr.Markdown("Made with Gradio • Nebius API compatible", elem_classes=["footer"])
@@ -437,15 +748,17 @@ Turn website screenshots into functional HTML using Nebius models.
     )
 
     def _deploy_to_codesandbox(html_code: str) -> str:
-        url = create_codesandbox(html_code)
-        if url.startswith("Error"):
-            return f"**Error:** {url}"
-        return f"✅ Deployed. Open your sandbox: [{url}]({url})"
+        # Only return editor links; no live preview URLs
+        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,
         inputs=[html_output],
-        outputs=[codesandbox_link],
+        outputs=[codesandbox_links],
     )
 
     def _download_html(html_code: str):
@@ -472,9 +785,5 @@ Turn website screenshots into functional HTML using Nebius models.
         outputs=[code_result],
     )
 
-    # Optional examples (uncomment and provide your own image file)
-    # gr.Examples(examples=[["1.jpg"]], inputs=[image_input], label="Example Screenshots")
-
 if __name__ == "__main__":
-    # Set share=True if you want a public Gradio URL
     app.launch(share=False)